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

简介说明

1. 理论表述

彼此靠近元素倾于被视为个组。

2. 理论背景

邻近性原则是格塔组织律个部分，是简洁法则具体表现场景。

在《写给大家的计书》中，Robin Williams 将邻近性则变称为「亲密性」，称呼不一，但表达的是同一个思。

设计案例

邻近性则在 UI 计领域中的应用随可见，一个 icon 的制作，大一整个界面的排布，无不在体现着邻近性则，它也确实更多地应用在界面大大各种素的排版当中。

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

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

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

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

当我们排（或多排）列表的时候，时常会思考格与格之间的间距到底能不能比距（距的况下，且主指横向）？看过很多实际的线案例之后会发，格与格的间距通常都会设得比距小，至多相，几乎不会。

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

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

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

应用案例3：Behance、Instagram

注观察页组件的位置，以及受它响的域。这者可以说是关性的，一方交互，另一方就会发生改变，所以页组件于靠近受响域的上方，而不会出现在页面其远离这个域的位置。

注意事项

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

邻近性原则予我们另个警示，是如两个组件没有接视觉或交互关系，不要把它们做太近，尤其是类似商品列表组件。

有候拿一个商品列表的文字息并没有这多，无法把图片右侧的纵向空间理填，有的新计（或在学者）就会习惯性把标题做图片顶对齐，其余素做图片底对齐。

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

这样做坏处相信知了邻近原则各位已经了然了，除了标题以，其他元素看起来都与下那个商品更接近，矛盾和疑惑此生了。那这时候应该怎么办呢？处理案般有以下几：第，标题下，价格上移动 2~5pt；第，利用比邻近性更强域原则，添加分割线。

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

所有元素相互距都很小等于没有邻近性。邻近性原则在距比才会生效，而想要让用户感受到邻近性原则作用，那比定要足够明显，才能被轻易感知。

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

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

总结

• 元素的关联越大，间距就越小；
• 无联的元素要到大产生误解；
• 间距的对比需能够易被清晰感知到。

注作者的微信公众号：「超人的电话亭」