U11.04.5Interactive marks are also bounded by touch-target requirements设计

可交互图元的尺寸下限还受触摸目标要求约束

别名: 触摸目标 · 命中区域

概念解释

可以点击或触按的图表元素(数据点、图例项、下钻入口)的尺寸下限不止是"看得见",还有"摸得着":触屏上的手指接触面积约 7-9 毫米,主流平台规范(Apple HIG 44pt、Material 48dp、WCAG 2.5.8 最小 24px)都为可交互目标设定了下限。散点图上一个 4 像素的点、细折线上 2 像素宽的命中线,在触屏上几乎无法准确触达——运动障碍用户的误触率进一步放大。视觉尺寸与命中尺寸是两个独立的工程量,交互图元需要同时满足。

机制

触摸目标机制的物理依据是手指输入的精度分布:指腹接触面大于多数数据图元,触点落在目标内的概率随目标尺寸急剧变化——目标过小时用户的成功率取决于落点的运气而非意图。工程上的标准解法是命中区域(hit area)与视觉区域解耦:图元的可见部分保持设计尺寸(4 像素的点仍然画 4 像素,不破坏视觉密度),但为它挂一个透明的扩展命中区(20-24 像素见方),点击命中区即等于点击图元。密集图元的命中区会互相重叠,此时命中判定策略决定体验:按最近图元判定(触点吸引到最近点)优于按覆盖判定(谁被压住谁赢),必要时配合放大镜或选择模式(先进入选择态再点)。键盘等效(延伸至同组的键盘遍历)与触摸目标互补:命中区解决"摸得到",键盘遍历解决"到达得了",两者共同覆盖运动能力光谱。

边界

命中区的下限与图元密度的张力:把每个散点都扩到 24 像素命中区在高密度图中意味着大量重叠,处理方式不是缩小命中区而是交互分层(缩放稀疏化、框选聚合、最近邻吸附)。最小尺寸的规范差异(44pt / 48dp / 24px)源于平台对误触容忍度的不同取舍,跨平台产品应取各平台的较严值。命中区的扩大也有负边界:过大的命中区会"偷走"相邻图元或背景交互(图例项命中区大到挡住图形),扩展时需要验证不侵占相邻交互元素的核心区域。

怎么落地

  • 为所有可交互图元设置不低于 24px(移动端优先 44px/48dp)的命中区域,视觉尺寸与命中尺寸独立配置。
  • 密集图元采用最近邻吸附命中判定,高密度区域提供缩放或框选作为替代选择路径。
  • 命中区扩展后回归测试:确认未遮挡相邻图元的命中与页面其他交互。
  • 验证:在触屏设备上让 5 位用户(含一位运动障碍用户)点击指定数据点,统计首次命中率;命中率低于 80% 即目标尺寸不足。

延伸

  • 同组U11.04.1 数据图元与背景的对比度需达到可辨阈值 · U11.04.2 图元对背景的对比与相邻类别之间的对比是两项独立要求 · U11.04.3 线条过细在低对比度屏幕与投影下会消失 · U11.04.4 图中文字的最小字号需按最终呈现尺寸判定而非设计稿
  • 相邻U11.01.3 交互式图表需支持键盘遍历 · U7.08.5 可下钻的元素需有可点击的视觉提示
  • 站内检索touch target · hit area · pointer target size

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/U11.04.5