WebインターフェイスのMetro

1か月半前に、製品の新しいバージョンであるNetCatサイト管理システムをリリースしました。 製品の最も顕著な(最も重要ではありませんが)革新の1つは、MetroUIの哲学におけるインターフェイスのスタイル変更です。 この記事では、Metroを選択した理由、遭遇した問題、この経験から学んだことについて説明します。



iOSスタイルかMetroスタイルか?



インターフェースの最後のスタイル変更から5年以上が経過しました。 この期間のインターフェース設計の世界では、多くのことがすべて起こりました。私の意見では、このミサの最初の役割はAppleが果たしました。 iPhone / iPadインターフェースの壮大なコンセプトは、これらの製品の人気の爆発的な性質に大きな影響を与えましたが、それは大きな影響を与えませんでした。 冗談でしょうか:同じ会社が、2年の差をつけて、最初にスマートフォン市場を完全に再フォーマットし、次にタブレットコンピューターの新しいセグメントを作成しました。 Appleが行うことはすべて、単に成功する運命にあると思われた(そして今でも多くの人には思える)。



Microsoftは、Metroコンセプトを採用していたため、苦労しました。 80年代のITの機関車だったこの企業は、ゼロの終わりまでにAppleとGoogleに業界の主要な革新者の称号を与えました。 私の意見では、マイクロソフトは復everyのチャンスをすべて持っていますが、今ではソリューションとアイデアを促進するためにより多くの努力を費やさなければなりません。 また、Metroも例外ではありません。Appleに比べて、Microsoftのエバンジェリストは、企業理念を大衆にもたらすことに積極的に取り組んでいます。



ちなみに、私はGoogleについて言及したので。 この会社は、インターフェイスの簡素化を最大化するという点で、Microsoftに似た方法を採用しています。 Googleの見解がMicrosoftに影響を与えたのか、またはその逆の影響を与えたのか、あるいは企業が独自にこれにたどり着いたのかについての情報をインターネットで見つけることはできませんでしたが、両社の製品/サービスインターフェースのグラフィカルな実装の類似性は明らかです。



AppleとMicrosoftの違いは何ですか? インターネットでは、同様のトピックに関する多くの記事を見つけることができますが、同じHabréでこの問題は複数議論されています。 グラフィックスの観点からのみ、以下のように違いを簡単に説明できます。Appleは、現実世界の類似要素(丸み、ボリュームの錯覚、視覚的テクスチャ、影)のように見えるようにコントロールを実装しようとします。否定できない教義のランクに。 Appleスタイルは図像と呼ばれ、Microsoftはインフォグラフィックと呼ばれます。



公平を期すために、Microsoftの代表者自身は、Metroの教義ではなく、ミニマリズムを検討しているが、この概念の原則から生じる結果のみを検討していることに注意してください。



ユーザーエクスペリエンスArturo Toledoの専門家を引用します(彼の記事の翻訳はHabré で公開されました)。



「たとえば、本の販売用のアプリケーションを作成して、メニューでユーザーに本の表紙を公開する必要があるとします。 iPhoneのような特定のデザインスタイルは、この問題を解決するために、物理的な世界(たとえば本棚)からメタファーを作成します。 本棚は素晴らしく、タスクによく合い、本の表紙は見栄えがよく、木目テクスチャを使用してよりリアルにしています[...]デジタルの世界では、木は木ではなく、ピクセルのセットが偽物。」 この「本棚」から「本」を取り出すと、重力がないために落下することさえありません。 したがって、木製の棚は必要ありません。 代わりに、シェルを削除します-ピクセルについて話しているという事実を考えると、完全に不要です。



言い換えれば、コンピュータープログラムのインターフェイスを描画するとき、実際に何かを作成しているふりをする必要はありません。 私たちの製品は、実際のオブジェクトとの視覚的な類似性を除いて、物理的なものの属性(表面の質感、匂い、音、重量)を持ちません。 仮想環境に、それとは無関係で機能性を持たない実世界の要素を導入するのはなぜですか?



この意見については議論の余地があると思います。 現実的なインターフェースを支持する反論は明白であり、このトピックを哲学的に育てる意味はないと思います。 それにもかかわらず、私たちのケース(サイト管理システムのインターフェース)と主な対象者(サイト開発者)にとって、Metroの原則は理想的だと考えました。 インターフェースのみ:システムに事前インストールされたサイト、含む。 モバイル、非常に大きく、丸みを帯びています。



