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

Applies to Windows only

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

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

階層パターン

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

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

Windows ストア アプリのハブ ページ、セクション ページ、詳細ページ

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

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

 

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

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

 

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

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

 

フラット パターン

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

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

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

 

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

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

 

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

 

  1. ヘッダーと戻るボタン

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

  2. セクションまたはカテゴリ ラベル

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

  3. その他のターゲット

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

 

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

 

上部のアプリ バー

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

 

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

 

一般に、セクションまたはカテゴリ ラベルは、Hulu Plus のように、ナビゲーション バーにあります。

 

Hulu Plus のアプリ ナビゲーション バー

 

多くのアプリは、ショートカットを提示するために上部のアプリ バーを使っていました。たとえば、ESPN アプリでは、ユーザーは上部のアプリ バーのセクション ラベルの上にあるスコアボードをクリックして、ゲームキャストのページに移動できます。

 

ESPN アプリのナビゲーション バー

 

上部のアプリ バーは、ユーザーにターゲット ページのコンテンツのプレビューを提示することもできます。次のショッピング アプリのサンプルでは、製品の詳細ページに移動する前に、アプリ バーで製品イメージを確認できます。

 

Vevo アプリのナビゲーション バー

 

アプリ バーを創造的に利用して、デザインを向上させることをお勧めします。Fresh Paint では、上部のアプリ バーは専用のナビゲーション機能を持つだけでなく、ペイント ツールボックスとしての機能も果たしています。

 

Fresh Paint のナビゲーション バー

 

セマンティック ズーム

セマンティック ズームを使うと、 特にビューが長いリストの場合に、 軽快かつ柔軟にビューをスキャンして 移動することができます。

 

拡大表示され、その後縮小表示されたサンプル アプリ

 

たとえば、Great British Chefs では、ハブ ページで 5 つのスポットライト セクションの後、視覚的で多彩な水平方向のパン セクションを置いています。このアプリでは、5 つの各セクションに簡単にジャンプするためにセマンティック ズームを使っています。

 

Great British Chefs セマンティック ズーム

詳しくは、「セマンティック ズームのガイドライン」をご覧ください。

関連トピック

デザイナー向け
コマンド パターン
レイアウト
戻るボタン
Windows ストア アプリのハブ コントロールのガイドライン
Windows Phone ストア アプリのハブ コントロールのガイドライン
アプリ バーのガイドライン
アプリ バーをアクセシビリティ対応にする
開発者向け (HTML)
WinJS.UI.Hub object
WinJS.UI.AppBar object
WinJS.UI.NavBar object
WinJS.UI.BackButton object
HTML ハブ コントロールのサンプルに関するページ
HTML AppBar コントロールのサンプルに関するページ
HTML NavBar コントロールのサンプルに関するページ
ナビゲーションとナビゲーション履歴のサンプルに関するページ
初めてのアプリ - パート 3: PageControl オブジェクトとナビゲーション
アプリ バーの追加
ナビゲーション バーの追加
ページ間のナビゲーション (HTML)
開発者向け (XAML)
Windows.UI.Xaml.Controls Hub class
Windows.UI.Xaml.Controls AppBar class
Windows.UI.Xaml.Controls CommandBar class
XAML ハブ コントロールのサンプルに関するページ
XAML AppBar コントロールのサンプルに関するページ
XAML ナビゲーションのサンプルに関するページ
初めてのアプリ - パート 3: ナビゲーション、レイアウト、ビュー
初めてのアプリ - C++ Windows ストア アプリへのナビゲーションとビューの追加 (チュートリアル 3/4)
アプリ バーの追加 (XAML)
ページ間のナビゲーション (XAML)
開発者向け (DirectX と C++ を使った Windows ランタイム アプリ)
アプリ バーまたは設定の作成

 

 

表示:
© 2014 Microsoft