格式塔在網(wǎng)頁(yè)頁(yè)面設計中的應用發(fā)布者：本站     時(shí)間：2022-01-07 09:01:50

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

本文作者：搜狐暢游視覺(jué)設計中心團隊，@暢游VC 歡迎關(guān)注：)

最重要的格式塔原理

接近性原理;相似性原理;連續性原理;封閉性原理;對稱(chēng)性原理;主體/背景原理;共同命運原理。

>接近性原理

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

格式塔在網(wǎng)頁(yè)頁(yè)面設計中的應用,PS教程,

如上圖所示，左圖中的圓相互之間在水平方向比垂直距離近，那么我們看到了四排圓點(diǎn)，右側則看成四列。

接近性原理案例

格式塔在網(wǎng)頁(yè)頁(yè)面設計中的應用,PS教程,

上兩圖截自不同財經(jīng)類(lèi)網(wǎng)站的索引模塊，第一幅圖中雖然以紅色重點(diǎn)標注分類(lèi)字段，但人們視覺(jué)習慣性還是會(huì )以列為分組，與實(shí)際所展現出的以行為組的排列相斥，用戶(hù)閱讀時(shí)引起不必要的視錯覺(jué)。同樣的內容，那么圖2的排列方式做到了視覺(jué)與內容分組統一，作為用戶(hù)來(lái)講，查找的內容時(shí)是否更直觀(guān)明了?

格式塔在網(wǎng)頁(yè)頁(yè)面設計中的應用,PS教程,

這是兩組不同物品，設計師在處理設計形式上做到了完全一致，但由于中間的距離之差令人清晰分辨出是兩組而非一體。

>相似性原理

如果其它因素相同，那么相似的物體看起來(lái)歸屬于一組。

格式塔在網(wǎng)頁(yè)頁(yè)面設計中的應用,PS教程,

圖中每個(gè)圓點(diǎn)縱橫距離相同，但我們習慣性把外形相同的同心圓看成一組

相似性原理案例

格式塔在網(wǎng)頁(yè)頁(yè)面設計中的應用,PS教程,

每個(gè)模塊外形保持一致，但第一個(gè)在顏色上區別于其它，即能保持版面整齊又能使用戶(hù)直觀(guān)感受到灰色內容與綠色丙容展示的是不同功能。

格式塔在網(wǎng)頁(yè)頁(yè)面設計中的應用,PS教程,

外型一樣，間距一樣，第一個(gè)區域的內容明顯區別其它，那么自然在視覺(jué)上我們把它單獨分成一組，其它幾個(gè)則分成一組。在做活動(dòng)頁(yè)排版時(shí)是否可以依此規則擺放?還用抓破頭皮想每個(gè)模塊要突出要分類(lèi)這些問(wèn)題嗎?

格式塔在網(wǎng)頁(yè)頁(yè)面設計中的應用,PS教程,

同樣的用戶(hù)注冊頁(yè)面，是純色引導一通到底還是給當前執行區域特殊標注?顯然是后者，人們的視覺(jué)會(huì )自動(dòng)把相同填充色的歸類(lèi)，而那個(gè)特殊的區塊會(huì )從中剝離出來(lái)。設計師你注意到這個(gè)細節了么?

格式塔在網(wǎng)頁(yè)頁(yè)面設計中的應用,PS教程,

由于對齊方式的不同，視覺(jué)上會(huì )把圖1中左側字解析成一列，右則文本框解析成一列，顯然用戶(hù)使用時(shí)容易出現視錯覺(jué)。

>連續性原理

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

格式塔在網(wǎng)頁(yè)頁(yè)面設計中的應用,PS教程,

我們看到的左圖是藍橙兩條相交線(xiàn)而非四條線(xiàn)段與一個(gè)圓點(diǎn),你看到的右圖是一些零散的藍色線(xiàn)條還是IBM三個(gè)字母?當然是三個(gè)字母，你的視覺(jué)有意去組織離散碎片形成整體。

連續性原理案例

格式塔在網(wǎng)頁(yè)頁(yè)面設計中的應用,PS教程,

