レイアウト
.jpg "\"san diego\" の検索結果")
コンテンツおよびページ間のナビゲーションの両方について、アプリのレイアウトはアプリの全体的なデザインおよび操作感にとって非常に重要です。レイアウトによって階層を作り、コンテンツを整理し、ブランドを反映させますアプリのユーザー エクスペリエンスは、ページとコンテンツの構造に依存します。
Windows におけるレイアウト
Windows のレイアウトは真にデジタルです。デジタル メディアを取り入れ、多くの場合にデジタル世界で不必要であるか誤解を招きやすい実際のメタファーは避けます。制約のない自由なデジタル レイアウトは、ユーザーにとって強力で美しいアプリとエクスペリエンスを実現します。
Windows のレイアウトは、明確ですっきりとした印象を持ち、キャンバス上の視覚的な混乱を抑制することを試みています。アプリのエッジのアプリ バーにコントロールを移動することもできます。これによって、アプリの重要な機能をキャンバスの目立つ場所に配置して、アプリの操作性を向上させることができます。
アプリのコンテンツに応じて、大きな対話領域を含む明るく軽快な構成や、多彩なコンテンツとコマンドを確認できる高密度なエクスペリエンスを作成できます。たとえば、リーディング リスト アプリは、オープンで最小限のレイアウトを持ちます。アプリで何を表示し、キャンバスから何を取り除くか、そしてレイアウトの選択がアプリのエクスペリエンスと使用にどのように影響するかについて考慮してください。
.jpg "リーディング リスト アプリ")
Xbox Music アプリは、広いコンテンツ領域を同時に表示するために、非伝統的な縦向きのグリッドと縦向きのパンを使います。一番下の永続的なアプリ バーでは、ユーザーがアプリの他の領域を確認しながら再生リスト内を迅速に移動できるように、よく使われるコントロールが常に提示されます。
.jpg "曲を再生する Xbox Music アプリ")
レイアウトの技術革新
ユーザーのシナリオに基づいて変化する音楽アプリである Songza は、最小限の横長のレイアウトを使います。このアプリを使う大多数のユーザーは、ナビゲーションではなく、音楽を聴くことが主であるために、シンプルであることが実際にはより効果的です。
.jpg "Songza アプリ、金曜の午後の音楽")
多くのアプリでは、ナビゲーションの階層システムが使われます。ハブ (ランディング ページ) は、ユーザーにとってのアプリの入り口であり、さまざまなレベルのコンテンツを開くための起点となります。パンできるビューに豊富なコンテンツが表示され、新しい情報や興味深い項目がひとめでわかり、そこからさらにアプリのコンテンツを探すことができます。ハブ コントロールは、ブランドに合わせてアプリをカスタマイズする柔軟性とフレームワークを提供します。
階層型ナビゲーションは、アプリ レイアウトの単なる 1 つのモデルであり、アプリではブランドに最適なレイアウトとナビゲーション モデルを利用し、アプリ ユーザーに最高のエクスペリエンスを提供します。構成とレイアウトには創造性を発揮でき、作成者がユニークな何かを創り出す大きな機会が提供されます。
アプリの向きとして縦向きと横向きの両方を考慮します。コンテンツを配置するグリッドが縦向きまたは横向きのいずれの形式で最も効果的であるかを特定します。Windows の最新のデザイン言語を利用するアプリが増えるに伴って、アプリのレイアウトとデザインに対するアプローチが各アプリの個別のニーズとブランドに合わせてさらに進化します。レイアウトは、イノベーションを創出し、アプリの卓越性を示す最適な部分です。Windows のグリッド システムについて詳しくは、「アプリ ページのレイアウト」をご覧ください。
例
Facebook では、キャンバス上で多数のコンテンツとコマンドを整理するために強力なグリッド ベースのレイアウトを使い、Facebook が提供するすべてのサービスをユーザーが直ちに利用できるようにしています。
.jpg "Facebook app")
Foursquare
Foursquare は、場所に関するアプリであり、新しいエクスペリエンスを提供します。アプリのレイアウトは、注目される各場所を示す目立つイメージによりこの用途を反映します。イメージの下には評価と確認が示され、ユーザーがひとめで場所を評価し、タップによりさらに詳細を確認できる統一された構成が得られます。
.jpg "Foursquare アプリ、最後のチェックインと保留中の友人登録の依頼")
Foursquare のレイアウトは動的であり、アプリの各領域でコンテンツに最も適合するように自身で再構築されます。アプリの最も左側にパンすると、近隣の人気のあるスポットの地図が生成されます。場所をタップすると、すべてのチェックインとユーザーからのコメントを示す詳細なページが表示されます。こうした表示のいずれかをタップすると、推奨のスニペットが表示されます。
.jpg "Foursquare アプリの地図の表示")
NOOK
Barnes and Noble による NOOK アプリは、基本概念として階層型のハブ ベースのモデルを使いますが、差別化された NOOK ブランドのエクスペリエンスをもたらすために緊密にカスタマイズしています。単なるカバー イメージを表示するのではなく、各書籍の下のかすかな影により現実的な書籍のニュアンスを示しています。この場合、現実のアナログ性を示すことで、ユーザーのエクスペリエンスが拡張します。
.jpg "NOOK アプリのライブラリ ページ")