ナビゲーションパターン (Windows ストアアプリ)

[アーティクル]
04/07/2015

ユーザーが簡単かつ直感的に移動できるように、Windows ストアアプリのコンテンツを整理します。適切なナビゲーションパターンを使うと、画面に常に表示されるコントロールを制限できます。これにより、ユーザーは、現在のコンテンツに集中できます。

Windows ストアアプリのナビゲーションは、階層システムとフラットシステムという 2 つのパターンに基づいています。アプリは、いずれかのパターンを使うか、両方のシステムを組み合わせて使うことができます。

階層パターン

このパターンは、Windows ストアアプリを軽快かつ柔軟にします。コンテンツのコレクションが大きいアプリや、ユーザーがコンテンツのさまざまなセクションを探索するアプリに最適です。多くの Windows ストアアプリでは、ナビゲーションの階層システムが使われます。

この機能について詳しくは、「アプリの機能の概要」シリーズをご覧ください。: 階層型ナビゲーションの概要 (HTML と XAML)

ハブページは、ユーザーのアプリへの入り口です。コンテンツが横方向にスクロールできるビューに表示され、新しい情報や入手可能な項目がひとめでわかります。

ハブはさまざまなカテゴリのコンテンツで構成され、それぞれがアプリのセクションページに対応付けられています。

セクションページは、アプリの第 2 レベルです。シナリオとセクションに含まれるコンテンツを最適な形式で表示できます。

セクションページは個別の項目で構成され、それぞれの項目に詳細ページがあります。セクションページでは、グループ化とパノラマスタイルのレイアウトも使うことができます。

詳細ページは、アプリの第 3 レベルです。個々の項目の詳細が表示され、表示形式はコンテンツのタイプによって大きく異なります。

詳細ページは、項目の詳細または機能で構成されます。詳細ページには、多様な情報や、画像や動画などの単一のオブジェクトが含まれます。

フラットパターン

多くの Windows ストアアプリは、フラットなナビゲーションパターンを使います。ゲーム、ブラウザー、ドキュメント作成アプリなどのアプリで、このパターンを使って、すべて同じ階層レベルにあるページ、タブ、またはモード間をユーザーが移動できます。階層パターンとは異なり、固定された [戻る] ボタンやナビゲーションスタックがないため、ページ間の移動は一般にコンテンツ内のダイレクトリンクを使うか (下の最初の例)、ナビゲーションバーを使います (下の 2 つ目の例)。

この機能について詳しくは、「アプリの機能の概要」シリーズをご覧ください。: フラットナビゲーションの概要 (HTML と XAML)

フラットナビゲーションの例

このパターンは、少数のページまたはタブ間での高速切り替えがある中心的なシナリオに最適です。たとえば、Internet Explorer、電子ブック、ゲームのような Web ブラウザーアプリです。

キャンバス上のナビゲーション

ナビゲーション要素としてのヘッダー、戻るボタン、セクションヘッダー、タイル

ヘッダーと戻るボタン

ヘッダーは現在のページのラベルで、移動先を見つけるときに便利です。戻るボタンを使って、元の場所にすばやく戻ることができます。
セクションまたはカテゴリラベル

これらのラベルを使うと、コンテンツのさまざまなセクションまたはカテゴリに移動できます。
その他のターゲット

ナビゲーション要素として、タイル、矢印、ボタン、検索結果、その他のカスタマイズされたターゲットを使うことができます。いくつかのゲームでは、興味深い図形によるナビゲーション要素のサンプルを見ることができます。

Bing ニュースアプリは、ヘッダー、セクションラベル、詳細へのリンクを表示します。

上部のアプリバー

画面の上端または下端をスワイプすると、アプリバーが表示されます。上部のアプリバーは、ナビゲーションバーとも呼ばれます。上部のアプリバーにナビゲーション要素を配置して、より多くの画面領域をアプリのコンテンツが使えるようにすることができます。また、アプリを使っているときに頻繁にナビゲーション要素が必要になり、ナビゲーション要素がキャンバスにあってもアプリのエクスペリエンスに悪影響がない場合は、ナビゲーション要素をキャンバスに配置できます。ナビゲーション要素が上部バーまたはキャンバスのいずれに属するかを決定します。

ナビゲーションバーへのアクセス