淺談沉浸式 UI的設計——容易出現的問題及解決方案

在上一篇文章中，我曾簡單介紹了沉浸式 UI （ Immersive UI ) 的概念和設計原則。今天我準備談談沉浸式 UI 設計過程中容易出現的問題，以及可以採用的解決方案。

之前我提到 Celia Hodent 在 2015 - 2017 年 GDC ( 遊戲開發者大會 ）講座中所使用的玩家互動模型：發現（ Discovery ) - 學習（ Learning ）- 沉浸 （ Immersion ）。

其中，如何在“學習”這個環節，保證玩家有效率地獲取並儲存資訊，是一個極具挑戰性的任務。各種不同的問題，都會影響玩家的學習效率。這些問題包括：UI 資訊雜亂；UI 系統學習成本過高；UI 系統和遊戲世界存在衝突。

接下來我將試圖討論上述的三個問題。

UI 資訊雜亂是很多遊戲產品都會出現的問題。其原因在於遊戲系統過於複雜，不同系統之間沒有一個清晰的優先順序。這種問題可能是由於遊戲開發過程中，負責不同系統的各個組之間沒有很好地協調工作，各個系統之間的聯絡沒有得到梳理。當每個系統的資訊都變得非常重要時，最後結果就是沒有一個重點。如果 UI 資訊能以層次分明的方式被呈現，玩家獲取這些資訊的效率將會極大提高。

拋開遊戲產品開發流程上的問題，從設計的角度來說，我們可以通過“佈局和層級”解決資訊優先順序的問題。

在師維所著的《遊戲 UI 設計：修煉之道》中，便提到了設計師如何根據遊戲功能的主次進行 UI 佈局設計：“根據遊戲具體內容的數量和重要性進行權衡，合理的歸類佈局和補齊內容。根據菲茨定律（ Fitts' Law ）的啟示，在頁面中大而近的目標區域意味著使用者更容易達到，反之小而遠的目標區域則意味著需要耗費更多的時間。將選單欄和按鈕放置在螢幕邊角位置，相關的內容放在一起，儘量減少不必要的滑鼠移動”。

簡單來說，我們需要按照遊戲系統資訊的重要性，將其分配到畫面的不同位置。比如在 FPS 遊戲中，玩家角色的血量和武器值一般是最重要的資訊。因此在常見的 HUD 設計中，血量和武器值都被放置在畫面的下方，即高頻檢視的區域。而其他相對不太重要的系統資訊，可以放在畫面的上方。


在判斷出不同系統的優先順序之後，我們還需要找出各個系統之間的聯絡。比如藥包和血量肯定存在強聯絡，但和武器彈藥的關係就很薄弱。根據這些聯絡，我們可以把相關的系統組織在一起，使它們在畫面中的物理距離相互靠近。這樣一來，相關的系統將被視為一體，而不是彼此毫無關係。這種方法，便是基本設計原則中的“親密性原則”。

另外，我們在區分系統主次的過程中，需要以動態的思維去思考 UI 的設計。在某些情況下，UI 傳遞資訊的方式並不是靜態的。


比如在《Call of Duty: WW2》中的坦克對戰關卡中，UI 設計師需要創作出坦克被敵人炮火擊中後的 UI 圖示。如果我們純粹從 UI 的角度去考慮，我們可以設計出視覺衝擊力非常強的 UI 圖示，以顯示出玩家操縱的坦克被擊中時的火炮強度。從系統來說，這種設計看似也沒有問題。因為坦克對戰時，自身是否被擊中，以及敵人火炮的射擊方向，都是非常重要的資訊。但是，這樣的設計，在實際的遊戲中，可能出現很大的問題。因為實際戰鬥過程中，玩家坦克被擊中的頻率可能是非常高的。這樣就意味著，擊中 UI 圖示會經常出現在畫面上。如果圖示的視覺衝擊力過強，那麼此時畫面中的資訊可能就會過載。玩家的注意力本來集中在敵方坦克，但是很可能會被 UI 圖示的頻繁出現所干擾。

所以，我們在設計遊戲 UI 的不同層級時，還需要思考各個不同系統在遊戲實際執行時的狀況。設計師一定要以動態的思維去創造。

UI 系統學習成本過高一般出現在比較大型的遊戲產品中。由於遊戲產品本身系統複雜，即使每個系統之間的層級清晰，但是玩家學習成本可能依舊很高。更麻煩的是，在服務型遊戲（ Game as a service ）極為流行的今天，一個遊戲的 UI 系統不會一成不變。隨著遊戲的不斷更新，整個 UI 系統可能會變得極為龐大。“堆積木”式的更新方式甚至可能破壞已有系統的層級。

何況遊戲開發者很難在專案初期，預測一款大型遊戲將來的更新內容。因此我們不能通過預先做好 UI 擴充設計，來應對將來的遊戲內容變化。那麼在這種情況下，遊戲設計師應該如何解決這個問題呢？

說實話，關於這個問題，我們很難有直接的解決方案。不過我們可以嘗試採用一些設計方案，降低 UI 系統的學習成本。

首先，我們可以利用“概念模型”來設計 UI 系統。因為人類總是試圖通過簡化的模式來儲存和提取來自世界的資訊。我們渴望規律和模式，因此我們需要把事物簡化，好讓它們進入到我們的大腦。一旦找到了模式，我們就不需要記住所有的事情。

