让设计更有说服力的20条经典原则：邻近性

编者按：作者整理了 20 条经典原则，并通过正反例子说明这些原则在设计中是如何运用的。系统学习 20 条经典原则，让你的设计更有说服力。

我们都知道把逻辑上有关系的两个元素应该尽量放在一起排布，两个视觉元素在一起就会变成一个视觉单元。究竟这个原理是什么？两个视觉元素成一组是以什么特质来确定的？这篇文章为你揭晓。

往期回顾：

• 《让设计更有说服力的20条经典原则：美即好用效应》
• 《让设计更有说服力的20条经典原则：多尔蒂门槛》
• 《让设计更有说服力的20条经典原则：菲茨定律》
• 《让设计更有说服力的20条经典原则：希克定律》
• 《让设计更有说服力的20条经典原则：雅各布定律》
• 《让设计更有说服力的20条经典原则：简洁法则》

简介说明

1. 理论表述

彼此靠近的元素倾向于被视为一个组。

2. 理论背景

邻近性原则是格式塔组织律中的一个部分，是简洁法则的一种具体的表现场景。

在《写给大家看的设计书》中，Robin Williams 将邻近性原则变称为「亲密性」，称呼不一样，但表达的是同一个意思。

设计案例

邻近性原则在 UI 设计领域中的应用随处可见，小到一个 icon 的制作，大到一整个界面的排布，无处不在体现着邻近性原则，它也确实更多地应用在界面大大小小各种元素的排版当中。

1. 同一个组内的元素间距更小

应用案例1：起点、闲鱼、虾米音乐

如果我们对这些页面中的元素进行划分，可以得到 n 多不同的组，每一组内又由不同的元素构成。仔细观察我们可以发现元素与元素之间的间距永远要比组与组之间的更小，因为它们接近，所以它们成组，这就是邻近性原则的应用。

2. 组之间的距离比边距更小

当我们在做双排（或多排）列表的时候，时常会思考格与格之间的间距到底能不能比边距更大（有边距的情况下，且主要指横向）？看过很多实际的线上案例之后会发现，格与格的间距通常都会设计得比边距更小，至多相等，几乎不会更大。

应用案例2：Keep（间距＜边距）、Netflix（间距=边距）

因为只要格间距比边距更小，我们就会下意识地认为它们是一组的，实际上它们的确属于一个大组，这样的视觉印象符合我们对它们的预期。而如果格间距大了，而边距却更小了，就会使我们产生困惑：它们不是一起的吗？为什么做这么开？这就是矛盾。

3. 具有强关联性的模块互相靠近

应用案例3：Behance、Instagram

注意观察分页组件的位置，以及受它影响的区域。这两者可以说是强关联性的，与一方交互，另一方就会发生改变，所以分页组件处于靠近受影响区域的上方，而不会出现在页面其他远离这个区域的位置。

注意事项

1. 无关联的元素或组件不要刻意做近

邻近性原则给予我们另外一个方面的警示，就是如果两个组件没有直接的视觉或交互关系，就不要把它们做得太近，尤其是类似商品列表的组件。

有时候我们拿到一个商品列表的文字信息并没有这么多，无法把图片右侧的纵向空间合理填满，有的新手设计师（或在学者）就会习惯性把标题做到与图片顶对齐，其余元素做到与图片底对齐。

反面案例1：商品列表常见错误

这样做的坏处相信知道了邻近原则的各位已经了然了，除了标题以外，其他元素看起来都与下面那个商品更接近，矛盾和疑惑就此产生了。那这时候应该怎么办呢？处理方案一般有以下几种：第一，标题向下，价格向上移动 2~5pt；第二，利用比邻近性更强的同域原则，添加分割线。

2. 距离的对比需要易被感知

所有元素相互间距都很小等于没有邻近性。邻近性原则在间距对比中才会产生效果，而想要让用户感受到邻近性原则的作用，那对比一定要足够明显，才能被轻易感知。

反面案例2：学生作业魔改版

如果间距的大小对比不够明显，那么邻近性法则的作用同样会不够明显，这时候界面元素之间的亲疏关系就依然是模糊的，页面在用户感知中也还是无序的、混乱的。

总结

• 元素的关联性越大，间距就越小；
• 无关联的元素不要近到让大家产生误解；
• 间距的对比需要能够容易被清晰地感知到。

参考文献

• 格式塔（心理学词汇） 百度百科
• 《有效UX的格式塔理论：相似性原则》
• 《UI设计中的格式塔原则》

欢迎关注作者的微信公众号：「超人的电话亭」