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

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

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

最重要的格式塔原理

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

>接近性原理

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

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

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

接近性原理案例

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

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

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

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

>相似性原理

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

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

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

相似性原理案例

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

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

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

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

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

同樣的用戶注冊頁面，是純色引導一通到底還是給當前執(zhí)行區(qū)域特殊標注?顯然是后者，人們的視覺會自動把相同填充色的歸類，而那個特殊的區(qū)塊會從中剝離出來。設計師你注意到這個細節(jié)了么?

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

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

>連續(xù)性原理

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

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

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

連續(xù)性原理案例

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

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

>封閉性原理

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

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

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

封閉性原理案例

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

工作中我們常用同樣的形狀疊加來展示物品達到充實畫面，場景擬實效果。

>對稱性原理

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

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

我們習慣把上圖解析成兩個簡單對稱形狀的組合，把右側二維幾何圖解析成三維立體面。

對稱性原理案例

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

還在發(fā)愁你的專題場景沒帶入感?需求說你的按鈕太扁平“不像按鈕”?畫幾個面的疊加，是不就是上圖中那個看似高端洋氣大舞臺效果?

>主體/背景原理

我們的大腦將視覺區(qū)域分為主體和背景。主體包括一個場景中占據(jù)我們主要注意力的所有元素，其余則是背景。

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

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

主體/背景原理案例

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

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

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

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

>共同命運

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

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

同樣間距大小顏色的圖形，那么視覺上會把一起動的圖形分為一組。

共同命運原理案例

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

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