アプリ タブ (ピボット コントロール) (Windows Phone ストア アプリ)
アプリ タブ パターンは、ユーザーが頻繁に移動する UI の複数のページに使用されます。このパターンは、アプリが 1 つの中心的なテーマ (たとえば、映画や野球など) に基づいている場合は特に便利です。各ページには、アプリ全体で表示される総合的なデータに関連する内容が表示されます。アプリ タブ パターンは、アプリ全体を構成するために使われたり、アプリのサブ領域で使われることもあります。たとえば、アプリのメインの第 1 レベルとしてハブ コントロールを設置し (前のトピックで説明)、そこからアプリ タブ パターンを使うアプリのサブセクションにユーザーがナビゲートできるようにすることができます (ピボット コントロールを使用)。
自宅のコレクションにある映画を分類するアプリを作るとします。フィルター処理された映画のビューを複数表示するために、アプリ タブ パターンを使うことができます。フィルター処理された 1 つのビューには、お気に入りとマークされた映画を表示します。フィルター処理された別のビューは、アクション映画だけを表示します。フィルター表示された別のビューには、時間があるときに視聴しようと思っている映画を順番に表示します。もちろん、フィルター処理しないですべての映画のリストをページに表示することもできます。
次の図は、このアプリの構造を視覚化するのに役立ちます。アプリを起動すると、フィルター処理されたページの 1 つが表示されます。そこから、UI のタブのように機能する各ページを横にスクロールできます。
.png "Outlook の受信トレイのアプリ タブ")
Outlook の受信トレイのアプリ タブ
各タブには、ユーザーに表示するデータが、基本的には異なる方法でフィルター処理されて表示されます。フィルター処理されたそれらのビュー ページのいずれかが表示されているときにハードウェアの戻るボタンが押された亜売、アプリを終了します。
フィルター処理された異なるビューを表示する、1 つのデータの種類を持つアプリにはアプリ タブ パターンを使います。
ピボット コントロールをアプリ タブ実装として使う
ピボット コントロールを使うと、アプリ タブ パターンを実装できます。このコントロールでは、ユーザーが各ページ間を左右に移動できます (ピボット項目と呼ばれます)。
Microsoft の Outlook クライアント アプリでは、アプリに 1 種類のデータ (各ピボット項目に異なるフィルターが適用された電子メールの一覧) が表示されるため、アプリ タブ パターンが使われています。Outlook アプリで電子メールの受信トレイを見ると、3 つのピボット項目 (all、unread、urgent) が表示されています。これによって、必要に応じて緊急の電子メールのみを確認しやすくなります。このように、all ピボット項目の電子メールをスクロールして、緊急とマークされた電子メールを見つける必要はありません。
.png "Outlook クライアント アプリ")
Outlook クライアント アプリ
アプリ タブ パターンを使う別の既存のアプリは、Netflix アプリです。各ピボット項目には、映画のリストが表示されます。各ピボット項目のリストは、適用されているフィルターによって異なります。比較することで、各リストがどのように独自のもので、どのように役立つかを確認できます。instant ピボット項目には、必要なときにストリーミング デバイスから視聴できるようにキューに配置した映画が表示されます。home ピボット項目には、ユーザーが興味を持つと Netflix によって判断された映画が表示されます。search ピボット項目には、検索キーワードに一致する映画が表示されます。
ピボット項目は、焦点が絞られており効率的です。主要な焦点は、関連する項目のフィルター処理、並べ替え、表示などのタスク ベースの操作です。ハブは範囲が広く、データが集められており、調査が必要です。最新の関連コンテンツを推進し、表示するのに最適です。特定のコントロールが他のコントロールより適している状況があります。
.png "Netflix アプリ")
Netflix アプリ
タブのような機能
各ピボット項目は、実際にはタブであり、タブは上部に一覧表示されます。Netflix アプリの図からわかるように、アプリには現在 home ピボット項目が表示されており、右側には genres ピボット項目があることがわかります。genres ピボット項目に移動するには、タップするか、パンするだけです。
アプリでは、ピボット項目の数を最小限に抑えてください。ピボット項目からピボット項目にジャンプすると、ユーザーは迷う可能性があります。ピボット項目の数は、5 つ以下に抑えるようにしてください。それ以上必要なことがわかった場合、いずれかのピボット コントロールに、タップすると他のページやそれ自体がピボット コントロールである別のレベルのナビゲーションに移動するためのリンクが表示されたリスト コントロールを含めます。これが必要かどうかを考慮するには、「Windows Phone 用の詳細ドリルダウンを備えたリスト」をご覧ください。
注 ピボット コントロールを使うと、項目ヘッダーをタップして項目間を移動できます。これは、ハブ コントロールではできないことです。
データのフィルター処理についての考慮事項
このトピックの最初に、ピボット コントロールの最適な使用方法は、各ピボット項目に同じ種類のデータを含め、そのデータの異なるフィルター処理だけを表示することであると説明しました。さらに、関連しないデータを含むセクションを表示するには、ハブ コントロールを使うことができることも説明しました。データが本質的に異なっても、すべてのデータが何らかのテーマに関連していれば、ピボット コントロールをこのように使用することもできます。たとえば、ニューヨークに関する旅行者向けの情報をアプリに表示する場合、ピボット コントロールを使って、場所、人口、年間税収などの興味深い統計を含むピボット項目を表示することができます。その場合、見どころなどの情報のピボット項目と、お勧めホテルのピボット項目を追加することができます。
ESPN ScoreCenter アプリは、中心的なテーマに基づく異種データが各ピボット項目に含まれているアプリ タブ ナビゲーション パターンの例です。
.png "ESPN ScoreCenter アプリ")
ESPN ScoreCenter アプリ
ピボット コントロールとハブ コントロールを組み合わせる
ハブ コントロールの home ページ (Facebook アプリのホーム ページなど) からは、一覧でナビゲーション項目をタップして、ピボット コントロールに移動できます。これは、Facebook の home ハブ セクションから profile を選択したときに起きる事柄です。ユーザーが profile の選択をタップすると、wall、info、photos of me などのピボット項目を表示するピボット コントロールに移動します。このように、1 つのコントロールから他のコントロールに移動できます。
.png "メイン ハブ コントロールから Facebook アプリ内のピボット コントロールに移動する")
メイン ハブ コントロールから Facebook アプリ内のピボット コントロールに移動する
ハブの home セクションの選択から別のハブに移動したくなることがあるかもしれません。これは、ユーザーが現在使っているアプリを忘れやすくなって混乱する可能性があるため、お勧めしません。ユーザーが上部にいるときにユーザーを固定したままにするため、ハブの背景には大きく引き伸ばされた画像が表示されることがあります。それ自体がハブであり、背景が異なるサブ領域に移動した場合、ユーザーは混乱する可能性が高くなります。
ピボット コントロールのアプリ バー
すべてのデータが同じ種類であるため、多くの場合、表示されている内容に関連するボタンのある下部のアプリ バーを設置できます。次の図に示す Outlook アプリには、常に表示されるアプリ バーがあります。表示されている内容に何らかの方法で影響を与える、ユーザーに必要な操作が含まれているためです。
Outlook クライアント アプリ
Outlook アプリでは、ピボット項目にいるかどうかに関係なく、アプリ バーを使って同じ操作を行うことができます。前の図からは、新しいメールの作成、選択ボックスの表示、フォルダーの切り替え、メールの再同期を行うためのボタンがあることがわかります。この場合、これはピボット コントロールとハブ コントロールのもう 1 つの違いです。そこのボタンと同時にアプリ バーを配置することはおそらくないためです。
各ピボット項目に何を配置し、それに意味があるかを慎重し考慮しなければ、いつでも下部に同じボタンを表示し続けることはできないと考えてください。ピボット コントロールの使用方法によっては、各ピボット項目にまったく同じ種類のデータが維持されるわけではありません。
"Home" ピボット項目
最初のピボット項目を使って、残りのすべてのピボット項目の一覧を表示できます。こうすることで、ユーザーはスワイプする代わりにピボット項目をタップしてそのピボット項目に直接ジャンプできます。一覧には、他のアプリを起動するエントリが含まれていることもあります。
ユーザーを home ピボット項目に配置することを望まない場合は、そうする必要はありません。たとえば、映画リスト アプリでは、ユーザーを home ピボット項目に配置するのではなく、最新の人気映画のグラフィックが表示されるピボット項目にユーザーを配置できます。このようにして、より目を引く内容をユーザーに表示できます。