生存類遊戲如何做使用者介面設計？從《漫漫長夜》說起

《漫漫長夜（The Long Dark）》是由Hinterland Studio製作的一款口碑、銷量雙豐收的生存類遊戲，遊戲在2014年的眾籌階段就以“生存”+“沙盒”的特性贏得了不少關注度，關於這款遊戲有不少值得稱道的地方，頗為硬核的慢節奏生存遊戲，小團隊的遊戲開發之道，常年保持更新的銷售模式……當然還有它專注於沉浸感的使用者介面設計。

近日平面設計師Iuliana U在gamasutra發表了一篇關於《漫漫長夜》使用者介面設計的文章，他指出了遊戲UI、HUD介面設計上的卓越之處，但也指出了遊戲動畫效果方面的不足。GameRes對文章進行了編譯。

如何在不破壞沉浸感的前提下，向玩家傳遞十幾種不同的狀態資訊？如何把握玩家主動控制權與未知事件之間的平衡？如何讓玩家在遊戲過程中不至於感到自己像是戴著一頂平面顯示儀？通過對《漫漫長夜（The Long Dark）》的研究，我們也許能夠找到一些答案。

《漫漫長夜》是由Hinterland Studio製作的一款第一人稱末日生存遊戲，遊戲旨在模擬真實的災難後生存環境，營造探索、絕望與孤獨的氛圍。依靠獨特的視覺風格、孤寂的冥思氛圍和高水準的遊戲打磨，《漫漫長夜》在生存遊戲紅海中脫穎而出。

遊戲的UX和UI在正式發售前經歷了數次迭代，目前仍在調整。早期的視覺風格走的是模擬物理物件的路線，四年後，遊戲依舊維持極簡主義風格。

《漫漫長夜》的基調

• 主題與遊戲理念：生存，孤獨。絕望，世界末日，寂靜，寒冷，飢餓，自然VS 人類，掙扎，探索
• 互動方式：直接控制角色
• 遊戲視角：第一人稱3D
• 遊戲時間：真實時間，晝夜迴圈，無暫停功能
• 主螢幕：HUD，庫存
• 勝負狀態：健康值降到0即失敗
• 趣味要素：沉浸，探索，挑戰，資源管理
• 挑戰要素：資源稀缺，生存需求隨著時間流逝增多，攜帶數量有限，天氣、掠食者的潛在危險，地圖龐大、地形多樣，行進速度緩慢
• 視覺要素：3D
• 視覺呈現：黑、白、藍的經典冬季配色，獨特的字型，大寫字母，極簡主義，“黑板粉筆畫”式的UI元素，突出顯示數字與進度，水彩畫視覺紋理，風格化的3D物體，稜角分明的物體佔多數，在燈光、陰影、輪廓等方面均有體現
• 色調：冬季主題，黑白藍相互搭配，較少使用紅、黃、藍、綠。
• 字型：專門設計的字型，多數文字使用大寫，說明文字小寫
• 相似遊戲：孤島驚魂3、森林
  

字型與色調


《漫漫長夜》主要以藍色與白色為主，在亮度上互有差異。這為UI的製作帶來了一個問題，它們在明亮及黑暗的極端場景中都能清晰顯示。製作組用兩種顏色來解決這一問題——幾乎所用UI元素都用實心的白色顯示，搭配高對比度的黑色背景。

表強調的顏色同樣維持清冽、柔和的風格，且極少使用。當你留意到遊戲中的彩色UI元素的時候你就能理解了，它們並未提供足夠高的對比度，尺寸太小則很難被發覺，外加上游戲強調沉浸感的原因，使開發者摒棄了這些花裡胡哨的、不必要的顏色、背景及裝飾。


遊戲的絕大部分資訊都採用文字形式，開發者為此特地建立了一種字型，該字型擁有不同的字母高度與樣式。多數情況下采用大寫字母，搭配常規的說明內容與附加資訊。顏色旨在傳達文字資訊的重要性，而字型樣式則起到了輔助作用。

在以上設計中我們可以得出一些經驗：

• 保證使用者介面與遊戲內視覺風格的一致性；
• 多嘗試不同的方法來為遊戲找到合適的搭配；
• 顏色如果不提供任何資訊的話，它未必要納入UI設計的考量中；
• UI沉浸感的塑造未必要用現實物品來做參考系；
• UI美學能提供更好的遊戲體驗及實用性
  

HUD介面


遊戲內多數HUD的設計是圍繞實際情況設計的，部分元素會隨著時間消失。HUD介面主要分為7個區域：位置、風向、庫存、患病情況、行進狀態、一般資訊以及健康狀況。

