格式塔心理學在遊戲交互設計中的運用

大家好,我是遊戲交互設計師懶螞蟻GM,今天跟大家科普一下每個設計師的基礎必備技能——格式塔心理學。

格式塔心理學

起源:20世紀初,德國成為歐洲乃至世界經濟強國,欲統一世界的野心使整個國內形成了強調統一、積極主觀能動的整體社會意識形態。受此意識形態的影響,心理學領域也展開了對整體性的研究。20世紀20年代,德國著名心理學家馬科斯·韋特墨(Max Wertheimer,1880-1943)、沃爾夫岡·苛勒(Wolfgang Köhler,1887-1967)和科特·考夫卡(Kurt Koffka,1886-1941)在研究似動現象的基礎上創立了格式塔學派,其發表的觀點被稱為格式塔心理學,又叫完形心理學。格式塔是德文Gestalt的譯音,意即“模式、形狀、形式”等,意思是指“動態的整體(Dynamic Wholes)”。

內容:格式塔心理學強調經驗和行為的整體性,建立在由Max Wertheimer於1923年提出“整體大於部分之和”的理論基礎上,認為人們的審美觀對整體與和諧具有一種基本的要求。簡單地說,我們的視覺更傾向於將對象看作一個整體來認知,然後再分析組成這個整體的各個部分。由於專業領域及研究角度的不同,業界內外學者對格式塔心理學的提煉也具有差異。目前以較為典型的接近性

相似性閉合性連續性簡單性組成了較為常用的一組視知覺原理,成為交互設計師以及視覺設計師手中必不可少的工具,也是去驗證設計方案是否達到預期和評價設計優劣的重要手段。

接近性

我們傾向於將位置上相互靠近的元素感知為一個整體。元素之間的相對距離會影響我們感知它們是否或者以何種規則組織在一起。互相靠近的元素被視為一組,而那些距離較遠的則自動被劃分到組外。如下圖,左圖中的小圓被視為左、右兩個分組,右圖中的小圓被視為上、下兩個分組。

格式塔心理學在遊戲交互設計中的運用

格式塔接近性示意圖

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

格式塔心理學在遊戲交互設計中的運用

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

相似性

我們傾向於將內容上彼此相似的元素感知為一個整體。相似性可以幫助我們組織和分類頁面元素,並將它們與特定的含義或功能相關聯。這也意味著如果元素具有相同的功能、含義或層級結構,則應在視覺上保持一定的相似性,主要是指形狀、大小和顏色的相似性。如下圖,我們傾向於將圖1分為“圓形”和“星形”兩組,將圖2分為“大圓”和“小圓”兩組,將圖3分為“藍圓”和“橙圓”兩組。

格式塔心理學在遊戲交互設計中的運用

格式塔相似性示意圖

相似性原則主要應用於界面設計中的視覺設計,通過調整顏色、大小、形狀等特徵使一些元素具有視覺上的統一性,從而向玩家表明這些元素具有相同的層級結構或相似的功能語義。同時,也可以反過來運用相似性原則來突出元素在具體功能上不同,一般會運用一種或結合使用兩種差異性來使元素達到更加突出醒目的目的。

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

格式塔心理學在遊戲交互設計中的運用

《鎮魔曲》創建角色界面

大小:《貓和老鼠》鍵位設置界面中,通過增加控件的尺寸來提醒玩家所選擇的鍵位組合,同時結合顏色的差異性來使玩家選中的鍵位更加突出和醒目。

格式塔心理學在遊戲交互設計中的運用

《貓和老鼠》鍵位設置界面

顏色:

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

格式塔心理學在遊戲交互設計中的運用

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

閉合性

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

格式塔心理學在遊戲交互設計中的運用

格式塔閉合性示意圖

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

縱向:《QQ飛車》賽車列表界面中,最底部一行賽車卡片採用的便是截斷式設計的表現手法。當我們的視覺注意到賽車卡片不完整的時候,大腦就會立刻告訴我們“向下滑吧,下面還有賽車卡片”。

格式塔心理學在遊戲交互設計中的運用

《QQ飛車》賽車列表界面

橫向:《亂鬥西遊2》章節列表界面中,最右側的章節卡片採用截斷式設計,意欲告訴玩家繼續向右滑可查看其他關卡。

格式塔心理學在遊戲交互設計中的運用

《亂鬥西遊2》章節列表界面

環形:《亂鬥西遊2》遊戲菜單界面中,通過將“奇遇”、“闖關”、“對戰”、“幫派”、“排行榜”這五大模塊前後環繞、層層摺疊進行排布,不僅使玩家對遊戲玩法模塊有個宏觀的把控,而且有效減少了內容所佔空間,視覺上更顯張力,同時具有一定的趣味性。

格式塔心理學在遊戲交互設計中的運用

《亂鬥西遊2》遊戲菜單界面

連續性

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

格式塔心理學在遊戲交互設計中的運用

格式塔連續性示意圖

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

格式塔心理學在遊戲交互設計中的運用

《流星群俠傳》武學界面

格式塔心理學在遊戲交互設計中的運用

《龍族幻想》界面

簡單性

我們傾向於將複雜的信息元素感知為易於理解的簡單而有序的對象。當我們在一個設計中看到複雜的物體時,視覺便嘗試將它們轉換為簡單的形狀,並從這些形狀中移除無關的細節來簡化這些物體。如下圖,我們的視覺會在第一時間判定為這是由兩個圓形組成的圖形,而不是兩個或三個其他複雜的圖形所組成的,這就是簡單性原則。我們的視覺更傾向於在複雜的形狀中尋找簡單而有序的對象。

格式塔心理學在遊戲交互設計中的運用

格式塔簡單性示意圖

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

格式塔心理學在遊戲交互設計中的運用

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

除此之外,格式塔原則中還經常被運用的還有主體與背景原則以及共同命運原則。其中,主體與背景原則指的是,我們的視覺會將界面中佔據我們主要注意力的元素視為主體,其餘元素視為背景。當主體與背景重疊時,視覺更加傾向於將小的元素視為主體,大的元素視為背景。共同命運原則一般針對具有運動性質的元素而言。我們的視覺會將運動的元素歸為一組,靜止的元素歸為另一組。同時,在運動的元素中,我們的視覺會將運動狀態相同的元素歸為一組,其餘元素歸為另一組。


分享到:


相關文章: