模式 选择

选择

选择使用户能够通过手势和视觉提示做出选择。

复选框表示完成,例如勾选列表中的项目。

文本选择由一段高亮的文本来表示。

选择类型

项目选择
文本选择

选择手势
  • 在同一位置长按、触摸或按住鼠标不放
  • 双指触摸(仅限触摸设备)
Material Design 中的“选择”通过手势或视觉提示帮助用户选择

用法 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

选择手势

用于选择数据的全局手势是:在同一位置长按、触摸或按住鼠标不放。在触摸设备上,双指触摸也可以触发选择。

复选框(建议用于桌面端)

复选框或自定义的类似组件,应仅用于表示完成任务,例如勾选列表中的项目。

复选框行为:

  • 将鼠标悬停在某个项目上时,为该对象显示一个复选框
  • 选中一个项目后,显示该集合中所有剩余项目的复选框

避免将复选框作为每个项目的固定组成部分持续显示。

项目选择 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

项目选择允许用户对选中的项目执行操作。

选择项目

在触摸设备上,可以通过长按选择项目。

要退出选择模式,请取消选择所有项目,或使用工具栏对已选项目执行操作。

在触摸设备上,通过长按选择一个项目。

切换选择状态

点击项目可在选中和未选中状态之间切换。

长按并拖动光标以选择多个项目。

选中项目后,点击该项目可切换其选中状态。

用户可以长按并拖动光标来选择多个项目。

桌面端

在桌面端切换选择状态时,将鼠标悬停在项目上以显示可点击的勾选标记。

在桌面端,用户可以点击并拖动复选框来选择多个项目。

指示选择

要指示项目已被选中,请显示与该项目或其关联头像重叠的勾选标记和半透明遮罩。

如果空间允许,可用勾选标记替换图标或头像。

使用紧凑的勾选标记,尽量减少对显示内容的遮挡。

.

文本选择 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

文本选择通过高亮一段连续的文本来指示。

在移动设备上,选中的文本开头和结尾各有一个选择手柄。与文本相关的操作会显示在紧贴选择区域上方但不重叠的下拉菜单中。

调整所选文本

用户可通过以下方式调整选中的文本:

  • 拖动初始选择以扩展范围
  • 拖动任一选择手柄来扩展或缩小选择范围
  • 在选中的文本内重复触摸(或点击)以扩展范围(选择将在单词、段落和全文之间切换)
  • 键盘快捷键(见表格)

键盘快捷键

结果

Shift+左/右方向键

逐字符选择

Shift+上/下方向键

逐行选择

Ctrl/Command+A

全选

文本选择快捷键可用于更改选择范围。

文本选择手柄

Material Design 中的文本选择手柄示例

文本选择手柄示例

Material Design 中的文本选择手柄示例

文本选择手柄示例

颜色和对比度

文本选择元素可使用调色板中的强调色。

选中的文本应清晰易读,与背景颜色对比明显。此外,也可以通过轮廓、文本样式处理、动效或勾选标记图标来指示选中的文本。

webaim.org了解更多关于对比度的信息(或使用颜色对比度检查器)。

Material Design 中的颜色和对比度选择
  1. 文本选择颜色
  2. 文本
  3. 背景
Material Design 中自定义调色板的强调色

文本选择可使用调色板中的强调色进行自定义。

文本选择 - 亮色主题

Material Design 中的文本选择 - 亮色主题

文本选择 - 亮色主题

文本选择 - 暗色主题

Material Design 中的文本选择 - 暗色主题

文本选择 - 暗色主题

文本选择工具栏

浮动工具栏出现在选择区域上方,包含剪切、复制、粘贴及更多主要操作。当用户点击更多图标时,工具栏会折叠并转换为二级菜单以显示其他操作。

浮动工具栏文本使用 Roboto Medium 字体,大小为 14sp,并全部大写。

Material Design 下拉菜单:剪切、复制、粘贴等操作

选择区域上方的下拉菜单显示剪切、复制、粘贴和更多操作。

Material Design 选择工具栏中的更多操作

更多

Material Design 中的菜单转换显示溢出项

当用户选择更多时,菜单开始转换以显示溢出项。

Material Design 中的溢出菜单选项:分享、搜索和翻译

溢出菜单项包括:分享、搜索和翻译

Material Design 中的文本选择规格

文本选择

下拉菜单高度:44dp
下拉菜单文本顶部内边距:12dp
下拉菜单文本底部内边距:14dp
下拉菜单文本左侧内边距:24dp

下拉菜单项之间的间距:32dp
所选文本顶部内边距:8dp

展开图标右侧内边距:16dp

展开图标左侧内边距:22dp
展开图标上下内边距:10dp
文本选择手柄:22 x 22dp