List Controls

list-controls.png

List controlsは、左側か右側にアイコンがあって、テキストが並んでるものです。
要はアイコン付き箇条書き項目です。
それが、何かの状態を示したり、何かの情報をユーザーに与えたり、何かこの箇条書きに関連したアクションをユーザーに与えたりします。

使い方

List controlsは4つにカテゴリ分けすることが出来ます。
名前 置く場所
State(状態) CheckBox 左側
Primary action 文字、CheckBox 左側
Secondary action Button,CheckBox,Switch,並び替えアイコン,折りたたみボタン 右側
Secondary info 右側

Statesprimary actionsはリストタイトルの左側に置きます。
Secondary actionSecondary infoはリストの右側に置きます
list itemの文字はprimary action targetの一部と考えられます。

Don't

絵のあるアイコン同士は隣り合わせにしないでください
たとえば、アバターアイコン画像の隣にチェックボックスがあるとかがダメということです。

もしlist itemのprimary actionがナビゲーションの役割をしているなら、アイコン(画像)は使わないでください。
list itemそれ自体と、その文脈はある目的に向かって、ユーザーとアプリが意思疎通するのに十分であるべきです。

各要素の置き場所

Secondary actionsinfoはタイトルの右側に置きましょう。
Secondary actionsはつねに、ターゲットとprimary actionを分け隔てるようにしましょう。
どのアイコンも押せば何かのアクションが起こる、とユーザーがどんどん期待を増していくことになります。

まとめ

Statesprimary actionsはlist titleの左側に置きましょう。
Secondary actioninfoはlist titleの右側に置きましょう

list controlsのタイプ

Checkboxタイプ

Checkboxはprimary actionsecondary actionstateになり得ます。

Type: primary action/stateのとき

デスクトップのcheckboxはマウスホバーかフォーカスしたときにだけ登場すべきです。
CheckBoxはlist itemのprimary actionでかつstate indicatorつまり状態を示唆するものです。
type1.png

Type: secondary actionのとき

ターゲットを分離しましょう。
変数の家族をコントロールするときは代わりにSwitchを使うことを検討しましょう。
CheckBoxはlist itemのsecondary actionです。
type2.png

Switch

Type: secondary action
Separate target
switchはsecondary actionでターゲットを分離します。
switch.png

Reorder並び替え

Type: secondary action
普通はターゲットを分離します。listがどんなモードで存在するのかによりけりです。
並び替えリストなのでlist itemはドラッグ可能です。
ドラッグ可能なのは、普通はlistが編集モードになったときです。
並び替えのアイコン(reorder icon)はsecondary actionです。
reorder.png

Expand/collapse(折りたたみ可能リスト)

Type: secondary action
Separate target
折りたたみ可能リストは、折りたたみボタンを押すと詳細部を出したりしまったりできるリストです。
collapse.png expand.png

Leave-behinds

Type: その他
leave-behindとは、スワイプするとlist itemをどこかへ飛ばして消すことのできるやつです。
list itemをスワイプすると、左右どちらかの方向で、何かゴミ箱など消すことができますよ〜と示唆するようなアイコンが出てきます。
スワイプした後は、follow-up actionが出てきます。
leave1.png leave2.png

menu controls

メニューはlistの特別なタイプとして見ることができます。
メニューの中ではドロップダウンメニューに相応しいコントロールを使います。
オーバーフローメニューなどです。

Don't

オーバーフローなどのコントロールを普通のlistには使わないでください。
こういう場合は普通のlist controlsを代わりに使用してください。
Use the regular list controls instead.

Checkタイプのメニューリスト

Type: state

Not a separate target.

Menus only. Indicates that the list item has been selected. The selection is done through a different control.

The check indicates that the list item has been selected.
Inline information

Type: secondary info

Not a separate target.

Menus only. Inline information is a small snippet of text related to the line title that can provide information or a tip, like a keyboard shortcut. It cannot be truncated.

The inline information for Bold, Italic and Underline provide keyboard shortcuts.
Nested menu indicator

Type: primary action

Not a separate target.

Menus only. The glyph indicates that a secondary menu will fly out upon hover, focus, and/or selection.

The glyphs for the menu items indicate that a secondary menu will fly out upon hover, focus, and/or selection.

サポートサイト Wikidot.com