パネル セクション (ハブ コントロール) を持つセントラル アプリ ハブ (Windows Phone ストア アプリ)

このトピックのモデルは、「ホーム ページ メニュー (ハブ コントロールまたはピボット コントロール) を持つセントラル アプリ ハブ (Windows Phone ストア アプリ)」をご覧ください。前の場合と同じように、ユーザーに表示される機能のさまざまな領域があります。ここでの違いは、ホーム ページ メニューがなくても、すべてのメイン UI を最上位に表示できることです。

サッカー チーム管理用のセントラル アプリ ハブ UI

移動先のサブ領域がアプリにない場合、横方向にアクセス可能なセクションの 1 つのセットにすべての UI を配置できます。その場合もハブ コントロールを使うことができますが、この場合は、ホーム セクションが必要ありません。これは、Windows Phone の People ハブにも当てはまります。次の図は、ハブの基本レイアウトは同じままであることを示しています。

People ハブ

People ハブでは、各セクションに固有の UI が存在し、機能の領域が表示されます。設計のこのモデルと「ホーム ページ メニュー (ハブ コントロールまたはピボット コントロール) を持つセントラル アプリ ハブ (Windows Phone ストア アプリ)」で説明されているモデルの違いは、アプリの下部領域のサーフェスをハブで再現するだけではないという点です。前のモデルでは、ホーム セクションの右側のセクションで、メニューのナビゲーションを通じてアクセスできるコンテンツをすばやく確認できます。ここで説明するモデルでは、他の場所にある領域のサーフェスがセクションに再現されません。

各領域のセクション

設計に関して、アプリの起動時に選ぶセクションを決定します。ユーザーが前回アプリを終了したときに表示されていたセクションを選ぶことができます。常に最初のセクションを選ぶこともできます。最初のセクションとは、背景画像のフラッシュが左に表示され、ハブ タイトルの左端がその上に表示されたセクションです。

右側に表示するセクションの数を決めることができますが、セクションは合計で 4 つ以下にすうことをお勧めします。セクションが 4 つ以上ある場合、ユーザーは自分のいる場所を把握しにくくなります。

どの UI も各セクションに自由に配置できます。主な機能領域が 4 つある場合、1 つの領域を 4 つの各セクションに配置できます。最初のセクションは、ユーザーがアプリの起動時に最も見たいと思っていると考えられるコンテンツで設計できます。上の図は、セントラル アプリケーション ハブとして使う、この種類のハブの使用方法を示しています。

ハブの各セクションには、クリックするとその項目の詳細が表示される項目が表示されます。たとえば、People ハブには、タップ可能な項目が表示される [最新情報] セクションがあります。項目は、縦方向にスクロール可能な一覧に表示され、Facebook への投稿を表している場合があります。これらのいずれかをクリックすると、ハブから離れてその投稿の詳細が表示されます。[最新情報] セクションには、各エントリの複数のヒット ターゲットが表示されます。1 つのヒット ターゲットをタップすると投稿に移動し、投稿に対する返信が確認できます。他のヒット ターゲット、人物の名前です。これをタップすると、その人物のピボット コントロールに移動し、その人物に関する情報のピボット項目をいくつか確認できます。

別の例

各セクションには、独自の明確な領域が存在することがありますが、必ずしも他のセクションと関連していません。この場合も、ユーザーが個々のセクションのコンテンツをタップすると、メイン ハブから移動します。移動先は、ホーム セクション メニューからのように完全に新しいサブ領域ではなく、タップした内容の詳細です。

Samsung Now アプリには、ハブ コントロールをセントラル アプリ ハブとして使った 3 つのセクションがあります。このアプリのテーマは、朝や日中にすばやくアクセスする必要がある情報 (天気、ニュース、株式市場情報) をユーザーに表示することです。

Samsung Now アプリ

この場合も、ユーザーはハブから移動できます。たとえば、株式セクションの株式記号をクリックすると、その会社に関する詳細を含む 1 つのページに移動します。

アドバイス

「ホーム ページ メニュー (ハブ コントロールまたはピボット コントロール) を持つセントラル アプリ ハブ (Windows Phone ストア アプリ)」でもこのトピックでもハブ コントロールを使っているため、同じアドバイスと注意事項の多くがここでも当てはまります。

関連トピック

ハブ

ピボット