C2.14.1Expanded hit area for small icons设计
小图标的命中区应外扩到最小尺寸
别名: 命中区外扩 · 小图标 · 触摸目标
概念解释
视觉上必须紧凑的小图标,其命中区应向外扩展到最小可触尺寸。图形本身可以保持小而不拥挤,实际接受触摸的透明区域则提供指尖容错;这把视觉信息密度与输入可达性分开处理。
机制
渲染边界决定人看见什么,命中测试边界决定哪些坐标触发动作。扩大命中区可覆盖触点偏差和手指面积,但真正实现起来不是简单的"上下左右各加几像素"——如果图标旁边紧挨着屏幕边缘或另一个图标,对称地向四周扩展,要么会把一部分扩展范围浪费在屏幕之外,要么会直接扩到邻居的地盘上制造重叠。可行的做法是把外扩看成一个受周围空间约束的分配问题:优先把可扩展的余量分配到当前确实空旷的那一侧,靠近邻居或边缘的那一侧少扩甚至不扩。这也意味着同一个图标组件,出现在界面不同位置时,实际命中区的形状和大小并不总是相同的——它取决于当时旁边到底空不空。
边界
外扩不能替代可辨认图标、标签或合理布局,也不能跨过邻居形成重叠。视觉很小而命中很大适合独立、低歧义控件;在密集破坏性操作中,更应增加间距、分组或二次确认。
怎么落地
- 为小图标定义最小透明命中区,并在组件层统一实现,但外扩量应根据当前上下文的可用空间动态计算,而不是写死一个全局固定的外扩边距。
- 在实际触摸测试中检查空白点击、边缘命中与邻居冲突。
- 验证办法:抽查同一个图标组件在界面里不同位置的实际外扩方向和幅度,确认它确实反映了当地的可用空间,而不是套用一个不考虑周围布局的固定常数——固定常数在空旷处是浪费,在拥挤处则会制造重叠。