24週間のWindows Phone向けMetro Design | ＃1 Metro Design PrinciplesとMetro Design Language

メトロデザインの原則

通常、マイクロソフトが独自のプラットフォームで使用するユーザーインターフェイスデザインスタイルの名前として「Metro」という言葉を使用し、Windows Phone用のアプリケーションを作成するときに開発者とデザイナーが使用することを提案します（このシリーズの記事ではWindows Phoneに焦点を当てています）。 しかし、「メトロ」という用語の本質をもう少し詳しく見て、それが本当に何を意味するのかを見てみましょう。 まず、Metroは、Metro設計の原則とMetro設計の言語という2つのことで定義されます。



Metroの設計原則は、Windows Phoneでユーザーエクスペリエンスを作成するプロセスを導く柱（通常は抽象的な概念）です。



Metro-designの言語は 、アプリケーション、視覚的デザイン、動きの使用、アプリケーションフローの形成と相互作用するための特定の要素とルールのセットです（ trans。アプリケーションフロー〜特定の問題を解決するためのアプリケーション状態とそれらの間の可能な遷移 ）。



原理と言語の関係の類似は、「愛」（...原理）のような抽象的な概念であり、1つの♥記号、または6つの文字「l-b-b-o-b-b」の組み合わせで表現できます。 「愛」の抽象的な概念を書く。 「愛」の概念を表現する他の特定の方法を無限に見つけることができると確信しています。言葉の音、写真、その他の隠metaなどです。



概念の具体的な表現は言語と呼ばれます。



「 ガラス 」の原則があり、鉛筆（編集）、アスタリスク（お気に入り）、十字（閉じる）、ボタンのようなコントロールの3つのアイコンで表示する必要がある場合、たとえば次のように表現できます。視覚的言語。 このタスクをあなたに与えた場合、他のアイコンやコントロールを作成できると確信しています。







Metroデザイン内で同じアイコンとボタンを使用し、「 冷酷な単純化 」（簡単でクリーン）などの原則を使用すると、次のようになります。







したがって、異なる原則は、異なる表現方法または言語を生み出します。



少し前に、私はこのビデオをここで見つけました 、私はそれがデザイン原則（アーキテクチャ）が何であるかをよく説明すると思います。 私たちの場合、アーキテクチャはデザインの原則と一致しており、ビデオに示されているさまざまなカップはデザイン言語を表しています 。



上記の例から、およびビデオを視聴した後、同じ原理で異なる言語を定義または作成できることを理解できます。 たとえば、「ガラス」の原則を提供する場合、アイコンとボタンはさまざまな方法で表現されます。すべてが「ガラス」の原則に従っていますが、それでもさまざまな方法で表現されます。 これはすべて、原則を明示する単一の方法がないためです-それらの抽象的な性質は、それらが異なる人々によって異なるように表現または解釈されることを意味します（これについては、メトロデザイン言語のセクションで詳しく説明します）。 原則の解釈をより多く（またはより少なく）成功させることは、設計の実装の問題です。



Windows Phoneの設計原則は次のとおりです。



軽量、シンプル、オープン、高速（冷酷な単純化）/激烈な削減/

キャンディラッパーではなくコンテンツ

タイポグラフィ

ムーブメント

真にデジタル



Jeff Fong / -Studio（Microsoftの一部門）のプリンシパルUX Leadは、3人のデザイナー（Jay Park / Jae Park /およびBill Flora / Bill Flora /）の1人です。 -Media Center、Zuneなどの製品の設計。 Metro設計の原則について詳しく知りたい場合は、 この素晴らしいJeffセッションをご覧ください。 すべての原則を詳細にカバーしています。 さらに、以下では、使用しているさまざまな設計原則に関するいくつかのアイデアと私の観察を見つけることができます-この実践的な経験を皆さんと共有して、日常の実践で使用できることを願っています。

容赦ない単純化

一般に、これは視覚効果と物事を最小限に見えるようにする方法にのみ適用されると考えられています。 しかし、それだけではありません。実際には、アプリケーションを設計する際の最初のことは、この原則をアプリケーションフローに適用し、それを視覚効果に適用することです。 原則として、ユーザーインターフェイスを快適でクリーンにするために努力していますが、（同じ努力で）アプリケーションストリームや、ユーザーがアプリケーションでタスクを完了するために通過する必要があるプロセスをクリーンアップしません。 ユーザーがまったく必要のない画面をナビゲートするように招待されている場合や、アプリケーションで迷子になるほどナビゲーションロジックが複雑な場合は、Metro UIをなめただけでは不十分です。



