リストは、1 つ以上の関連アイテムを視覚的に表したものです。通常は、オプションのコレクションを表示するために使用されます。
リソース
| タイプ | リンク | ステータス |
|---|---|---|
| デザイン | デザインソース（Figma） | 利用可能 |
| 実装 | Jetpack Compose | 近日公開 |
ハイライト
- リストは、テキストまたは画像の連続したコレクションです。
- リストは自然で、目を通しやすいものにする必要があります。
- リストは、アイコンとテキストで表されるメイン アクションと補助アクションを含むアイテムで構成されます。
バリエーション
リストには、1 行のリスト、2 行のリスト、3 行のリストの 3 種類があります。
- キャッチコピー: 各項目を 1 行で伝えます。このシンプルなデザインにより、各アイテムが他のアイテムと明確に区別されます。
- 2 行構成のリスト: 2 行で各行を使って各項目を伝えます。この構造化された設計により、自然な読みやすさが確保され、認知的過負荷が回避されます。
- 3 行構成のリスト: 各アイテムを 3 本の平行線で表します。この装飾的なデザインにより、視覚的に目立ちます。
構造
- アイコン: 特定のオブジェクトやアクションを表す小さなグラフィック。アイデアやコンセプトを視覚的に伝えるためによく使用されます。
- 上線: タイトルやサブタイトルの上に表示される短いテキスト行。追加のコンテキストや強調を示すためによく使用されます。
- タイトル: デザイン要素またはページのメインの見出しとして機能する大きな太字のテキスト行。
- サブタイトル: メインタイトルの下に追加情報やコンテキストを提供する小さなテキスト行。
- コントロール: ユーザーが決定内容を入力できるインタラクティブな要素。
状態
仕様
Usage
リストは、テキストと画像の縦方向に編成されたグループです。リストは読みやすいよう最適化されており、連続する 1 列の項目で構成されています。リストアイテムには、アイコンとテキストで表されるメイン アクションと補助アクションを含めることができます。
すべきこと
リストアイテムはボタンではありません。アイテムにコンテナがありません。デフォルトでは、リストアイテムは選択されておらず、フォーカスされていません。
注意
リストアイテムには、必要な場合にのみコンテナの背景を使用します。
選択コントロール
コントロールは、リストアイテムの情報とアクションを表示します。リスト項目の前端または後端に揃えることができます。
- チェックボックス: リストアイテムを 1 つ以上選択します。
- ラジオボタン: リスト内のアイテムを 1 つだけ選択します。
- スイッチ: コントロールのオンとオフを切り替えます。
すべきこと
アイコン選択インジケーターを使用して、リスト内の選択された項目を明確に表示します。これにより、ユーザーは選択したアイテムを簡単に特定できるようになり、全体的なユーザー エクスペリエンスが向上します。
すべきでないこと
リストの選択を背景色のみに頼ることは避けてください。
すべきでないこと
現在フォーカスされている要素について混乱を招く可能性があるため、リストアイテム内にボタンを配置しないでください。
アイコン
すべきこと
リストに同じ種類のコンテンツを表示する場合は、アイコンを省略して視覚的なノイズを軽減し、ユーザー エクスペリエンスを向上させます。アイコンが目的を果たさず、追加情報も提供しない場合は、リスト内でアイコンを使用しないでください。
すべきでないこと
リスト内のすべてのアイテムに同じアイコンを使用しないでください。これは、ユーザーを視覚的に圧倒し、混乱させる可能性があります。アイコンは、付加価値や追加情報を提供する場合にのみ使用してください。
アバターと画像
リストアイテムには、人物やエンティティを表すために円形に切り抜かれた画像を含めることができます。
