編者按：作者整理了 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設計中的格式塔原則》

歡迎關注作者的微信公眾號：「超人的電話亭」