在ppt、產(chǎn)品頁(yè)面的設(shè)計(jì)中，利用知覺組織原理可以幫助你梳理內(nèi)容層次與結(jié)構(gòu)，凸顯你的內(nèi)容重點(diǎn)。

不知道你有沒有遇到過(guò)這種情況，同樣是PPT設(shè)計(jì)，你做出來(lái)大家看起來(lái)覺得很費(fèi)勁，高手做出來(lái)，你看著也覺得賞心悅目。你可能覺得這是因?yàn)楦呤侄O(shè)計(jì)，加了很多酷炫的元素。

但其實(shí)光用同樣的頁(yè)面元素，僅僅是調(diào)整一些組織方式，效果就能產(chǎn)生質(zhì)的飛躍。你和高手的差距，在于你不理解知覺組織原理。

我們來(lái)看看下面這兩張海報(bào)，同樣都是宣傳一個(gè)活動(dòng)，左邊的海報(bào)字?jǐn)?shù)特別多，說(shuō)得也很詳細(xì)，但是看起來(lái)就是讓人感覺費(fèi)勁。右邊這張海報(bào)并沒有增加酷炫的設(shè)計(jì)元素，僅僅是在字體粗細(xì)、排版位置上做了一些調(diào)整，看起來(lái)就清晰多了。

不僅信息一目了然，還讓讀者有詳細(xì)閱讀的欲望。這背后，就是知覺組織原理在起作用。

知覺組織過(guò)程

在感知世界的過(guò)程中，人類的眼睛看到的其實(shí)都是雜亂無(wú)章的細(xì)節(jié)，例如不同的顏色、明暗、大小，它就跟照相機(jī)一樣客觀寫實(shí)。光看這些細(xì)節(jié)肯定是沒有意義的，只有當(dāng)我們能理解視覺內(nèi)容時(shí)，人類才能正常生活工作。

我們?nèi)绾伟堰@些細(xì)節(jié)理解成為一個(gè)又一個(gè)有意義的物體，這就是知覺組織在發(fā)揮作用。

例如下面這張圖，圖片的內(nèi)容都是一些黑白斑點(diǎn)，看起來(lái)雜亂無(wú)章，但是因?yàn)橹X組織的存在，我們還是能分辨出這張圖里的狗。

人類就是通過(guò)將雜亂的視覺元素，快速組合成一個(gè)又一個(gè)的整體，來(lái)實(shí)現(xiàn)快速的識(shí)別和認(rèn)知過(guò)程。沒有知覺組織過(guò)程，我們將面對(duì)無(wú)窮無(wú)盡的感知細(xì)節(jié)，沒辦法快速獲取信息，更沒法對(duì)事物產(chǎn)生理解。

那么知覺過(guò)程是如何組織圖形的呢？心理學(xué)家通過(guò)研究，他們提出了一套知覺組織的規(guī)律，包括接近律、相似律、連續(xù)律、閉合律、共同命運(yùn)律等，下面依次為大家介紹。

1. 接近律

元素越接近，越容易被當(dāng)成一個(gè)整體。比如下圖所呈現(xiàn)的10條白色豎線，人們往往會(huì)更傾向于把它們知覺為5組雙豎線。這是因?yàn)槲覀兊拇竽X會(huì)把眼睛看到的彼此距離較近的兩條直線當(dāng)成一個(gè)整體來(lái)感知。

2. 相似律

在某一方面（如形狀、亮度、色彩等）相同或相似的各部分趨于組成整體。

3. 連續(xù)律

它是指人的視覺傾向于感知連續(xù)的整體，而不是分散的個(gè)體。盡管下圖的線段都斷開了，依舊不妨礙大家看清楚兩條曲線。

4. 閉合律

人們傾向于填補(bǔ)小的空隙，而將元素知覺為一個(gè)整體。

5. 共同命運(yùn)律

在同一方向上的元素比固定元素或者是朝不同方向移動(dòng)的元素更為緊密相關(guān)。

當(dāng)元素被知覺為一個(gè)整體時(shí)，我們才能快速對(duì)整體做出判斷。相反，如果元素?zé)o法組織到一起，我們面對(duì)的就只能是零散的內(nèi)容，看起來(lái)會(huì)非常耗時(shí)費(fèi)勁。知覺組織原理，其實(shí)就是信息有效組織和呈現(xiàn)的規(guī)律。

例如，同樣是狗的圖片，有了接近、相似、閉合、連續(xù)、共同命運(yùn)的特征后，下面這張圖就明顯比之前那張斑點(diǎn)圖好辨認(rèn)多了，盡管這張圖仍舊不是真實(shí)狗的照片。

