模式 选择

选择

「选择」让用户可以通过手势和视觉提示进行选择。

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

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

选择的类型

项目选择
文本选择

选择的手势

  • 在长按、轻触或在鼠标点击,并在同一个位置保持片刻。
  • 双指轻触(仅限触屏设备)

用法 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

选择的手势

在长按、轻触或在鼠标点击,并在同一个位置保持片刻,这是选择数据的全局手势。在触屏设备上使用双指轻触也可以触发选择。

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

复选框、或自定义的类似组件,应当仅用于指示完成,例如核对清单。

复选框行为:

  • 在鼠标悬浮的项目上显示一个复选框。
  • 选中一个项目后,在集合中其他项目上也都显示复选框。

避免把复选框作为项目的一部分持续显示。

项目选择 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

项目选择允许用户将操作应用到已选项目上。

选择项目

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

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

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

选中和取消

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

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

点击已选项可以切换选择状态

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

桌面端

在桌面端,将鼠标悬浮在项目上会显示该项目的复选框,点击后可以切换选择状态。

在桌面设备上,用户点击并在复选框之间拖拽可以选择多个项目。

指示选择

在项目的头像或内容部分加上一个遮罩并显示对号来表示该项目已被选中。

如果图标或头像与内容之间有空隙,在选中的项目上用对号来替代头像或图标

使用紧凑型复选标记来减少对显示内容的遮盖。

.

文本选择 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

通过高亮一段文字来指示文本选择。

在移动设备上,会在选中的文字的开头和结尾各加上一个选择句柄,关的操作会显示在一个浮动菜单中,浮动菜单会紧挨在文本上方,不会遮住文本。

调整所选文本

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

  • 拖动刚刚被选中的文本来展开它
  • 拖动其中一个选择句柄来扩大或缩小选择范围
  • 在选中的文本内轻触(或点击)两此来展开它(选择将在单词、段落和全文之间切换)
  • 键盘快捷键(见表格)

键盘快捷键

结果

Shift + ◀︎

逐字选择

Shift +

逐行选择

CtrlCommand + A

全选

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

文本选择句柄

文本选择句柄示例

文本选择句柄示例

颜色和对比度

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

选中的文字应当清晰可辨,与背景色有充分的对比。也可以通过显示轮廓、文本解释、动画、或复选标记来指示选中的文本。

了解更多有关对比度的信息,请参考(或尝试一下颜色对比度分析webaim.org

  1. 文本选择的颜色
  2. 文本
  3. 背景

可以使用调色板中的强调色来自定义文本选择

文本选择 - 亮色主题

文本选择 – 亮色主题

文本选择 – 暗色主题

文本选择 – 暗色主题

文本选择工具栏

浮动工具栏出现在选择区域的上方,包含剪切、复制、粘贴及更多主要操作。当用户选择更多图标时,工具栏将折叠并进入次级菜单来显示其他操作。

浮动工具栏的字体为 Roboto Medium 14sp,全部大写。

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

更多

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

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

文本选择

工具栏高度:44dp
工具栏菜单文本文本上边距:12dp
文本下边距:14dp
文本左边距:24dp

文本之间的距离:32dp
选中文本上边距:8dp

扩展图标右边距:16dp

扩展图标左边距:22dp
扩展图标上下边距:10dp
文本选择手柄:22x22 dp