格式塔心理學(xué)是一種研究形式、構(gòu)造與心理之間關(guān)系的心理學(xué)分支，對(duì)于設(shè)計(jì)師來(lái)說(shuō)，了解和應(yīng)用格式塔心理學(xué)的法則是非常重要的。本篇文章中介紹了7項(xiàng)常用的法則，一起來(lái)看看格式塔心理學(xué)在設(shè)計(jì)中的應(yīng)用。

人的大腦總是傾向于通過(guò)以往的經(jīng)驗(yàn)或視覺(jué)模式來(lái)理解、感知這個(gè)世界，并將這些信息連接起來(lái)。例如：天空中出現(xiàn)的一團(tuán)“怪異”的云朵，我們會(huì)將其看作成某種動(dòng)物或某個(gè)熟悉的物體。

那么，為什么會(huì)有這種奇妙的聯(lián)系呢，這就要?dú)w功于大腦的運(yùn)作方式，它以看到的蓬松氣體來(lái)感知形狀或形式，一邊過(guò)濾大腦中曾接收過(guò)的信息、一邊以任意組合并填補(bǔ)空白，直至出現(xiàn)我們認(rèn)為的那個(gè)結(jié)果。從以上案例可以看出，視覺(jué)和心理是相互聯(lián)系、且相互影響。

在設(shè)計(jì)中，設(shè)計(jì)師可以通過(guò)了解一些基本心理法則知道視覺(jué)和大腦是如何建立聯(lián)系、如何工作的，這有助于我們理解和控制這些聯(lián)系，本文要講的“格式塔原理”就是其中之一。

雖然很多設(shè)計(jì)師知道格式塔這個(gè)詞，但對(duì)其核心理念、延展知識(shí)卻知之甚少。格式塔到底是什么？在設(shè)計(jì)中如何運(yùn)用？本文筆者通過(guò)自身積累以及閱讀過(guò)的大量文章進(jìn)行總結(jié)，希望能幫你做出更好的設(shè)計(jì)，不足之處，歡迎一起探討。

一、了解格式塔原理

1.格式塔的起源

1910年，心理學(xué)家韋特海墨（Ｍ，Wetheimer）所乘坐度假旅行的火車(chē)在經(jīng)過(guò)一個(gè)鐵道路口時(shí)，正在閃爍的燈讓他產(chǎn)生了光在運(yùn)動(dòng)的錯(cuò)覺(jué)，隨后下車(chē)買(mǎi)了一個(gè)西洋鏡來(lái)測(cè)試，并發(fā)現(xiàn)了“似動(dòng)現(xiàn)象”，這便奠定了格式塔的基礎(chǔ)，后經(jīng)三位德國(guó)心理學(xué)家韋特海默、苛勒和考夫卡創(chuàng)立格式塔心理學(xué)，并在德國(guó)迅速發(fā)展。

格式塔的德文為“Gestalt”，意思為「形狀」和「圖形」，在心理學(xué)中可以看作是任何一種被分離的整體。格式塔心理學(xué)的研究源于視知覺(jué)，是現(xiàn)代認(rèn)知主義學(xué)習(xí)理論的先驅(qū)，為后來(lái)的社會(huì)心理學(xué)的發(fā)展打下了堅(jiān)實(shí)的基礎(chǔ)。

2.什么是格式塔

格式塔的核心為“整體大于部分之和”，即人類(lèi)的視覺(jué)感知具有整體性，當(dāng)感知到復(fù)雜的事物時(shí)，會(huì)從神經(jīng)系統(tǒng)層面感知形狀、圖形或物體，并在大腦的指揮下將視覺(jué)輸入自建結(jié)構(gòu)成為一個(gè)整體，而不是單獨(dú)的互不相關(guān)的邊、線或區(qū)域。

在格式塔中，整體不能簡(jiǎn)單地看作為個(gè)體集合，其特性并不包含于元素之內(nèi)。例如：矩形+矩形可以組合成一個(gè)圓，一些色塊組合起來(lái)就是一只熊貓等。

3.為什么選格式塔原理

格式塔原理是設(shè)計(jì)心理學(xué)中的先驅(qū)，具備綱領(lǐng)性和指導(dǎo)性，幾乎是所有設(shè)計(jì)師入門(mén)必學(xué)的基礎(chǔ)心理學(xué)，如我們熟悉「對(duì)齊、重復(fù)、對(duì)比、親密」4原則也是它的另一種總結(jié)。合理運(yùn)用格式塔原理，能用來(lái)影響用戶(hù)的感知、吸引用戶(hù)注意力，最終通過(guò)引導(dǎo)用戶(hù)做出行為的改變，讓我們有意識(shí)地做出真正符合用戶(hù)的設(shè)計(jì)。

