2020-10-26 鶴鶴
在做交互設(shè)計(jì)或者視覺(jué)設(shè)計(jì)時(shí)要遵循一些既有的原則，其中非常重要的一條就是【格式塔定律】
一、什么是格式塔原理？
格式塔心理學(xué)誕生于1912年，是由德國(guó)心理學(xué)家組成的研究小組試圖解釋人類視覺(jué)的工作原理。他們觀察了許多重要的視覺(jué)現(xiàn)象并對(duì)它們編訂了目錄。其中最基礎(chǔ)的發(fā)現(xiàn)是人類視覺(jué)是整體的：我們的視覺(jué)系統(tǒng)自動(dòng)對(duì)視覺(jué)輸入構(gòu)建結(jié)構(gòu)，并在神經(jīng)系統(tǒng)層面上感知形狀、圖形和物體，而不是只看到互不相連的邊、線和區(qū)域。“形狀”和“圖形”在德語(yǔ)中是Gestalt，因此這些理論也稱做視覺(jué)感知的格式塔原理。
格式塔學(xué)派主張人腦的運(yùn)作原理屬于整體論，“整體不同于其部件的總和”。例如，我們對(duì)一朵花的感知，并非純粹單單從對(duì)花的形狀、顏色、大小等感官資訊而來(lái)，還包括我們對(duì)花過(guò)去的經(jīng)驗(yàn)和印象，加起來(lái)才是我們對(duì)一朵花的感知。
格式塔心理學(xué)家認(rèn)為這些原則之所以存在，是因?yàn)?/span>頭腦具有天生的傾向，可以根據(jù)某些規(guī)則感知刺激中的模式。（是不是覺(jué)得hin神奇）
比如，這是著名的“人臉花瓶幻覺(jué)”圖。如果以黑色為背景，白色為圖形，則是一個(gè)花瓶；如果以黑色為圖形，白色為背景，則是兩個(gè)人的側(cè)臉。它也反映了圖形和背景對(duì)一幅圖的影響。
二、什么是格式塔原理？
使用不同數(shù)量的空格來(lái)合并或分離元素是傳達(dá)有意義的分組的關(guān)鍵。例如，在Ant Design的標(biāo)題區(qū)域中，“ 搜索”功能與站點(diǎn)的主要導(dǎo)航位于同一行。但是，主導(dǎo)航和搜索之間的多余空格表示它們屬于不同的組，因此具有獨(dú)特的功能。對(duì)于使“ 搜索”功能在主菜單的其余部分中脫穎而出，此空格至關(guān)重要。
但是，在較小的屏幕上，無(wú)法保持此間距。為了避免將這些區(qū)域視為一個(gè)整體，頁(yè)面收縮寬度的時(shí)候，搜索后的文字隱藏了。
應(yīng)具有固定或鎖頭標(biāo)題的網(wǎng)站特別可以從使用獨(dú)特的背景顏色或清晰的邊框中受益，從而有效地將標(biāo)題與下面滾動(dòng)的頁(yè)面內(nèi)容區(qū)分開(kāi)。此外，大頁(yè)腳的單一統(tǒng)一背景色 可有效地表示該區(qū)域中的所有鏈接都屬于一個(gè)組。
創(chuàng)建清晰的邊界是一種強(qiáng)大的視覺(jué)提示，可以壓倒其他分組原則，例如接近性或相似性。因此，當(dāng)需要包含幾種不同類型的UI元素或無(wú)法調(diào)整對(duì)象之間的空白量時(shí)，它是一種強(qiáng)大的工具。我們做頁(yè)面時(shí)如果需要把兩個(gè)元素放成一組與其他元素區(qū)分，那么我們可以用線框畫出邊界來(lái)達(dá)到目的。
如果其它因素相同，那么相似的物體看起來(lái)歸屬于一組。接下來(lái)從形狀、顏色、尺寸上來(lái)說(shuō)明相似性原理，這也就是我們平時(shí)做視覺(jué)設(shè)計(jì)時(shí)的原理，比如我們?cè)O(shè)計(jì)稿宣講時(shí)可能會(huì)被開(kāi)發(fā)、產(chǎn)品以及測(cè)試同學(xué)問(wèn)到“為什么用這個(gè)形狀？為什么這里用這個(gè)顏色？為什么這兩個(gè)尺寸不一致？等等，細(xì)細(xì)體會(huì)這個(gè)相似性原理就會(huì)給我們答案，讓我們?cè)诋嬙O(shè)計(jì)稿時(shí)能夠有理有據(jù)。
在上圖中，我們頭腦中自然而然的會(huì)分成“四列”，也就是圓形一列，三角形一列，然后再圓形一列，三角形一列，而不會(huì)看成“三行”
應(yīng)用共享的顏色來(lái)表示某些項(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è)谳o助按鈕中脫穎而出。
在用戶界面中，我們經(jīng)常使用大小來(lái)強(qiáng)調(diào)內(nèi)容或按鈕中最重要的部分。相同的大小表示相同的視覺(jué)突出度，并且在所有其他條件相同的情況下，將共享該屬性的所有元素連接在一起。一致地使用大小會(huì)創(chuàng)建視覺(jué)層次結(jié)構(gòu)，并使頁(yè)面易于掃描，因?yàn)槿藗兛梢粤⒓纯吹讲⒗斫膺@些類型分組。
例如，在產(chǎn)品列表頁(yè)面中，每個(gè)單獨(dú)的產(chǎn)品列表都以相同的大小（和相同的形狀）顯示。這種一致的視覺(jué)樣式告訴我們?cè)搮^(qū)域中的所有物品都是產(chǎn)品。共享大小將其與其他不同的UI元素分開(kāi)。當(dāng)某項(xiàng)商品在此列表中以不同的大小或形狀出現(xiàn)時(shí)，就會(huì)突出顯示為不屬于產(chǎn)品分組。下面這個(gè)產(chǎn)品集合的促銷以單個(gè)產(chǎn)品列表大小的兩倍顯示。
下面是我最開(kāi)始嘗試的招聘系統(tǒng)首頁(yè)的改版：
根據(jù)上面的相似性原理和接近性原理就可以很容易看出來(lái)，這個(gè)頁(yè)面結(jié)構(gòu)和邏輯不清晰：
1.待處理和招聘日程兩個(gè)模塊之間的區(qū)分不夠清晰：因?yàn)檫@兩個(gè)模塊右側(cè)應(yīng)用了同樣的形狀和顏色的按鈕（相似性原理），讓用戶在心理上產(chǎn)生聯(lián)想，同時(shí)這兩個(gè)模塊之間只靠間距來(lái)區(qū)分，區(qū)分的太弱了（接近性原理）
2.招聘日程頭部日期與下面的面試安排卡片聯(lián)系太弱：因?yàn)槊嬖嚳ㄆ昧朔浅?qiáng)的邊界區(qū)分的線條（接近性原理-構(gòu)建清晰的結(jié)構(gòu)）確實(shí)在面試模塊之間構(gòu)建了清晰的結(jié)構(gòu)，與此同時(shí)卡片與頭部的日期之間看起來(lái)沒(méi)有什么關(guān)聯(lián)。
3.首頁(yè)的選中效果太弱，分析這個(gè)頁(yè)面的層級(jí)，左側(cè)首頁(yè)選中才應(yīng)該是最重的，能讓用戶第一眼就知道在系統(tǒng)中的位置，很顯然目前來(lái)看很容易忽視首頁(yè)這個(gè)位置，關(guān)注點(diǎn)被吸引到了快捷入口。這并不是我們想要傳達(dá)給用戶的。
根據(jù)格式塔原理中的相似性原理和接近性原理，對(duì)頁(yè)面的結(jié)構(gòu)進(jìn)行了調(diào)整，就看起來(lái)清晰多了。
所以，我們?cè)谥谱魍暝O(shè)計(jì)稿后，可以應(yīng)用格式塔原理，分析下最終呈現(xiàn)給用戶的結(jié)構(gòu)和邏輯是否清晰。而這也是做視覺(jué)的理由和底氣。
視覺(jué)傾向于感知連續(xù)的形式而不是離散的碎片。
連續(xù)理解起來(lái)是很簡(jiǎn)單的，但連續(xù)卻解決了非常復(fù)雜的問(wèn)題。通過(guò)找到非常微小的共性將兩個(gè)不同的環(huán)連接成一個(gè)整體。在引導(dǎo)頁(yè)中經(jīng)常會(huì)用到這個(gè)。
視覺(jué)系統(tǒng)自動(dòng)嘗試將敞開(kāi)的圖形關(guān)閉起來(lái)，從而將其感知為完整的物體而不是分散的碎片。
閉合可以實(shí)現(xiàn)統(tǒng)一整體，這不難理解。但是有一個(gè)非常有趣的現(xiàn)象值得我們?nèi)ビ^察和思考，就是不閉合時(shí)候也會(huì)實(shí)現(xiàn)統(tǒng)一的整體，更確切的說(shuō)，這種現(xiàn)象是一種不完全的關(guān)閉。這些圖形與設(shè)計(jì)給人以簡(jiǎn)單，輕松、自由的感覺(jué)。所以，完全的閉合是沒(méi)有必要的。最著名的應(yīng)用便是蘋果公司的logo，咬掉的缺口喚起人們的好奇、疑問(wèn)，給人巨大想象空間。
我們傾向于分解復(fù)雜的場(chǎng)景來(lái)降低復(fù)雜度。
我們的大腦將視覺(jué)區(qū)域分為主體和背景。主體包括一個(gè)場(chǎng)景中占據(jù)我們主要注意力的所有元素，其余則是背景。這個(gè)原理經(jīng)常會(huì)在海報(bào)設(shè)計(jì)中應(yīng)用，這也是為什么我們做海報(bào)，做平面時(shí)，一定要制作好背景，背景的氛圍很重要。
文章來(lái)源：站酷 作者：ZZiUP
藍(lán)藍(lán)設(shè)計(jì)( m.wowo44.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.wowo44.com