MSDN ライブラリ
情報
要求されたトピックは次のとおりです。しかし、このトピックはこのライブラリには含まれていません。

Windows Phone のアプリ タブ (Pivot コントロール)

2013/12/05

対象: Windows Phone 8 | Windows Phone OS 7.1

App Tab スタイルは、ユーザーが頻繁に移動する UI の複数ページに対して使用されます。これは、1 つのテーマ (映画、野球など) だけを扱っているアプリで特に有効なスタイルです。各ページでは、アプリ全体を通じて提示される全体的なデータに関係する事項がユーザーに示されます。App Tab スタイルは、アプリ全体を構成するスタイルとして使用することも、アプリの 1 つのサブエリアで使用することもできます。たとえば、Panorama コントロールをアプリの主要な第 1 レベルにし (前のトピックで説明したように)、そこから、App Tab スタイルを使用したアプリのサブセクションに (Pivot コントロールを使って) ユーザーを移動させます。

コレクションしている映画の一覧を整理するアプリを考えてみましょう。この場合、App Tab スタイルを使用することにより、フィルターを適用した数種類のビューで映画を表示することができます。たとえば、1 つのフィルター ビューでは、お気に入りとマークした映画を表示します。別のフィルター ビューでは、アクション映画を表示します。さらにもう 1 つのフィルター ビューでは、時間のあるときに観るための順番を付けた映画を表示するなどのことができます。もちろん、フィルターを適用せずにすべての映画の一覧を表示するページも用意することになるでしょう。

このアプリの構造を次の図に示します。アプリを起動すると、フィルターが適用されたページのいずれかが表示されます。ここから水平にスクロールすると、UI の中でタブのように機能する各ページに移動できます。

UX_AppNavModels_14

Outlook 受信トレイ向けの Application Hub タブ

基本的に、各タブはユーザーに提示するデータをフィルター処理して表示する際のそれぞれ異なる方法に対応しています。これらのフィルター ビュー ページが表示されているときにハードウェアの [戻る] ボタンを押すと、アプリは終了します。

App Tab スタイルが適しているのは、中心になるデータがあり、それをさまざまなフィルター ビューで提示するアプリです。

このトピックは、次のセクションで構成されています。

Pivot コントロールを使用して、App Tab の UI スタイルを実装することができます。このコントロールでは、ユーザーは左右の各ページ (ピボット ページ) に移動できます。

Microsoft が提供している Outlook クライアントのアプリでは、App Tab スタイルを使用しています。これは、Outlook が 1 種類のデータを表示するものだからです。各ピボット ページでは、メールの一覧が、それぞれ異なるフィルターが適用された状態で表示されます。Outlook アプリのメールの受信トレイには、3 つのピボット ページ、[すべて]、[未読]、[緊急] があります。これにより、緊急のメールだけを確認することも可能になります。そのため、[すべて] ピボット ページでメールをスクロールして、緊急とマークされているメールを探す必要がありません。

UX_AppNavModels_15

Outlook クライアント アプリ

アプリ タブを使用するもう 1 つの既存のアプリは、Netflix です。各ピボット ページには、映画の一覧が示されます。各ピボット ページの一覧は、適用されているフィルターによって異なります。各一覧を比較すると、それぞれがどのような特徴を持ち、どのように役立つか確認することができます。[すぐに見る] ピボット ページには、いつでも好きなときにストリーミング デバイスで観ることができるようにキューに入れた映画が表示されます。[ホーム] ピボット ページには、ユーザーが興味を持つかもしれないと Netflix によって判断された映画が表示されます。[検索] ピボット ページには、検索キーワードに一致する映画が表示されます。

ピボット ページは、焦点を絞ることができ、効率的です。その主な目的は、フィルターの適用、並べ替え、関連する項目の表示など、タスク ベースのアクションです。パノラマは、拡張性があり、集約的であり、探求的です。最近使用した、重要な内容を優先して表示するのに適しています。状況によって、あるコントロールが他のコントロールよりも適していることがあります。

UX_AppNavModels_16

Netflix アプリ

各ピボット ページは実際にはタブであり、タブは一番上に横に並んで一覧表示されます。Netflix アプリの図からわかるように、このアプリは現在、[ホーム] ピボット ページが表示され、右には [ジャンル] ピボット ページが表示されています。[ジャンル] ピボット ページに移動するには、ページ名をタップするか、ページにパンするだけです。

デスクトップに実装されたタブ ベースのアプリとの違いは、Windows Phone のタブでは通常、一度にすべてのタブ (ピボット ページのタイトル) が表示されることはなく、2 つか 3 つだけ表示されるということです。

