C2.03.1Touch target size and spacing设计研究

间距与尺寸是两个独立参数

别名: 目标间距 · 触达尺寸 · factorial design

概念解释

触摸布局里,尺寸回答的是"这一个目标单独存在时能不能被命中",间距回答的是"手指偏了一点会不会落到旁边那个目标上"。这是两个独立的设计参数:只放大目标尺寸不会自动增加它和邻居之间的距离,甚至可能因为目标变大而挤占间距;只拉开间距也不会让每个目标本身更容易被命中——布局需要同时管理这两件事,而不是把它们当成同一个"留白够不够"的问题来处理。

机制

为什么这两个参数会互相牵制而不是各自独立生效?在有限的屏幕空间里,尺寸和间距共享同一块布局预算——同一行或同一区域的总宽度固定,增大每个目标的尺寸必然压缩用来做间距的剩余空间,除非整体布局收窄目标数量或引入滚动、分页。同时,决定"手指落偏了会不会命中邻居"的不是目标尺寸单独一个变量,而是尺寸和间距共同决定的、两个命中区之间的裕量——目标可以做得很大,但如果紧挨着放,命中区边界依然贴在一起,接触面积和触点偏移一旦发生,误差照样会跨过这条紧贴的边界落进邻居。

怎么研究

用尺寸和间距的析因设计(同时系统性变化两个变量,而不是固定一个变量只改另一个)测试命中正确率、误触邻居的比例、完成时间,这样才能观察到两个变量的交互效应——比如尺寸增大在间距充足时能提升命中率,但在间距不足时反而可能因为命中区更贴近邻居而抵消收益。方法论要点:视觉密度(看起来挤不挤)和命中区是否重叠是两件独立的事,必须分别检查——纯视觉上留白充足,不代表两个控件的实际可点击区域没有互相咬合,这一点在给小图标配了隐藏命中区之后尤其容易被忽略。

边界

在极度受限的空间里,同时保证充分的尺寸和充分的间距往往不可能,此时的取舍通常不是硬压缩两者,而是换一种交互形态——把多个小目标合并成一个可以进一步展开的分组、改成分层导航、或用长按/滑动替代并排的多个按钮,绕开"必须在同一屏幕同时塞下这么多目标"的前提,而不是把每个目标都做到勉强达标的尺寸。反过来,纯粹加大视觉上的分隔线或颜色区分,如果底层命中区仍然是连续贴合的,并不会减少误触——这解释了为什么视觉上"看起来分得很开"的界面有时误触率依然很高。

怎么落地

  • 在组件系统里把最小触达尺寸和最小安全间距作为两个独立的设计令牌分别定义和验收,不要用一个笼统的"控件间距"覆盖两件事。
  • 用实际渲染出的命中区边界(而非设计稿上的视觉边框)检查相邻控件是否贴合或重叠。
  • 空间实在不够时优先考虑分组、分层或替代交互形态,而不是把尺寸和间距同时压到临界值。

延伸

  • 同组C2.03.2 尺寸达标而间距不足仍会误触 · C2.03.3 后果差异大的相邻目标需要额外间距或隔离
  • 相邻C2.02 最小触达尺寸 · C2.04 胖手指问题
  • 站内检索target spacing · factorial design · touch layout

同组卡片

快捷操作

分享

分享当前页面

ios_share

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