C2.20.3overlapping hit regions设计研究

相邻不规则目标的命中区简化为矩形后可能产生重叠

别名: 命中区重叠 · 矩形简化冲突 · z-order 命中

概念解释

两颗视觉上错开的星、两个斜箭头、一排气泡尾巴,轮廓可以不相交,各自的外接矩形却常常咬住对方的角。落在重叠里的触点会按绘制顺序、z 序或遍历先后交给其中一个目标,用户无法从图形上预知是哪一个。这是简化带来的重叠,不是把热区故意外扩之后挤在一起。

机制

每个不规则图形的 AABB 向四个轴方向顶到极值像素。相邻图形只要在 x 或 y 上投影重叠,矩形就相交,哪怕真实路径之间还有缝。工具包命中测试遇到重叠通常返回最上层或第一个命中的节点,于是重叠区变成一场用户看不见的抽签。列表项里的尾随图标、卡片上的角标、地图图钉的指针尖,都是高频出事点:视觉设计师按轮廓留了缝,输入程序员用 bounds 一包,缝消失了。滚动和变换之后,重叠面积还会随旋转角周期性变大变小,同一对图标有时冲突有时不冲突。

怎么研究

把成对的不规则图标按视觉间隙(轮廓到轮廓的最小距离)排列,分别用路径命中和 AABB 命中收集落在“缝”里的触点归属。自变量是间隙像素、旋转角、z 序、以及是否在滚动容器里。因变量是重叠面积、误归属比例、以及用户指出“我点的是另一颗”的次数。对照一组矩形按钮:若矩形对在同样间隙下几乎不重叠,就能把问题钉在简化而不是间距本身。

边界

故意做大的最小触达外扩,让两个本来分开的矩形热区相交,是另一类重叠,处理手段是减外扩或加间距。这里的矩形在视觉尺寸上就已经相交。矢量路径精确命中时,这条不成立。把命中交给父容器再自己做多边形切割,重叠可以在应用层解开,但那不是默认工具包行为。动画里两个图形互相穿过时,重叠是内容而不是简化错误。

怎么落地

  • 在调试层同时画轮廓和 AABB,凡是 AABB 相交而轮廓不相交的配对,改命中为凸包/路径,或把其中一个热区切掉相交部分。
  • 角标、尾随按钮不要用父级的大 bounds 响应;给它们独立且互斥的热区,z 序写进注释以免后人改绘制顺序就改了命中。
  • 用成对不规则图标做触摸验收:专点两形之间的缝,记录触发了哪一个,不允许随 z 序漂移。

延伸

  • 同组C2.20.1 命中区形状可以与视觉形状不同,例如圆形图标配方形命中区 · C2.20.2 不规则视觉形状常按外接矩形简化命中区 · C2.20.4 命中区形状应贴近手指接触习惯的落点分布,而非单纯放大视觉边界
  • 相邻C2.14 触摸目标与视觉边界的分离 · C2.03 触摸目标的最小间距
  • 站内检索overlapping hit targets · z-order · AABB intersection

同组卡片

快捷操作

分享

分享当前页面

ios_share

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