リスト

リストは、1 つ以上の関連アイテムを視覚的に表したものです。通常、オプションのコレクションを表示するために使用されます。

リソース

タイプ	リンク	ステータス
デザイン	デザインソース（Figma）	利用可能
実装	Jetpack Compose	利用可能

ハイライト

• リストは、テキストまたは画像の連続したコレクションです。
• リストは自然で、スキャンしやすいものにする必要があります。
• リストは、アイコンとテキストで表されるメインアクションと補足アクションを含むアイテムで構成されています。

バリエーション

リストには、1 行リスト、2 行リスト、3 行リストの 3 種類があります。

1. 1 行リスト: 各項目を 1 行で伝えます。このシンプルなデザインにより、各アイテムが明確に区別されます。
2. 2 行リスト: 2 つの平行線を使用して各アイテムを伝えます。この構造化された設計により、自然な読みやすさを確保し、認知的オーバーロードを回避できます。
3. 3 行リスト: 3 つの平行線を使用して各アイテムを表します。この装飾的なデザインは、視覚的な目立ち度を高めます。

解剖学

1. アイコン: 特定のオブジェクトやアクションを表す小さなグラフィック。アイデアやコンセプトを視覚的に伝えるためによく使用されます。
2. オーバーライン: タイトルやサブタイトルの上に表示される短い行のテキスト。コンテキストの追加や強調によく使用されます。
3. タイトル: デザイン要素またはページのメイン ヘッダーとして機能する、太字の大きなテキスト行。
4. サブタイトル: メインタイトルの下に表示される、追加情報やコンテキストを提供する小さい行のテキスト。
5. コントロール: ユーザーが意思決定を入力できるインタラクティブな要素。

状態

仕様

使用方法

リストは、テキストと画像の縦方向に配置されたグループです。読解力向上を目的としたリストは、アイテムが連続した 1 つの列で構成されています。リストアイテムには、アイコンとテキストで表されるメインアクションと補助アクションを含めることができます。

選択コントロール

コントロールには、リストアイテムの情報とアクションが表示されます。リストアイテムの先端または後端に配置できます。

1. チェックボックス: リストアイテムを 1 つ以上選択します。
2. ラジオボタン: リストから 1 つの項目のみを選択します。
3. スイッチ: コントロールのオンとオフを切り替えます。

アイコン

アバターと画像

リストアイテムには、人物やエンティティを表す円形の切り抜き画像を含めることができます。