Dictionary

役割と種類

商品やユーザーなど、あるオブジェクトの集合とInteractiveにやりとりするためのTableです。一番上にHeadingを組み合わせたRowを配置し、その下にDescriptionを組み合わせたRowを垂直に並べて構成します。Row内のHeadingやDescriptionを配置する順番はデフォルトでは左から右ですが、右から左への言語の場合は反転する必要があります。

Heading

HeadingのRowとDescriptionのRowの区切りをわかりやすくするため、下にPrimaryのStrokeを引きます。Stickyの場合は上部に固定されます。

Text

AlignをStart / Endから選択できます。デフォルトでは左揃えですが、右から左への言語の場合は反転する必要があります。扱うデータが数値型の場合はEndにしたほうが可読性が高まるためEndにすべきです。見出しの役割を果たし、Descriptionと視覚的に差別化するため、Font WeightはBoldにします。テキストが長くなった場合は三点リーダーで省略します。

Text with Sort Button

AlignをStart / Endから選択できます。デフォルトでは左揃えですが、右から左への言語の場合は反転する必要があります。扱うデータが数値型の場合はEndにしたほうが可読性が高まるためEndにすべきです。また、Arrow Downward IconのButtonをタップすることで、昇順 / 降順を回転のアニメーションで切り替えることができます。Startの場合はArrow Iconは最後につけ、Endの場合は最初につけます。見出しの役割を果たし、Descriptionと視覚的に差別化するため、Font WeightはBoldにします。テキストが長くなった場合は三点リーダーで省略します。

Checkbox

Alignは常にCenterです。false / true / mixed から選択します。mixedはSelectedが混在していることを表します。

Description

Description Row同士の区切りをわかりやすくするため、下にSecondaryのStrokeを引きます。

Text

AlignをStart / Endから選択できます。扱うデータが数値型の場合はEndにしたほうが可読性が高まるためEndにすべきです。テキストが長くなった場合は三点リーダーで省略します。

Button

Buttonを配置できます。対象のオブジェクトを操作するのに使います。

Checkbox

Alignは常にCenterです。false / true から選択します。

Image

Alignは常にCenterです。商品オブジェクトなど対象のオブジェクトがアイキャッチ画像によって識別しやすくなると考えられる場合に使用します。

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

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

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

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

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

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

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

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

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

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

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

Interaction

ページ遷移・ビュー展開

対象オブジェクトの詳細ビューを開きます。

ページ単位での遷移と、ページ遷移を伴わないビュー展開の2パターンがあります。それぞれのトリガー・クリッカブル領域は適切に選択します。

Tableから右側に詳細ビューとなるペインを展開するようなマルチペインUIの場合

元のコンテクストと展開後のコンテクストが密接で、かつマルチペインであれば詳細ビューを展開したままモードレスにTableでの操作も行えます。そのため、操作の誤りに対する意識は希薄になります。詳細ビュー展開の操作効率を向上させるため、行全体をクリッカブルなトリガーとします。

Tableから対象オブジェクトの詳細ページへ遷移するようなハイパーリンクベースなUIの場合

遷移前はTable全体での操作に最適化し、遷移後はオブジェクトの詳細ページを別で切り分ける設計の場合、遷移前と後でコンテクストに隔たりがあります。その違いを自然に学習できるよう、また遷移前のTable全体における操作をコンテクスト切り替えの遷移トリガーが阻害しないよう、行の中の一部（セルやセル内のリンク）のみを詳細ページへの遷移トリガーとしてクリッカブルにする設計を検討します。

コレクションビューとシングルビューの関係を率直に表現したUIの場合

コレクションビュー「契約商品」とシングルビュー「詳細」をドリルダウン式に行き来できるUIのモックアップです。

コレクションビューでは列ヘッダーからのフィルター・ソートといったテーブル操作の他に、オブジェクト行のアクションとしては行全体のクリックによるシングルビューへの遷移を行います。

シングルビュー側に「契約期間の変更」「サブスクリプション解除」など低頻度・破壊的なアクションを配置することで、コレクションビュー側は行全体をクリックしてシングルビューへ遷移するアクションのみに絞り込むことができます。

モバイル端末では横スクロールと行のタップが競合する可能性がありますが、実際の使用においては大きな問題にはなりません。そのため、行全体をタップする設計を採用できます。

遷移先のシングルビュー側でより詳細な情報の表示やアクションの実行を行い、コレクションビュー側ではオブジェクトの一覧表示とシングルビューへの遷移のみを行うケースでは、オブジェクトの集合としてのコレクションビューであることを直接的に表現するため、行全体を1つの操作単位として扱うことが適切です。

「契約期間」など行の中の各属性については遷移先のシングルビュー側で操作するようにし、コレクションビューのアクションをシンプルに保つ設計例です。

選択

Checkboxを用いてオブジェクトの集合から対象のオブジェクトを複数選択することができます。Description側にSelectedとそうではないものが混在している場合、HeadingのCheckboxはmixedになります。

一括選択

HeadingのCheckboxにチェックを入れることで、Description側のCheckboxを一括でチェックすることができます。

並べ替え

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

Assets