下面我們看看，在工作中我們具體該如何應(yīng)用以上原則吧。

四大設(shè)計(jì)原則

設(shè)計(jì)的核心目標(biāo)就是傳遞信息，最好是讓用戶看一眼，就能快速清晰的知覺到目標(biāo)內(nèi)容。顯然，符合知覺組織特性的方式，更容易達(dá)成這個(gè)目標(biāo)。那么我們具體該如何應(yīng)用知覺組織原理呢？

根據(jù)前文的知覺組織規(guī)律，美國(guó)的知名設(shè)計(jì)師 Williams 抽取出了幾個(gè)通用設(shè)計(jì)原則，分別是親密、對(duì)齊、對(duì)比和重復(fù)。下面我們依次為大家介紹。

1. 親密性

根據(jù)接近律，如果信息之間關(guān)聯(lián)性越高，它們之間的距離就應(yīng)該越接近，越像一個(gè)視覺單元；反之，則它們的距離就應(yīng)該越遠(yuǎn)，也越像多個(gè)視覺單元。

通過(guò)這種親密性原則，我們就能將內(nèi)容進(jìn)行視覺分組，同組信息緊密聚合，不同信息相互隔離。在用戶看來(lái)，整體內(nèi)容會(huì)顯得非常有層次，看起來(lái)非常清晰。

我們看下面這兩張海報(bào)文案，左邊圖里的每個(gè)元素都等間距分隔，看來(lái)沒有關(guān)聯(lián)，相互獨(dú)立。在讀者看起來(lái)，毫無(wú)組織結(jié)構(gòu)，顯得非常散亂。

而經(jīng)過(guò)親密性處理后的右圖，一些相關(guān)信息被緊密的聚合到了一起，一些不太相關(guān)的內(nèi)容從位置上就給隔開了，整個(gè)海報(bào)顯得非常有層次，看起來(lái)很舒服。

一些產(chǎn)品頁(yè)面的設(shè)計(jì)也會(huì)使用親密性原則，同一個(gè)內(nèi)容的關(guān)聯(lián)信息都會(huì)放得很近，而不同內(nèi)容會(huì)相隔較遠(yuǎn)，目的就是為了區(qū)分信息模塊，方便大家理解和查看。

2. 對(duì)齊

根據(jù)知覺的連續(xù)律和閉合律，在界面設(shè)計(jì)中，如果我們將元素進(jìn)行對(duì)齊排布，這樣即便元素的物理位置是彼此分離的，但在用戶看來(lái)仍舊會(huì)有一條看不見的線，把彼此串聯(lián)在一起。這些元素會(huì)因此內(nèi)聚為一個(gè)整體單元，凸顯關(guān)聯(lián)性。

下圖是一個(gè)名片的幾種設(shè)計(jì)方法，左圖是第一版，各個(gè)元素散落在各處，彼此相互獨(dú)立。在讀者看起來(lái)，會(huì)覺得各個(gè)元素都在搶占注意力，看起來(lái)很費(fèi)勁。

中間這個(gè)圖，采用居中對(duì)齊后，感受明顯好了很多。但由于居中對(duì)齊是一種軟性對(duì)齊，沒有給人強(qiáng)烈的一致感，因而各項(xiàng)元素依然顯得不太相關(guān)。

右圖改用右對(duì)齊之后，對(duì)齊線的感受非常強(qiáng)烈。元素彼此開始關(guān)聯(lián)，形成了一個(gè)整體。用戶看到這個(gè)名片時(shí)，視覺感受也明顯提升了。

很多海報(bào)的設(shè)計(jì)，也會(huì)遵循對(duì)齊原則，目的就是為了凸顯一致性。這樣不僅看起來(lái)美觀、專業(yè)，還能建立起內(nèi)容之間的關(guān)聯(lián)性。

產(chǎn)品界面設(shè)計(jì)也在遵循著這個(gè)規(guī)律，我們到處都能“看到”類似的對(duì)齊線。

3. 對(duì)比

根據(jù)知覺的相似律，相近的內(nèi)容會(huì)被認(rèn)為是整體。那么，反過(guò)來(lái)。如果我們要區(qū)分兩組內(nèi)容，最好的辦法自然就是突出對(duì)比差異，這樣不僅能建立一種有組織的層次結(jié)構(gòu)，也讓用戶快速識(shí)別關(guān)鍵信息。

當(dāng)然，要實(shí)現(xiàn)有效的對(duì)比，對(duì)比就必須強(qiáng)烈，切不可畏畏縮縮。

