选择是指用户如何指出他们打算采取行动的具体项目。

Selection refers to how users indicate specific items they intend to take action on.

特性

用法

Item selection allows users to apply actions to selected items.

交互

Touch devices

On touch devices, select items using:

• A long-press touch or two-finger touch
• A selection shortcut, if available, such as tapping an avatar

Desktop

On desktop, items with checkboxes shouldn’t display their checkboxes by default (or permanently) unless item selection is the primary activity in the UI. Instead, checkboxes (or similar indicators) should only be displayed:

• On hover, as a single checkbox for that item
• Upon selection of the first item, after which checkboxes are displayed for remaining items in that set

Item selection

Selecting items (mobile)

Entering selection mode

To select an item and enter selection mode, long press the item or use a shortcut, such as tapping the item’s avatar. To select additional items, tap each of them.

Exiting selection mode

To exit selection mode, tap each selected item until they’re all deselected, or tap an action on the toolbar.

Larger selections

To select multiple items simultaneously, use a long press and drag gesture across items. However, don’t use this gesture for selection if your app already uses this gesture to pick up and move items (like cards).

On touch devices, select an item by pressing and holding it.

Once an item is selected, tap the item to toggle its selection state.

Users may long press and drag across multiple items to quickly select them.

Selecting items (desktop)

To make a selection, hover over an item to reveal a checkbox. The checkbox can then be clicked. On desktop, clicking a checkbox selects an item.

Indicating selected elements

To indicate selection, display a check mark and scrim over the selected item or its avatar. Do
Check marks replace icons or avatars if there is space. For smaller items, use compact checkmarks to avoid obscuring content.

Don’t
Selected items should be distinct from unselected items. A darker scrim, or an additional signifier, such as a check mark, would better differentiate selected items.