看完這四幅圖你什么感覺(jué)?這個(gè)設計師圖沒(méi)擺對位置，以至于用戶(hù)看不全內容?非也!這樣的構圖不但不影響視覺(jué)效果反倒增加頁(yè)面的擴展性，視覺(jué)有意組織離散元素假想整體的能力不容小覷。還在把主形象等比縮小全部展現在頁(yè)面中嗎?大膽地切一角主要內容來(lái)顯示足夠，視覺(jué)沖擊力是否也更強了?

>封閉性原理

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

格式塔在網(wǎng)頁(yè)頁(yè)面設計中的應用,PS教程,

我們的視覺(jué)系統強烈傾向于看到物體，以至于它能將一個(gè)空白區解析成一個(gè)物體，所以我們看到上圖所呈現的是一個(gè)圓而非多條線(xiàn)段。

封閉性原理案例

格式塔在網(wǎng)頁(yè)頁(yè)面設計中的應用,PS教程,

工作中我們常用同樣的形狀疊加來(lái)展示物品達到充實(shí)畫(huà)面，場(chǎng)景擬實(shí)效果。

>對稱(chēng)性原理

我們傾向于分解復雜的場(chǎng)景來(lái)降低復雜度。

格式塔在網(wǎng)頁(yè)頁(yè)面設計中的應用,PS教程,

我們習慣把上圖解析成兩個(gè)簡(jiǎn)單對稱(chēng)形狀的組合，把右側二維幾何圖解析成三維立體面。

對稱(chēng)性原理案例

格式塔在網(wǎng)頁(yè)頁(yè)面設計中的應用,PS教程,

還在發(fā)愁你的專(zhuān)題場(chǎng)景沒(méi)帶入感?需求說(shuō)你的按鈕太扁平“不像按鈕”?畫(huà)幾個(gè)面的疊加，是不就是上圖中那個(gè)看似高端洋氣大舞臺效果?

>主體/背景原理

我們的大腦將視覺(jué)區域分為主體和背景。主體包括一個(gè)場(chǎng)景中占據我們主要注意力的所有元素，其余則是背景。

格式塔在網(wǎng)頁(yè)頁(yè)面設計中的應用,PS教程,

當物體重疊時(shí)我們習慣把小的那個(gè)看成是背景之上的主體。

主體/背景原理案例

格式塔在網(wǎng)頁(yè)頁(yè)面設計中的應用,PS教程,

在頁(yè)面設計中常用在主要顯示內容“之后”放置印象誘導的背景，達到傳遞信息暗示主題作用。遇到一個(gè)需求內容灰常多還要氛圍的，那么內容常規安排，在背景上做文章也是不錯的處理手法吧?

格式塔在網(wǎng)頁(yè)頁(yè)面設計中的應用,PS教程,

也經(jīng)常用來(lái)在其他內容之上彈出信息，作為用戶(hù)注意力焦點(diǎn)的內容 ，新的信息短暫地作為新的主體，相對于在新信息替換，彈出能夠幫助用戶(hù)了解他們在相互所處的環(huán)境。

>共同命運

與接近性、相似永生原理相關(guān)，都影響我們感知的物體是否成組。指出一起運動(dòng)的物體被感知為屬于一組或者是彼此相關(guān)的。

格式塔在網(wǎng)頁(yè)頁(yè)面設計中的應用,PS教程,

同樣間距大小顏色的圖形，那么視覺(jué)上會(huì )把一起動(dòng)的圖形分為一組。

共同命運原理案例

格式塔在網(wǎng)頁(yè)頁(yè)面設計中的應用,PS教程,

運動(dòng)的圖例無(wú)法用靜態(tài)圖表示，只提示一點(diǎn)在工作中做同類(lèi)分組傳達信息時(shí)，給它一致的活動(dòng)規律展現形式。比如同樣功能按鈕HOVER效果一樣，不至于讓用戶(hù)分不清同類(lèi)選項。文件夾拖動(dòng)時(shí)同時(shí)選中的文件夾出現的反白背景及運動(dòng)軌跡是共同命運原理最直觀(guān)的解釋。