讓設計更有說服力的20條經典原則：連通性

編者按：作者整理了 20 條經典原則，并通過正反例子說明這些原則在設計中是如何運用的。系統學習 20 條經典原則，讓你的設計更有說服力。

連通性原則該如何運用？有什么注意要點？一起來看這篇文章。

往期回顧：

• 《讓設計更有說服力的20條經典原則：美即好用效應》
• 《讓設計更有說服力的20條經典原則：多爾蒂門檻》
• 《讓設計更有說服力的20條經典原則：菲茨定律》
• 《讓設計更有說服力的20條經典原則：希克定律》
• 《讓設計更有說服力的20條經典原則：雅各布定律》
• 《讓設計更有說服力的20條經典原則：簡潔法則》
• 《讓設計更有說服力的20條經典原則：鄰近性》
• 《讓設計更有說服力的20條經典原則：相似性》

簡介說明

1. 理論表述

視覺上相連的元素傾向于被感知為具有更強的相關性（相較于不相連的元素）。

2. 理論背景

連通性原則是格式塔組織律中的一個部分，是簡潔法則的一種具體的表現場景。

對比之前的鄰近性原則和相似性原則，連通性的作用和影響都要更強。

設計案例

1. 利用連接線強化元素之間的相關性

在某些情況之下，可以利用連接線來強化元素之間的相關性，暗示用戶相連的元素是一個組。

案例1：Twitter

Twitter 的評論區設計是一個非常典型的案例，評論的回復與評論主體之間用連線來表達他們之間的相關性，不僅清晰易懂，而且與其余應用做出了足夠的差異化，也算是具備了比較高的識別度了。

類似的例子還有游戲時光。

案例2：游戲時光

2. 利用運動的下劃線表達頁面可滑動到達

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

案例3：新草、知乎、Twitter

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

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

3. 對齊線也是一種隱性視覺線

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

案例4：opefac

案例5：Christou1910

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

注意事項

1. 不要亂用連接線

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

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

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

用一條小小的連接線，很輕易就破壞了用鄰近性創造出來的時間與內容之間的聯系。

2. 不要使用過多的對齊方式

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

反面案例2：某同學的重設計作品

對齊方式多，畫面混亂。所以才會反復強調在一個頁面之內對齊的方式不宜過多。

總結

• 利用連接線（顯性的和隱形的、靜止的和運動的）來強化元素之間的相關性；
• 連接線不要亂用、濫用；
• 對齊線不宜過多。

參考文獻

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

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