一、什么是格式塔原理？

        格式塔心理學(xué)誕生于1912年，是由德國心理學(xué)家組成的研究小組試圖解釋人類視覺的工作原理。他們觀察了許多重要的視覺現(xiàn)象并對它們編訂了目錄。其中最基礎(chǔ)的發(fā)現(xiàn)是人類視覺是整體的：我們的視覺系統(tǒng)自動對視覺輸入構(gòu)建結(jié)構(gòu)，并在神經(jīng)系統(tǒng)層面上感知形狀、圖形和物體，而不是只看到互不相連的邊、線和區(qū)域?！靶螤睢焙汀皥D形”在德語中是Gestalt，因此這些理論也稱做視覺感知的格式塔原理。

       格式塔學(xué)派主張人腦的運作原理屬于整體論，“整體不同于其部件的總和”。例如，我們對一朵花的感知，并非純粹單單從對花的形狀、顏色、大小等感官資訊而來，還包括我們對花過去的經(jīng)驗和印象，加起來才是我們對一朵花的感知。

       格式塔心理學(xué)家認(rèn)為這些原則之所以存在，是因為頭腦具有天生的傾向，可以根據(jù)某些規(guī)則感知刺激中的模式。（是不是覺得hin神奇）

       比如，這是著名的“人臉花瓶幻覺”圖。如果以黑色為背景，白色為圖形，則是一個花瓶；如果以黑色為圖形，白色為背景，則是兩個人的側(cè)臉。它也反映了圖形和背景對一幅圖的影響。

二、格式塔原理分析

1、接近性原理
接近性原理說的是物體之間的相對距離會影響我們感知它是否以及如何組織在一起。互相靠近（相對于其它物體）的物體看起來屬于一組，而那些距離較遠(yuǎn)的則自動劃為組外。             

接近性原理的應(yīng)用1--將相關(guān)元素彼此靠近放置

使用不同數(shù)量的空格來合并或分離元素是傳達(dá)有意義的分組的關(guān)鍵。例如，在Ant Design的標(biāo)題區(qū)域中，“ 搜索”功能與站點的主要導(dǎo)航位于同一行。但是，主導(dǎo)航和搜索之間的多余空格表示它們屬于不同的組，因此具有獨特的功能。對于使“ 搜索”功能在主菜單的其余部分中脫穎而出，此空格至關(guān)重要。

但是，在較小的屏幕上，無法保持此間距。為了避免將這些區(qū)域視為一個整體，頁面收縮寬度的時候，搜索后的文字隱藏了。

接近性原理的應(yīng)用2--構(gòu)建清晰的結(jié)構(gòu)

應(yīng)具有固定或鎖頭標(biāo)題的網(wǎng)站特別可以從使用獨特的背景顏色或清晰的邊框中受益，從而有效地將標(biāo)題與下面滾動的頁面內(nèi)容區(qū)分開。此外，大頁腳的單一統(tǒng)一背景色  可有效地表示該區(qū)域中的所有鏈接都屬于一個組。

創(chuàng)建清晰的邊界是一種強(qiáng)大的視覺提示，可以壓倒其他分組原則，例如接近性或相似性。因此，當(dāng)需要包含幾種不同類型的UI元素或無法調(diào)整對象之間的空白量時，它是一種強(qiáng)大的工具。我們做頁面時如果需要把兩個元素放成一組與其他元素區(qū)分，那么我們可以用線框畫出邊界來達(dá)到目的。

2、相似性原理

如果其它因素相同，那么相似的物體看起來歸屬于一組。接下來從形狀、顏色、尺寸上來說明相似性原理，這也就是我們平時做視覺設(shè)計時的原理，比如我們設(shè)計稿宣講時可能會被開發(fā)、產(chǎn)品以及測試同學(xué)問到“為什么用這個形狀？為什么這里用這個顏色？為什么這兩個尺寸不一致？等等，細(xì)細(xì)體會這個相似性原理就會給我們答案，讓我們在畫設(shè)計稿時能夠有理有據(jù)。

A相似性原理之形狀：

在上圖中，我們頭腦中自然而然的會分成“四列”，也就是圓形一列，三角形一列，然后再圓形一列，三角形一列，而不會看成“三行”

B相似性原理之顏色：

應(yīng)用共享的顏色來表示某些項目是相關(guān)的，因此可能具有相似的功能，這很有效。通用顏色往往比其他特征（例如形狀）更加突出，因此可以用于組合不同類型的元素并傳達(dá)它們確實相關(guān)。        

在用戶界面設(shè)計中，顏色通常用于指示常用功能。例如，使用單個鏈接顏色作為與用戶交流可點擊內(nèi)容，鏈接顏色應(yīng)僅保留給交互式文本和其他可單擊元素，因為用戶會意識到所有具有此特征的項目都是相關(guān)的，并且以相同的方式工作。因此，鏈接顏色不應(yīng)用于關(guān)鍵字，不可點擊的標(biāo)題或?qū)嶋H上不可點擊的附近圖標(biāo)。

