大家好，我是游戲交互設(shè)計師懶螞蟻GM，今天跟大家科普一下每個設(shè)計師的基礎(chǔ)必備技能——格式塔心理學(xué)。

格式塔心理學(xué)

起源：20世紀(jì)初，德國成為歐洲乃至世界經(jīng)濟強國，欲統(tǒng)一世界的野心使整個國內(nèi)形成了強調(diào)統(tǒng)一、積極主觀能動的整體社會意識形態(tài)。受此意識形態(tài)的影響，心理學(xué)領(lǐng)域也展開了對整體性的研究。20世紀(jì)20年代,德國著名心理學(xué)家馬科斯·韋特墨（Max Wertheimer，1880-1943）、沃爾夫?qū)た晾眨╓olfgang K?hler，1887-1967）和科特·考夫卡（Kurt Koffka，1886-1941）在研究似動現(xiàn)象的基礎(chǔ)上創(chuàng)立了格式塔學(xué)派，其發(fā)表的觀點被稱為格式塔心理學(xué)，又叫完形心理學(xué)。格式塔是德文Gestalt的譯音，意即“模式、形狀、形式”等，意思是指“動態(tài)的整體（Dynamic Wholes）”。

內(nèi)容：格式塔心理學(xué)強調(diào)經(jīng)驗和行為的整體性，建立在由Max Wertheimer于1923年提出“整體大于部分之和”的理論基礎(chǔ)上，認(rèn)為人們的審美觀對整體與和諧具有一種基本的要求。簡單地說，我們的視覺更傾向于將對象看作一個整體來認(rèn)知，然后再分析組成這個整體的各個部分。由于專業(yè)領(lǐng)域及研究角度的不同，業(yè)界內(nèi)外學(xué)者對格式塔心理學(xué)的提煉也具有差異。目前以較為典型的接近性、相似性、閉合性、連續(xù)性和簡單性組成了較為常用的一組視知覺原理，成為交互設(shè)計師以及視覺設(shè)計師手中必不可少的工具，也是去驗證設(shè)計方案是否達(dá)到預(yù)期和評價設(shè)計優(yōu)劣的重要手段。

接近性

我們傾向于將位置上相互靠近的元素感知為一個整體。元素之間的相對距離會影響我們感知它們是否或者以何種規(guī)則組織在一起?；ハ嗫拷脑乇灰暈橐唤M，而那些距離較遠(yuǎn)的則自動被劃分到組外。如下圖，左圖中的小圓被視為左、右兩個分組，右圖中的小圓被視為上、下兩個分組。

格式塔接近性示意圖

接近性原則廣泛應(yīng)用于頁面內(nèi)容的整理和分類中，通過將具有一定相關(guān)性的內(nèi)容放置在一起，并保持與不相關(guān)內(nèi)容間的距離，從而保證整個界面內(nèi)容布局的合理性，給玩家的視覺與秩序和合理的休憩，提高易讀性。例如《王者榮耀》進入對局的加載界面，通過運用格式塔接近性原則，將10名玩家分為上方和下方兩個不同的陣營。

《王者榮耀》對局加載界面

相似性

我們傾向于將內(nèi)容上彼此相似的元素感知為一個整體。相似性可以幫助我們組織和分類頁面元素，并將它們與特定的含義或功能相關(guān)聯(lián)。這也意味著如果元素具有相同的功能、含義或?qū)蛹壗Y(jié)構(gòu)，則應(yīng)在視覺上保持一定的相似性，主要是指形狀、大小和顏色的相似性。如下圖，我們傾向于將圖1分為“圓形”和“星形”兩組，將圖2分為“大圓”和“小圓”兩組，將圖3分為“藍(lán)圓”和“橙圓”兩組。

格式塔相似性示意圖

相似性原則主要應(yīng)用于界面設(shè)計中的視覺設(shè)計，通過調(diào)整顏色、大小、形狀等特征使一些元素具有視覺上的統(tǒng)一性，從而向玩家表明這些元素具有相同的層級結(jié)構(gòu)或相似的功能語義。同時，也可以反過來運用相似性原則來突出元素在具體功能上不同，一般會運用一種或結(jié)合使用兩種差異性來使元素達(dá)到更加突出醒目的目的。

形狀：《鎮(zhèn)魔曲》創(chuàng)建角色界面中，左側(cè)的圖標(biāo)在未選中狀態(tài)下均具有灰色半透明底色和亮色描邊，表明這些圖標(biāo)具有相同的功能，即全都是用來表示可供玩家選擇的人物角色。同時，圖標(biāo)中圖樣形狀的差異性表明它們所代表著不同的門派角色，又通過不透明白色底板加金色描邊來突出選中圖標(biāo)的差異性。

《鎮(zhèn)魔曲》創(chuàng)建角色界面

大?。?/strong>《貓和老鼠》鍵位設(shè)置界面中，通過增加控件的尺寸來提醒玩家所選擇的鍵位組合，同時結(jié)合顏色的差異性來使玩家選中的鍵位更加突出和醒目。

《貓和老鼠》鍵位設(shè)置界面

顏色：《神都夜行錄》的妖靈召喚概率界面中，表頭文字為綠色，SSR妖靈為橘色、SR妖靈為紫色、R妖靈為藍(lán)色、表示概率的數(shù)值為黃色，通過使用不同的顏色使內(nèi)容合理歸類，有助于玩家快速獲取信息。

《神都夜行錄》妖靈召喚概率界面

閉合性