「冷酷な簡素化は、アプリケーション/インタラクションのフローから始まります。それ以降はユーザーインターフェイスの設計にまで及びます。」





「冷酷な単純化とは、ユーザーインターフェイスをきれいにする方法だけでなく、何よりもアプリケーションのフローを単純化することでもあります。」

キャンディラッパーではなくコンテンツ

（オリジナルに翻訳すると、この原則は「Chromeではなくコンテンツ」のように聞こえます。Chromeはシェル、インターフェースです。このコンテキストでは、装飾要素、主要なセマンティックロードを持たない装飾も含まれます。）

この「冷酷な単純化」の遺産は、ユーザーインターフェースとビジュアルデザイン、つまり外観に焦点を当てています。 ここでの重要なポイントは、すべての情報（コンテンツ）に対する優位性の認識です（消費の観点と作成の観点の両方）。 通常、コンテンツ消費のシナリオでMetroデザインのマニフェストを示しますが、「キャンディラッパーではなくコンテンツ」の原則は、コンテンツを作成するためのスクリプトにも適用されます。 この原則は、ボタン、スライダー、背景、またはそれらの構成が、ユーザーに提示する情報よりも重要ではないことを思い出させてくれます。 コンテンツはユーザーインターフェイスです。 他のデザインスタイルがあり、デザイナーが境界線や影、さまざまな装飾、複雑な背景を仮想シーンのスターにしたい場合があります-Metroでは、コンテンツ（消費シナリオと作成シナリオの両方）が重要だと考えています図。



「情報/コンテンツは最前線にあり、ユーザーインターフェイス要素やインターフェイス自体ではありません。」

タイポグラフィ

タイポグラフィ、タイポグラフィ、タイポグラフィ... Metroに関しては、すべてがタイポグラフィに満ちているようです。 Metroはタイポグラフィだけではありません。 タイポグラフィは、写真、画像、アイコン、動き、または音ほど重要ではありません。 最初の2つの原則を覚えておいてください。情報は最前線にあります。 タイポグラフィを使用して情報を表示することが理にかなっている場合-それを使用し、そうでない場合は気にしないでください。



タイポグラフィは、デザインスキルと組み合わせると素晴らしいものになります。 たとえば、Metroでは、さまざまなサイズと彩度のフォントを使用して、 構造化された情報を伝えています （以下のすばらしい例）。 これがまさにタイポグラフィを他の手段から際立たせている理由です。タイポグラフィのためのタイポグラフィではなく、構造化された情報を送信するための非常に効果的で柔軟なツールとしてのタイポグラフィです。 彼女は、この領域でアイコン、写真、およびその他の手段（ 構造化情報）で遊んでいます。 構造化された情報は、順序を示す階層を持つ情報であり、これはユーザーが情報の消費を優先するのに役立ちます。 そのため、Metroでは箇条書きリストを使用しません。テキストの準備時に正しいサイズと彩度を使用する場合、箇条書きリストは必要ありません。



「Metroはタイポグラフィについて100％ではありません。 メトロのタイポグラフィは、情報を提示するもう1つの方法です。 ただし、タイポグラフィは、*構造化された情報*をユーザーに伝えるための独自の視覚デザイン機能を提供します。 „





構造化された情報を伝えるためのタイポグラフィの完璧な使用。

ムーブメント

Metroが印刷スタイルにどのように影響を受けているかについてはすでに説明しました。 Mike Kruzeniski / StudioのプリンシパルUXリードによるこのテーマについての珍しい投稿があります：「 印刷デザインが将来の相互作用（ユーザーと）にどのように反映されるか 」。 世界が印刷からデジタルに移行したとき、多くのことが変わりました。 私たちの環境はもはや静的な紙ではありません。 これらは動的に変化するピクセルを備えた画面で、モーションを送信できます。 問題は、情報を重要な要素にするために移動をどのように使用するかです。 まず、他の場合と同様に、情報を強調するために特定の目的で動きが使用されることを認めなければなりません。 目的のない動的効果は、ノイズを作成し、情報の消費からユーザーをそらします。 Windows Phoneでは、移動を使用してアプリケーションのフローをサポートし、インタラクションエクスペリエンスに深みを加えます。 たとえば、あるアプリケーションから別のアプリケーションに切り替えるときは、動的なターンスタイル効果を使用します。これは、ユーザーを「別の場所」に移動しているという考えを伝えるのに役立つ非常に積極的な効果です。 同じコンテキストで新しい情報を単純に表示したい場合、連続モーション（連続体）のようなものを使用できます。 これは、ユーザーに現在のコンテキストで新しい情報が表示されるという考えを伝える、よりソフトで攻撃的ではない劇的な動きです。



