本期内容，我将從遊戲《Cyberpunk 2077》（ 之後簡稱為 《2077》 ）的 UI/UX 設計出發，探讨相關設計的常見問題。不得不說，《Cyberpunk 2077》的 UI 設計，如同其遊戲本身，優點和缺點并存，且兩極分化嚴重。其背後的影響因素，正是目前遊戲 UI 發展過程中，勢必會遇到的問題。
話不多說，讓我們進入今天的話題。
一
《Cyberpunk 2077》UI 色彩闆
首先，2077 UI 顔色搭配，采用了非常典型的賽博朋克顔色，即現實中常見的霓虹燈色彩。這些色彩大多互為互補色，進而營造出非常獨特的視覺效果。互補色可以讓主色調更為明顯，進而創造出更具有沖擊性的藝術效果。早在印象派時期，莫奈和梵高便是使用此技術的專家。
左為遊戲中的兩組互補色，右為《Cyberpunk 2077》UI 主開發 Dan Voinescu 的作品
維克托·莫斯科索的海報作品 The Chambers Brothers, The Matrix, San Francisco, 1967
另一方面，這種顔色搭配還能表現超現實的迷幻氛圍。20 世紀的平面設計師維克托·莫斯科索（ Victor Moscoso ）曾利用互補色，制作出“色彩顫動”的效果。因為不同顔色經過眼睛水晶體時，會在不同平面上聚焦，最終視網膜成像的清晰度會存在差别，進而産生如同顔色顫動的效果。是以上個世紀 60 年代，這種風格常常用于迷幻搖滾樂和嬉皮士音樂的海報設計。
霓虹燈色彩從上世紀 70 年代開始便出現在大熒幕上。上述各個圖檔分别來自于《肮髒的哈裡》、《省港騎兵》、《南方車站的聚會》、《過關斬将》、《計程車司機》、香港 1975 年夜景、《終結者 2 》、《有話好好說》、《銀翼殺手 2049》、《攻殼機動隊》
除此之外，霓虹燈設定本身具有極強的非現實感。常見的霓虹燈顔色，在自然界非常少見。當人們看見這種顔色時，自然很聯想到城市、現代、科技。而賽博朋克題材的設定便是基于資本和科技發展到極緻的大城市。是以整個顔色的搭配和題材的設定達到了很完美的自洽。
但是這種風格化的設計，有一個緻命的缺陷 ——玩家的閱讀體驗不佳。
《2077》的字型閱讀體驗不太令人滿意
以字型來舉例，因為前面提到的“色彩顫動”效果，當人眼盯着紅色文字一段時間後，便會感到字型變得模糊不清，有種膨脹運動的趨勢。另外，《2077》的開發者還在很多場合給字型添加了熒光效果。這讓文字的易讀性變得更為糟糕。
《2077》所面臨的這種問題，其實是 UI 設計中的常見問題：風格化和易用性的沖突。很多時候，這兩者很難達到完全統一。設計師必須在兩者之間進行調整和取舍。以賽博朋克題材為例，雖然“互補色+熒光設計”很常見，尤其是在科幻電影中。但是科幻電影中的 UI 更多是傳達出一種科技感，UI 更像是視覺特效，而不是真正被人使用的媒介。如果在科幻遊戲中使用同樣的效果，不一定能帶來良好的體驗。
《對馬島之魂》電影模式和正常模式的對比
另一個反例便是《對馬島之魂》的電影模式。這種模式本是緻敬黑白時代的劍戟片，極大地滿足了武士電影的愛好者。但是這種模式下，玩家很難快速識别遊戲中的關鍵道具。比如草叢中的鮮花便很難從遠處被發現。而在黑白電影中，創作者會巧妙地利用光影來表現空間和結構，進而彌補顔色資訊的缺失。
總的來說，風格化 UI 究竟是服務于視覺效果，還是玩家互動的易用性，這都決定于遊戲類型以及體驗目标。純粹複刻他者的設計，無法保證體驗的完整。
二
《2077》UI 的另一個特點便是使用了大量劇情 UI（ diegetic UI ），即存在于遊戲 3D 空間且存在于遊戲世界中。玩家和遊戲角色都能意識到 UI 的存在。這種設計通常是為了讓玩家更沉浸于遊戲中。關于這一點，我在之前的文章淺談沉浸式 UI有所提到。
大家可以注意到字幕是先出現日文，之後再被翻譯為英文
由于《2077》是以第一人稱為主，這一點更是加強了“玩家所見即角色所見”的設定。是以玩家通過遊戲世界中的 UI 完成的操作，其邏輯都和遊戲世界對應。比如遊戲中的字幕，甚至都被處理為人工智能翻譯器輸出的文字。字幕本身也是遊戲世界的一部分。這種設計複刻了現實的體驗。因為大家在日常生活中，都是和身邊工具進行互動。互動的過程能被使用者察覺。
如果是第三人稱遊戲，UI 往往是非劇情 UI（ non-diegetic UI，傳統意義上的 UI ）或者是空間 UI（ Spatial UI，即存在于遊戲 3D 空間中的 UI，但不被遊戲角色覺察 ） ）。玩家通過此類 UI 完成操作時，從邏輯上來說，遊戲角色覺察不到玩家的行為。此時玩家和角色産生隔離。
車輛 UI 設計本身很棒，但是玩家能看見外界的區域非常有限
美中不足的是，《2077》的這種設計在快節奏的戰鬥中，會顯得非常笨拙。比如玩家與電梯的互動，就需要玩家靠近電梯的按鍵後才能執行操作。雖然遊戲中已經盡可能利用未來世界的高科技設定，讓很多操作行為變得異常簡潔。比如玩家駭入敵人的大腦，隻需要通過一個按鍵完成，而不是打開控制台輸入指令。
本令人期待的全息 UI 卻成為裝飾性物體
問題在于，這種情況，能處理的輸入是非常有限的。因為遊戲必須區分玩家的輸入是 UI 系統輸入和遊戲玩法系統的輸入。很多情況下，兩個系統之間都會用到同樣的按鍵。而系統的界限非常模糊，并存在很多極端情況。比如玩家在家中客廳切換播放器音樂頻道，有時候就會被遊戲系統當作是跳躍的輸入（ 兩者使用同一按鍵 ）。另外，由于劇情 UI 互動界面存在于遊戲3D世界中，互動界面隻處于整個畫面很小的一部分。玩家的位置和角度，都會影響界面的大小。是以界面内容必須簡單。這意味着《2077》的劇情 UI 無法處理過于複雜的請求。
《Half-Life: Alyx》很好地處理了第一人稱與全息 UI 之間的關系
更令這個系統雪上加霜的是，很多科幻遊戲中常使用的空間 UI（ 比如全息影像 ） 無法應用到《2077》當中。因為《2077》是第一人稱遊戲，存在于遊戲 3D 空間中的全息 UI，勢必距離玩家鏡頭很近，否則玩家很難進行操作。如果不經過精心設計，這實際上和菜單類的 UI 沒有太大差別。從開發的角度來說，菜單類 UI 成為了成本效益更高的選擇。是以在實際遊戲體驗中，我們還是會發現菜單類 UI 在《2077》占了很大的比重。（ 甚至是向調酒師點酒的過程，依舊是通過菜單 UI ）。整個遊戲 UI 系統隻有部分達到了 UI 和遊戲世界融合，剩餘的系統還是回歸到傳統菜單 UI 設計。這不得不說是一種遺憾。
三
除了上述提到的兩個方面以外，《Cyberpunk 2077》UI 還存在一個問題 —— 資訊傳遞效率太低。
《2077》遊戲主菜單
首先，各個菜單界面的結構較為複雜。設計者把所有的界面都放在了一個主菜單之下，這看似将所有重要版塊展示給玩家，但是各個版塊之間的優先級實際是不一樣的。比如遊戲任務過程中，我會經常用到地圖和武器菜單。我會希望越過主菜單，直接進入目标界面。地圖界面雖然有快捷鍵，然而在我退出地圖後，我會先回到主菜單，再回到遊戲畫面。哪怕隻是多了一步驟，這也會降低玩家的使用效率。
《最後生還者2》槍械更新界面是很典型的場景 UI
而對于使用頻率較低的版塊，我會更傾向于将它們轉換為場景 UI（ 依附于場景中某個物體/場景的 UI ）。這樣既能增加沉浸感，同時還能讓主菜單的界面更為簡潔。
密密麻麻，五顔六色，令人“目不暇接”
玩家會在遊戲中找到大量的文本資訊。這些資訊是建構整個遊戲世界觀的重要元素。然而，文本的呈現方式令人失望。從本質上來說，它們就是記事本文字，隻是包裝了一層賽博朋克皮膚。相比于圖檔和視訊，文字資訊處理速度無疑是較慢的。這種情況下，如何更有效地讓資訊以更高效的方式傳遞給玩家，同時創造一個适合閱讀的環境，便是設計師需要考慮的問題。《2077》的大量 UI 資訊缺乏基本的排版，沒有任何使用者引導。使用者需要自己找尋重要資訊。再加上前面提到的熒光效果字型，使用者體驗非常不佳。
類似的 UI 設計也在《輻射》系列中出現。對此我們還可以用後核戰文明的設定來解釋。然而《2077》UI 的特色之一便是科技感。這讓玩家很難相信遊戲中的菜單 UI 是來自于未來的設計。我對此有兩點個人建議：
文本的閱讀模式應該占據更大的平面空間，同時适當增加圖檔資訊。試想我們日常使用聊天軟體，如果使用者清單隻有文字資訊，我們找尋特定人聊天會變得非常困難。有資訊量的圖檔能很容易引起玩家的注意。需要注意的是，如果圖檔缺乏資訊，那麼玩家會把它處理為裝飾性圖檔；
創造一個更舒适的閱讀環境。比如主角 V 的家就是一個比較合适的空間。這裡的遊戲節奏較慢，相比于任務中間檢視資訊，在家中處理資訊會讓玩家感到更為舒适。同時也符合現實的經驗。當然這需要其他系統進行相應調整，我們不能強迫玩家隻能在家中處理文本資訊。
四
《2077》UI 設計具有很強的風格，也有明确的體驗定位。很可惜最後成品沒能帶來很好的使用者體驗。為了實作 UI 藝術設計目标，《2077》UI 系統犧牲了玩家使用 UI 的效率，卻沒有讓整個系統完全融入到遊戲世界觀中。這反過來再次說明，不結合美術風格、世界觀設定以及遊戲玩法，單獨設計 UI 系統，最後不僅無法保證 UI 的品質，反過來還會影響玩家的遊戲體驗。