アプリのピボット ページの数は、できるだけ少なくしてください。ピボット ページからピボット ページにジャンプすると、ユーザーは現在位置を見失う可能性があります。ピボット ページの数は、できるだけ 6 以下になるようにしてください。これよりも多くのタブが必要な場合は、Pivot コントロールの 1 つにリスト コントロールを含め、その中のリンクをタップすると他のページに移動するか、それ自体が Pivot コントロールとなっているナビゲーションの別階層に移動するようにします。このようにすることで問題がないかどうかを確認するには、「Windows Phone の詳細ドリルダウンを含むリスト」を参照してください。

ヒントヒント:

現在、Panorama コントロールは横向きモードをサポートしていませんが、Pivot はサポートしています。これは、Panorama コントロールではなく Pivot コントロールを選ぶ理由になり得ます。ピボット ページ間は、ピボットのタイトルをタップすることで移動することもできます。これは、Panorama コントロールではできません。

このトピックの最初で、Pivot コントロールの最適な使用方法は、各ピボット ページに同じ種類のデータを格納し、そのデータの異なるフィルター処理を提示することだと説明しました。また、Panorama コントロールを使用することにより、関係のないデータを含むページを表示できるとも説明しました。データが本質的に異なり、しかしすべてが 1 種類の専門領域に関係しているならば、Pivot コントロールもこのように使用することができます。たとえば、旅行者向けのアプリでニューヨーク市に関係する情報を示す場合に、Pivot コントロールと、場所、人口、毎年の税収などの興味を引きそうな統計を含むピボット ページを使用することが考えられます。さらに、見て楽しめるイベントなどの情報を含むピボット ページを追加したり、宿泊候補のホテルを示すピボット ページを追加することも考えられます。

ESPN の ScoreCenter アプリはアプリ タブのナビゲーション モデルの例で、各ピボット ページには、中心となる 1 つのテーマに基づくさまざまなデータが示されます。

UX_AppNavModels_17

ESPN ScoreCenter アプリ

Facebook アプリのように、Panorama コントロールの [ホーム] ページでリストからナビゲーション アイテムをタップして、Pivot コントロールに移動できます。これは、Facebook の [ホーム] パノラマ パネルで [プロファイル] を選択した場合に起きることです。ユーザーが [プロファイル] をタップすると、[ウォール]、[情報]、[自分の写真] などのピボット ページを提示する Pivot コントロールが表示されます。これにより、コントロール間を移動することができます。

UX_AppNavModels_18

メインの Panorama から Facebook アプリ内の Pivot コントロールに移動する

パノラマの [ホーム] パネルでの選択から、別のパノラマに移動したいと考えるかもしれません。これは、現在のアプリが何であるか、ユーザーがわからなくなって混乱するおそれがあるため、避けることをお勧めします。パノラマは通常、大きく引き伸ばされた画像を背景に使用しており、これによって最上レベルにいることがわかります。もしも、移動先のサブエリアが別の背景画像を持つパノラマになっていれば、混乱してしまうと考えられます。

すべてのデータは同じ型なので、多くの場合、表示されているものに関係するボタンを含むアプリ バーを一番下に用意します。次の図に示す Outlook アプリには、常に表示されているアプリ バーがあります。これは、表示されているものに対して何らかの影響を与えるアクションがこのアプリ バーに含まれているためです。

UX_AppNavModels_15

Outlook クライアント アプリ

Outlook アプリのアプリ バーでは、どのピボット ページからも同じアクションを実行できます。前の図から、新規メール作成、選択ボックスの表示、フォルダーの切り替え、およびメールの再同期のためのボタンがあることがわかります。アプリ バーを最下部に置くことは考えられないため、これは Pivot コントロールと Panorama コントロールのもう 1 つの違いです。

各ピボット ページに何を置くべきか、およびそれが意味を持つかを慎重に考慮しない限り、同じボタンを常に最下部に保持できると仮定しないでください。Pivot コントロールの使用法によっては、各ピボット ページでのデータの型が完全には保たれない可能性があります。

ユーザーが最初に見るピボット ページを使って、残りのピボット ページのリストを提示することができます。この場合、ユーザーは、スワイプによって移動するのでなく、ページをタップして直接そのページにジャンプできます。リストには、他のアプリを起動するエントリを含めることもできます。

最初に表示されるページは、[ホーム] ピボット ページにしなくてもかまいません。たとえば、映画のリストを管理するアプリでは、[ホーム] ピボット ページの代わりに、最新の人気映画の画像を表示するピボット ページを最初に表示することもできます。このようにすると、よりユーザーをひきつけることができます。

表示:
© 2016 Microsoft