List

テキストまたは画像の連続したグループや、特定の文脈から抽出された一連の項目を並べるときに使用します。

基本パターン

Listは、取り扱う情報やアクションによってパターンが分かれます。 Listの種類を把握し、正しくListコンポーネントを使用しましょう。

リンクリスト

リストアイテムの内容が遷移先のページのタイトルまたは見出しとなっている。

例: 汎用的なメニュー、等。

アクション付き情報リスト

リストアイテムの情報を表示し、それに対するアクションを表示する。

例: ToggleSwitchのある設定画面、開閉メニュー、等。

アクションリスト

リストアイテムのラベルがアクション名となっており、左の見出しに対して右のアイコンが関連付いている。

例: もっと見る、等。

情報リスト

リストアイテムから遷移やアクションができず、リストアイテム内で情報が完結している。

例: データテーブルビュー、等。

概要リスト

リストアイテムの内容が遷移先のコンテンツの概要となっている。

リストに置かれる要素

サムネイルや、アイコンList内に置かれる様々なオブジェクトは、Listの左右どちらに置かれるかによってユーザーの認知を大きく左右します。

Listの主題となるものを左、主題に対してオプションとして置かれる要素を右へと置くようにします。

Collection List（表示系リスト）

ある主題に対して一貫性のある情報を羅列した画面をCollection Listと呼びます。

Normal

見出しに対して遷移を行えるだけの一番シンプルなリストです。

Class Icon

左にアイコンが付くことによって、リストの示す内容をより分かりやすく表示されたリストです。

見出しでリストの示す内容が十分にわかる場合は必要ありません。

Instance Icon

Thumbnailを付けることによって、リストの示す内容をさらに具体的にしたリストです。

Data Table View

遷移が行われないリストで、List内で情報が完結しています。見出しに対して右のラベルが解を返すような構造になっています。

Collection List（操作系リスト）

リスト自体に遷移以外のアクションが付随するリストです。

Toggle

スイッチをその場で切り替える状況において使用するトグルスイッチのついたリストです。

Radio Button

複数項目からいずれか一つを選択するときはラジオボタンのついたリストを使用してください。

Checkbox

同時に複数の選択をする時はチェックボックスを使用してください。文脈によってレイアウトが変わります。

Selection

ドロワーメニューのように、選択状態を維持したいリストです。

選択・非選択状態は、色以外のborderの太さや背景スタイルなどで変化をつけるようにします。

参考: 1.4.1 色だけで伝えない - Ameba Accessibility Guidelines

Visited

未読既読コンテキストを強調したいテキストリンクのみ適用します。

Add

タップによって、リスト前後にある要素を「〜に追加する」というアクションを行うリストです。

Delete

リストをスライドして削除するインターフェースは、スワイプ操作に依存せず、代替操作ができる前提で使用してください。

Transition

見出しがなく、ほぼボタンのように使用される遷移専用のリストです。

Accordion

Listを展開、折り畳むことによって省スペース化を図るためのListです。

レイアウト

Listにおける余白やサイズ、構成要素の規定です。

Height

Listの高さは内部要素に比例して変更されます。高さは原則として4の倍数にしてください。

Flexible Height

内容が可変し、かつ全てのテキストを掲載する必要がある場合は、リストの高さも固定値ではなく可変にする必要があります。

Padding

Listは同じ構成要素が反復するため、適度な余白を維持しないと可読性や情報取得のテンポが悪くなります。要素によって最適な余白を取るようにしてください。

Border

Borderは情報の区切りを明瞭にするため使用します。 しかし、情報量が過密にならないよう、必要十分なBorderを意識して配置してください。

Text

Listを構成する要素として最も代表的なものがテキストであり、グルーピングを意識して配置する必要があります。

アクセシビリティ

操作

色とコントラスト

レイアウト

ライティング

実装