跳到正文

选中高亮

Selection

初级通用

选中高亮(Selection)是用户选中一段文字或一个界面项目后,界面用颜色等变化标出选中范围的状态。它帮你看清当前选中了什么,例如在文档里拖选文字后,知道复制会作用于哪一段。

你可能会说:「我想让用户用鼠标选中内容后,能明显看出选中了哪一段或哪几项。」

动手看看

产品更新草稿
这次迭代先完成
账户安全设置
,再补齐通知偏好。
相关页面
账户安全设置
通知偏好
当前选中对象

切换「当前选中对象」比较三种状态;也可以在段落里拖选文字、悬停或按住页面项,看看这些反馈有什么区别。

高亮只盖住「账户安全设置」,让你知道复制这段摘录会涉及哪些字。手动拖选时,也能看到浏览器真实的文字选区。

要点

  1. 1

    高亮跟着选中范围变化

    你在文档里拖选文字时,高亮覆盖的是实际选中的字符;调整选区,高亮也跟着变。因为后续复制、删除或格式化通常作用于选区,所以范围显示得准很重要。

  2. 2

    文字与项目的选中方式不同

    网页文字通常由浏览器处理选区;文件列表、表格行等项目则常由产品自己管理选中状态。你让 AI 实现时,最好说清楚选的是文字,还是整个项目,以及能否多选。

  3. 3

    颜色变化也要保留可读性

    高亮的目的不是把背景涂亮,而是让你认出选中范围。比如表格行选中后,文字和图标仍要看得清;如果只靠细微色差,用户可能分不出哪些行会被批量操作。

容易混淆的地方

选中高亮标记的是已经选中的内容,不等于悬停:鼠标划过一行,即使它变色,也不代表这行进入了批量操作范围。它也不同于聚焦:输入框有光标,表示键盘输入会落在那里,但框里的文字未必被选中。你可以用这两个区别判断 AI 有没有把状态做混。

什么时候用

适合用

  • 做在线文档时,让用户拖选文字后看清选区,再执行复制或设置格式。
  • 做文件管理器时,让用户看到当前选中的文件,以及批量删除会影响哪些文件。
  • 做后台表格时,在用户选中多行后持续标出这些行,方便核对批量操作范围。

不适合用

  • 只是想提示鼠标当前划过哪张卡片时,用悬停反馈更合适,不必把卡片设为选中。
  • 只是想指出键盘接下来会操作哪个输入框时,用聚焦状态,不必选中框内文字。
  • 只是想强调一条重要公告时,用警告提示或视觉层级;它不是用户选中的内容。

练一练

你在做一个后台文件列表。用户勾选两份文件后,把鼠标移到第三份文件上。此时哪些文件该显示选中高亮?

让 AI 帮你做

请为文件列表实现选中高亮:点击一项选中它,按住常用的多选修饰键点击可增减选中项。已选项保持可辨认的高亮,鼠标悬停只显示临时反馈,不改变选中集合;批量操作只作用于已选项。

接下来学什么