4.常用的原則有哪些

格式塔原理描述的是人類(lèi)視覺(jué)從神經(jīng)系統(tǒng)對(duì)事物的感知方式，經(jīng)心理學(xué)研究者總結(jié)并得出若干理論，但在設(shè)計(jì)中，常用的有以下7種：

• 接近性原則
• 相似性原則
• 連續(xù)性原則
• 封閉性原則
• 簡(jiǎn)單對(duì)稱(chēng)性原則
• 主體與背景原則
• 共同命運(yùn)原則

二、接近性原則

1.什么是接近性

接近性原則指出，物體之間的相對(duì)距離會(huì)影響我們感知它們的關(guān)系，元素之間越是接近，組合在一起的可能性就越大，會(huì)被看作成一個(gè)整體，反之那些距離較遠(yuǎn)的則自動(dòng)劃分到組外。

在復(fù)雜的設(shè)計(jì)中，接近性需要通過(guò)對(duì)比來(lái)考慮各元素之間的內(nèi)部邏輯關(guān)系，來(lái)劃分結(jié)構(gòu)和視覺(jué)層次。如圖B，我們一眼就能將其分為三組，但細(xì)看內(nèi)部結(jié)構(gòu)對(duì)比就很容易發(fā)現(xiàn)，每個(gè)小組又可以分為兩組，這就是接近性法則最直觀的體現(xiàn)。

2.應(yīng)用于設(shè)計(jì)

設(shè)計(jì)師想要表達(dá)信息的層級(jí)關(guān)系時(shí)，就需要合理運(yùn)用接近性法則，它能讓界面層次清晰有序。例如列表頁(yè)設(shè)計(jì)，將相關(guān)的信息組合在一起并重復(fù)排列出來(lái)，就能明顯感知不同小組之間的界限，當(dāng)同一小組內(nèi)元素關(guān)系明確時(shí)，將其更加靠攏，用戶(hù)視覺(jué)就會(huì)更聚焦。

下圖的人員列表，首先我們可以快速將其分為四組內(nèi)容，但在組內(nèi)通過(guò)距離對(duì)比，又可以將頭像、介紹、操作分為三個(gè)小組。

三、相似性原則

1.什么是相似性

相似性認(rèn)為，有共同視覺(jué)元素的物體看起來(lái)更有關(guān)聯(lián)性，我們傾向于將彼此相似的元素（形狀、尺寸、方向、顏色…）分為一組，這就意味著當(dāng)功能、含義和層次結(jié)構(gòu)相同時(shí)，應(yīng)該讓它們?cè)谝曈X(jué)上保持一致。

如下圖，整體是一個(gè)正方形，我們分別可以從顏色、大小、形狀等共同屬性將其分為不同的小組。

2.應(yīng)用于設(shè)計(jì)

在UI設(shè)計(jì)中，當(dāng)界面元素過(guò)多，接近形原則不足以滿(mǎn)足信息層級(jí)區(qū)分時(shí)，可以使用相似性原則來(lái)統(tǒng)一視覺(jué)樣式、表達(dá)統(tǒng)一的功能性。

例如下圖的金剛區(qū)，使用不同的大小、顏色、形狀來(lái)創(chuàng)建對(duì)比或視覺(jué)權(quán)重，呈現(xiàn)出不一樣的視覺(jué)效果，以達(dá)到弱化（降低視覺(jué)）或凸顯（強(qiáng)化視覺(jué)）某些內(nèi)容。除此之外，還有底部Tab欄、超鏈接、按鈕、標(biāo)題等設(shè)計(jì)，都會(huì)用到相似性原則。

四、連續(xù)性原則

1.什么是連續(xù)性

連續(xù)性指出，人的視覺(jué)傾向于完整的連接一個(gè)圖形，而不是零散的碎片，通過(guò)感知事物的形狀和運(yùn)動(dòng)方向?qū)⒎稚⒌脑剡B接在一起，使直線繼續(xù)成為直線、曲線繼續(xù)成為曲線并朝著特定的方向延續(xù)。

連續(xù)性需要基于人們已有的認(rèn)知來(lái)感知事物的存在，利用視覺(jué)慣性進(jìn)行延續(xù)，直至閉合，如果形象過(guò)于陌生則無(wú)法產(chǎn)生閉合聯(lián)想。如下圖，雖然是矩形組合，但我們一眼就能認(rèn)出這些幾何圖形。

