格式塔心理學(xué)在UI設(shè)計(jì)中的運(yùn)用

　　“格式塔”是德文“Gestalt”一詞的音譯，意為“完形”、“整體”。格式塔心理學(xué)于1912年誕生于德國(guó)。它以反對(duì)馮特的元素主義和鐵欽納的構(gòu)造主義起家，后來(lái)又反對(duì)桑代克的聯(lián)結(jié)主義和華生等人的行為主義。
 

　　格式塔受到康德的“先驗(yàn)論”和胡塞爾的現(xiàn)象學(xué)的影響，強(qiáng)調(diào)經(jīng)驗(yàn)和行為的整體性，認(rèn)為整體大于部分之和，意識(shí)不等于感覺(jué)元素的集合，行為不等于反射弧的循環(huán)。這一思想不僅貫穿格式塔學(xué)派的所有研究，而且對(duì)后來(lái)的人本主義心理學(xué)也產(chǎn)生了很大影響。
 

　　格式塔理論提出：眼腦作用是一個(gè)不斷組織、簡(jiǎn)化、統(tǒng)一的過(guò)程，正是通過(guò)這一過(guò)程，才產(chǎn)生出易于理解、協(xié)調(diào)的整體;人類視覺(jué)是整體的，我們的視覺(jué)系統(tǒng)自動(dòng)對(duì)視覺(jué)輸入構(gòu)建結(jié)構(gòu)，并且在神經(jīng)系統(tǒng)層面上感知形狀，圖像和物體，這些理論叫做視覺(jué)感知的格式塔原理
 

　　格式塔原理：接近性
 

　　物體之間相對(duì)距離會(huì)影響我們感知它們是否以及如何組織在一起。相互靠近的物體看起來(lái)屬于一組，而那些距離較遠(yuǎn)的就不是。
 

　　接近原則告訴我們?nèi)绻阆Ｍ麑⒍鄠€(gè)元素進(jìn)行分類，那么讓同一類元素靠近在一起是個(gè)不錯(cuò)的選擇。利用這個(gè)原則，調(diào)整距離或者用分割線等來(lái)分開(kāi)不同設(shè)計(jì)模式的構(gòu)建。會(huì)使設(shè)計(jì)界面層次有序，視覺(jué)清晰，減少視覺(jué)噪音。
 

　　相互關(guān)聯(lián)的控件和內(nèi)容之間距離越近，用戶越能感知它們的相關(guān)性。反之，如果距離太遠(yuǎn)，用戶很難感知到它們是相關(guān)的，那么產(chǎn)品在體驗(yàn)上就更加難學(xué)也不方便記憶。
 

　　比如app設(shè)計(jì)中都會(huì)用到接近性原則：
 

　　格式塔原理：相似性
 

　　格式塔原理中的相似性通常和接近性一起運(yùn)用在產(chǎn)品設(shè)計(jì)中。它指出了影響我們感知分組的另外一個(gè)原則：有共同視覺(jué)元素的物體看起來(lái)更有關(guān)聯(lián)性。我們傾向于將看起來(lái)相似的對(duì)象視為一組或者一個(gè)模式，并且將它們與特定含義或者功能聯(lián)系在一起。
 

　　相似性表達(dá)的是元素形式和內(nèi)容上的接近，包括形狀、顏色、大小、運(yùn)動(dòng)狀態(tài)等等。如果在一堆元素中有一些具有某種相同的特征，那么在我們的認(rèn)知中這些元素具有更強(qiáng)的相關(guān)性。在UI設(shè)計(jì)中，我們經(jīng)常用到這個(gè)原則，主要有3各方面：
 

　　1.界面內(nèi)相同功能的組件保持樣式統(tǒng)一，擁有相同功能、含義、層次結(jié)構(gòu)的組件保持樣式上的統(tǒng)一可以使用戶快速理解這個(gè)組件的操作方式，降低用戶學(xué)習(xí)成本;
 

　　2. APP內(nèi)部風(fēng)格保持統(tǒng)一;統(tǒng)一的風(fēng)格能夠讓用戶清晰地感知到自己處在同一個(gè)APP/網(wǎng)站中，這不僅僅是用戶體驗(yàn)的要求，也是視覺(jué)上的需求。
 

　　3. 特異點(diǎn)更易獲得視覺(jué)焦;反過(guò)來(lái)思考，在相似的元素中，突然躥出一個(gè)截然不同的東西，你立馬就會(huì)被其吸引，這其實(shí)也是相似性原理的一種逆向應(yīng)用的方法。比如很多APP的tab選中狀態(tài)會(huì)比較突出
 

　　格式塔原理：連續(xù)性
 

　　我們的視覺(jué)傾向于感知連續(xù)的形式，而不是離散的碎片。并且能感知到整個(gè)物體的傾向，連續(xù)性通過(guò)構(gòu)圖來(lái)幫助我們感知事物的形狀和運(yùn)動(dòng)方向。界面中的設(shè)計(jì)元素，會(huì)引導(dǎo)眼睛在平面中的移動(dòng)，提高界面的可閱讀性。創(chuàng)建順序并且指導(dǎo)用戶瀏覽不同的內(nèi)容分組。
 