如果遊戲設計師可以為玩家提供一個“概念模型”，玩家掌握了該系統的基本概念後，便能很快地理解這個系統的行為模式。這樣即使該系統未來被擴充套件，玩家不需要二次學習。


舉個簡單的例子，遊戲《命運》中存在一個稱為“Tower”的地點 。它類似於 RPG 遊戲中的村莊。玩家可以在 Tower 中休息、升級裝備、購買物品或者接受任務。從玩家的角度來說，Tower 如同一個補給站。玩家可以在 Tower 的不同地點，和不同的 NPC 進行互動。玩家的互動過程可以簡化為：特定需求產生 - 找到提供對應需求的 NPC - 與 NPC 互動 - 完成需求。

某種意義上，Tower 實際上是一個複雜的 UI 系統。不同的 NPC 對應著不同的 UI 頁面，玩家在 3D 世界中的移動實際等同於在不同的頁面之間切換。這裡，Tower 巧妙地把 UI 的資訊移植到了空間中。玩家基於空間的記憶，完成各種 UI 頁面的操作。如果 Tower 中增加了新的操作頁面（ 比如新的 NPC )，玩家很容易注意到這個改變。相比於複雜的頁面檔案系統，玩家也更容易在 3D 的遊戲空間中，找尋到目標 NPC（ 目標 UI 頁面 ）的位置。

當然這種設計的弊端在於玩家的每次 UI 操作，需要來回移動，這會耗費巨大的時間。幸好《命運》的戰鬥之間的節奏相對較慢，且玩家補給裝備的時間較為集中。因此這種設計和遊戲本身有很好的契合度。

另外，我們需要注意“能供性”（ Affordance ）在 UI 概念模型中所扮演的角色。能供性是指環境為人/動物提供的一種可能性。舉個例子，人如果撿到一個長而尖的樹枝，很可能會把它當作武器。這是基於樹枝的形狀和硬度，從而提供了這個可能性。再具體一點，人面對不同的環境，會產生不同的認知模型。當我們在設計 UI 系統的時候，一定要注意其設計不要和玩家的心智模型產生偏差。


比如，相比於鋤頭，錘子更容易被玩家當作武器。即使錘子在遊戲中被當作工具，但是玩家基於現實中對於錘子的認知，依舊會將其當作武器來使用。所以在設計工具的 UI 時，我們應該儘量避免“武器化”的傾向。

再舉一個例子，UI 頁面中的不同元件，究竟哪些是可以互動的，哪些是隻讀元件，這些資訊能否很快地傳遞給玩家？我們能否基於“能供性” 的特性將其運用到 UI 設計中？這些都是我們需要思考的問題。


“UI 系統和遊戲世界存在衝突”，這個問題看似不會影響玩家的學習效率，但是反過來說，和遊戲世界契合完美的 UI 系統，對於玩家更具有吸引力，玩家也更容易投入其中，從而提高學習的效率。

如今很多遊戲產品已經具有非常嚴格的視覺規範和鮮明的品牌特點。UI 作為視覺元素的一部分，每個設計的輸出都得到了嚴密的把控。

為了讓 UI 系統和遊戲世界儘可能完美地契合，我們需要為 UI 制定規則手冊，分別從基本字號、顏色版（ color palette )、色彩規則、動畫風格、重要元件視覺狀態等等方面進行定義。


比如，同樣是射擊遊戲，科幻題材和二戰題材的遊戲 UI 設計，其質感勢必不同。二戰題材的 UI 的材質需要復古，復現出手工製品的質感。科幻題材的 UI 則可以按照極簡主義設計，呈現出失真的視覺風格。


對於 UI 動畫，我們也需要使其風格符合遊戲題材的定義。比如二戰題材的 UI 動畫，就會參考當年的戰爭宣傳片風格，多采用縮放、淡入/淡出的手法。動畫較為笨拙。而科幻題材的 UI 動畫，則可能採用簡單幾何圖形搭配複雜位移變換的方式。動畫比較平滑。


契合遊戲主題的 UI 系統，能給玩家留下良好的第一印象。畢竟人處理資訊的第一個層面基於本能反應（ visceral ）。這個層次對於資訊的處理是自動的、下意識的，由我們的生物遺傳來做決定。而良好的初始印象，會變為產生吸引力的資源，它是促使玩家產生積極情緒反饋的基礎。

再舉一個現實中的例子，原研哉事務所為梅田醫院設計的指示系統，選取了白布作為製作材料。他的出發點在於，儘管白布本身易髒，但是反過來，這種易髒的材質如果能隨時保持乾淨，反而體現出醫院具備最嚴格的衛生標準，體現出醫院堅持保持潔淨的事實。這和高階餐館會選取白色桌布是一個道理。白布在這裡，不僅是設計師選取的材料，更是用來向使用者快速傳達資訊的媒介。這種原則，我們可以同樣應用在遊戲 UI 設計中。


以上談到的各種設計原則，只是遊戲設計師技能樹的冰山一角。我們可以發現，遊戲 UI 設計所涵蓋的範圍在不斷地擴大，無論相比於遊戲的其他系統，或是其他領域設計，我們都能找到它與他者交匯的地方。這也是遊戲設計的魅力吧！


來源：六十和二四的世界
原文：https://mp.weixin.qq.com/s/jR0xKOj5lZVVexTQ_2t-lQ