一、什么是格式塔原理？

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

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

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

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

二、什么是格式塔原理？

1、接近性原理
接近性原理說的是物體之間的相對(duì)距離會(huì)影響我們感知它是否以及如何組織在一起?；ハ嗫拷ㄏ鄬?duì)于其它物體）的物體看起來屬于一組，而那些距離較遠(yuǎn)的則自動(dòng)劃為組外。              

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

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

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

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

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

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

2、相似性原理

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

A相似性原理之形狀：

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

B相似性原理之顏色：

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

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

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

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

C相似性原理之大?。?/span>大小也可以用來表示關(guān)系。大小相似的對(duì)象可能被認(rèn)為是相關(guān)的，通常具有相同的重要性。

在用戶界面中，我們經(jīng)常使用大小來強(qiáng)調(diào)內(nèi)容或按鈕中最重要的部分。相同的大小表示相同的視覺突出度，并且在所有其他條件相同的情況下，將共享該屬性的所有元素連接在一起。一致地使用大小會(huì)創(chuàng)建視覺層次結(jié)構(gòu)，并使頁面易于掃描，因?yàn)槿藗兛梢粤⒓纯吹讲⒗斫膺@些類型分組。

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

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

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

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

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

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

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

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

3.連續(xù)性原理

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

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

     

 4、封閉性原理

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

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

5、對(duì)稱性原理

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

6、主體/背景原理

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

文章來源：站酷   作者：ZZiUP

藍(lán)藍(lán)設(shè)計(jì)( www.alimai.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)