Dictionary

役割と種類

商品やユーザーなど、あるオブジェクトの集合とInteractiveにやりとりするために使用します。オブジェクトの集合名を明示的に示したい場合は簡潔なTitleを付けます。また、Interactive Listを構成するItemはLeading、Body、Trailingを組み合わせて、対象オブジェクトの情報を適切に伝達します。配置する順番はデフォルトでは左から右ですが、右から左への言語の場合は反転する必要があります。

Leading

Bodyの始まりにつく要素です。アイキャッチ及び、CheckboxやRadioなどの対象オブジェクトの情報を視覚的に把握するための要素を内部に配置します。

Avatar

ユーザーオブジェクトを扱う場合に使用します。アバター画像をアイキャッチにするとユーザーを識別しやすくなります。

Media

Thumbnail

商品オブジェクトなど、画像をアイキャッチとしてオブジェクトを識別しやすくしたい場合に使用します。

Icon

オブジェクトを表象・識別しやすくなる場合に使用します。

Checkbox

Listの中から複数のItemを選択できるようにする場合に使用します。タップターゲットはCheckboxだけではなく、Item全体になります。

Radio

Listの中からどれか一つのItemを選択できるようにする場合に使用します。タップターゲットはRadioだけではなく、Item全体になります。

Body

Itemの本体です。Title及びDescriptionといった対象オブジェクト主要な情報を配置します。

Title

商品名、ユーザー名など対象オブジェクトの最も主要な情報を2行まで表示できます。2行以上になった場合は三点リーダーで省略されます。

Description

在庫数、価格、ユーザーIDなど対象オブジェクトの副次的な情報を2行まで表示できます。2行以上になった場合は三点リーダーで省略されます。

Trailing

Bodyの終わりにつく要素です。Chevron Right IconやDrag Handle Icon、Checkboxなど、対象のオブジェクトが特定のインタラクションを誘発することを示す要素を内部に配置します。

Chevron Right Icon

画面遷移できることを示します。タップターゲットはChevron Right Iconだけではなく、Item全体になります。

Drag Handle Icon

並び替えできることを示します。タップターゲットはコンテキストに応じてDrag Handle Iconのみの場合とItem全体の場合があります。

Checkbox

Listの中から複数のItemを選択できます。タップターゲットはCheckboxだけではなく、Item全体になります。

いつ使うべきか / 使わないべきか

Listを使用したほうがよい場合

オブジェクトの集合とユーザーがInteractiveにやりとりする必要がない場合はListの使用を検討します。

Cardを使用したほうがよい場合

画像が対象オブジェクトを表すメインの情報になる場合はCardの使用を検討します。また、モバイルサイズの場合はInteractive Listの方が情報が伝わりやすいが、デスクトップサイズのときはCardの方が情報が伝わりやすい場合は、画面サイズに応じてCardへ変換するパターンも検討します。

Interactive Tableを使用したほうがよい場合

表形式で表示したほうが対象オブジェクトの情報が伝わりやすい場合はInteractive Tableの使用を検討します。

異なるオブジェクトを同じInteractive List内に混在させない

商品オブジェクトとユーザーオブジェクトなど、異なるオブジェクトを同じInteractive Listに混在させることはできません。

表示すべき情報を推敲する

一度にたくさんの情報が表示されていてもユーザーは処理しきれません。情報量が多い場合は適切な詳細画面を用意します。また、画面サイズの違いに応じて、表示する項目を増やしたり減らしたりすることも検討します。

Interactive List間にはDividerを使用する

Interactive Listが複数並ぶ場合はInteractive List間の区切りをわかりやすくするためにDividerを使用します。

Interaction

画面遷移を行う

対象オブジェクトの詳細画面へ遷移を行います。

選択する

Checkboxを用いてオブジェクトの集合から対象のオブジェクトを複数選択することができます。また、Radioを用いてオブジェクトの集合から対象のオブジェクトを一つ選択することができます。

左スワイプでアクションを選択する

モバイルアプリケーションでは左スワイプを行うことで、対象オブジェクトへのアクションを選択できます。ただしこのジェスチャーは不可視トリガーなので、必ず行わなければならないような主要アクションをこの中にのみ配置することはできません。

並べ替えを行う

デスクトップはドラッグ、モバイルは長押し＆ドラッグでItemを並べ替えられます。

Style

Cellを継承しています。

外観

Density

密度を決定します。Listの長さを加味して Dense / Normal / Comfort から適切なDensityを選択します。

Line

行数に応じた適切なスタイルを決定します。

Single

Bodyの中に1行のTitleのみがあるときはSingleになります。

Multi

Multiになると、Leading及びTrailing内のElementの揃え位置が変化します。Bodyの中にTitleとDescriptionを含む場合はMultiになります。また、Titleが2行になった場合もMultiになります。

State

Overlay Colorを重ねて状態を表現します。

Enabled

特に何もアクションしていないデフォルトの状態です。

Hover

上にHoverのOverlay Colorを重ねて選択しようとしていることを示します。

Focused

上にFocusのOverlay Colorを重ねてフォーカスされていることを示します。

Selected

CheckboxやRadioなどがSelectedになっているときに対象のItemが選択されていることをわかりやすくします。上にSelectedのOverlay Colorを重ねて選択されていることを示します。

Activated

Navigationなどで該当する項目がアクティブになるような画面にいるときにアクティブなことがわかりやすくします。上にActivatedのOverlay Colorを重ねてアクティブであることを示します。

Dragged

DragしているときにはDraggedのOverlay Colorを重ね、Elevationを変化させて、Dragしている状態をわかりやすくします。

Disabled

透明度を上げて、インタラクションが不可能なことを示します。

注意点

余白が視覚的に均等に見えるようにInteractive Listの上下に余白を取る

Listに背景色があるので、下にPaddingをとらないと上下が視覚的に詰まってしまうため、上下に適切な余白を取ります。

画面サイズが大きい場合は適切な最大幅やオフセットを設ける

Interactive Listの外側の領域の最大幅を調整せずにInteractive Listを極端に拡大しないでください。コンテンツの可読性が落ちる可能性があります。

ペインでの分割表示も検討する

デスクトップサイズ、タブレットサイズなど画面サイズが大きいときは詳細画面へ遷移するのではなくペインでの分割表示も検討します。