再スタイル化プロセス



正直に言うと、Metroを読み始めて製品への応用について考え始めたとき、あまり仕事はないように思われました。デザイナーを決め、既存の標準管理画面を再描画させ、アイコンを描画し、ページレイアウトを-そしてそれだけです。 現実は、いつものように、より残酷であることが判明しました。



まず、このプロジェクトのアーティストを見つけるのは簡単ではありませんでした。 私たちが知っていたデザイナーの中で、当時(今年の1月)そのようなスタイルで働いた経験のあるを見つけることができただけで、それでも彼は彼のスタイルをMetroのコンセプトに結びつけませんでした。 その結果、Nizhny Novgorod WebスタジオX-Designに同意しました。 私たちのように、彼らはMetroデザインの経験がなく、すべてのバンプを詰め込みました。



第二に、ミニマルなインターフェースは詳細についてはるかにうるさいです。 領域の端から要素までの余分なピクセルがインデントされていますか? 階層のさまざまなレベルの見出しは、サイズが十分に異なっていませんか? 異なるリスト内のアクティブなアイテムの強調表示のフレームは異なりますか? 絵はすぐに崩壊し、目を痛めます。 「ボリュームのある」インターフェースでは、このような小さな問題は「視覚的なノイズ」の背後で目立たなくなります。 その結果、1つの画面を最大10回再描画でき、すべての作業に最初に計画した時間の3倍の時間がかかりました。



第三に、Metroの哲学には、要素の外観だけでなく単純化も含まれます。 その過程で、タスクを実装するいくつかの重複した方法(たとえば、コンポーネントのリストへの切り替え)を廃止する必要がありました。 操作の確認画面の一部と開発者ツールの余分な階層を削除します。 画面にコントロールボタンを配置するためのルールを再編成します(現在、アクションを開始するボタン(追加など)は厳密に左側に配置され、最終アクション(保存、キャンセル)は右側に配置されます)。 アイコンなどの色分けを考え出す



そして最後に、4。 Metroの原則は、もともとWindows Phoneプラットフォーム用に開発されました。 Microsoft自体は、Web上でのそれらの完全な移植性を明示的に要求していません。 ブラウザ間のブラウジングをデバッグし、タブレットコンピューター用にインターフェイスを調整する段階で、Web用のMetroを実装する際に問題が発生しました。 場合によっては、すべてのブラウザーとデバイスですべてのインターフェイス要素を単一の外観(ガイドライン上)に完全に縮小することは不当であることが判明し、ガイドラインを離れなければなりませんでした。



私たちがしたことは私たちのウェブサイトで見ることができます( デモサイトスクリーンショットデモバージョン )。 インターフェイスがよりシンプルで便利になったとはっきりと信じていますが、正直なところ、Metroの原則に完全に準拠することはできませんでした。 場合によっては、客観的な理由(HTMLの制限、古い管理原則に慣れているユーザーを突然のパラダイムシフトにしたがらない)により、一部のコンプライアンスの問題が既にテスト段階で表面化しており、インターフェイスの作業の「第2シリーズ」に直面しています。 ところで、この記事の執筆中に、新しいインターフェイス Lebedev Studio Business Lunchに登場しました。 レビュアーも同様の結論に達しました。



まとめ



それでは、MetroスタイルのWebアプリケーションインターフェイスを作成する価値はありますか? 私はそれが価値があると思う:



私は、インターフェース自体のミニマリズムへの欲求自体は決して新しいものではなく、当然のこととさえ考えています。 したがって、Microsoftがある種のテラ・コグニタを発見したとは言えません。 しかし、彼女の無条件のメリットは、単純化の原理に基づいて、概念、議論、推論、付随するマルチメディア資料、関連性という哲学全体を構築したことです。 インターフェイスの設計に興味がある場合は、現在の仕事でMetroを使用することに懐疑的であっても、時間をかけてこの哲学を学ぶ必要があります。



UPD:なぜなら 彼らは画像の欠如に不満を述べているコメントで、私サイトの対応するセクションからいくつかのスクリーンショットを投稿ます:































All Articles