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