A2.01.3Unintended grouping from inconsistent spacing设计研究

间距不一致会产生非预期分组

别名: 意外分组 · spacing accident · accidental grouping

概念解释

间距分组不看设计者的意图,只看实际测出来的空隙大小。一旦版面里的间距因为其他原因(文案长度不同导致换行、控件高度不一致、动态内容撑开容器)变得忽大忽小,用户就会照着这些间距把元素分组,哪怕设计者从没打算让它们分组。

这和"设计者故意用间距分组"是同一条机制的两种结果:机制本身不区分"故意"和"意外",只要间距差异足够明显,分组就会自动发生。

机制

分组线索在视觉系统里是自动、前注意的计算,不需要理解画面内容、也不需要知道设计者的排版意图。任何来源的间距差异——精心设计的,或者纯粹是内容长度、控件默认边距叠加出来的——只要达到可辨认的程度,都会被同样对待。系统不会去核实"这个空隙是不是有意留的",它只回答"这里的空隙是不是明显大于旁边"。

这就是为什么间距不一致的问题经常出现在设计者完全没意识到的地方:某一行因为文字换行多占了一点高度,某个卡片因为图片比例不同而更高,视觉上造成的实际间距变化足以触发一次意料之外的分组,而这些差异往往在设计稿的单个静态状态里根本看不出来。

怎么研究

要发现这类问题,不能只看设计稿,要看真实数据填充后的版面——用真实的、长短不一的内容(长用户名、多行地址、缺省图片)灌入版面,检查渲染后的实际间距是否还保持原来的比例关系。

一种可行的检验方式是让不了解该版面用途的人只根据渲染结果指出"这些元素哪些是一组",再和设计意图对照,看是否出现了因为间距漂移而产生的错误分组。这类判断任务不需要专门设备,但需要覆盖内容长度的边界情况,而不是只测一份典型数据。

边界

只有当间距差异达到人眼能分辨的程度才会触发非预期分组;如果内容撑开造成的间距变化很小(几像素以内),实际影响有限,不必逐像素较真。

多列、多行同时存在动态内容时,问题会叠加而不是独立出现——一行的间距漂移可能连带影响相邻行的视觉对齐,排查时需要看整体版面而不是逐个元素检查。

怎么落地

  • 用系统里最长和最短的真实内容(而不是占位文字)走一遍版面,检查间距比例是否还符合"组内明显小于组间"的关系。
  • 对因内容长度不同而可能变化的间距,用固定的行高、卡片高度或对齐基准把差异吸收掉,不要让内容的偶然长度直接决定视觉间距。
  • 动态加载或异步渲染的内容(图片占位、骨架屏后替换)要在加载完成后重新检查间距,因为加载前后的高度差可能造成加载完成瞬间分组关系发生变化。
  • 验证办法:录一段包含边界情况内容的真实使用录屏,暂停在几个关键帧上,请人指出感知到的分组,和设计意图逐帧比对。

延伸

  • 同组A2.01.1 距离近的元素被感知为一组 · A2.01.2 接近性强于颜色与形状的分组作用 · A2.01.4 组内间距必须小于组间间距
  • 相邻A2.02.2 相似即同类的推断会导致功能误判 · A2.10 格式塔原则的冲突与优先级
  • 站内检索accidental grouping · dynamic content spacing · proximity

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/A2.01.3