Jeff Arnold によるこのセッションをご覧ください /-シニア スタジオのモーションデザインリード。 彼はメトロの動きをより深く説明しています。



「運動の使命は、情報が最前線にあることを保証し、支援することです。 移動を使用して、アプリケーションの流れを強調（または滑らかに）します。

真にデジタル

ジェフ・フォン/この原則を最良の方法で説明しています。「RGBAピクセルで構成される画面および特定の寸法の画面用に設計したものに関して、誠実さについてです。」 たとえば、ユーザーに本の表紙をメニューで公開する必要があるように、本を販売するためのアプリケーションを作成しているとします。 iPhoneのような特定のデザインスタイルは、この問題を解決するために、物理的な世界（たとえば本棚）からメタファーを作成します。 本棚は素晴らしく、タスクによく合い、本の表紙はその上で見栄えがよく、木目テクスチャを使用してより「リアル」にしています。 これは図像的なデザインスタイルです。 彼は、物理世界からデジタル世界へのメタファーを使用しています。 メトロでは、インフォグラフィックを目指しています。 「真にデジタル」の原則は、「本棚のイメージ」を「木製の本棚」に置く必要性の問題を提起します。 結局のところ、デジタルの世界では、ツリーはツリーではありませんが、ピクセルのセットは「偽物」です。 この「本棚」から「本」を取り出すと、重力がないために落下することさえありません。 したがって、木製の棚は必要ありません。 代わりに、シェルを削除します。ピクセルについて話しているという事実を考えると、まったく不要です。



はっきりさせてみましょう。1つのスタイルが良いとか悪いとか言っているのではありません。 違いが何であるかを示します。 これは、他の設計原則に基づいた異なる設計スタイルです。 それには何の問題もありません。 物理世界のメタファーをデジタルに翻訳することは、過去10年間のホットなトレンドでした-最後に、ユーザーが2000-2010年にデジタル世界に大規模に参入し、PCの世界（WindowsとMac！）、タブレット、スマートフォンに急速に移行したことを理解しています-安心感ネイティブの「木製の棚」は快適で馴染みがありました。 これは完全に理解できます（これはほとんどの場合に当てはまります）。 Windows XP、さらにはWindows 7、または古き良きWindows Mobile 5または6.5を見ると、Microsoftもこの図像スタイルを使用して、物理世界からのメタファーを再現しました。



ただし、Metroでは、ユーザーは携帯電話で「物理的な世界のオブジェクトの投影」を行うよりも、情報を受信できることに関心があると考えています。



「ピクセルで構成される画面のデザインは、情報を送信します。 重力の法則は存在しません。 申し訳ありませんが、ニュートン... :) "。





図像スタイルのユーザーインターフェイスの例。 物理的な世界のオブジェクトをデジタル画面で再作成します。

Windows Phone用のメトロデザイン言語

開発者がWindows Phone用のアプリケーションを作成できるようにすることで、Microsoftは、Metro-designの原則に関する発表/ストーリーに限定することができますが、もちろん、開発者は独自のデザイン言語を作成し、それに多くの時間を費やす必要があります。 電話などの最新のデバイス用の設計言語を作成することは大したことであり、開発、反復、テスト、およびユーザーテストに何時間もかかります。 Windows Phone Design Studioは、誰でも使用できる非常にシームレスな言語を作成しました。



Metro設計の原則に基づいて、MicrosoftはWindows Phone用のMetro設計言語を提供しています。 これを使用すると、美しく魅力的で一貫性のあるWindows Phoneソリューションを正常に作成できます。 Windows Phoneの設計言語は、次のカテゴリによって定義されます。



ナビゲーション レイアウト。 構成。 タイポグラフィ。

ムーブメント

図像

画像と写真

テーマとパーソナライズ

ジェスチャーと目標

ユーザーインターフェイスコントロール

