遊點乾貨 | GUI是如何幫助遊戲進行敘事的?

Miffy Luo發表於2021-07-27
當你置身於遊戲世界, 抬起手就能看到手錶智慧螢幕上顯示的各種裝備, 全息投影的導航系統展開, 現實世界與遊戲世界逐漸融為一體......

遊點乾貨 | GUI是如何幫助遊戲進行敘事的?
(《全境封鎖 Tom Clancy's The Division》裡的全息介面是劇情敘事化UI的典型例子。)

“什麼是劇情敘事化UI呀?” 彆著急,接著往下讀~

眾所周知,再新穎、優秀的遊戲理念也無法通過糟糕的遊戲UI帶給玩家好的體驗。遊戲作為現實世界的縮影,最大的挑戰是帶給使用者/玩家的好的沉浸感體驗。精良的頁面設計,就扮演了打破遊戲世界與現實世界之間那一堵看不見的牆的重要角色。

埃裡克和馬格?納斯力在《FPS遊戲中增加玩家沉浸感的使用者介面》一文中根據不同型別的介面設計,探討了幾種常見的推動遊戲敘事的UI型別,下面就讓我們結合例項來一探究竟:

01、劇情UI (Diegetic UI)

劇情UI(Diegetic UI)即玩家可以通過視覺、聽覺、觸覺等感官與遊戲內的元件進行互動的UI元素。合理地運用劇情UI是一種能夠取代傳統UI皮膚欄(簡稱HUD)展示資訊的有效方式。

劇情UI根據遊戲場景將玩家需要的資訊融入角色本身,幫助玩家更加投入故事情節以帶來更好的沉浸感體驗。

在《死亡空間 Dead Space》中,UI設計師並沒有採用我們熟悉的生命值表現方式,而是用角色防護服脊柱部位的發光條來表示生命值,靜滯力場裝置對應位置的發光條表示靜滯力場值(遊戲設定中的一種能減緩快速移動物體速度的能量場)。

遊點乾貨 | GUI是如何幫助遊戲進行敘事的?
(《死亡空間 Dead Space》遊戲截圖)

02、系統UI ( Non-Diegetic UI)

系統UI(Non-Diegetic UI)是指所有UI元素都不在2D HUD平面皮膚上, 而是覆蓋在遊戲內容上方, 與遊戲場景和空間無關,是大家比較常見和熟悉的HUD皮膚欄設計。

常見的HUD以簡單直觀的方式給玩家一次性提供大量資訊,例如遊戲《英雄聯盟 League of Legends》中進入商城購買裝備的操作皮膚:

遊點乾貨 | GUI是如何幫助遊戲進行敘事的?
(《英雄聯盟 League of Legends》遊戲截圖)

當遊戲劇情被觸發時,展開的操作皮膚會破壞遊戲的沉浸感。所以系統UI設計風格在覆蓋遊戲內容的同時,依舊需要與環境、風格緊密結合,從而達到幫助使用者進入角色的目的,以強化玩家體驗。

在如瞄準、切換武器等簡單的行為中,玩家很少會開啟皮膚式的使用者介面去進行操作,而是傾向於沉浸式的使用者介面。例如,玩家可以直接在遊戲世界中找到真實的瞄準開關、切換不同的武器,而不用分散注意力。

遊點乾貨 | GUI是如何幫助遊戲進行敘事的?

遊點乾貨 | GUI是如何幫助遊戲進行敘事的?
(《無主之地 Borderlands 》遊戲截圖)


03、場景化UI ( Spatial UI)

場景化UI(Spatial UI)是指玩家在遊戲中可以像小說或電影中的敘述者(narrator)以第一人稱視角/第三人稱視角進行人機互動/互換資訊,同時推動故事情節發展。

通常情況下, 玩家(player)得到的資訊需要比遊戲中的玩家角色(avatar)要更多才能推動劇情發展,這時候就要“破壞”遊戲角色的敘述,通過場景化UI元素在畫面中為玩家插入更多資訊。例如,為玩家提供必要的“下一步”提示, 但仍與遊戲世界中的物品相關,避免出現選單頁破壞玩家沉浸感。

例如《細胞分裂》中,出現遊戲世界中的透檢視與文字提示來指引玩家進行下一步操作:

遊點乾貨 | GUI是如何幫助遊戲進行敘事的?

在玩家受到攻擊時,通過出現文字提示玩家“通過‘砸’來掙脫”("MASH TO BREAK FREE")來提示玩家脫困的方法:

遊點乾貨 | GUI是如何幫助遊戲進行敘事的?
(《細胞分裂 Splinter Cell: Blacklist》遊戲截圖)


04、Meta UI

Meta UI敘事理論中,UI元素並不是融合到遊戲世界中的物品中,但與劇情相關/遊戲情節相關,如排列在2D HUD皮膚的資訊元素。

例如,常見於HUD皮膚中的血條資訊,在Meta UI敘事理論中會以螢幕變暗或飛濺的綠色/紅色液體來提示玩家正在受到傷害/損失生命值;再比如,遊戲《看門狗 Watch Dogs》裡放大的手機/商店螢幕等等。

遊點乾貨 | GUI是如何幫助遊戲進行敘事的?

遊點乾貨 | GUI是如何幫助遊戲進行敘事的?
(《看門狗Watch Dogs》遊戲截圖)

作為UI設計師,我們可以通過多種理論角度去分析使用者介面,不同的敘述角度適用於不同的遊戲型別、能夠帶給玩家不同程度的沉浸感。不論是劇情UI、系統UI、場景化UI、Meta UI,任何UI敘事理論都是為了打破“次元壁”,提升使用者的沉浸感和體驗感。


來源:光子重慶創新研發基地
原文:https://mp.weixin.qq.com/s/aTybhIm2JUw_ywjWjPunYA

相關文章