C2.14.3Hit-area expansion versus visual discernibility设计研究

命中区外扩不能替代视觉可辨识

别名: 视觉可辨识 · 命中区 · 小图标

概念解释

扩大透明命中区能让手指更容易触到控件,却不能替代视觉可辨识。用户仍需看得出图标是什么、哪个元素可操作、外扩空白属于谁;若视觉线索过小、含义含混或没有标签,大命中区只会让“能点到”变成“猜着点”。

机制

触摸交互先经过视觉搜索、目标识别和动作选择,最后才是命中。命中区只改善最后一步的运动容错,无法提高图标语义、对比度、层级或可发现性。更值得警惕的是一种反向的诱因:命中区外扩留出的容错空间,很容易被拿去"兑换"成把图标画得更小——反正命中区已经够大,图标本身缩小一点也不影响点得中,这样能省出更多屏幕空间放别的内容。这个诱因如果不被明确制止,外扩带来的余量就不是被用户白白受益,而是被系统性地转移去压缩视觉尺寸,图标越做越小,可辨识性反而在外扩机制存在的情况下持续变差,而不是保持中立。

怎么研究

分开测试发现率、图标理解、目标选择时间和实际命中率。比较小视觉元素配大命中区、清晰元素配同等命中区等条件,观察用户是否能在首次使用和密集界面中正确识别而非碰巧触发。具体做法是核对图标的实际渲染尺寸是否达到平台建议的最小可辨识视觉尺寸——这是一条独立于最小命中尺寸之外的另一条底线,专门用来检查命中区外扩有没有被拿来当作把视觉尺寸压到辨识底线以下的借口。

边界

视觉元素不必和命中区一样大,紧凑工具栏可以有效;但关键或高风险操作应有足够的形状、标签、对比和状态提示。仅靠悬停、教程或记忆来补可辨识性会排除触摸新手和辅助技术用户。

怎么落地

  • 将视觉辨识标准与最小命中区作为两项独立验收条件。
  • 为图标提供可读标签、熟悉语义和明显按压/禁用状态。
  • 在复杂区域用分组、留白和层级提升搜索,而非只扩大透明热区。

延伸

  • 同组C2.14.1 小图标的命中区应外扩到最小尺寸 · C2.14.2 外扩后的命中区不得互相重叠
  • 相邻E1 界面元素与控件 · C2.02 最小触达尺寸
  • 站内检索discoverability · visual affordance · hit area

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/C2.14.3