最新无码国产aⅴ_日韩Av免费一级毛片_久久精品无码一区二区app_911国产免费无码专区

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

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

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

最重要的格式塔原理

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

>接近性原理

接近性原理說(shuō)的是物體之間的相對(duì)距離會(huì)影響我們感知它是否以及如何組織在一起?；ハ嗫拷?相對(duì)于其它物體)的物體看起來(lái)屬于一組，而那些距離較遠(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)類(lèi)網(wǎng)站的索引模塊，第一幅圖中雖然以紅色重點(diǎn)標(biāo)注分類(lèi)字段，但人們視覺(jué)習(xí)慣性還是會(huì)以列為分組，與實(shí)際所展現(xiàn)出的以行為組的排列相斥，用戶(hù)閱讀時(shí)引起不必要的視錯(cuò)覺(jué)。同樣的內(nèi)容，那么圖2的排列方式做到了視覺(jué)與內(nèi)容分組統(tǒng)一，作為用戶(hù)來(lái)講，查找的內(nèi)容時(shí)是否更直觀明了?

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

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

>相似性原理

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

格式塔在網(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ū)別于其它，即能保持版面整齊又能使用戶(hù)直觀感受到灰色內(nèi)容與綠色丙容展示的是不同功能。

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

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

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

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

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

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

>連續(xù)性原理

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

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

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

連續(xù)性原理案例

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

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

>封閉性原理

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

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

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

封閉性原理案例

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

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

>對(duì)稱(chēng)性原理

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

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

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

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

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

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

>主體/背景原理

我們的大腦將視覺(jué)區(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)常用來(lái)在其他內(nèi)容之上彈出信息，作為用戶(hù)注意力焦點(diǎn)的內(nèi)容 ，新的信息短暫地作為新的主體，相對(duì)于在新信息替換，彈出能夠幫助用戶(hù)了解他們?cè)谙嗷ニ幍沫h(huán)境。

>共同命運(yùn)

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

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

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

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

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

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