作者整理了 20 條經(jīng)典原則，并通過正反例子說明這些原則在設(shè)計中是如何運用的。系統(tǒng)學(xué)習(xí) 20 條經(jīng)典原則，讓你的設(shè)計更有說服力。

簡介說明

1. 理論表述

彼此靠近的元素傾向于被視為一個組。

2. 理論背景

鄰近性原則是格式塔組織律中的一個部分，是簡潔法則的一種具體的表現(xiàn)場景。

在《寫給大家看的設(shè)計書》中，Robin Williams 將鄰近性原則變稱為「親密性」，稱呼不一樣，但表達的是同一個意思。

設(shè)計案例

鄰近性原則在 UI 設(shè)計領(lǐng)域中的應(yīng)用隨處可見，小到一個 icon 的制作，大到一整個界面的排布，無處不在體現(xiàn)著鄰近性原則，它也確實更多地應(yīng)用在界面大大小小各種元素的排版當(dāng)中。

1. 同一個組內(nèi)的元素間距更小

應(yīng)用案例1：起點、閑魚、蝦米音樂

如果我們對這些頁面中的元素進行劃分，可以得到 n 多不同的組，每一組內(nèi)又由不同的元素構(gòu)成。仔細觀察我們可以發(fā)現(xiàn)元素與元素之間的間距永遠要比組與組之間的更小，因為它們接近，所以它們成組，這就是鄰近性原則的應(yīng)用。

2. 組之間的距離比邊距更小

當(dāng)我們在做雙排（或多排）列表的時候，時常會思考格與格之間的間距到底能不能比邊距更大（有邊距的情況下，且主要指橫向）？看過很多實際的線上案例之后會發(fā)現(xiàn)，格與格的間距通常都會設(shè)計得比邊距更小，至多相等，幾乎不會更大。

應(yīng)用案例2：Keep（間距＜邊距）、Netflix（間距=邊距）

因為只要格間距比邊距更小，我們就會下意識地認為它們是一組的，實際上它們的確屬于一個大組，這樣的視覺印象符合我們對它們的預(yù)期。而如果格間距大了，而邊距卻更小了，就會使我們產(chǎn)生困惑：它們不是一起的嗎？為什么做這么開？這就是矛盾。

3. 具有強關(guān)聯(lián)性的模塊互相靠近

應(yīng)用案例3：Behance、Instagram

注意觀察分頁組件的位置，以及受它影響的區(qū)域。這兩者可以說是強關(guān)聯(lián)性的，與一方交互，另一方就會發(fā)生改變，所以分頁組件處于靠近受影響區(qū)域的上方，而不會出現(xiàn)在頁面其他遠離這個區(qū)域的位置。

注意事項

1. 無關(guān)聯(lián)的元素或組件不要刻意做近

鄰近性原則給予我們另外一個方面的警示，就是如果兩個組件沒有直接的視覺或交互關(guān)系，就不要把它們做得太近，尤其是類似商品列表的組件。

有時候我們拿到一個商品列表的文字信息并沒有這么多，無法把圖片右側(cè)的縱向空間合理填滿，有的新手設(shè)計師（或在學(xué)者）就會習(xí)慣性把標題做到與圖片頂對齊，其余元素做到與圖片底對齊。

反面案例1：商品列表常見錯誤

這樣做的壞處相信知道了鄰近原則的各位已經(jīng)了然了，除了標題以外，其他元素看起來都與下面那個商品更接近，矛盾和疑惑就此產(chǎn)生了。那這時候應(yīng)該怎么辦呢？處理方案一般有以下幾種：第一，標題向下，價格向上移動 2~5pt；第二，利用比鄰近性更強的同域原則，添加分割線。

2. 距離的對比需要易被感知

所有元素相互間距都很小等于沒有鄰近性。鄰近性原則在間距對比中才會產(chǎn)生效果，而想要讓用戶感受到鄰近性原則的作用，那對比一定要足夠明顯，才能被輕易感知。

反面案例2：學(xué)生作業(yè)魔改版

如果間距的大小對比不夠明顯，那么鄰近性法則的作用同樣會不夠明顯，這時候界面元素之間的親疏關(guān)系就依然是模糊的，頁面在用戶感知中也還是無序的、混亂的。

總結(jié)

? 元素的關(guān)聯(lián)性越大，間距就越??；

? 無關(guān)聯(lián)的元素不要近到讓大家產(chǎn)生誤解；

? 間距的對比需要能夠容易被清晰地感知到。

作者：超人的電話亭