组内间距必须小于组间间距
别名: 间距比例规则 · spacing ratio rule
概念解释
这是接近性原则在版式上的直接翻译:只要希望一批元素被看成一组,组内相邻元素之间的间距就要小于这组和别的组之间的间距。这条规则本身不难懂,难的是"小于多少才够"——间距只是"小于"是不够的,还要小到明显。
机制
分组不是"间距小于就归一组、大于就分开"这种非此即彼的判断,而是随距离比例连续变化的:比例差得越大,分组感知越确定、越一致;比例差得小,分组会变得模糊,不同人、不同时刻看到的结果可能不一样,甚至同一个人盯着看久了都会来回摇摆。这也是为什么"组内小于组间"只是必要条件,不是充分条件——刚好小一点点,得到的是一个不稳定、勉强成立的分组,而不是一个清晰的分组。
怎么研究
这条结论最初来自对点阵图案的系统测量:固定点的排列,只调节近距离和远距离两种间距的比例,让被试报告或选择感知到的分组方式,画出比例和分组一致率之间的关系曲线。曲线是平滑上升的,没有一个明确的"过了这个值就稳了"的拐点,只有比例越大、判断越一致这个总体趋势。
对界面设计而言,这意味着不存在一个放之四海而皆准的最小间距比例数字;具体版式里"够不够明显",最终要靠让人实际看这版排版、报告感知到的分组来确认,而不是套用某个通用比例常数。
边界
比例关系是相对的,不是绝对像素数:在小尺寸的密集列表里,8 像素和 16 像素的差异可能已经足够明显;在大尺寸的稀疏版式里,同样的像素差异可能完全不可辨。判断要基于这个版式自身的尺度,不能把一套间距数字直接套到不同密度的界面上。
当版面同时承载多层分组(大分组套小分组)时,每一层都需要自己的一套"组内小于组间"的间距关系,且外层的组间间距要明显大于内层的组内间距,否则内外两层分组会互相干扰、很难同时被正确识别。
怎么落地
- 不要只满足"组内数值小于组间数值",要让两者的比例差距大到肉眼一眼能分辨,含糊的边际差异等于没做。
- 多层嵌套分组时,从外到内依次检查每一层的间距比例,确保外层间距明显大于内层间距,而不是所有层级挤在一个差不多的数值区间里。
- 界面缩放、响应式布局改变元素尺寸时,间距要跟着等比例缩放,而不是保持固定像素值——固定像素值在缩放后比例关系会被打乱。
- 验证办法:把版式截图缩小到很小的尺寸再放大看,或者眯眼快速扫一眼,如果分组关系在这种粗略观察下依然清晰,说明比例差距做得足够大。