我們看下面這兩個(gè)文章，左圖里各項(xiàng)文字內(nèi)容之間除了字體大小外，沒有別的差異，內(nèi)容看起來(lái)都很相似，像是一個(gè)整體。讀者一時(shí)半會(huì)找不到重點(diǎn)，視覺感受會(huì)非常累。

右圖增加了一些明顯的對(duì)比，包括顏色對(duì)比、大小對(duì)比、粗細(xì)對(duì)比、字體對(duì)比。讀者第一眼就會(huì)看到這個(gè)醒目的大標(biāo)題，然后看到各段的子標(biāo)題。整個(gè)文章結(jié)構(gòu)被標(biāo)題串起來(lái)了，看起來(lái)非常清晰。

不僅文字可以對(duì)比，各種視覺內(nèi)容都可以對(duì)比。很多海報(bào)設(shè)計(jì)，為了凸顯關(guān)鍵信息，也經(jīng)常使用強(qiáng)烈的對(duì)比。

4. 重復(fù)

根據(jù)知覺的相似律，相同或相似的元素會(huì)被認(rèn)為是來(lái)自一個(gè)整體。那么，如果我們有一些元素在整個(gè)設(shè)計(jì)中不斷重復(fù)，那么這些內(nèi)容也都會(huì)被認(rèn)為是具有相關(guān)性。此外，重復(fù)的元素還可以有效降低用戶的學(xué)習(xí)成本。

最常見的重復(fù)，就是某種格式的復(fù)用。例如本產(chǎn)品心理學(xué)專欄的標(biāo)題“產(chǎn)品心理學(xué)001”，就是在傳遞一種重復(fù)感，方便大家辨識(shí)，也方便大家形成整體的印象。

此外，在產(chǎn)品設(shè)計(jì)中，同樣的模塊重復(fù)出現(xiàn)，也是利用了這個(gè)規(guī)律。這些模塊功能一致，并且具有很強(qiáng)的相關(guān)性。

不同的企業(yè)通常都有自己的一套設(shè)計(jì)語(yǔ)言，以得到APP舉例。前段時(shí)間他們選用了這個(gè)橘黃色貓頭鷹作為logo。

這兩個(gè)元素會(huì)不停的重復(fù)出現(xiàn)在得到的各種產(chǎn)品細(xì)節(jié)里，例如APP的ICON、首頁(yè)、文章頁(yè)、分享頁(yè)、線下活動(dòng)等等。目的就是為了告訴消費(fèi)者，這是得到的元素，這是得到的產(chǎn)品。

總結(jié)一下

設(shè)計(jì)無(wú)處不在，即便你不是專業(yè)設(shè)計(jì)師，你可能也需要做PPT、畫原型、寫文章。能否有效傳遞你的信息，就是這些工作的核心所在。

為了避免陷入無(wú)窮盡的細(xì)節(jié)里，人類是通過(guò)知覺組合，來(lái)快速認(rèn)知事物的。人類傾向于把接近、相似、連續(xù)、閉合、共同運(yùn)動(dòng)的元素，理解成一個(gè)整體，把其他內(nèi)容理解成相互獨(dú)立的個(gè)體。

我們可以通過(guò)親密、對(duì)齊、對(duì)比、重復(fù)等設(shè)計(jì)手法，來(lái)整合信息，建立組織層次。由此提高用戶接收信息的速度，降低理解成本。好的設(shè)計(jì)，往往就好在更好的組織性上。

請(qǐng)你思考

對(duì)于你正在做的PPT/文檔/原型，該如何應(yīng)用以上4種設(shè)計(jì)原則呢？

擴(kuò)展閱讀

• 需求評(píng)審，如何避免被懟
• 建立共同目標(biāo)，變沖突為合作
• 利用錨定效應(yīng)，讓用戶接受你的定價(jià)
• 巧用“認(rèn)知失調(diào)”，讓用戶愛上你的產(chǎn)品
• 將“損失厭惡”賦能給產(chǎn)品
• 讓用戶上癮的秘密武器——隨機(jī)次數(shù)獎(jiǎng)勵(lì)

參考文獻(xiàn)

• 《心理學(xué)與生活》菲利普·津巴多
• 《寫給大家看的設(shè)計(jì)書》
• 螞蟻金服 Ant Design 設(shè)計(jì)規(guī)范

作者：劉子勛，微信公眾號(hào)：子勛說(shuō)。搜狐高級(jí)產(chǎn)品經(jīng)理，北師大心理學(xué)碩士，一個(gè)深愛心理學(xué)的產(chǎn)品汪，致力于讓科學(xué)心理學(xué)成為人人會(huì)用的工具

本文由@子勛 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash, 基于CC0協(xié)議