2.應(yīng)用于設(shè)計(jì)

在互聯(lián)網(wǎng)產(chǎn)品中，做字體設(shè)計(jì)時(shí)，合理的通過(guò)斷點(diǎn)來(lái)打破常規(guī)并不影響識(shí)別度，這正是利用的連續(xù)性原則。UI界面中的banner輪播圖交互模塊、圖標(biāo)等，很多都結(jié)合了連續(xù)性設(shè)計(jì)來(lái)提升用戶(hù)的視覺(jué)體驗(yàn)。

如下圖的字體、圖標(biāo)，雖然有多個(gè)元素拼合或斷點(diǎn)處理，但碎而不散，我們依然能通過(guò)慣性思維感知到這是一個(gè)完整的元素。

五、封閉性原則

1.什么是封閉性

封閉性認(rèn)為，人們的視覺(jué)系統(tǒng)傾向于將不完整的局部當(dāng)做一個(gè)整體來(lái)感知，看起來(lái)與連續(xù)性有諸多相似，不過(guò)連續(xù)性是通過(guò)物體的形狀和運(yùn)動(dòng)方向、按照視覺(jué)慣性來(lái)制定閉合規(guī)律，而封閉性則并無(wú)特定規(guī)律，只要把握好不完整物體的尺度、使各元素之間相互輔助，就能讓其與我們認(rèn)知模型中的原型匹配。所以，不管是缺少了一部分還是更多，我們都可以自行腦補(bǔ)后將其視作一個(gè)完整物體。

如下圖的熊貓剪影，好幾個(gè)地方都沒(méi)有明顯的封閉界限，即便有多個(gè)零散的色塊，都不會(huì)影響識(shí)別度。IBM的LOGO像是被“刀砍過(guò)”、蘋(píng)果的LOGO被“咬了一口”，我們依然可以識(shí)別出完整的圖形，這些都是封閉性原則中非常著名的案例。

2.應(yīng)用于設(shè)計(jì)

在圖形用戶(hù)界面中，運(yùn)用封閉性原則做省略或減法處理，可以節(jié)省很多空間資源。例如界面的橫向滑動(dòng)組件，右側(cè)只顯示少部分內(nèi)容用來(lái)提示，用戶(hù)便能自行聯(lián)想出隱藏的更多內(nèi)容。還有一些卡片設(shè)計(jì)，下方直接被水平截?cái)?，用?hù)看到不完整的形狀后也能腦補(bǔ)出缺失的部分。

六、簡(jiǎn)單對(duì)稱(chēng)性原則

1.什么是簡(jiǎn)單對(duì)稱(chēng)性

在觀察事物的過(guò)程中，人們的第一印象更傾向于簡(jiǎn)單且對(duì)稱(chēng)的物體，當(dāng)看到一個(gè)復(fù)雜的事物時(shí)，神經(jīng)系統(tǒng)會(huì)潛意識(shí)地移除無(wú)關(guān)細(xì)節(jié)并簡(jiǎn)化它們，使其成為簡(jiǎn)單且統(tǒng)一的形狀這就是簡(jiǎn)單對(duì)稱(chēng)性原則。

簡(jiǎn)單的物體可以降低大腦的認(rèn)知負(fù)荷，更容易被識(shí)別。規(guī)則、對(duì)稱(chēng)的物體能給人一種堅(jiān)不可摧的感覺(jué)，不管有多遠(yuǎn)的距離，都可以將其歸屬在一起并成為一個(gè)相對(duì)的整體，不過(guò)有時(shí)候，對(duì)稱(chēng)的物體會(huì)比較煩悶 ，可以通過(guò)添加一些修飾元素來(lái)吸引人們的注意力。

2.應(yīng)用于設(shè)計(jì)

在UI設(shè)計(jì)中，大家也會(huì)經(jīng)常利用簡(jiǎn)單對(duì)稱(chēng)原則做設(shè)計(jì)。如下圖，我們會(huì)將其解構(gòu)為獨(dú)立且大小相同（近大遠(yuǎn)小/近實(shí)遠(yuǎn)虛的物理聯(lián)想）的三張圖片。

瀑布流也是該原則最直觀的體現(xiàn)，尤其是這種以圖片流為主的產(chǎn)品，在很大程度上減輕了用戶(hù)的閱讀壓力，提高瀏覽效率。

七、主體與背景原則

1.什么是主體與背景

人們?cè)诟兄挛锏臅r(shí)候，總是會(huì)將視覺(jué)區(qū)域分為主體和背景兩個(gè)部分，主體指的是最吸引視覺(jué)注意力的元素，其他的元素皆為背景，這對(duì)于我們區(qū)分重要信息和次要信息至關(guān)重要。在同一畫(huà)面中，不管有多少元素，都只能存在一個(gè)主體。

