給玩家更好的體驗——淺談沉浸式 UI的設計

來自微信公眾號“六十和二四的世界”（ID：jim_60_24_world）


近幾年以來，遊戲 UI ( Game User Interface )正在迅速地發生變化。UI 在遊戲中所扮演的，不再是一個孤立的角色。無論是 UI 所涉及到的範圍，亦或 UI 在遊戲體驗中發揮的作用，它開始變得越來越重要。傳統的關係結構，已經不再適用於當今的遊戲作品。

一直以來，遊戲 UI 如同舞臺中的帷幕，觀眾和舞臺的接觸，需要通過帷幕的拉起才能實現。儘管這個比喻忽略了遊戲互動的內容，但是這確乎是 UI 長久以來所起到的作用。尤其是街機時代的遊戲 UI，其遊戲開始介面，若用帷幕來形容，可謂是恰如其分。

然而，隨著遊戲行業的發展， UI 和遊戲設計之間的邊界變得愈發模糊。舞臺和帷幕的邊界不再那麼清晰。遊戲設計師需要創作出更棒的作品，以求玩家能獲取更好的遊戲體驗，能更深入地沉浸在遊戲的世界。為了達到這個目標， UI 所能發揮的作用不可或缺。因此，我將在這篇文章中，介紹本文的主角——沉浸式 UI ( Immersive UI )。


簡單來說，沉浸式 UI 的目標是“有效地傳遞資訊，為玩家帶來更好的遊戲體驗，能讓玩家專注於遊戲互動”。沉浸式 UI 的形式非常廣泛。很多時候，它和劇情 UI ( Diegetic UI ) 非常類似。劇情 UI 來自於 Fagerholt 和 Lorentzon 提出的遊戲 UI 設計理論。簡單來說，劇情 UI 是存在於遊戲的 3D 空間中的一個物體。它能被遊戲人物（ 即玩家操作的角色 ）看見。比如遊戲世界中大螢幕上的操作選單。這種形式的 UI ，不再是單獨突兀的傳統 UI ，它與遊戲世界同時存在，玩家往往不會意識到它作為 UI 的存在，因此它能促進玩家的沉浸感。

但是，沉浸式 UI 不是依賴於弱化 UI 的存在感。傳統形式的 UI 也可以是沉浸式 UI。這一點，我會在接下來的內容中具體闡述。對於我來說，沉浸式 UI 的判斷標準來自於目標和實現的結果。凡是能增強沉浸感的設計，都可以創造出沉浸式 UI。這類 UI 完全由目標驅動。所以，我的思考都是以此為出發點。面對眾多優秀的沉浸式 UI 範例，我需要找到一個好的框架來梳理和歸類。

我決定使用 Celia Hodent 在 2015 - 2017 年 GDC ( 遊戲開發者大會 ）講座中提到的使用者互動模型。她從認知科學和腦科學的角度，向大家展示了玩家是如何瞭解、學習並沉浸在一個遊戲當中。

這個原則分為三個部分：

發現（ Discovery ) - 學習（ Learning ）- 沉浸 （ Immersion ）


發現（ Discovery ) 是玩家接觸遊戲資訊的第一個階段。這個階段中，我們需要引導玩家注意到遊戲試圖傳達的資訊。由於當代遊戲，尤其是大型遊戲中，各種資訊繁複，如何讓玩家迅速注意到關鍵資訊，同時不影響遊戲其他系統的運轉，這需要我們在設計時格外注意。

簡單來說，我們需要創造一個關注點（ Focus Point )，即遊戲介面的主體（ 類似攝影中的主題 ）。我們可以通過遊戲介面的佈局，或者是遊戲 UI 特效甚至是音效，達到這個目的。

比較常見的方式，便是利用色彩。通過色彩吸引觀眾的注意力，從而讓他們快速注意到主體，這種設計方案經常運用在電影和平面設計中。


在上述的兩個例子中，我們能都看到“大面積底色 + 點綴色”的形式。點綴色彩能輕易抓住觀眾的視線，突出畫面中想要強調的元素。在電影《辛德勒的名單》中，創作者沒有使用旁白，或者是特寫鏡頭，而是通過紅色讓觀眾注意到小女孩的存在。一旦觀眾注意到小女孩的存在，之後創作者便可以基於這點，進一步推動故事的發展，而不用擔心觀眾會在下一幕中，便忘記了小女孩的存在。


