Windows Phone ストア アプリのハブ コントロールのガイドライン
.png "ハブ コントロールの構成要素 (ハブ ヘッダー、ハブ セクション ヘッダーなど)")
説明
縦向きでのみ使用が想定されている電話のハブ コントロールには、左右に動かすごとができる一連のセクションが表示されます。これは、アプリの全画面コンテナーであり、ナビゲーション モデルでもあります。
ハブ (以前のパノラマ) エクスペリエンスは、Windows Phone 本来の外観に含まれます。電話画面の範囲内に収まるように設計されたアプリとは異なり、ハブ アプリでは、画面の範囲を超えた横長の仮想キャンバスを使ってコントロール、データ、サービスを表示する独自の方法が用意されています。Windows Phone のこの本質的に動的なビューでは、レイヤー化されたアニメーションとコンテンツを使って、視差効果と同様に、レイヤーがさまざまな速度でスムーズにパンします。
ハブ アプリのセクションは、さらに詳しい内容を表示するための出発点としての役割を果たします。目標は、視覚に訴えるコンテンツをユーザーに表示することです。
例
.png "Windows Phone アプリ: ハブ コントロール")
ユーザー インターフェイスは、背景色や背景画像、ハブ ヘッダー、ハブ セクション ヘッダー、ハブ セクションなど、それぞれ単独で移動するレイヤーから構成されます。
設定した場合、背景画像は一番下のレイヤーで、ハブに高級感のある雑誌のような印象を与えます。背景画像は、通常、フルブリード画像が使われ、アプリの中で最も視覚的に訴える部分となる場合もあります。
ハブ ヘッダーは、アプリを識別するもので、ユーザーがどのような方法でアプリを開始した場合でも目に入るようにする必要があります。
ハブ セクションは、ハブ アプリのコンポーネントで、他のコントロールやコンテンツを格納しています。ハブ セクションは、タッチによるパンやフリックと同じ速度で移動します。ハブ セクション ヘッダーは、どのハブ セクションでも省略可能です。
サムネイルは重要な要素になる場合があり、他のページのコンテンツやメディアにリンクしています。
.png "ハブ コントロールとサムネイル")
使い方のガイダンス
アプリの要件に基づいて、ハブ コントロールに複数のハブ セクションを追加し、各セクションに異なる機能目的を持たせることができます。たとえば、あるセクションには一連のリンクとコントロールを含め、別のセクションはサムネイル画像のリポジトリとして使います。ユーザーは、ハブ コントロールに組み込まれているジェスチャのサポートを使って、これらのセクションを前後に動かすことができます。
設計ガイドライン
- ハブ コントロールの動作とレンダリングは、縦向きでのみサポートされます。
- ハブ コントロールにはテーマを設定できるため、既定の色などを上書きすることができます。
- Windows Phone 用のハブ コントロールの折り返し効果を使うと、最後のセクションから最初のセクションに折り返すことができ、その逆も可能です。1 つまたは 2 つのセクションを含むハブでは折り返し表示されません。3 つ以上のセクションを含むハブでは折り返し表示されます。
- Windows Phone では、ハブでアプリ バーを使う場合、アプリ バーのモードを最小に設定します。このモードは、ハブ ページの画面領域を最大限利用できるように設計されています。詳しくは、「Windows Phone のアプリ バー」をご覧ください。
- ハブ コントロールの起動中には、システム トレイの進行状況バーを表示するか、全画面の "読み込み中" インジケーターを表示します。
- ハブ コントロールのセクションが更新中でもユーザーの操作をブロックしていない場合に、システム トレイの進行状況バーを表示します。
- 初回アクセス時: 最初に表示されるセクションでは、ハブ ヘッダーが左側に正しく整列されています。どのセクションを既定にするかに関する標準のガイダンスはありません。表示するコンテンツによって異なります。
- 同じハブ コントロールに対する 2 回目以降のアクセス時には、ユーザーは中断したセクションに戻されます。
- ハブ コントロールに 5 個を超えるセクションを作らないでください。これは、パフォーマンス上の理由によります。また、ユーザーが移動する必要のある領域の数を制限するためでもあります。コンテンツが複雑なほど、使うセクションを少なくします。セクションが多すぎるとユーザーが混乱します。4 ～ 5 個のセクションであれば、ユーザーは現在のセクションと左右のセクションを把握できます。
- ハブ コントロール内ではピボット コントロールを使わないでください。逆の場合も同じです。ただし、ハブ セクション内の項目を、ピボット コントロールが含まれる別のページにリンクすることはできます。
- ハブ コントロール内でパンやスクロールできるコントロールを使わないでください。たとえば、ハブ セクション内にマップ コントロールを配置すると、ハブ コントロールが使いにくくなる場合があります。ジェスチャ入力が混同されます。たとえば、ハブ コントロールのセクション内にあるスライダーを左にスライドしようとすると、セクションをスクロールしたいのか、スライダーを動かしたいのかがはっきりしません。これを解決するには、ジェスチャ入力を必要とするコントロールを個別のページに配置し、そこにナビゲートします。ジェスチャが無効になっているコントロール (おそらくはマップ) はハブ セクションに配置しても問題ありません。マップをアクティブ化するボタンをオーバーレイできます。このボタンを押すと、マップだけが含まれる別のページに移動します。その後、ユーザーは、戻るボタンを押してハブ セクションに戻ることができます。
- ハブ コントロールとピボット コントロールの使い分けについて詳しくは、以下のトピックをご覧ください。
ハブ ヘッダー:
- プレーンテキストまたは画像 (ロゴなど) を使います。ロゴとテキスト (またはその他の UI 要素) など、複数の要素を使うこともできます。
- ヘッダーのフォントや画像の色には背景画像のどこでもはっきりと見えるようなフォントや色を使います (この 2 つは個別に移動するため)。別のフォント、サイズ、色を使う特別なブランド戦略の必要がない限り、システム フォントとスタイルを使ってください。
- ヘッダーをアニメーション化したり、そのサイズを動的に変更したりしないでください。
- 一貫性を保つため、ハブ ヘッダーをスタート画面の起動タイルを同じにします。
- ハブ コントロールのレイアウト時やヘッダーの設計時は、システム トレイやその他の要素がふさがれないようにしてください。
ハブ セクション ヘッダー:
- プレーンテキストまたは画像 (ロゴなど) を使います。ロゴとテキスト (またはその他の UI 要素) など、複数の要素を使うこともできます。
- ヘッダーのフォントや画像の色には背景画像のどこでもはっきりと見えるようなフォントや色を使います (この 2 つは個別に移動するため)。別のフォント、サイズ、色を使う特別なブランド戦略の必要がない限り、システム フォントとスタイルを使ってください。
- ヘッダーをアニメーション化したり、そのサイズを動的に変更したりしないでください。
ハブ セクション:
- セクションのコンテンツに含まれるテキストや画像を吟味することによって、ハブ コントロール エクスペリエンスの美しさを保ち、ハブに圧迫感やまとまりのなさが生まれないようにします。
- 垂直スクロールを使う場合は向きを考慮します。ハブ セクションでの垂直スクロールは、セクションの幅が画面の幅より広い間、問題ありません。
- コンテンツを表示するまではハブ セクションを非表示にすることを検討してください。
背景画像
- 暗く、柔らかで、低コントラストの背景が最適です。単色、またはグラデーション。
- 繊細で控えめな写真を背景に使うと、ハブ コントロールの視覚的効果を高めることができます。一方、明るい色が多く含まれる写真は、セクションが見づらくなる場合があるため、使わないようにします。実用的な方法の 1 つとして、写真の上に半透明の黒または白のフィルター (四角形) を使います。ビットマップ編集ツールでこの処理を実行し、画像の色を抑えることができます。
- 背景画像はハブ コントロール全体にまたがる必要があります。つまり、背景画像の縦横比とハブ コントロールの縦横比を一致させ、画像のサイズは最も一般的なデバイス解像度、最大のデバイスの解像度、パフォーマンスを考慮したものにする必要があります。ファイルのサイズを抑えるには、JPEG 形式をお勧めします。
- 背景画像は、アプリの実行中でも切り替えることができます。ただし、同時に表示できる画像は 1 つだけです。
サムネイル
- 画像全体を縮小するのではなく、内容を判断可能な被写体を際立たせるようにトリミングした画像を使います。テキストがないと画像の内容が明確でない場合は、コンテンツの説明のためにテキストを 2 行まで使用できます。
関連トピック
デザイナー向け
開発者向け (XAML)
Windows.UI.Xaml.Controls Hub class
Windows.UI.Xaml.Controls HubSection class