區(qū)分主體與背景需要從多個(gè)維度，從場(chǎng)景角度，我們傾向于將大場(chǎng)景中的小元素視為主題，大場(chǎng)景則為背景；從層級(jí)角度，可直接忽略大小，處于視覺(jué)第一層級(jí)的則為主體。設(shè)計(jì)師通過(guò)對(duì)主體與背景關(guān)系的處理，向用戶(hù)傳遞出不同內(nèi)容的優(yōu)先級(jí)。

2.應(yīng)用于設(shè)計(jì)

將主體與背景原則運(yùn)用于UI設(shè)計(jì)中，能幫助設(shè)計(jì)師在設(shè)計(jì)過(guò)程中抓住用戶(hù)注意力。如下圖界面中的彈窗設(shè)計(jì)，就是利用了這一原則，通過(guò)拉大主體與背景的差異性，突出彈窗，讓用戶(hù)優(yōu)先看到我們想讓他們看到的信息。

八、共同命運(yùn)原則

1.什么是共同命運(yùn)

共同命運(yùn)原則指出，人們傾向于將具有共同運(yùn)動(dòng)形式的事物感知為一個(gè)彼此相關(guān)的整體，無(wú)論元素之間的距離有多遠(yuǎn)、或其他屬性（形狀、顏色、大小）各異，但只要沿著相同的方向、相同的速度運(yùn)動(dòng)，共同命運(yùn)就會(huì)將其歸類(lèi)。

共同命運(yùn)針對(duì)的是運(yùn)動(dòng)的物體，適合用在交互設(shè)計(jì)中，與前面提到的相似性、接近性相關(guān)。當(dāng)某些元素的動(dòng)作需要保持相似性或一致的運(yùn)動(dòng)方向時(shí)，人的視覺(jué)神經(jīng)系統(tǒng)就可以將這些元素分離出來(lái)并視為同一個(gè)小組。

2.應(yīng)用于設(shè)計(jì)

移動(dòng)端產(chǎn)品中有很多這樣的案例，如iOS系統(tǒng)中，長(zhǎng)按刪除某個(gè)APP時(shí)，所有桌面圖標(biāo)會(huì)抖動(dòng)、且左上角都有一個(gè)相同的刪除圖標(biāo)，通過(guò)一致性的動(dòng)作告知用戶(hù)圖標(biāo)的可操作狀態(tài)，非常直觀。

電商APP的購(gòu)物車(chē)也是一樣，當(dāng)添加了太多商品需要?jiǎng)h除一部分，點(diǎn)擊管理后，每個(gè)商品都會(huì)保持相同的動(dòng)作及視覺(jué)樣式，將可編輯與不可編輯的內(nèi)容形成隔離效果，具有很強(qiáng)的視覺(jué)引導(dǎo)性。

結(jié)語(yǔ)

設(shè)計(jì)要求和諧有序、層次分明，這不僅是輔助傳達(dá)內(nèi)在業(yè)務(wù)信息的存在，還是一門(mén)關(guān)于溝通、性能和便利性的學(xué)問(wèn)，靈活運(yùn)用格式塔原理能幫助我們實(shí)現(xiàn)這些目標(biāo)，對(duì)產(chǎn)品體驗(yàn)的提升有很大的幫助，所以不管是產(chǎn)品經(jīng)理還是設(shè)計(jì)師，都應(yīng)該重視格式塔原理。

從上述的設(shè)計(jì)案例中不難發(fā)現(xiàn)，這7項(xiàng)常用的法則并不是獨(dú)立存在的，它們之間相輔相成，具有高度的關(guān)聯(lián)性。在實(shí)際工作中，我們需要根據(jù)不同的需求和使用場(chǎng)景，將這些基本法則組合使用，才能使你的設(shè)計(jì)方案更加有據(jù)可依，用戶(hù)也能更好地理解、使用我們的產(chǎn)品。

筆者總結(jié)本篇文章的目的在于讓更多設(shè)計(jì)師知道格式塔心理學(xué)在設(shè)計(jì)中的重要性。當(dāng)然，格式塔心理學(xué)雖然可以幫助我們提升設(shè)計(jì)水平，但只要善于學(xué)習(xí)、持續(xù)探索，便會(huì)發(fā)現(xiàn)還有更多的心理學(xué)能幫助我們做出更好的設(shè)計(jì)，格式塔只是最基本的理論知識(shí)而已。