在遊戲《鏡之邊緣》中，遊戲設計師使用紅色來顯示水管能和玩家互動。在傳統設計中，玩家靠近水管後，通常遊戲會彈出按鈕圖示，顯示玩家可以通過按鍵攀爬水管。實際上，這種設計在這裡多此一舉。一旦玩家知道如何和水管互動後，彈出的水管 UI 資訊便會顯得冗餘。另外，在遊戲過程中，玩家操縱的角色會快速移動，這樣其實很容易錯過彈出式 UI 資訊。因此，遊戲設計師利用色彩的設計，非常高效且優雅。

當然，遊戲中其他常見的 UI 引導方式，便是通過動畫引導玩家。這裡我以《崩壞3》舉例。



遊戲《崩壞3》啟動後，內容載入是通過電梯上升的方式得以呈現。當載入完畢後，電梯便到達頂樓，遊戲畫面進入到遊戲的主介面。載入過程和遊戲主介面之間沒有任何間隔，玩家的注意力非常自然地過渡到遊戲介面。這種引導方式增強了儀式感，同時保證了遊戲體驗的完整性。雖然這個設計只是遊戲中很小的一部分，但是作為遊戲的開始流程，這無疑為玩家留下了極佳的印象。

在引導玩家發現遊戲資訊的過程中，有一點切記——“千萬不要喧賓奪主”。如同李小龍提到的“不要看指頭，而要看指頭所指的月亮”。


我們希望玩家關注的資訊是“月亮”，而吸引玩家關注資訊的各種設計，便是“指向月亮的手指”。如果我們過多關注“手指”，比如誇張絢麗的 UI 動畫，那麼玩家的注意力的確會被吸引，但是他們不會進一步探索遊戲呈現的資訊。


當玩家探索到資訊後，便會開始學習（ Learning )。然而，學習充滿了困難。玩家需要理解、記憶、試錯，還要飽受“記憶遺忘曲線”的折磨。玩家能容忍的學習負載是如此之小（ 因為他們是為了獲取樂趣，而不是重新體驗昔日的考試 ），遊戲設計師必須保證遊戲的資訊容易被理解。

傳統的遊戲 UI，比較常見的一個問題便是：玩家記不住各個介面之間的層級關係。隨著遊戲介面愈發龐大和複雜，當玩家點開主選單當中的子介面 1，再從子介面 1 中點開子介面 a，如果此時玩家想開啟子介面 2，他們很容易感到困惑。他們可能記得子介面 2 的內容，但是無法想起如何開啟介面，或者尋找到他們所需要的資訊。一旦玩家開始感到困惑甚至是惱怒，沉浸感便無法建立。更糟糕的是，隨著沉浸感的破滅，玩家的注意力也會喪失。但恰恰是高度的注意力，才是玩家高效率學習的前提。這無疑成為了一個惡性迴圈。

而在最近的遊戲產品中，越來越多的遊戲設計師，通過使用情景化 UI 來解決這個問題。情景化 UI 能利用空間來幫助玩家記住資訊。空間的存在會構建玩家的記憶。


遊戲《星球大戰：前線 II》中，其主介面採用了“透明化材質 UI + 3D 場景”的設計。玩家每深入到下一層選單中，畫面右邊遊戲角色的全息影像（ 這裡是克隆人 ）便會越靠近鏡頭。我們可以看到，當玩家深入到第三個層級時，遊戲角色是以半身像的形式呈現，和鏡頭的距離已經非常近。通過全息影像和鏡頭之間的距離，玩家可以大致判斷自己所處介面的層級。這種層級規律，簡單實用。3D 場景的存在，保證了每次選單之間的切換不會造成空間的割裂。而且比較有意思的是，玩家記憶負載的平均數量恰恰是“三”。我猜測這也是為何遊戲選單的最深層級止步於三層。


而在另一方面，遊戲設計師開始更多地利用影像傳遞資訊。相比於文字，影像確實具備很多優勢。歷史上人類第一次發現霍亂的傳染方式，便是內科醫生約翰斯偌通過將倫敦的霍亂感染數字，轉化為影像列表，從而發現了規律，推斷出霍亂能通過水源傳染。

影像能夠直觀地傳遞複雜的資訊，尤其是不同事物之間的關係。


