C2.20.1hit region shape设计研究

命中区形状可以与视觉形状不同,例如圆形图标配方形命中区

别名: 命中区形状 · 圆形图标 · 方形热区

概念解释

用户看见的轮廓和系统拿来做命中测试的几何不必是同一张图。圆形图标配方形命中区、胶囊按钮配矩形热区,都是合法的分离:绘制走视觉,命中走输入。方形热区在四角多出来的像素用户看不见,但指尖落在那里仍然触发。反过来,视觉是圆、命中也做成严格的圆,四角点空白不会亮——两种选择回答的是“边角那一下算不算点到”。

机制

GPU 按 alpha 或矢量路径填色,命中测试却常在 CPU 上对简单凸多边形做点包含。圆对圆的距离判定要一次开方,轴对齐矩形只要四次比较,列表里几百个图标时后者便宜。设计者还用方形去消化瞄准偏差:人们点圆形图标时落点分布更像椭圆,方形能把左右和下方的误差收进来,而不把图标画大。分离的代价是可学习性:点到圆外、方内的用户会说“点了空白也有反应”,点到圆内却因命中区被切掉的用户会说“明明点在图标上没反应”。反馈高亮若只描视觉圆,两种抱怨都会出现。

怎么研究

把同一套圆形图标分别配圆形、方形、椭圆命中区,收集自然点按的落点相对于图标中心的坐标。自变量是命中几何、图标尺寸、以及是否显示按压高亮(高亮跟视觉走还是跟热区走)。因变量是命中率、空点却触发的比例、点在色块上却未触发的比例、以及“热区可见性”主观评分。用热图而不是平均命中率,才能看见方形多收的是哪些角。鼠标实验不能替代:光标热点是点,手指是面,边角多出来的矩形对两者意义不同。

边界

破坏性操作、法律勾选这类必须让人看见自己点在哪的控件,命中区应贴视觉,宁可漏点不可暗触。游戏里按像素碰撞的角色,方形热区会让玩家打到透明处。矢量图标带透明镂空(圆环、字母 O),若命中做成实心方,镂空点击会触发;若做成精确路径,细笔画又点不中。键盘和开关的无障碍焦点框通常跟视觉走,和触摸热区不一致时,两种输入会点中不同对象。

怎么落地

  • 为图标类控件明确写出两套几何:绘制路径和命中多边形;在调试层用半透明色把命中区画出来给开发看,不给终端用户看。
  • 按压高亮覆盖整个命中区,或在点到视觉外、热区内时给出同样的按压态,避免“点空白却生效且无反馈”。
  • 用真实手指录一轮落点热图,再决定圆配圆还是圆配方,不要按视觉对称去选。

延伸

  • 同组C2.20.2 不规则视觉形状常按外接矩形简化命中区 · C2.20.3 相邻不规则目标的命中区简化为矩形后可能产生重叠 · C2.20.4 命中区形状应贴近手指接触习惯的落点分布,而非单纯放大视觉边界
  • 相邻C2.14 触摸目标与视觉边界的分离 · C1.05 光标热点与命中判定
  • 站内检索hit region · hit-testing · visual versus input geometry

同组卡片

快捷操作

分享

分享当前页面

ios_share

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