「位置」簡要顯示玩家當前所在區域的名稱，同時在玩家進入新地區的時候發出提示；「風向」標示風向變化，當玩家站在擋風區或試圖勾引掠食者的時候，會彈出圖示提示；「庫存」顯示庫存變化，如新入手的材料或即將過期的材料；「患病」區顯示玩家可能造成或治癒的傷殘資訊；「行進狀態」有多個圖示，用於標示跑步/耐力，蹲伏，斜坡站立，體重，武器狀態等；「通用資訊」則標示事件通知，如碎冰、徽章、獎勵條件等。

「健康狀態」則是主螢幕中固定的UI元素，其包含體溫、疲勞值、口渴、飢餓以及與指標升降相關的狀態5個要素。

遊戲中極少使用紅色，它們被專門用來指示危險、損壞、警告資訊，它們附著在圖示上，無需借用文字就能向玩家傳達資訊。


在此我們能學到的一項重要經驗就是把指示器的利用率最大化，將數值條做成圓形裹在圖示上以節省空間，大圖示不僅具備視覺享受還易於理解。另外，條形UI通常缺少用於示意的數字，雖然玩家可以在選單中找到相應資訊，但在HUD介面不需要顯示，有時候數字反而會讓玩家更難以理解狀態的上升or下降。

所有UI元素組都應有一套不同的樣式來做區分：區域文字大於位置文字以便於標示區域的大小；掠食者比擋風的圖示更大、更顯眼，以便於突出重要性；「患病」用不同顏色表示重要程度，紅為危險，黃為警告，白為次要；每個UI元素的顏色/透明度/紋理大小/形狀都需要能與玩家有效溝通。


鑑於《漫漫長夜》這些年來一直在改進，它擁有一套令人印象深刻地介面，透過它你能看到一個有總體規劃的UI樣式、風格是如何幫助遊戲保持吸引力的。無論系統增加了什麼新功能或作出什麼調整，先期的規劃能讓遊戲介面保持一致，它避免各個模組的UI不統一或讓HUD介面過於雜亂。

在這裡，我們得到的設計經驗是：

• 充分利用色彩心理學來表示遊戲狀態、情感、影響以及重要程度；
• 為數值條加入創意成分，用不同的樣式獲得更有趣的效果；
• 通過不同的視覺樣式來表達不同的資訊型別；
• 制定UI整體原則，在新增新功能或元素時遵循該原則；
  

此外，這一套HUD介面還有什麼可以改進的嗎？


首先從各UI元素的擺放位置說起，螢幕左上角的空間應該得到更多的關注，目前它只用於標明區域名稱，這一資訊對遊戲而言並不重要且可在地圖中獲取，可以考慮把重要的UI元素放在此處。

風向指示圖示可以考慮水平放置以減少空間，該組別的各個元素雖然都與空氣流動狀況有關，但看起來更像是彼此獨立的事件，可以考慮用紅、黃、白三種顏色來表示掠食者的吸引力程度。

擴大物品影像及數量能夠讓庫存情況更加一目瞭然，甚至能將它們與左上角的區域名稱共用以減少UI的空間。

「患病」可挪移至左側，這對於玩家來說是至關重要的資訊。目前遊戲的處理方法是它們會隨時間消失，只在「健康狀態」欄上顯示一個不起眼的標記，這導致玩家可能會忽略嚴重損害到健康的狀況。

「行進狀態」的擺放位置與其重要性相適配，但可以考慮重新排列圖示來提高效用，比如跑步/蹲伏這對對比明顯的圖示可以佔據同一位置。

「通用資訊」中的部分資訊可以併入到庫存等模組中，確保最關鍵的資訊才會顯示於螢幕中央位置。

遊戲對健康條的迭代次數最多，它的表現也令人滿意。唯一的問題是健康條上缺少增加/減少的指示，提醒玩家健康狀態的下滑有助於避免玩家因意外死亡而抱怨。

環形選單


玩家按住滑鼠時，螢幕上會出現一個包含完整HUD資訊的環形選單。與一般的環形選單一樣，該選單包含了數個常用的功能，中間的按鈕可回到上一級。

該型別選單的優先順序高於底部固定的彈出式選單，設計一個快捷選單能夠遮蔽不必要的UI元素，還能容納更多的功能選項。

《漫漫長夜》環形選單的主要選項有光照、食物、武器、設定誘餌、導航、營地、醫療物品、水以及身體狀況，二級選項會標示在同一環形切片中，灰色則代表不可使用。

該選單沒有用文字標示，而是採用圖示圍成一個圈，細緻的物品設計以及特有的形狀、顏色，即便尺寸不大也能一眼辯出。

