C2.14.2Non-overlapping expanded hit areas设计研究
外扩后的命中区不得互相重叠
别名: 命中区重叠 · 触摸目标 · 外扩
概念解释
小控件外扩命中区提高可触性,但外扩后的命中区不得互相重叠。重叠让同一个触点对应多个命令,系统只能以层级、最近距离或实现顺序裁决;用户无法从视觉上预测哪个会执行,误触变成不可解释的随机性。
机制
命中测试通常按区域、层级或事件顺序选取一个目标。这里要区分两种性质完全不同的重叠:一种是有意的层叠,比如提示气泡浮在按钮上方,这类重叠天然有一个视觉上能看出来的层级顺序(气泡在上面),谁赢是可预期的;另一种是同层级兄弟控件因为外扩而意外相交,这类重叠没有任何层级可以依据,最终谁被命中只能靠框架内部的遍历顺序(比如视图树的先后顺序)这类实现细节来裁决,而这个顺序对用户、甚至对设计师来说都是不可见、也无从直觉推断的——不存在任何视觉线索能告诉用户"这里其实是两个按钮的命中区叠在一起,靠后声明的那个会赢"。
怎么研究
在实际设备上可视化命中区并进行边界点按,记录哪个控件被选中、用户预期与误触。用不同缩放、方向和动态布局测试,特别检查列表、工具栏和浮动按钮在响应式重排后的交叠。研究上应该把"层叠元素之间的重叠"和"同层级兄弟控件之间的重叠"分开统计——前者裁决结果一般符合视觉直觉,后者裁决结果完全无法从任何可见属性推断,这类重叠一旦发现就该判定为布局缺陷,而不是当成一种可以接受的优先级规则。
边界
有意的层叠交互如上下文菜单、模态层可通过显式遮罩与层级表达优先级,但这不是相邻独立小图标的常态。若空间不足,不能靠重叠外扩硬塞更多操作,应重新分组、折叠或增加确认。
怎么落地
- 在组件测试中检查所有实际命中矩形或形状没有交集。
- 保留真实的安全空白,并在动态布局后重新计算或限制外扩。
- 对不可避免的层叠使用可见层级和明确关闭规则,而非隐式竞争。