我們傾向于將不完整的局部形象感知為一個整體形象。視覺會自動嘗試將殘缺的圖形閉合起來，從而將其感知為一個整體而不是整體的許多部分。需要注意的是，只有當(dāng)視覺形象為我們所熟悉時，才可以產(chǎn)生整體閉合聯(lián)想。如下圖，左圖是世界自然基金會（簡稱WWF）的徽標(biāo)，雖然熊貓的頭部和背部的輪廓有缺失，但是我們依舊會產(chǎn)生整體閉合聯(lián)想，結(jié)合自己的經(jīng)驗判斷出這是一只熊貓，正如右側(cè)蘋果公司的Logo一樣，即使圖形沒有完全封閉，我們也可以判定出這是一個蘋果。

格式塔閉合性示意圖

閉合性原則的直觀表現(xiàn)是用更少的元素表達(dá)出更多的信息，使界面內(nèi)容簡約不冗雜，同時使玩家能夠做到“窺一斑而知其全貌”。在界面設(shè)計中，當(dāng)同類型元素數(shù)量過多或所占空間較大，界面無法將其全部顯示時，這些元素一般采用上下、左右或其他特殊形式進行排布，并采用截斷式設(shè)計讓玩家通過殘留的部分內(nèi)容，自行腦補判斷出界面之外還有其他內(nèi)容。

縱向：《QQ飛車》賽車列表界面中，最底部一行賽車卡片采用的便是截斷式設(shè)計的表現(xiàn)手法。當(dāng)我們的視覺注意到賽車卡片不完整的時候，大腦就會立刻告訴我們“向下滑吧，下面還有賽車卡片”。

《QQ飛車》賽車列表界面

橫向：《亂斗西游2》章節(jié)列表界面中，最右側(cè)的章節(jié)卡片采用截斷式設(shè)計，意欲告訴玩家繼續(xù)向右滑可查看其他關(guān)卡。

《亂斗西游2》章節(jié)列表界面

環(huán)形：《亂斗西游2》游戲菜單界面中，通過將“奇遇”、“闖關(guān)”、“對戰(zhàn)”、“幫派”、“排行榜”這五大模塊前后環(huán)繞、層層折疊進行排布，不僅使玩家對游戲玩法模塊有個宏觀的把控，而且有效減少了內(nèi)容所占空間，視覺上更顯張力，同時具有一定的趣味性。

《亂斗西游2》游戲菜單界面

連續(xù)性

我們傾向于將具有一定相關(guān)性的分散的碎片感知為一個連續(xù)的整體。連續(xù)性使我們能夠通過元素的構(gòu)圖來歸納出具有規(guī)律性的方向和運動，從而提高了視覺內(nèi)容的易讀性。連續(xù)性原則加強了用戶對分組信息的感知，創(chuàng)建了秩序并引導(dǎo)用戶對不同的內(nèi)容進行細(xì)分。如下圖，國際商業(yè)機器公司（簡稱IBM）的Logo是由一些不連續(xù)的線條組成的條紋狀的圖形。我們的視覺在處理這些分散的條紋時，會自動的將其感知為連續(xù)的圖形，從而可以輕易識別出這是“IBM”3個英文字母。

格式塔連續(xù)性示意圖

連續(xù)性原則的運用，一般都是將元素呈曲線排布，來使界面顯得更加活潑。如《流星群俠傳》武學(xué)界面中，“槍”、“劍”、“刀”等武學(xué)圖標(biāo)呈環(huán)形排布。玩家的視覺會自動將其看成一條連續(xù)的曲線，從而依次獲取信息，形成有序的、不中斷的視覺流。再如《龍族幻想》中當(dāng)玩家與場景進行交互時，玩家處于視覺中心，選項呈曲線分布于玩家兩側(cè)。

《流星群俠傳》武學(xué)界面

《龍族幻想》界面

簡單性

我們傾向于將復(fù)雜的信息元素感知為易于理解的簡單而有序的對象。當(dāng)我們在一個設(shè)計中看到復(fù)雜的物體時，視覺便嘗試將它們轉(zhuǎn)換為簡單的形狀，并從這些形狀中移除無關(guān)的細(xì)節(jié)來簡化這些物體。如下圖，我們的視覺會在第一時間判定為這是由兩個圓形組成的圖形，而不是兩個或三個其他復(fù)雜的圖形所組成的，這就是簡單性原則。我們的視覺更傾向于在復(fù)雜的形狀中尋找簡單而有序的對象。

格式塔簡單性示意圖

《龍族幻想》登錄時的選擇角色界面，背景為一片漆黑的星空，“返回”和“開始”等按鈕都是常見的、簡單的幾何圖形，沒有任何元素進行裝飾，界面整體和角色立繪呈現(xiàn)強烈的反差。這樣簡單的設(shè)計，不僅使界面看起來干凈整潔，而且角色立繪突出，盡顯角色精美的造型和炫酷的動作。

《龍族幻想》選擇角色界面

除此之外，格式塔原則中還經(jīng)常被運用的還有主體與背景原則以及共同命運原則。其中，主體與背景原則指的是，我們的視覺會將界面中占據(jù)我們主要注意力的元素視為主體，其余元素視為背景。當(dāng)主體與背景重疊時，視覺更加傾向于將小的元素視為主體，大的元素視為背景。共同命運原則一般針對具有運動性質(zhì)的元素而言。我們的視覺會將運動的元素歸為一組，靜止的元素歸為另一組。同時，在運動的元素中，我們的視覺會將運動狀態(tài)相同的元素歸為一組，其余元素歸為另一組。