B1.12.4Hit area设计研究
可点击热区可大于视觉尺寸,二者不一致时决定难度的是热区
别名: 命中区 · 热区 · hit testing
概念解释
控件的视觉轮廓与真正接受输入的命中区(hit area)可以不同:图标可小而热区较大,透明边距也可响应点击。就运动命中而言,决定有效宽度和菲茨难度的是系统的热区,而非用户看到的图形边界;但两者不一致会带来可预期性问题。
机制
输入系统按命中测试规则判断落点,扩大热区直接增加可容错范围并减少漏点。视觉轮廓则引导用户估计可点击范围。若热区比视觉稍大,能容忍端点误差;若扩展到邻近操作或超出用户预期,用户可能误触、难以理解结果,或不知道何处可以点击。
怎么研究
分别记录视觉边界、实际热区和点击端点,比较一致与不一致版本的命中率、误触、探索点击和理解。测试应包含相邻控件和触屏条件,因为热区冲突通常在密集布局中出现。不要只从实现代码读取热区,而要观察用户如何根据视觉线索行动。
边界
可见边界仍影响搜索与信任,不能因热区大就把图标做得不可辨认。某些操作需严格命中,例如绘图、文本选择或安全关键控制,过大容错可能错误解释意图。辅助技术也可能基于可访问性边界而不是普通命中规则。
怎么落地
- 为小图标扩展真实热区,并保证相邻热区不重叠或有明确的冲突规则。
- 用对齐、间距和按下反馈让用户理解哪些区域可操作,不把隐形扩展变成意外行为。
- 在开发检查中导出或可视化命中区域;在真机测试中验证边缘点、相邻点与辅助输入的结果。