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