リストは、1 つ以上の関連アイテムを視覚的に表したものです。 オプションのコレクションを表示するためによく使用されます。
リソース
| タイプ | リンク | ステータス |
|---|---|---|
| デザイン | デザインソース（Figma） | 利用可能 |
| 実装 | Jetpack Compose | 利用可能 |
ハイライト
- リストとは、テキストや画像の連続した集まりです。
- リストは自然で読みやすいものである必要があります。
- リストは、主要な情報と補足情報を含む項目で構成されます アクションを表すことができます。
バリエーション
リストには、1 行のリスト、2 行のリスト、および 3 行のリスト。
- 1 行のリスト: 1 行で各項目を記述します。シンプル デザインすることで、各アイテムが他のアイテムと明確に区別できます。
- 2 行のリスト: 2 本の平行な線を使用して各項目を示します。 構造化された設計により、自然な読みやすさが確保され、認知機能を回避します。 過負荷に陥ります。
- 3 行のリスト: 3 本の平行線で各項目を表します。 この装飾的なデザインは、視覚的に非常に目立ちます。
解剖学
- アイコン: 特定のオブジェクトや操作を表す小さなグラフィック。通常は 視覚的に表現するために使用できます。
- 上線: タイトルまたはサブタイトルの上に表示される短いテキスト。 文脈や強調を持たせるために よく使用されます
- タイトル: 大きく太字で表示され、メインの見出しとして機能 配置する必要があります
- サブタイトル: 追加情報を示す短いテキスト コンテキストも考慮します。
- コントロール: ユーザーが決定を入力できるインタラクティブな要素。
状態
仕様
使用方法
リストは、テキストと画像の縦方向に整理されたグループです。 読解に最適化されており、リストは単一の 項目の連続した列です。 リストアイテムには、メイン アクションと補助アクションを表すことができます。 表示することもできます。
すべきこと
リストアイテムはボタンではありません。アイテムにコンテナがありません。リストアイテムは、デフォルトでは選択されておらず、フォーカスも解除されています。
注意
必要な場合にのみ、リストアイテムにコンテナの背景を使用します。
選択コントロール
リストアイテムの情報とアクションの表示を制御します。目標は 追加することもできます。
- チェックボックス: リストアイテムを選択します（複数可）。
- ラジオボタン: 1 つだけ選択します。 リストの項目を選択します。
- スイッチ: コントロールのオンとオフを切り替えます。
すべきこと
アイコン選択インジケーターを使用して、リスト内の選択されている項目を明確に表示します。これにより、ユーザーはどのアイテムを選択しているかを簡単に特定できるようになり、全体的なユーザー エクスペリエンスが向上します。
すべきでないこと
背景色のみに基づいてリストの選択内容を示すことは避けてください。
すべきでないこと
リストアイテム内にボタンを配置することは避けてください。現在フォーカスされている要素について混乱が生じる可能性があるためです。
アイコン
すべきこと
リストに同じタイプのコンテンツを表示する場合は、アイコンを省略して視覚的なノイズを減らし、ユーザー エクスペリエンスを向上させます。目的を果たさず、追加情報を含んでいないアイコンは、リスト内で使用しないでください。
すべきでないこと
リスト内のすべてのアイテムに同じアイコンを使用しないでください。この状態は、ユーザーを混乱させ、見づらくなる可能性があります。代わりに、価値を付加する場合や追加情報を提供する場合にのみアイコンを使用してください。
アバターと画像
リストアイテムには、円形の切り抜き画像を含めて、 エンティティです。
