遊戲心理學研究：基於格式塔心理學淺談《絕區零》的介面設計問題

《絕區零》在上線之後，有很多玩家吐槽介面設計的不好。而之所以如此，皆因介面設計，不符合格式塔心理學中的接近原則與相似原則【1】【2】：

1）相似原則

該原則指的是在形狀、大小、顏色、紋理、方向等元素中，具有相似特徵的部分，容易被大腦知覺為一個整體。例如：

• 在生活中，穿著同一種樣式、色彩等校服的人，就會被人認為是同一個學校的學生。
• 在下圖中，人們會明顯感知到紅色的圓、黃色的三角形、藍色的方框，分別被分為了三個組。
  

2）接近原則

該原則指的是在空間或時間上，彼此鄰近、緊挨或接近的物件，會被大腦知覺為一體，從而被人們認為彼此更加親近，或是同一個群體。反之，分開的物件，則會被大腦知覺為另一個群體或物件。

而在遊戲介面設計中，則可結合接近原則，與相似原則，運用於介面設計中。其中這又包括以下幾個基本原則：

• 相似劃分原則：基於相似原則，需將介面功能、元素等設計進行劃分，並將功能較為相似，或關聯性較強的功能，劃分在一起。
• 鄰近分割槽原則：需將介面進行分割槽。每個分割槽只分布一種較為相似的功能或元素。
• 適當留白原則：區域與區域之間，需適當留白，留出一定的距離或空間，以避免因過於接近，而導致玩家將不同區域知覺為一個整體。
  

綜述之，介面中彼此功能、作用、效果、顏色、文字、屬性、導航、按鈕、列表、狀態等方面接近的元素，可設計在一起。並且，可透過線條、資訊框等構成某個介面分割槽，將其接近的元素，放置在介面分割槽內。而分割槽之間需適當留白，以此作為區隔。例如：

角色介面：在《崩壞：星穹鐵道》角色介面中，就將介面功能，分為了左側的“角色功能區”（包括角色詳情、光錐、行跡、星魂等）、中間上方的“角色選擇區”、右側的“角色屬性區”（包括角色姓名、資訊、等級、屬性、技能等內容）等多個區域。而每個區域的介面元素和介面功能設計，皆是相似的同類功能。並且，每個分割槽之間，皆相距有一定距離，作為留白區。這也可避免玩家將不同分割槽，知覺為一個整體。


主介面：在《崩壞：星穹鐵道》《原神》等遊戲的主介面中，遊戲就將介面佈局，劃分為了左上角“地圖導航區”（包括小地圖、公告、幫助、任務導航等）、右上角“遊戲功能區”（包括角色、道具等各類常用遊戲功能）、右中間“角色選擇區”、右下方“戰鬥操作區”（各類戰鬥和技能操作按鈕）等四大區域。並且，每個區域的介面功能和介面元素，皆是同類或相似功能。例如，小地圖與任務提示、幫助、提示等功能的作用，皆較為接近，均是為了教學、提示、幫助與引導玩家，故此才會放在一起。而每個區域之間，亦是皆有留白區。


裝備介面：在《最終幻想7重製版》的裝備介面中，遊戲就根據介面元素和功能，劃分為了左側的“角色選擇區”（包括克勞德、蒂法、愛麗絲等多個角色），中上方的“角色裝備區”（包括武器、飾品等裝備，以及相應的裝備屬性、文字描述）、中下方的“角色屬性區”（包括角色的基本屬性、攻擊屬性、防禦抗性）、右側的“角色狀態區”（包括角色頭像、角色等級、經驗值、生命值、魔法值等資料）等4大區域。


掃描介面：在《賽博朋克2077》的掃描介面中，遊戲根據元素的相似性，劃分為了左側的“破解模組選擇區”（包括各類可用的駭客模組和裝備）、中間的“掃描屬性區”（包括當前掃描剩餘的RAM，掃描所需的RAM等資訊）、右側的“目標狀態區”（所掃描目標的姓名、幫派、懸賞等資訊）、右下角的“操作提示區”（包括掃描的各種相關操作說明）等4個區域。並且，每個區域之間皆有適當留白。


設計介面：在《無盡空間2》的艦船設計介面中，則根據元素的相似性，劃分為了左側的“艦船結構資訊區”（列出了艦船的名稱、船體型別、尺寸、艦船功能、艦船加成的艦船結構資訊，以及建造所需的資源花費等資訊）、中間的“艦船模組區”（列出了所有可裝配艦船配件與模組，以及具體的艦船模型）、右側的“飛船統計資料區”（艦船裝配各類模組後的生命值、船員數量、移動速度、命令點數、攻擊、防禦、護盾、能量、各射程的命中率等各種數值屬性）、最下方的“介面功能操作區”（包括關閉介面按鈕、重置設計按鈕、自動設計按鈕、應用設計按鈕等）等4個區域。並且，每個區域之間皆有適當的留白。其中，每個大的區域，其內部亦根據元素的相似性，進行了再次區分。例如，在“艦船結構資訊區”中，就分為了“結構資訊區”“艦船資源花費區”“帝國擁有資源區”三部分。而這三部分，皆透過劃線進行了區隔，以便於玩家進行檢視。


功能介面：反觀《絕區零》的介面，則顯得不太合理。例如，在其功能介面中，所有功能按鈕全部混在了一起，排成了一排。而遊戲背景卻空出來一大塊。換言之，介面功能按鈕沒有進行合理的分類，也沒有根據相似與接近原則進行排版，從而顯得較為凌亂。


換言之，在設計介面時，相似的元素可放在一起。例如，相似的基本屬性、裝備槽位，或介面元素等同類功能放在一起，再透過某種空白位置進行留白，並作為區域的劃分。之後，玩家可在這種分割槽設計中，知覺到每個分割槽的功能，並將鄰近的元素視為一體，從而可更好的體驗遊戲，並更快學到如何操作這些功能。

例如，角色屬性皮膚中，各類戰鬥屬性就可放在一起，以此讓玩家方便檢視。其他諸如：武器和彈藥、揹包和道具、藥水和血量等皆是。期間，需將有一定聯絡的元素結合起來，共同設計在一個介面或畫面之中。這樣有利於玩家的操作和互動體驗。

PS：該文是筆者撰寫的《遊戲設計心理學》系列叢書中，節選的一部分。該書已在摩點網眾籌。目前處於“創意”階段，需要2500個“看好”，才能聯絡出版社並正式眾籌，並在未來出版發售。感興趣的讀者可前往支援。謝謝。

詳情說明：
https://zhuanlan.zhihu.com/p/670318084
眾籌地址：
m.modian.com/idea/3967
叢書影片版目錄：
https://www.bilibili.com/video/BV1Pc411S7WN/?spm_id_from=333.999.0.0
參考資料
[1]郭本禹/主編.方雙虎 嚴由偉/副主編.《西方心理學史》.人民衛生出版社.2013
[2]李浪.《大眾心理學》.2006.吉林文史出版社 吉林音像出版社


來源：藍色瘋狂島