如上圖，就是一個用色的反面例子，“ 消息中心”中的所有按鈕均為綠色，因此用戶必須花時間確定哪個是提交表單的主要按鈕。（此外，“ 提交”按鈕離消息區(qū)域很遠(yuǎn)，并且根據(jù)Fitts的定律，這種缺乏接近性也會降低用戶的速    度。）

相同顏色的按鈕將被視為具有相同的重要性級別。因此，應(yīng)為主要操作性按鈕保留單獨的顏色，以幫助它們在輔助按鈕中脫穎而出。

C相似性原理之大?。?strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;">大小也可以用來表示關(guān)系。大小相似的對象可能被認(rèn)為是相關(guān)的，通常具有相同的重要性。

在用戶界面中，我們經(jīng)常使用大小來強(qiáng)調(diào)內(nèi)容或按鈕中最重要的部分。相同的大小表示相同的視覺突出度，并且在所有其他條件相同的情況下，將共享該屬性的所有元素連接在一起。一致地使用大小會創(chuàng)建視覺層次結(jié)構(gòu)，并使頁面易于掃描，因為人們可以立即看到并理解這些類型分組。

例如，在產(chǎn)品列表頁面中，每個單獨的產(chǎn)品列表都以相同的大小（和相同的形狀）顯示。這種一致的視覺樣式告訴我們該區(qū)域中的所有物品都是產(chǎn)品。共享大小將其與其他不同的UI元素分開。當(dāng)某項商品在此列表中以不同的大小或形狀出現(xiàn)時，就會突出顯示為不屬于產(chǎn)品分組。下面這個產(chǎn)品集合的促銷以單個產(chǎn)品列表大小的兩倍顯示。

下面是我最開始嘗試的招聘系統(tǒng)首頁的改版：

根據(jù)上面的相似性原理和接近性原理就可以很容易看出來，這個頁面結(jié)構(gòu)和邏輯不清晰：

1.待處理和招聘日程兩個模塊之間的區(qū)分不夠清晰：因為這兩個模塊右側(cè)應(yīng)用了同樣的形狀和顏色的按鈕（相似性原理），讓用戶在心理上產(chǎn)生聯(lián)想，同時這兩個模塊之間只靠間距來區(qū)分，區(qū)分的太弱了（接近性原理）

2.招聘日程頭部日期與下面的面試安排卡片聯(lián)系太弱：因為面試卡片用了非常強(qiáng)的邊界區(qū)分的線條（接近性原理-構(gòu)建清晰的結(jié)構(gòu)）確實在面試模塊之間構(gòu)建了清晰的結(jié)構(gòu)，與此同時卡片與頭部的日期之間看起來沒有什么關(guān)聯(lián)。

3.首頁的選中效果太弱，分析這個頁面的層級，左側(cè)首頁選中才應(yīng)該是最重的，能讓用戶第一眼就知道在系統(tǒng)中的位置，很顯然目前來看很容易忽視首頁這個位置，關(guān)注點被吸引到了快捷入口。這并不是我們想要傳達(dá)給用戶的。

根據(jù)格式塔原理中的相似性原理和接近性原理，對頁面的結(jié)構(gòu)進(jìn)行了調(diào)整，就看起來清晰多了。

所以，我們在制作完設(shè)計稿后，可以應(yīng)用格式塔原理，分析下最終呈現(xiàn)給用戶的結(jié)構(gòu)和邏輯是否清晰。而這也是做視覺的理由和底氣。

3.連續(xù)性原理

視覺傾向于感知連續(xù)的形式而不是離散的碎片。

連續(xù)理解起來是很簡單的，但連續(xù)卻解決了非常復(fù)雜的問題。通過找到非常微小的共性將兩個不同的環(huán)連接成一個整體。在引導(dǎo)頁中經(jīng)常會用到這個。

    

 4、封閉性原理

視覺系統(tǒng)自動嘗試將敞開的圖形關(guān)閉起來，從而將其感知為完整的物體而不是分散的碎片。

閉合可以實現(xiàn)統(tǒng)一整體，這不難理解。但是有一個非常有趣的現(xiàn)象值得我們?nèi)ビ^察和思考，就是不閉合時候也會實現(xiàn)統(tǒng)一的整體，更確切的說，這種現(xiàn)象是一種不完全的關(guān)閉。這些圖形與設(shè)計給人以簡單，輕松、自由的感覺。所以，完全的閉合是沒有必要的。最著名的應(yīng)用便是蘋果公司的logo，咬掉的缺口喚起人們的好奇、疑問，給人巨大想象空間。

5、對稱性原理

我們傾向于分解復(fù)雜的場景來降低復(fù)雜度。

6、主體/背景原理

我們的大腦將視覺區(qū)域分為主體和背景。主體包括一個場景中占據(jù)我們主要注意力的所有元素，其余則是背景。這個原理經(jīng)常會在海報設(shè)計中應(yīng)用，這也是為什么我們做海報，做平面時，一定要制作好背景，背景的氛圍很重要。