比如《孤島驚魂5》中，遊戲設計師通過採用不同顏色的圖示，來顯示武器的額外配件。對於不熟悉槍械知識的玩家來說，通過這種方式學習不同槍械配件的名稱，遠比各種文字描述要容易得多。同時，這種配件和武器的關係，直接通過影像傳遞，玩家也容易分清不同配件和武器不同部位的連線方式。

總而言之，我們需要確保遊戲 UI 的輸出易於理解，形式簡單使用，這樣玩家的學習過程會變得相對輕鬆，互動的障礙會大為減少。


為了達到最後一步“沉浸（ Immersion )”，當玩家完成學習後，我們需要保證遊戲系統能提供持續的有意義的反饋，並利用自然的對映，讓互動清楚有效。通過激發玩家自發的驅動力，以及情感上的反饋，從而讓玩家進一步參與到遊戲行為中。與其讓玩家學習“如何使用 xxx 功能”，不如轉變為讓玩家學習“為何需要 xxx 功能”。

很多時候，人的自我驅動力能達到很多神奇的效果。Celia 在 GDC 2016 的演講中，提到了一個非常有趣的實驗。科學家找來一群年齡不一的小孩，要求他們迅速判斷由相同幾何圖形組成的兩排中，哪一排的幾何圖形數量更多。能成功完成測試的小孩，最小年齡為 6 - 7 歲。



當科學家將幾何圖形換成糖果圖案後，能成功完成測試的小孩年齡降低到了 2 歲。由此可以看到，驅動力能讓人的行為產生怎樣的變化：糖果對於小孩無疑具有更強的吸引力。由於糖果在小孩日常生活中隨處可見，這種自然的訊號根本不要小孩花費額外的精力去學習和理解。對於糖果的渴望增強了小孩的專注度。

人的驅動力可以分為外在驅動力和內在驅動力。內在驅動力來源於人自身的喜好、創造力、對於生死的認知，這種激勵是自發的。而外在驅動力則是通過諸如獎勵、競爭的方式所驅動。遊戲的每個系統，都可以為玩家提供無數個小的目標，驅動玩家逐一完成。如果每個目標，同時契合遊戲試圖提供給玩家的核心目標和體驗，那麼玩家的整個遊戲體驗，就會變得完整。

讓我們來看看，在被 UI 設計師反覆提及的遊戲《死亡空間》中，UI 設計師是如何完成了這個目標。


首先，設計師則為玩家提供了一種易於理解的概念模式。《死亡空間》的 UI 和遊戲角色完全融合。這就是我們前面提到的劇情 UI。玩家操作角色的血量，通過角色背上的發光管數量呈現。武器的彈藥數量，則是通過全息影像的方式呈現。子彈數量和玩家角色的血量，是玩家在整個遊戲核心體驗中（ 生存 + 殺死敵人 ）需要參考的主要資料。遊戲設計師通過使用劇情 UI，讓血條、子彈 UI 和玩家角色產生了極強的聯絡。當玩家在戰鬥過程中，眼球所關注的區域可以完全集中在畫面的中央。

試想如果遊戲設計師採用傳統的 UI 佈局，血條和子彈數量放置在螢幕的一角。那麼玩家首先要在戰鬥時，視野不斷在畫面中央（ 戰鬥區域 ) 和畫面邊緣來回切換。其次，UI 和玩家角色是割裂的狀態。儘管玩家也能很快接受兩者之間的關係，但是劇情 UI 所達到的沉浸式 UI，無疑更能讓玩家身臨其境。


除此之外，《死亡空間》的 UI 設計師，為了向玩家傳遞“絕望恐懼”的情感體驗。他們仔細研究了現實中肉類的質感和構造，並將這種資訊加入到 UI 素材的創作中。這些令人厭惡的圖片就被放在介面的背景中，雖然沒有直接呈現給大家，但是玩家會被潛意識地影響。從這裡可以看出，UI 沒有單獨地和遊戲主體分開，而是從方方面面契合遊戲的核心內容。無論是美術風格和情感體驗，UI 互動方式和遊戲核心機制的聯絡，《死亡空間》的 UI 都和遊戲整體內容，完美地契合在一起。

相信我們能在未來的遊戲產品中，看見更多出色的沉浸式 UI 設計。設計師對於使用者互動體驗的思考，定會有令人驚豔的新突破。

感謝您的閱讀！

作者：廣播員 Jim