旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實(shí)習(xí)/?A計(jì)劃
全國(guó)統(tǒng)一咨詢熱線:010-5367 2995
首頁(yè) > 熱門文章 > UI設(shè)計(jì) > 格式塔心理學(xué)在UI設(shè)計(jì)中的運(yùn)用

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

時(shí)間:2020-12-10來(lái)源:m.5wd995.cn點(diǎn)擊量:作者:Gella
時(shí)間:2020-12-10點(diǎn)擊量:作者:Gella

  

  “格式塔”是德文“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)的就不是。
 

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

  接近原則告訴我們?nèi)绻阆M麑⒍鄠€(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ì)用到接近性原則:
 

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

  格式塔原理:相似性
 

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

  格式塔心理學(xué)在UI設(shè)計(jì)中的運(yù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ì)比較突出
 

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

  格式塔原理:連續(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ù)的圖片。
 

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

  格式塔原理:封閉性
 

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

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

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

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

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

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

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

  格式塔原理:對(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ì)中
 

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

  格式塔原理:主體/背景
 

  大腦將視覺(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é)都以大半屏地圖為主體,操作都放在下方。
 

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

  格式塔原理:共同命運(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ì)操作提示等

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

預(yù)約申請(qǐng)免費(fèi)試聽(tīng)課

填寫(xiě)下面表單即可預(yù)約申請(qǐng)免費(fèi)試聽(tīng)!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費(fèi)! 怕學(xué)不會(huì)?助教全程陪讀,隨時(shí)解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!

?2007-2021/北京漫動(dòng)者教育科技有限公司版權(quán)所有
備案號(hào):京ICP備12034770號(hào)

?2007-2022/ m.5wd995.cn 北京漫動(dòng)者數(shù)字科技有限公司 備案號(hào): 京ICP備12034770號(hào) 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號(hào)

網(wǎng)站地圖