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

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

本文作者：搜狐暢游視覺設(shè)計(jì)中心團(tuán)隊(duì)，@暢游VC 歡迎關(guān)注：)

最重要的格式塔原理

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

>接近性原理

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

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

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

接近性原理案例

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

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

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

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

>相似性原理

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

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

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

相似性原理案例

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

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

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

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

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

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

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

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

>連續(xù)性原理

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

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

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

連續(xù)性原理案例

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

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

>封閉性原理

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

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

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

封閉性原理案例

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

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

>對(duì)稱性原理

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

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

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

對(duì)稱性原理案例

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

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

>主體/背景原理

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

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

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

主體/背景原理案例

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

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

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

也經(jīng)常用來在其他內(nèi)容之上彈出信息，作為用戶注意力焦點(diǎn)的內(nèi)容 ，新的信息短暫地作為新的主體，相對(duì)于在新信息替換，彈出能夠幫助用戶了解他們?cè)谙嗷ニ幍沫h(huán)境。

>共同命運(yùn)

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

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

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

共同命運(yùn)原理案例

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

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