沉浸進行時 —— 由Diegetic UI引出的概念學習
本文主要通過對定義的研究,結合一定的具體案例來學習Diegetic UI本身及其延展概念,然後嘗試擴充至沉浸式體驗。
一、敘事UI與遊戲介面
1.1 初識Diegetic UI
Diegetic來源於電影術語,直譯是敘事的。在韋氏詞典裡,特指在一個敘事世界中已存在或正在發生的,而不是這個世界以外的東西。在電影領域,常常和聲音結合一起出現:
Diegetic Sound —— 劇情聲(場景內的聲音,角色可聽見)
Non-diegetic Sound —— 畫外音(旁白,角色不可聽見)
電影本身就是講故事並以敘事為主,如果遊戲也想講述一個故事,那麼遊戲和電影就有了高度相似性,得以把電影的概念延伸到遊戲UI上,也就有了Diegetic UI的用法。
1.2 遊戲故事與遊戲空間
遊戲要講述一個故事時,同時也要提供一種體驗,這會牽涉到兩個重要概念[2]:
敘事(Narrative): 遊戲需要敘述的故事本事;
第四面牆(The Fourth Wall):玩家與遊戲發生空間之間的想象屏障。
基於這兩個概念,在設計遊戲UI時,就必須回答下面的兩個終極問題:
1. UI是否存在於遊戲所敘述的故事情節中?
2. UI是否存在於遊戲所發生的物質空間中?
二、四種遊戲UI型別
對上述兩個問題的不同回答和組織,引出了四種遊戲UI的不同型別:
- Non-Diegetic
- Diegetic
- Spatial
-
Meta
Level Up: A Guide to Game UI (with Infographic)[3]
左側欄:UI是否在遊戲的故事情節中
上側:UI是否在遊戲的物理空間中
這裡先暫時拋開各文章和翻譯提供的譯名,我們先了解各自的來源和案例,再定下適當的名稱,以求描述準確。
2.1 Non-Diegetic UI
既不存在於故事情節中,也不存在於物理空間中 —— 包括玩家所控制的角色,遊戲中任何角色都不能感知到它們的存在。
典中典:《超級馬里奧》底部UI
這類UI通常以2D的HUD方式呈現,承載著統計資料的功能,如:輪盤、血條、小地圖等。尤其是在一些快節奏遊戲(fast-paced games)如跑酷遊戲,以及重度策略遊戲中,在某些方面上它們雖然分散了玩家的注意力,容易打破遊戲的沉浸感,但提供了更高效的資料閱讀方式,讓玩家更輕鬆地評估下一步該如何行動。
按照電影術語習慣,可稱之為:畫外UI,或非敘事UI。
2.2 Diegetic UI
即存在於故事情節中,也存在於物理空間中 —— 遊戲角色可以感知到它的存在。
大名鼎鼎:《死亡空間》的背部血條及一切UI
這類UI就是遊戲世界中的實體本身,能最好地貼合“敘事”的目的,使玩家保持沉浸狀態。例如帶資料顯示的高科技未來感頭盔、角色身上的小工具(如懷錶),以及角色模型的狀態。
但由於遊戲中的鏡頭排程或玩裝潢置上的畫面比例不同等種種原因,Diegetic UI可能無法保持良好的持續性。對資訊獲取率的降低,反而會削弱了體驗感。
《賽博朋克2077》中的車輛駕駛,真實但不舒適
2.3 Spatial UI
存在於物理空間中,但不存在於故事情節中。Spatial UI 符合遊戲空間裡的物理規則,但遊戲角色無法感知到它們的存在。
體育競技:《麥登橄欖球21》的線路展示
此類UI通常用於承載空間中的輔助資訊,幫助玩家選擇一個位置或物件。在《Apex英雄》中,標記系統在物理空間中的標記點也是同型別的UI。其他的例子還有:對物理空間中的物件產生的選中光效,角色靠近物體時出現的文字介紹氣泡等等。
鑑於其特點,可稱作:空間輔助UI。在一些開放世界遊戲中,空間輔助UI對玩家快速熟悉遊戲世界會非常有幫助。
《Apex英雄》中的PING標記系統
https://www.youtube.com/watch?v=prBDEKUSPMs
2.4 Meta UI
存在於故事情節中,但不存在於物理空間裡。它們和故事情節相關,但不會真實地存在於遊戲的物理空間中,因此遊戲角色可能或不能感知這些UI的存在。 —— 雖然全能的玩家總是什麼都知道。
改良吃雞:《Apex英雄》的對話文字和受擊
Meta UI的翻譯相當困難,多被譯作“元”。考慮到它和敘事的緊密聯絡,幫助讀者更好地理解這個概念,也可以稱作敘事輔助UI。和元遊戲一樣,敘事輔助UI也是很微妙的存在。例如在上圖中出現的UI內容,就是FPS遊戲裡最常見的用途:整個FOV在搖晃、模糊和變紅,並表示角色被擊中了。
元遊戲(metagaming),又稱“超遊”,多指的是包含了遊戲製作者為了打破了第四面牆,在遊戲中直接和玩家對話的遊戲。這會讓人想起電影《頭號玩家》,以及一些具備互動電影內容的遊戲,還有動漫《獵人:Greed Island篇》。
敘事輔助UI的另一種用處,就是將作者與玩家的對話資訊,進行了文字的視覺化呈現。這個用途是最能體驗敘事輔助UI 打破了第四面牆 的例子。如果敘事輔助UI的元素過多,而遊戲本身也沒有明確的世界觀設定,容易造對玩家的過度迷惑,從而極大地破壞了遊戲的體驗質感。
在以互動敘事為主的遊戲裡對Meta UI概念的探索上,以及在很多導演與遊戲製作人的努力下,現在已經出現了許多的具備了交叉領域性質的作品。感興趣的讀者可以搜尋《孔明的陷阱》(Kaizo Trap),建議直接在原網頁上體驗其中的互動操作,以便更好地探索Meta的這個概念。
古早冒險:《塞爾達傳說》的滾動文字,帶給玩家有用的提示
三、敘事和沉浸感——《死亡空間》與《逃離塔科夫》
3.1 Diegetic及其合適的譯名
分析了這四種遊戲UI後,可以總結出以下的譯名:
- Non-Diegetic UI —— 畫外UI,或非敘事UI
- Diegetic UI —— 劇情UI,或敘事UI
- Spatial UI —— 空間輔助UI
-
Meta UI —— 敘事輔助UI
在2018年的GDC遊戲開發者大會上,有一個關於UI設計的分享[4]:演講者Omer Younas將空間輔助UI(Spatial UI)和敘事輔助UI(Meta UI)併入到畫外UI(Non-Diegetic UI)的型別中,從”融入遊戲世界的程度“的方式進行劃分,大家值得一讀。
3.2 沉浸進行時 —— 作為目的
既然劇情UI(Diegetic UI)是最貼合敘事目的的UI設計,是不是多使用此型別的UI就能達到沉浸體驗呢?
不是的,營造沉浸感是目的,而敘事是方法。我們不能把這兩者等同。
3.3 時代的眼淚:《死亡空間》
《死亡空間》在遊戲裡全部採用了劇情UI
《死亡空間》極致地使用了劇情UI:所有玩家可見的UI都真實地存在於遊戲世界中,它們被解釋為作戰服或機器裝置所發出的全息影像。遊戲還把角色模型作為UI的載體:承載血條和時滯條的資訊,這更是深入人心的設計。
不得不說,遊戲將傳統UI全部都融入進了遊戲世界的做法,是一個大膽的嘗試。它確實驗證了劇情UI在沉浸感的營造上有著優勢,可是全息影像的設計是取巧的做法,並未對傳統的遊戲介面有太多的改良,玩家依然會把全息影像想象為傳統的2D畫外UI。
除去角色身上的血條、時滯條以及其他和傳統UI差別不大的全息影像外,其實在可互動物件的引導設計上,《死亡空間》也是下了一番功夫。
可互動的物件必定為藍色
不可互動的物件必定為橙色
這些提示資訊通過劇情UI所呈現出的一致性讓人讚歎不已,因此至今人們提起這款遊戲仍會津津樂道其UI設計。不過與其說是稱讚設計本身,更不如說是讚歎其對設計理念的堅持和統一 —— 裡面都是高昂的開發成本。
遺憾的是,由於《死亡空間》系列的銷量不佳,其工作室已被拆散,但開發人員依然在EA內部發光發熱。在《死亡空間》之後,關於對沉浸感營造的遊戲,我能想到的激進案例,還得數《逃離塔科夫》。
3.4 硬核再硬核:《逃離塔克夫》
《逃離塔科夫》中過分乾淨的遊戲介面
”硬核得讓人崩潰!“——這是不少自媒體對這款遊戲的評價。從截圖來看,除了右上角的一個模糊的健康狀況UI以外,常規FPS遊戲中的HUD在這個遊戲上都沒有。的確,如果手中的武器沒有瞄具、準星、彈藥數和地圖UI等等 —— 那遊戲確實營造了一個真實的槍戰世界。
並且,遊戲裡所有武器的音效,都是製作組買回真實武器,進行現場錄音製作的[5]。
《逃離塔克夫》顯然非常瞭解自身的核心玩法。所有的劇情UI(或是沒有UI)都圍繞著極其真實的逃脫式槍戰體驗來打造的。2010年EA(製作《逃離塔科夫》的公司)的子公司DICE的設計師Marcus Andrews,對遊戲UI在營造遊戲沉浸感的研究[6],對本文的幫助也是極大。
儘管在沒開始時,遊戲裡各種局外系統的UI極其難用,但實際遊戲中的UI設計和其他元素共同支撐起了玩法,並且創造了獨特的遊戲體驗 —— 所以在談論《塔科夫》時,我們會更多地談論它的硬核。
《逃離塔科夫》槍械配件UI
3.5 相輔相成
無論是《死亡空間》還是《逃離塔科夫》,都通過嘗試在遊戲中打造接近真實的物理世界,讓玩家身臨其境來營造沉浸感,其劇情UI的使用與遊戲整體體驗相輔相成。
在營造遊戲沉浸感的天平兩端,起碼要有敘事體驗與互動體驗。劇情UI(Diegetic
UI)在將遊戲打造得足夠真實的同時,也有可能會導致互動體驗的不佳 —— 玩家如產生了挫敗感,極有可能會打破其中的沉浸感。因此,在把握遊戲中細微的敘事性與互動性的平衡尤為重要,在感知、認知和操作[7]的方面,都是我們可以考慮的方向。
對沉浸感平衡的把握,是基於目標和結果的。如果調配適當的四類遊戲UI能增進沉浸感,他們也許就可被稱作“沉浸式UI”:
“有效地傳遞資訊,為玩家帶來更好的遊戲體驗,能讓玩家沉浸於遊戲互動。”[8]
四、後記
本文從Diegetic UI及其相關的概念定義入手,舉例學習、陳述了遊戲UI的四個分類,也引申出了關於沉浸感的一些思考。
實際上,對這些內容的研究,已經有業界的先鋒進行了一些前沿探索,例如前文提到的Micah Bowers、Omer Younas和Marcus Andrews各自都有獨特的想法。與遊戲沉浸式UI相關的資料,現時來說,在中文網站上顯然並不充沛。
然而在遊戲的體驗中,心流體驗作為一種認知體驗,又是比沉浸感更加深入的體驗[9]。
來源:光子設計中心
原文:https://mp.weixin.qq.com/s/2jVekHGTdn7XnjbNlCp7UQ
相關文章
- 遊戲UI也能敘事?騰訊光子設計師詳解Diegetic UI沉浸式體驗遊戲UI
- 學習Golang時遇到的似懂非懂的概念Golang
- 由顯示/隱藏引出的CSSbug(轉)CSS
- 由顯示/隱藏引出的CSS Bug(轉)CSS
- 由Java中的Set,List,Map引出的排序技巧Java排序
- 由哪個log先輸出引出的event loop思考OOP
- 由“香蕉”引出的字串匹配演算法的問題字串匹配演算法
- 由例項計數器引出(C#) (轉)C#
- 由sizeof()引出的對陣列名和指標的新認識陣列指標
- 小議學習java的浮躁心態(1)——引出篇 (轉)Java
- 前端學習-UI框架學習-Bootstrap5-012-進度條前端UI框架boot
- 深度學習概念深度學習
- 由亞馬遜內部禁止使用SQL資料庫引出的想法 - nelhage亞馬遜SQL資料庫
- JS學習筆記之由定時器引發的深入思考JS筆記定時器
- kettle基礎概念的學習
- Android UI學習 - Tab的學習和使用AndroidUI
- 由專案需求中引出的思考,Promise鏈式呼叫如何防抖Promise
- 由老同事學習SAP所想到的
- 重新學習!為Apple TV進行UI設計需要了解哪些基本規則?APPUI
- Android沉浸式UI實現及原理AndroidUI
- Android 沉浸式 UI 實現及原理AndroidUI
- 用TensorFlow進行深度學習深度學習
- 深入學習rollup來進行打包
- semantic UI學習(二)UI
- C#多執行緒學習(一) 多執行緒的相關概念C#執行緒
- C# 多執行緒學習(1) :多執行緒的相關概念C#執行緒
- webpack學習(一) -- 基礎概念及安裝執行Web
- 由ora-30036引出的問題,給大表新增列的時候,不要設定預設值
- Java學習之介面概念Java
- 使用sklearn進行整合學習——理論
- 使用sklearn進行整合學習——實踐
- 多個 iOS 裝置同時進行 UI 自動化測試iOSUI
- 遠端執行緒注入引出的問題執行緒
- 利用雙環 TDD 進行由外向內的開發
- 學習Java的30個基本概念Java
- Swift UI 學習資料SwiftUI
- UI學習第02天UI
- Android UI元件學習AndroidUI元件