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

  邻近性原则是格式塔组织律中的一个部分，是简洁法则的一种具体的表现场景。
  在《写给大家看的设计书》中，Robin Williams 将邻近性原则变称为「亲密性」，称呼不一样，但表达的是同一个意思。

设计案例

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

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

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

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

组之间的距离比边距更小

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

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

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

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

  • 应用案例：Behance、Instagram

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

注意事项

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

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

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

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

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

距离的对比需要易被感知

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

  • 反面案例：

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

总结

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