ハブ コントロール/パターン

ハブ コントロールを使うと、アプリのコンテンツを、関連した別個のセクションやカテゴリに整理できます。 ハブのセクションは、優先順に走査するためのものであり、さらに細かい操作性を実現するための出発点として使うことができます。

ハブの例

ハブのコンテンツはパノラマ ビューに表示でき、ユーザーは、新しい情報、入手可能な情報、関連する情報がひとめでわかります。 ハブには通常、ページ ヘッダーがあり、各コンテンツ セクションにはセクション ヘッダーがあります。

適切なコントロールの選択

ハブ コントロールは、階層に配置された大量のコンテンツを表示する場合に適しています。 ハブは、新しいコンテンツの閲覧と検出の優先順位を設定し、ストアやメディア コレクション内の項目を表示する際に役立ちます。

ハブ コントロールには、コンテンツのナビゲーション パターンを構築するのに適したいくつかの機能があります。

  • 視覚的なナビゲーション

    ハブを使うと、多様性のある簡潔なスキャンしやすい配列にコンテンツを表示できます。

  • 分類

    各ハブ セクションでは、コンテンツを論理的な順序に配置できます。

  • 混在したコンテンツの種類

    コンテンツの種類が混在する場合、資産の可変サイズと比率は共通です。 ハブを使うと、コンテンツの各種類を一意なものにし、各ハブ セクションに整然と配置できます。

  • ページとコンテンツの可変幅

    パノラマ モデルであるハブでは、セクション幅を調整できます。 これは異なる深度や量を含んだコンテンツに適してします。

  • 柔軟なアーキテクチャ

    アプリのアーキテクチャを浅く維持する場合、すべてのチャネル コンテンツをハブ セクションの概要に収めることができます。

ハブは、いくつかある利用可能なナビゲーション要素の 1 つです。ナビゲーション パターンと他のナビゲーション要素について詳しくは、「ユニバーサル Windows プラットフォーム (UWP) アプリのナビゲーション デザインの基本」をご覧ください。

ハブのアーキテクチャ

ハブ コントロールには、リレーショナル情報アーキテクチャを使ったアプリをサポートする階層型ナビゲーション パターンがあります。 ハブはさまざまなカテゴリのコンテンツで構成され、それぞれがアプリのセクション ページに対応付けられています。 セクション ページは、シナリオとセクションに含まれるコンテンツが最適に表現されるような形で表示できます。

階層型の Food with Friends アプリのワイヤーフレーム

レイアウトとパン/スクロール

コンテンツをハブに配置して移動する方法はたくさんあります。ハブのコンテンツ リストが常にハブのスクロール方向に対して垂直にパンされる点だけ確認してください。

水平方向のパン

水平方向にパンするハブの例 垂直方向のパン

垂直方向にパンするハブの例 垂直方向のリストとグリッドのスクロールによる水平方向のパン

垂直方向のリストのスクロールによる水平方向にパンするハブの例 水平方向のリストとグリッドのスクロールによる垂直方向のパン

水平方向にパンするハブの例

ハブは、設計上の大きな柔軟性を備えています。 そのため、魅力的で視覚に訴えるさまざまなエクスペリエンスを提供するアプリを設計できます。 最初のグループには、ヒーロー画像やコンテンツ セクションを使うことができます。ヒーローには、最も強調したい内容を失うことなく垂直方向と水平方向にトリミングできる大きい画像を使ってください。 次の例は、1 つのヒーロー画像と、その画像を横長、縦長、狭い幅で表示するためにトリミングする方法を示しています。

さまざまなウィンドウ サイズに合わせてトリミングされたヒーロー画像

モバイル デバイスでは、一度に 1 つのハブ セクションを表示できます。

小型画面上のハブ パターンの例

推奨事項

  • ハブ セクションに他のコンテンツがあることがユーザーにわかるように、一定量のコンテンツが見えるようにコンテンツをクリッピングすることをお勧めします。
  • アプリの必要に基づいて、ハブ コントロールに複数のハブ セクションを追加し、各セクションに独自の機能目的を持たせることができます。 たとえば、あるセクションには一連のリンクとコントロールを含め、別のセクションはサムネイルのリポジトリとすることができます。 ユーザーは、ハブ コントロールに組み込まれているジェスチャのサポートを使って、これらのセクション間をパンすることができます。
  • さまざまなウィンドウ サイズに対応できるように、コンテンツを動的に再配置するのが最適です。
  • 多くのハブ セクションがある場合は、ハブにセマンティック ズームを追加することを検討します。 これには、アプリが狭い幅に合わせてサイズ変更されたときにセクションを見つけやすくなるという利点もあります。
  • ハブ セクション内の項目から別のハブに移動することはお勧めしません。代わりに、対話型ヘッダーを使って別のセクションまたはページに移動します。
  • ハブを基盤として使って、アプリの必要に合わせてカスタマイズできます。 ハブの次の機能を変更できます。
    • セクションの数
    • 各セクションのコンテンツの種類
    • セクションの配置と順序
    • セクションのサイズ
    • セクションとセクションの間隔
    • セクションとハブの上端または下端の間隔
    • ヘッダーとコンテンツのテキストのスタイルとサイズ
    • 背景、セクション、セクション ヘッダー、セクション コンテンツの色

サンプル コードを入手する