玩家也能自行將底部選單中的功能新增到環形選單中，它們會自動填入相應的環形切片之下，開發者還為每個選項或物品上方新增了相應的工具提示。

在此處我們能獲得的經驗是：

• 確保環形選單的圖示易於識別；每種食物與醫療物品都有易於識別的形狀與顏色；
• 通過環形選單取代螢幕底部的選單，減少HUD介面的UI元素；
• 通過圖示而不是文字能夠加快導航速度，如果不能完全取締文字，可以在選單外部增加提示；
  

此外，它還有什麼可以改進的？


諸如休息、誘餌這一類表示動作的圖示與某些物品圖示過於相似；而且誘餌選項不易選取，作為一項重要的捕獵功能它應該被放置在能快速觸發的位置。

部分物品在無法使用時會被設定為半透明狀態，將其改為黑色輪廓更易於理解，且符合整體的UI 風格。

環形選單還可以單獨設定一個常用專案的環形切片，例如水、食物、木炭這些常用的專案，而無需每次都需要點選數次才能訪問。

動畫


在生存遊戲中，沉浸感至關重要。遊戲必須有一套相適應的UI、UX，你不能挪用其他的圖示或UI元素來呈現遊戲的樣貌，你必須在與玩家的交流中發揮創意。

動畫、聲音以及臨場的視覺效果在沉浸感的營造上佔據重要地位。在《漫漫長夜》中，玩家的視覺會因為某些不利狀況變得模糊，腿受傷后角色會跛著腳走路，遇到障礙行進速度會變緩。需要留意聲效和語音設計之間的協調性，角色對飢餓、寒冷、疲倦等狀態做出相應反應，能大幅度增加沉浸感。

《漫漫長夜》借鑑了不少《孤島驚魂》系列的UI、互動、動畫設計，遊戲中有數種不同型別的動物，每種動物都規劃了一套行為模式。

當玩家用石頭捕獲兔子的時候，你可以將其擊暈，然後看它在角色手裡顫抖不已的模樣。儘管玩得多了玩家就會適應這一狀況，但頭幾次依舊會感到驚喜，它們與生存遊戲的基調不謀而合。


與野狼的對決旨在檢驗玩家的反應速度，玩家有數秒的慢速時間選擇武器，反應速度越快，遭受的損傷越少。

熊的攻擊無法被規避，遊戲會進入預置的指令碼動畫，恢復知覺後玩家身體狀態以及庫存物品多數受損。

在這裡我們獲得的經驗是：

• UI/UX設計並不侷限於圖形，聲音與互動也能傳達相應的資訊；
• 為不同的動物、資源設計單獨的事件，可以增加遊戲的玩法、豐富遊戲的UX。
  

但《漫漫長夜》在這方面有相當大的提升空間。


很遺憾，上述圖片是《漫漫長夜》僅有的幾個沉浸式互動設計。其他內容均由一個圖示或進度條表示，以至於不少負面評論都指出《漫漫長夜》是一個“進度條遊戲”。

遊戲顯然需要更多的動畫來增加沉浸感。哪怕是使用簡單的視角動畫來模擬入睡、甦醒的狀態都比現在的黑幕淡入要好。像治療、飲食這些每五分鐘執行一次的動作也可以設計簡單的動畫，而是不用進度條表現。

《孤島驚魂3》中有不少簡短但有效的動畫效果，比如收集、剖屍、治療等動作，它們讓玩家能更確切地感受到與遊戲物件的互動，還能表現角色的情感，為傷口包紮繃帶治療動畫傳達疼痛感，迅捷的植物採集動畫表現嫻熟度，剖屍動畫的血腥場面表現生存遊戲的絕望。


《漫漫長夜》同樣無法顯示角色當前的裝扮，無論玩家穿多少層衣服或手套，視覺上都是一雙套著襯衫袖子的手，對這一情況加以改進能大幅提高遊戲的沉浸感，而不是僅僅在螢幕上顯示“+5溫暖值”。

善於利用攝像機前的雙手能為玩家創造更多沉浸感，但《漫漫長夜》的視角里很少出現玩家的身體。《鏡之邊緣》則是一個正面例子，這是一款專注於攀爬、跳躍的跑酷遊戲，你可以從遊戲中觀察到開發者是如何利用雙手與雙腳塑造沉浸感的，《漫漫長夜》可以有所借鑑。


總體而言，《漫漫長夜》依舊是生存遊戲設計的一個正面例子，它有不少出色的UI/UX設計。

原作者：Iuliana U
原文地址：
https://www.gamasutra.com/blogs/IulianaU/20210112/376097/Long_Dark_Survival_game_HUD_UI.php