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

連通性原則該如何運(yùn)用？有什么注意要點(diǎn)？一起來(lái)看這篇文章。

往期回顧：

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

簡(jiǎn)介說(shuō)明

1. 理論表述

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

2. 理論背景

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

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

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

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

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

案例1：Twitter

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

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

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

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

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

案例3：新草、知乎、Twitter

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

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

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

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

案例4：opefac

案例5：Christou1910

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

注意事項(xiàng)

1. 不要亂用連接線

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

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

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

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

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

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

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

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

總結(jié)

• 利用連接線（顯性的和隱形的、靜止的和運(yùn)動(dòng)的）來(lái)強(qiáng)化元素之間的相關(guān)性；
• 連接線不要亂用、濫用；
• 對(duì)齊線不宜過(guò)多。

參考文獻(xiàn)

• 《GESTALT PRINCIPLES OF PERCEPTION - 3: PROXIMITY, UNIFORM CONNECTEDNESS, AND GOOD CONTINUATION》?Andy Rutledge
• 《Gestalt Principles of Grouping》

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