リスト ボックス (または選択) のガイドライン
リスト ボックス (選択とも呼ばれます) では、ユーザーが通常は 1 つ、ただし時に複数の項目を項目のリストから選択する手段が提供されます。リスト ボックスの項目は、すべての項目を表示する領域がない場合には、スクロールできます。
.png "Windows Phone アプリ: リスト ボックス")
例
.png "標準的なインラインでの選択コントロールを示すスクリーンショット")
適切なコントロールの選択
目立つ表示に値する重要性が項目にある場合は、リスト ボックスを使います。 リスト ボックスでは、重要な選択で完全な代替セットにユーザーの注意を向ける必要があります。可能な場合は、項目のリストのパンまたはスクロールが必要にならないように、リスト ボックスのサイズを設定します。リスト ボックスでは、3 ～ 9 個の項目が最適です。またリスト ボックスは、項目が動的に可変である場合に適しています。
次に、リスト ボックスの使用が適さないことを示す要因をいくつか示します。
- 項目が非常に少数である場合。常に同じ 2 つのオプションを持つ単一選択リスト ボックスは、ラジオ ボタンとして提示した方が適切である場合があります。3 つ、さらには 4 つの静的な項目の場合にも、ラジオ ボタンを考慮してください。
- リスト ボックスが単一選択であり、常に同じ 2 つのオプションを持ち、その一方が "でない" を意味するか、"オン" と "オフ" に対応する場合。単一のチェック ボックスまたはトグル スイッチを使います。
- 項目が非常に多数である場合。長いリストに適している選択は、グリッド ビューおよびリスト ビューです。非常に長いグループ化されたデータのリストでは、セマンティック ズームが推奨されます。
- 項目が連続する数値である場合。スライダーの使用を考慮します。
- 選択項目がアプリのフローで二次的な重要性しか持たないか、または大半の状況で大半のユーザーに既定のオプションが推奨される場合。ドロップダウン リストを使います。
推奨事項
- リスト ボックスの目的、および現在選択されている項目が明確であることを確認します。
- タッチ フィードバックおよび項目の選択状態の視覚効果とアニメーションを予約します。
- リスト ボックス項目のテキストのコンテンツは、単一行に制限します。項目がビジュアルである場合、サイズをカスタマイズできます。項目に複数行のテキストかイメージが含まれる場合は、代わりにグリッド ビューかリスト ビューを使います。
- リスト ボックスが自動的にサイズ設定され、項目が動的である場合、リスト ボックスのサイズ変更がどのように行われ、またその周囲のビジュアルがどのように処理されるかを考慮します。動的な項目を含む固定サイズのリスト ボックスではサイズは変更されませんが、スクロールできます。
- ブランドのガイドラインで別のフォントが指示されていない限り、既定のフォントを使います。
- 関連するオプションをグループ化する、最も一般的なオプションを最初に配置する、アルファベット順を使うなど、論理的な順序でリスト ボックス内の項目を並べ替えます。名前はアルファベット順、数値は数値順、日付は時系列順に並べ替えます。
- コマンドの実行または他のコントロールの動的な表示と非表示の切り替えのためにリスト ボックスを使わないでください。
その他の使い方のガイダンス
外観と操作
(ドロップダウン リストとは対照的に) リスト ボックスは常に開いています。テキスト文字列または数値の項目を含めることができ、他の任意のビジュアルにカスタマイズできます。創造的であることが推奨されます。アプリのコンテンツを直接操作できれば、ユーザーが理解しやすくなります。したがって、提示する実際のコンテンツ (おそらく製品の図面、写真) を示すこともできます。タップ時に項目で視覚フィードバックを常に提供し、選択時の項目が明確であることが必要です。
リスト ボックス コントロールでは、既定で項目のリストが垂直方向に提示されます。特に項目がグラフィックスや写真である場合に、項目を水平方向に提示するときは、リスト ボックス項目のレイアウトをカスタマイズできます。水平方向か垂直方向の折り返しグリッドで項目をレイアウトしたい場合には、そうすることができます。また、既定で項目をそのようにレイアウトするグリッド ビューのみを使います。
ユーザーが項目を操作すると、項目は状態 (外観) を変更することでフィードバックを返します。リスト ボックスの項目の状態には、標準、押された状態、選択されていない状態、選択された状態、無効な状態などがあります。
項目をタップすると選択されます。複数選択モードでは、選択した項目をタップすると解除されます。単一選択モードでは、別の項目をタップするとその項目に選択が移動します。指で垂直方向にスワイプすると、項目のリストが慣性を伴って上下にスクロールします。リスト ボックスにはスクロール バーがあり、スクロール バーの位置が項目リスト内でのユーザーの相対位置、サイズが表示項目の比率を示します。スクロール バーは、スクロール中にのみ表示されます。
関連トピック
デザイナー向け
開発者向け (XAML)
開発者向け (HTML)