请你看这样一个场景，在地铁车厢里，一侧的人坐得密密麻麻，另一侧零零散散。即便他们互不相识，我们仍会本能地觉得：“这一排是一组，那几个人是另一组。”这就是视觉分组（Visual Grouping）的心理在起作用。 它不需要我们思考，大脑就会自动去寻找谁和谁是一伙的。这种自动分组的能力，是人类在面对复杂世界时的本能整理系统。在设计中，它帮助用户在数秒之内理解页面结构、任务路径与信息层级。而这背后的两条最基础规律，就是：接近律（Proximity） 与 相似律（Similarity）。

一、接近律（Proximity）

1. 心理实验

1912 年，韦特海默在实验中让受试者观看“点阵图”。这些点的位置随机，但当点与点之间的距离略有差异时，人们立即会说：“这些点是一组，那些点是另一组。”这个实验揭示了：当元素在空间上越接近，我们就越容易认为它们属于同一组。这种现象并非视觉错觉，而是大脑节省处理成本的一种方式。在混乱的世界中，它用“距离”来判断关系。

2. 在设计中的意义

接近律是视觉分组最强的线索。哪怕形状、颜色完全不同，只要靠得足够近，大脑依然会把它们“绑在一起”。以下是设计中最典型的应用场景

导航栏

APP的底部导航栏是接近律最典型的应用，图标和文字之间的间距非常小 ，这就会让用户知道它们是一组，而导航项与导航项之间间距一致，就会让用户意识到这是“同等权重的家族”。导航条整体与页面内容之间距离更大 ，又表明这是不同于内容区的“一级区域”

那么根据以上案例，我们不禁要问，如果距离设计错误会怎样呢？如果图标离文字太远 ， 用户就会认为它们不是同一个按钮，如果某个导航项离别的导航项更远 ， 用户就会以为他们彼此层级不同，可见接近律是导航层级的基础逻辑。

表单排版

表单是最容易犯错的地方。新手常常这样排版

由于 Label 与 Field 之间的距离过大，用户会将“用户名”看成上一行的标题，将“输入框”误认为下一行的字段，进而导致填写错误。正确做法：Label 和 Input 之间 超近距离（通常 4–8px）字段与字段之间明显需要更大的距离（通常 16–24px）

卡片式布局

接近律决定了卡片为什么好用。一个卡片之所以看起来独立，是因为内部距离小、外部距离大。在卡片内部，图片、标题、价格紧密排列，在卡片外部，卡片之间保持明显间隔。这两种距离的对比，构成了卡片的逻辑封闭性。

那么如果不根据接近律排卡片会怎样？首先卡片内部太松散 ，卡片就像散架了。如果外部太紧密，则卡片群像“一坨”，不易被眼睛扫描。如果卡片内外距离差不够明显，卡片的结构性就会彻底消失。

3. 常见误区

紧凑等于整齐的误解

很多新手设计师喜欢“抠像素”地挤压间距，结果组与组之间界限模糊。 视觉层级的节奏感就消失了。

对齐但不分距

对齐能提供秩序，但如果所有区块间距一样，就会让用户“看不出逻辑层次”。

二、相似律（Similarity）

1. 心理机制

如果接近律是“空间关系”，那么相似律就是“形态关系”。大脑不仅根据距离判断，还会根据相似的形状、颜色、大小、方向来分组。这种能力源于人类的模式识别系统。当我们看到相似特征，大脑就自动假设它们有共同功能或归属。

2. 在设计中的应用

UI界面设计

在UI界面设计中，所有按钮保持统一造型（圆角矩形），让用户认知到“这是可点击的”；所有图标保持统一线性风格，使系统感觉一致；而次级信息通常以灰度统一，强调“重要性较低”。

网页与排版

在网页设计中，栏目标题使用相同字体样式，用户在快速浏览时能捕捉逻辑结构；而相似色块形成视觉节奏，引导阅读方向。

3. 注意事项

然而，相似并不是越多越好，过度相似会造成一种非常危险的视觉后果，当所有按钮看起来都一样时，用户不知道：哪个才是“主操作”，哪个只是辅助操作？当所有区块样式都一样时，用户也会迷失，哪里是入口？哪里是广告？如果信息过度统一，就像大家都在同时说话，最终没有人能被听清。

三、接近 vs 相似

格式塔研究表明：接近律的权重普遍高于相似律。也就是说，当两个元素长得像但离得远时，我们仍会认为它们不属于同组；而如果靠得很近但形态不同，我们仍倾向把它们看作一组。

由此给我们带来的设计启示是，在复杂界面中，先用空间控制分组，再用相似性强化语义。如果信息层级模糊，不妨先拉开距离，而不是先改配色。

四、小练习

1. 界面诊断任务

打开一个你常用的App首页，截图并标注：

1. 哪些区域的分组是靠接近律建立的？
2. 哪些是靠相似律建立的？
3. 是否有冲突或模糊地带？

2. 版式重组任务

选一张杂志广告或网页Banner，尝试重新排版：

1. 仅通过调整间距完成分组；
2. 然后再通过字体或色彩相似性强化层级； 观察阅读效率与视觉节奏的变化。