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

簡介說明

1. 理論表述

視覺上相連的元素傾向于被感知為具有更強(qiáng)的相關(guān)性（相較于不相連的元素）。

2. 理論背景

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

對(duì)比之前的鄰近性原則和相似性原則，連通性的作用和影響都要更強(qiáng)。

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

1. 利用連接線強(qiáng)化元素之間的相關(guān)性

在某些情況之下，可以利用連接線來強(qiáng)化元素之間的相關(guān)性，暗示用戶相連的元素是一個(gè)組。

案例1：Twitter

Twitter 的評(píng)論區(qū)設(shè)計(jì)是一個(gè)非常典型的案例，評(píng)論的回復(fù)與評(píng)論主體之間用連線來表達(dá)他們之間的相關(guān)性，不僅清晰易懂，而且與其余應(yīng)用做出了足夠的差異化，也算是具備了比較高的識(shí)別度了。

類似的例子還有游戲時(shí)光。

案例2：游戲時(shí)光

2. 利用運(yùn)動(dòng)的下劃線表達(dá)頁面可滑動(dòng)到達(dá)

有些分頁組件的動(dòng)畫設(shè)計(jì)非常有趣，當(dāng)我們用指尖在屏幕上劃過，頁面平移至另一個(gè)頁面的同時(shí)，分頁組件下方的線也是平移至另一個(gè)字段下，這是一種相當(dāng)強(qiáng)烈的暗示：下一個(gè)頁面可以通過滑動(dòng)到達(dá)。

案例3：新草、知乎、Twitter

新草、知乎、Twitter 都是底部有一條可以運(yùn)動(dòng)的下劃線，這條線將左右兩個(gè)分頁相互連接起來，所以我們利用左右滑動(dòng)去切換頁面的時(shí)候沒有任何違和感。

當(dāng)然這只是一種可用的、暗示性較好的形式，即使你的頁面可以左右滑動(dòng)，但是不用這種可運(yùn)動(dòng)的下劃線形式也沒什么太大問題。

3. 對(duì)齊線也是一種隱性視覺線

除了上面談到的那些顯性的、可直接觀測(cè)到的線之外，對(duì)齊線也是一種隱性的視覺連接線，它雖然不能直接看到，但是在視覺識(shí)別系統(tǒng)中，對(duì)齊的元素通過一條「線」相互連接，所以對(duì)齊的元素相關(guān)性更高。

案例4：opefac

案例5：Christou1910

當(dāng)然隱形線畢竟只可感知而不可見，所以其影響的強(qiáng)度要比顯性線弱得多，像上面這個(gè)案例，按鈕的距離只要稍微遠(yuǎn)一些，就會(huì)從組中割裂出來形成孤立的一個(gè)元素，所以才需要一根顯性的線去把它們的聯(lián)系重新構(gòu)建出來。

注意事項(xiàng)

1. 不要亂用連接線

不要亂用連接線，尤其是時(shí)間線這種組件。

前面提到了，連接線比鄰近性和相似性具備更強(qiáng)的影響力，也就是說，只要連接線一出現(xiàn)，被連接的元素之間的相關(guān)性一定比其他元素更強(qiáng)。如果我們做時(shí)間線這樣的組件時(shí)在日期與日期之間加上連接線，那么日期就會(huì)相互強(qiáng)行關(guān)聯(lián)起來，這不是時(shí)間線的初衷。我們需要的是日期與當(dāng)日內(nèi)容之間具備更強(qiáng)的關(guān)聯(lián)性。

反面案例1：魔改版微信朋友圈

用一條小小的連接線，很輕易就破壞了用鄰近性創(chuàng)造出來的時(shí)間與內(nèi)容之間的聯(lián)系。

2. 不要使用過多的對(duì)齊方式

我們一直被告知不要在同一個(gè)模塊/組件/頁面中過多地使用不同的對(duì)齊方式。對(duì)齊方式一多，頁面中的對(duì)齊線也就豐富了起來。上面說到對(duì)齊線會(huì)形成的各種相關(guān)性比較強(qiáng)的組，現(xiàn)在這些不同的、相互獨(dú)立的組集中分布在一個(gè)比較小的空間之內(nèi)，結(jié)果就顯而易見了，頁面變得極度混亂，對(duì)我們快速識(shí)別信息造成極大的阻礙。

反面案例2：某同學(xué)的重設(shè)計(jì)作品

對(duì)齊方式多，畫面混亂。所以才會(huì)反復(fù)強(qiáng)調(diào)在一個(gè)頁面之內(nèi)對(duì)齊的方式不宜過多。

總結(jié)

? 利用連接線（顯性的和隱形的、靜止的和運(yùn)動(dòng)的）來強(qiáng)化元素之間的相關(guān)性；

? 連接線不要亂用、濫用；

? 對(duì)齊線不宜過多。

作者：超人的電話亭