ハードウェア機能

サービス

App Storeとブランディング



抽象的である原則と比較して、言語は具体的です。 そのため、MetroにはHub＆Spokeと呼ばれる特定のナビゲーションシステムがあります（詳細については、 こちらをご覧ください ）。 タップ、ダブルタップ、タップアンドホールド、シフト、スクイーズ、ストレッチなどの特定のジェスチャセットがあります。 構造化された情報を伝えるために、彩度とサイズのさまざまなオプションでSegoeフォントを使用する特定の活版印刷スタイルがあります。 ユーザーインターフェイスのボタン、ラジオボタン、チェックボックス、スライダー、その他のメトリックなど、特定のユーザーインターフェイスコントロールのセットがあります。 また、ピボット、パノラマ、ページ（ページ）など、アプリケーションと対話するための特定のメタファーの実装があります。



これらの特定の要素のセットはすべて、Windows PhoneのMetro設計言語を構成するものです。 これは、リッチで全体的で、柔軟で、拡張可能な設計言語です。





しかし、この標準の（すぐに使用可能な）設計言語は、Metro設計の原則を示す唯一の方法ですか？ いや



たとえば、Windows PhoneアプリケーションでHelveticaまたはSwissフォントを使用して、Metroに留まることはできますか？ もちろん！ これらおよびその他のグロテスク（サンセリフ）フォントは、Segoeの代わりに使用できます。



標準ソリューションの範囲外でMetroを使用する方法については、今後の記事で詳しく説明しますが、最初にスイススタイルのグラフィックデザインのレッスンでこの記事を見て、同じデザイン原則に従う印刷デザインの例をいくつか理解してください。およびMetro（動きとデジタルの誠実さを使用する以外）。 これらは、Windows Phone用のMetroデザイン言語を使用した標準ソリューションとはまったく異なって見えますが、同じ原則に基づいています（明確にするために、印刷例を取り上げています）。 これにより、同じ原則をどのように適用できるかについてのアイデアが得られ、提案されたソリューションの範囲を超えてすぐに使用できます。

3つのソース

Windows PhoneのMetro設計言語は、3つの主要なソースで定義されています。



1. Windows Phone UXガイドライン



2. Windows Phone SDK-コントロールのライブラリ（およびWindows Phone用のSilverlight Toolkit）



3. Windows Phoneに組み込まれているアプリケーションとサービス （電子メール、テキストメッセージ、セクション「連絡先」、セクション「音楽+ビデオ」、電話アプリケーション）



これら3つのソース（理論上）は、同じアプローチを実装および提案する必要があります。 私たちはそれらの違いのいくつかを認識しており、それらに取り組んでいます。



Windows Phoneのユーザーインターフェイスガイドは、Windows Phoneのデザインの「聖書」です。 これは参照資料であり、信頼性の高い情報源として使用できるように、関連性を保ちながら作業を続けています。



Windows Phone SDKは、Metro設計言語の定義に貢献し、開発者とデザイナーに、Visual StudioとExpression Blendで使用するための多くの既製のユーザーインターフェイスコントロールを提供します。



最後に、あなたが本当に価値があると思う別のこと。 Windows PhoneのMetro設計言語を表現する3番目の方法は、Windows Phone自体です！ -全員が使用する組み込みのアプリケーションとサービス：たとえば、電子メール、テキストメッセージ、[連絡先]セクション、ローカル検索。 それらをデザインパターンと呼びます。 多くの開発者やデザイナーがこれについて考えているとは思いません。これらのデザインテンプレートから学び、それを使用して独自のアプリケーションを作成できます。 理想的には、これらのテンプレートは、Windows Phoneのユーザーインターフェイスガイドに文書化する必要があります（これは計画中です:)）。 私自身もこれを何度もやりました。電話を起動し、[連絡先]セクションまたは電子メールアプリケーションに移動して、リストの検索や並べ替えの実装、または他のタスクの解決を見ました。その後、ツール（Expression Design、Expression Blend、Photoshop 、Illustrator）、これらのデザインパターンを使用します。



次の記事| ＃2 Windows Phoneのアプリケーション設計プロセス



http://ux.artu.tv/?p=179にあるArturo Toledoによる記事の翻訳

翻訳： ペトリシュコ

用語の編集と説明： kichik



PSロシア語のメトロに関するその他の資料は、MSDNのメトロデザインハブに集められています。