　　視覺(jué)中這個(gè)法則我們?cè)诮换ピO(shè)計(jì)上用得比較少，但是在視覺(jué)設(shè)計(jì)中會(huì)用得多一點(diǎn)，比如有些應(yīng)用就喜歡把 App Store 上的應(yīng)用截圖做成連續(xù)的圖片。
 

　　格式塔原理：封閉性
 

　　人們?cè)谟^察一個(gè)物體的時(shí)候，視覺(jué)系統(tǒng)傾向于把不完整的局部當(dāng)作一個(gè)整體來(lái)感知。將不連續(xù)的，敞開(kāi)的圖形自動(dòng)補(bǔ)充，從而感知到它為完整的物體，而不是分散的碎片。
 

　　這個(gè)原理和人類的心智模型有相關(guān)性，當(dāng)我們?cè)诒孀R(shí)一個(gè)物體的時(shí)候，我們會(huì)將不完整的物體與我們的認(rèn)知模型中的原型相匹配，從而達(dá)成認(rèn)知。所以封閉性原則的前提之一是，把握局部不完整物體的尺度，如果太零散，太碎片，就會(huì)出現(xiàn)認(rèn)知混亂。
 

　　封閉性在圖形設(shè)計(jì)中有非常多著名的案例，比如蘋果 logo。
 

　　這個(gè)原則也非常適用于界面設(shè)計(jì)中，運(yùn)用省略或者減法處理圖形，不僅可以節(jié)省空間，同時(shí)也讓用戶產(chǎn)生聯(lián)想，產(chǎn)生趣味性。比如UI界面中的導(dǎo)航欄，卡片模式、銀行卡及會(huì)員卡。
 

　　格式塔原理：對(duì)稱性
 

　　對(duì)稱的元素簡(jiǎn)單、和諧且美觀，我們的眼睛尋求這些屬性以及秩序來(lái)了解世界。對(duì)稱會(huì)讓人感覺(jué)舒服，有助于我們專注于重要的東西。
 

　　對(duì)稱的構(gòu)圖是令人滿意的，但它們也會(huì)變得有點(diǎn)沉悶和靜態(tài)。視覺(jué)對(duì)稱往往更具動(dòng)態(tài)性和趣味性。在任意一種對(duì)稱設(shè)計(jì)中加入不對(duì)稱的元素都能讓用戶對(duì)這個(gè)元素印象深刻從而吸引到用戶的注意力，這種方法非常好用，比如當(dāng)你希望吸引用戶興趣、或者像促進(jìn)用戶做出操作的時(shí)候。比如很多網(wǎng)頁(yè)設(shè)計(jì)中
 

　　格式塔原理：主體/背景
 

　　大腦將視覺(jué)區(qū)域分為主體和背景，主體包括一個(gè)場(chǎng)景中占據(jù)我們注意力的所有元素，其余則是背景;這個(gè)特征有利于我們對(duì)重要信息和次要信息的感知。主體和背景的區(qū)別可以從以下兩個(gè)方面來(lái)控制：
 

　　場(chǎng)景大?。何覀儍A向于將處于大場(chǎng)景中的中間小區(qū)域部分視為主體，而大場(chǎng)景視為背景;
 

　　層級(jí)關(guān)系：如果在同一個(gè)平面中，我們傾向于將處于視覺(jué)第一層級(jí)的物體視為主體。
 

　　此原則可以幫助設(shè)計(jì)師在設(shè)計(jì)界面的過(guò)程中抓住用戶注意力，并且讓用戶優(yōu)先看到我們想讓他們看到的事物。比如重要信息的彈窗提示，作為用戶注意力焦點(diǎn)的內(nèi)容臨時(shí)成為了彈窗的背景，彈窗則會(huì)短暫成為新的主體;以及弱化背景從而突出內(nèi)容等界面中都有運(yùn)用到此原則。很多工具類型的app就會(huì)利用這個(gè)原則，比如滴滴的首頁(yè)和高德地圖視覺(jué)都以大半屏地圖為主體，操作都放在下方。
 

　　格式塔原理：共同命運(yùn)
 

　　共同命運(yùn)原理指出我們傾向于將一起運(yùn)動(dòng)的物體，感知為一個(gè)彼此相關(guān)的整體。視覺(jué)系統(tǒng)會(huì)將運(yùn)動(dòng)規(guī)則一致的物體感知為一組。這個(gè)原則適用于交互動(dòng)效設(shè)計(jì)中，當(dāng)一些元素的動(dòng)作一致的時(shí)候需要保持相似性，或者有相同的運(yùn)動(dòng)傾向。
 

　　在產(chǎn)品設(shè)計(jì)中，當(dāng)我們想要對(duì)一些元素操作同樣的動(dòng)作會(huì)常常使用到這個(gè)原則。比如蘋果手機(jī)的長(zhǎng)按刪除 app的交互動(dòng)作，所有的app都有一致的運(yùn)動(dòng)傾向，告知用戶界面處于可編輯狀態(tài)，非常直觀。bilibili的一鍵3連也是這是原理，還有mac os的文件夾拖動(dòng)，共同的高亮和運(yùn)動(dòng)看起來(lái)也是一體的。還有在可擴(kuò)展菜單、折疊條目、小提示、滑塊、滾動(dòng)條和手勢(shì)操作提示等