リスト ビューおよびグリッド ビューのガイドライン

[この記事には、UWP アプリと Windows 10 に固有の情報が含まれています。Windows 8.1 のガイダンスについては、Windows 8.1 ガイドラインの PDF ファイルをダウンロードしてください。]

リストでは、コレクション ベースのアプリ コンテンツを、タッチに最適化された一貫した方法で表示して操作できます。リスト ビュー コントロールとグリッド ビュー コントロールを使うと、一覧を効果的に表示することができます。リスト ビュー コントロールとグリッド ビュー コントロールでは、項目の分類、グループ ヘッダーの割り当て、項目のドラッグ アンド ドロップ、コンテンツの管理、項目の順序変更を行うことができます。

リスト ビューとグリッド ビュー

リスト ビューとグリッド ビューの機能は似ていますが、その使用方法は異なります。

リスト ビューは以下の場合に推奨されます。

  • 主にテキストで構成されるコンテンツのコレクションを表示する場合。
  • コンテンツの単一のコレクションまたはカテゴリ別コレクションをナビゲートする場合。
  • マスター/詳細パターンにマスター ウィンドウを作成する場合。マスター/詳細は、メール アプリによく使われるパターンで、一方のウィンドウに選択できる項目の一覧を表示し、もう一方のウィンドウに選択された項目の詳細ビューを表示します。このビューの例については、この記事の「適切なパターンの選択」をご覧ください。

リスト レイアウトにはグループ ヘッダーが含まれています。また、リスト レイアウトでは 1 つの列が表示され、読む順序は上から下で、パンやスクロールは垂直方向に行います。

4 種類の主要な単位を使ったリスト ビューの例

グリッド ビューは以下の場合に推奨されます。

  • 主にイメージで構成されるコンテンツ コレクションを表示する。
  • コンテンツ ライブラリを表示する。このビューの例については、この記事の「適切なパターンの選択」をご覧ください。
  • セマンティック ズームに関連付けられた 2 つのコンテンツ ビューの形式を設定する。

グリッド レイアウトは、常に縦方向にパンし、項目は左から右へ、次に上から下へ読むように配置されます。

グリッド ビューのレイアウトの例

適切なパターンの選択

リストは、コンテンツ ライブラリ、マスター/詳細データ、または静的データの表示に使用されます。

  • コンテンツ ライブラリ

    コンテンツのコレクションまたはライブラリの表示には、コンテンツ ライブラリを使います。 画像やビデオなどのメディアを提示する場合によく使います。コンテンツ ライブラリでは、ユーザーが項目をタップして動作を開始します。

    コンテンツ ライブラリの例

     

  • マスター/詳細データ

    マスター/詳細パターンを使う場合、リスト ビューを使ってマスター ウィンドウを整理できます。マスター ウィンドウには、選択できる項目の一覧が表示されます。ユーザーがマスター ウィンドウで項目を選ぶと、選んだ項目の追加情報が詳細ウィンドウに表示されます。詳細ウィンドウには、よくグリッド ビューが含まれます。

    マスター/詳細パターンの例

     

    複数のリストを組み合わせて、マスター/詳細の複雑な階層を作成することができます。詳しくは、「マスター/詳細パターン」をご覧ください。

  • 静的データ

    ほとんどの種類の対話式操作が無効なため、静的データは非対話型のコンテンツを表示する目的でのみ使われます。 これは、アクティブ化されたりナビゲートされたりしない読み取り専用の項目のコレクションに適しています。

選択モード

このモードでは、項目に対して操作を選択して実行できます。選択モードは、コンテキスト メニュー、Crtl キーまたは Shift キーを押しながらの項目のクリック、またはギャラリー ビューでの項目に対するターゲットのロールオーバーによって起動できます。

選択モードには、次の 3 つがあります。

  • 単一 - ユーザーは同時に 1 つの項目だけを選ぶことができます。
  • 複数 - ユーザーは修飾子を使わずに複数の項目を選ぶことができます。
  • 拡張 - ユーザーは、Shift キーを押すなどの修飾子を使って複数の項目を選ぶことができます。

選択モードがアクティブなとき、各リスト項目の横にチェック ボックスを表示し、画面の上部または下部に操作を表示できます。

項目の任意の場所をタップすると、項目が選ばれます。コマンド バーの操作をタップすると、選択したすべての項目に影響します。項目が選ばれていない場合、コマンド バーの操作は [すべて選択] を除いて非アクティブになります。

選択モードには簡易非表示モデルがありません。選択モードがアクティブなフレームの外側をタップしても、モードを取り消すことはできません。これにより、モードが誤って非アクティブ化されることを防止できます。戻るボタンをクリックすると、複数選択モードが終了します。

操作が選択されているときは、視覚的に確認できる必要があります。適切な場合はアニメーションを表示します。特定の操作に対して (特に破棄を伴う削除などの操作に対して)、確認ダイアログを表示することを検討します。

選択モードは、選択モードをアクティブにしたページに限定され、そのページ以外の項目に影響を与えることはできません。

選択モードへのエントリ ポイントは、そのモードが影響を与えるコンテンツに対して並置する必要があります。

コマンド バーの推奨事項については、「コマンド バーのガイドライン」をご覧ください。

複数選択モード

編集モードでは、行項目を操作できます。編集モードは、コマンド バーの編集モード ボタンまたはコンテキスト メニューを使って起動できます。

複数選択モードのエントリ ポイントは、変更されるリストによって配置される必要があります。

戻るボタンをクリックすると、複数選択モードが終了します。編集モードに切り替わると、コマンド バーは表示されません。選択モード時に他のフレームが表示されている場合、それらのフレームはスモーク表示されます。

編集モードには簡易非表示モデルがありません。選択モードがアクティブなフレームの外側をタップしても、モードを取り消すことはできません。これにより、モードが誤って非アクティブ化されることを防止できます。

編集モードは、編集モードをアクティブにしたページに限定され、そのページ以外の項目に影響を与えることはできません。

推奨事項

  • 同じリスト ビューまたはグリッド ビュー内の項目は、同じ動作を行う必要があります。
  • リストがグループに分割されている場合、セマンティック ズームを使うと、ユーザーがグループ化されたコンテンツ内を移動しやすくなります。

関連トピック

ハブ

マスター/詳細

ナビゲーション ウィンドウ

セマンティック ズーム