UI界面設(shè)計(jì)

讓設(shè)計(jì)更有說服力的原則7——鄰近性

3810

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

簡介說明

1. 理論表述

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

2. 理論背景

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

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

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

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

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

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

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

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

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

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

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

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

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

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

注意事項(xiàng)

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

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

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

反面案例1：商品列表常見錯(cuò)誤

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

2. 距離的對(duì)比需要易被感知

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

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