讓設(shè)計(jì)更有說服力的20條經(jīng)典原則：鄰近性

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

我們都知道把邏輯上有關(guān)系的兩個元素應(yīng)該盡量放在一起排布，兩個視覺元素在一起就會變成一個視覺單元。究竟這個原理是什么？兩個視覺元素成一組是以什么特質(zhì)來確定的？這篇文章為你揭曉。

往期回顧：

• 《讓設(shè)計(jì)更有說服力的20條經(jīng)典原則：美即好用效應(yīng)》
• 《讓設(shè)計(jì)更有說服力的20條經(jīng)典原則：多爾蒂門檻》
• 《讓設(shè)計(jì)更有說服力的20條經(jīng)典原則：菲茨定律》
• 《讓設(shè)計(jì)更有說服力的20條經(jīng)典原則：希克定律》
• 《讓設(shè)計(jì)更有說服力的20條經(jīng)典原則：雅各布定律》
• 《讓設(shè)計(jì)更有說服力的20條經(jīng)典原則：簡潔法則》

簡介說明

1. 理論表述

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

2. 理論背景

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

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

設(shè)計(jì)案例

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

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

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

如果我們對這些頁面中的元素進(jìn)行劃分，可以得到 n 多不同的組，每一組內(nèi)又由不同的元素構(gòu)成。仔細(xì)觀察我們可以發(fā)現(xiàn)元素與元素之間的間距永遠(yuǎn)要比組與組之間的更小，因?yàn)樗鼈兘咏运鼈兂山M，這就是鄰近性原則的應(yīng)用。

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

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

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

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

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

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

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

注意事項(xiàng)

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

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

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

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

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

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

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

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

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

總結(jié)

• 元素的關(guān)聯(lián)性越大，間距就越小；
• 無關(guān)聯(lián)的元素不要近到讓大家產(chǎn)生誤解；
• 間距的對比需要能夠容易被清晰地感知到。

參考文獻(xiàn)

• 格式塔（心理學(xué)詞匯） 百度百科
• 《有效UX的格式塔理論：相似性原則》
• 《UI設(shè)計(jì)中的格式塔原則》

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