D1.12.3Selection and focus设计研究

选中表示被选定的对象,可与焦点同时或分离存在

别名: selection state · focus state · active item · keyboard selection

概念解释

选中与焦点(selection and focus)是两种可独立存在的状态:选中表示对象已被纳入当前选择集合、范围或将受批量命令影响;焦点表示下一次键盘命令会落到哪个元素。单选列表中两者可能重合,看起来像同一个高亮;多选列表、文件管理器、表格和编辑器中,焦点可以在未选对象之间移动,选中集合也可以在焦点移走后保留。理解这一分离,是避免把「当前光标所在」误当作「所有将被操作的对象」的基础。

机制

焦点是即时的输入路由,通常只有一个;选中是持久的对象状态,可有零个、一个或多个。将它们绑定会限制键盘浏览:用户无法检查未选项而保留批量选择,或一移动焦点就意外改动选择。将它们完全不相关又会让用户失去上下文,因此需要清楚的视觉层级说明焦点落在哪个项目、选择集合包含哪些项目、命令究竟作用于何者。不同组件的规则若不一致,用户会把一处学到的操作模式错误迁移到另一处。

怎么研究

用表格、树和文件列表设计任务:先选择多个对象,再用键盘浏览、扩展选择、执行批量命令和返回;测量用户对命令目标的预测、意外取消选择、错误批量操作和恢复。测试要包含鼠标点击、Shift/Control 类扩展选择、方向键移动及焦点进入/离开组件,因为这些路径最容易暴露状态关系。询问用户「哪些会被删除、哪个会接收按键」可直接检验语义是否被理解。

边界

不是每个组件都需要独立选择集合。普通按钮、单字段输入和只允许一个当前值的简单控件可以让焦点与当前值紧密关联,额外的选中概念反而多余。反之,支持批量、范围、暂存或多视图编辑的组件不能借「简单」隐藏分离状态。屏幕阅读器和键盘用户对焦点与选中关系尤其依赖语义暴露,不能只靠颜色推断。

怎么落地

  • 明确组件中焦点移动是否改变选择、扩展选择如何发生、批量命令读取哪个集合,并在不同输入路径保持一致。
  • 用可并存的视觉线索区分焦点边界和选中填充/标记,让用户在多选后仍能找到键盘落点。
  • 在命令执行前显示选择数量、范围或对象摘要,避免焦点移动后用户误以为目标集合改变。
  • 用「选择三项后移动到第四项再删除」等任务验收;用户应能预测第四项是否受影响,并能在不丢失选择的情况下继续浏览。

延伸

  • 同组D1.12.1 焦点表示键盘操作的当前位置,与鼠标位置无关 · D1.12.2 悬停仅存在于指针设备,触屏与键盘操作没有悬停态 · D1.12.4 三态样式过于相似时用户无法判断当前的操作模式
  • 相邻D1.03 选中态与高亮 · D1.04 焦点指示环
  • 站内检索selection state · focus state · keyboard selection

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/D1.12.3