选中高亮
Selection
初级通用选中高亮(Selection)是用户选中一段文字或一个界面项目后,界面用颜色等变化标出选中范围的状态。它帮你看清当前选中了什么,例如在文档里拖选文字后,知道复制会作用于哪一段。
你可能会说:「我想让用户用鼠标选中内容后,能明显看出选中了哪一段或哪几项。」
动手看看文档摘录与页面选中
产品更新草稿
这次迭代先完成
账户安全设置
,再补齐通知偏好。
相关页面
账户安全设置
通知偏好
当前选中对象
切换「当前选中对象」比较三种状态;也可以在段落里拖选文字、悬停或按住页面项,看看这些反馈有什么区别。
高亮只盖住「账户安全设置」,让你知道复制这段摘录会涉及哪些字。手动拖选时,也能看到浏览器真实的文字选区。
要点选中高亮到底在标记什么?
- 1
高亮跟着选中范围变化
你在文档里拖选文字时,高亮覆盖的是实际选中的字符;调整选区,高亮也跟着变。因为后续复制、删除或格式化通常作用于选区,所以范围显示得准很重要。
- 2
文字与项目的选中方式不同
网页文字通常由浏览器处理选区;文件列表、表格行等项目则常由产品自己管理选中状态。你让 AI 实现时,最好说清楚选的是文字,还是整个项目,以及能否多选。
- 3
颜色变化也要保留可读性
高亮的目的不是把背景涂亮,而是让你认出选中范围。比如表格行选中后,文字和图标仍要看得清;如果只靠细微色差,用户可能分不出哪些行会被批量操作。
容易混淆的地方
选中高亮标记的是已经选中的内容,不等于悬停:鼠标划过一行,即使它变色,也不代表这行进入了批量操作范围。它也不同于聚焦:输入框有光标,表示键盘输入会落在那里,但框里的文字未必被选中。你可以用这两个区别判断 AI 有没有把状态做混。
什么时候用
适合用
- 做在线文档时,让用户拖选文字后看清选区,再执行复制或设置格式。
- 做文件管理器时,让用户看到当前选中的文件,以及批量删除会影响哪些文件。
- 做后台表格时,在用户选中多行后持续标出这些行,方便核对批量操作范围。
不适合用
- 只是想提示鼠标当前划过哪张卡片时,用悬停反馈更合适,不必把卡片设为选中。
- 只是想指出键盘接下来会操作哪个输入框时,用聚焦状态,不必选中框内文字。
- 只是想强调一条重要公告时,用警告提示或视觉层级;它不是用户选中的内容。
练一练选一个答案,看看解释
你在做一个后台文件列表。用户勾选两份文件后,把鼠标移到第三份文件上。此时哪些文件该显示选中高亮?
让 AI 帮你做复制给 AI Agent 直接用
请为文件列表实现选中高亮:点击一项选中它,按住常用的多选修饰键点击可增减选中项。已选项保持可辨认的高亮,鼠标悬停只显示临时反馈,不改变选中集合;批量操作只作用于已选项。