程序員站在遊戲策劃角度寫給美術的 UI 指南

遊戲設計 UI 美術與設計\分析與見解\界面與交互死亡空間女神異聞錄5 艾達王哪誰 2022-07-01

文章旨在打通一些遊戲行業各個不同專業崗位的一些入門知識，希望大家看完多少能有些收穫。為了理解方便，會儘可能使用日常語言表述，不準確的地方請大佬們多多包涵。

所有轉載請註明出處。

本文將從

程序：計算機圖形技術（Computer Graphics）
策劃：遊戲體驗 UX / 信息的呈現方式 / 信息的優先級 / 平臺間UI 適配
美術：畫風(Graphics style / Drawing style) / 聲音設計（Sound Design）
國際化市場 / 本地化：不同語言間UI避坑

這四個方面分享一些基礎知識和在3D遊戲中的 UI 設計方面的應用。這裡的 UI 不單純指玩家屏幕上的血條/彈匣內剩餘子彈等 UI 元素，也包括視覺特效VFX / 音效SoundEffect 等其他的一些廣義上為玩家提供信息的元素。

程序：計算機圖形技術-我們的虛擬三維世界是什麼？

三維虛擬世界的基本構成：點-線-三角形

在計算機中所有的三維物體都實際上是由一個一個端點（Vertex）間連接構成一個個小的三角形平面（Triangle），然後這些小三角形又緊密相連，包裹出了一個封閉的物體（又稱：網格/Mesh），這才構成了我們看到的虛擬三維世界。

構成關係為：點 >> 線 >> 三角形 >> 面 >> 物體

左側：紫色小點為端點Vertex 右側：黃色為三角形Triangle

玩家觀察遊戲世界的眼睛：攝像機

在很多遊戲引擎中玩家都是通過一個【虛擬的攝像機】來觀察遊戲世界的，如在第三人稱遊戲中（如新《戰神》/《神祕海域》/《戰爭機器》/《生化危機》4~6）這個攝像機一般被放置在了玩家的身後並跟隨玩家移動的。

射擊遊戲中常見的攝像機擺放方法

大部分第三人稱遊戲

把【攝像機】放在了玩家後方偏右的位置並加入了切換攝像機左右的功能（如《死亡空間》/《PUBG 》等），也有部分遊戲（如《雨中冒險2》/《女神異聞錄5》/《黑魂》系列等）把【攝像機】放在了玩家後方正中央。

好處是不容易出現 3D眩暈症，所以玩家控制的人物可以快速地大幅度地爬牆/跳躍/鉤鎖移動，也可以有迴旋斬這類大幅移動人物身體的技能。
缺點是沉浸感不那麼好，且玩家胸前的空間是視野盲區，如使用鑰匙、換彈等小幅動作較難體現。另外在狹小空間內【攝像機】很容易卡在牆上。

生化危機4 - 把第三人稱射擊發揚光大的作品採用的是激光指示線準星 + 右後方【攝像機】的組合

女神異聞錄5 - 大部分時間人物在畫面中心（攝像機在正後方）

在第一人稱遊戲中這個攝像機一般放在玩家的頭部或者胸口位置，典型的有《決勝時刻》/《戰地》/《CS:GO》等遊戲。

好處是沉浸感強，使用鑰匙、換彈等小幅動作可以很好體現，射擊遊戲的精美槍械皮膚的細節也可以很好地展示給玩家。在狹小空間內一般不會出現問題。
缺點是一但玩家出現大幅移動和視角轉動，很容易出現3D眩暈。

第三人稱射擊遊戲有個特例是 FromSoftware 的硬核機甲射擊遊戲《裝甲核心V》採用了隨著玩家的左右移動，自動移動【攝像機】到左右肩後方的功能。個人推斷是為了達到類似【板野馬戲 / 板野サーカス】的視覺效果。

板野馬戲：日本動漫中畫面中充斥著大量導彈激光等投射物軌跡的畫面，參考【視頻】

可以看到隨著玩家機甲的左右高速移動，玩家較準星（圖中圓環）的相對位置發生了改變

另外還有一種常見攝像機位置是動作遊戲中比較常用的第三人稱固定視角，如老《戰神》/《鬼泣》都是採用了這個系統。這樣可以最大限度地展現玩家角色的酷炫的連招和動作，但是要求遊戲策劃為每個場景單獨需要配置【攝像機位置/攝像機軌道】，但是同樣的也提供了一些【只有基於視角的謎題】的可能性。

第三人稱固定視角主要用於PS2~PS4主機時代的3A動作遊戲，2010年後已經較為少見了，但是如今的偽3D獨立遊戲如《黑帝斯》/《死亡細胞》本質上也可以說時採用的第三人稱固定視角的變體。

戰神3 - 赫拉迷宮關卡利用了【視覺錯覺】的謎題

【UI界面】在這個虛擬空間中的位置

攝像機和顯示物體的關係 - 圖中茶壺可以視為玩家人物

遊戲中的UI在邏輯上可以分為3層：

玩家屏幕上的UI元素：如準星 / 血條 / 水滴 / 泥跡等，這層UI元素不受任何其他元素遮擋。（直接顯示在上圖中的NearZ平面上）
玩家角色身上的UI元素：如第三人稱中玩家被打暈時頭上的星星/玩家身上揹著的揹包和道具，第一人稱中玩家的手和槍械。這類UI元素偶爾會被雪花/雨水等環境有輕微遮擋。（假設上圖中茶壺為玩家人物，這層UI元素就是茶壺上的各種裝飾）
場景中的UI元素：如敵人頭上的血條/狀態欄等。這類UI元素有相當的概率會被牆體或者場景中高亮度光源干擾。（假設上圖中茶壺為玩家人物，這層UI元素就是茶壺和FarZ中間的各種其他物體）

為防止場景中的物體對玩家體驗造成干擾，常見的渲染技術有：

Object Dithering
Cut-Out View

這兩種，簡單來說就是不顯示遮擋玩家視線的物體。

榮譽戰魂 for Honor 中，對牆面的部分（紅框處）進行了切割處理

策劃：遊戲體驗 UX-好的 UI 總是讓人意識不到這個 UI 的好

對於遊戲策劃，特別是戰鬥/關卡/玩法策劃來說，廣義上的UI是非常重要的工具和設計元素。UI 可以幫助塑造一個更加真實可信的世界觀，以及幫助講一個更加可信可沉浸的故事。

目前高品質的 UI 有兩個主流設計風格（不單純是視覺風格/畫風，稍後會專門解析）

寫實 3D：UI 本身就是場景的一部分，如《全境封鎖》/《生化危機6》/《死亡空間》等
扁平風格化 UI 的視覺元素和遊戲世界觀結合，如《女神異聞錄5》、老《戰神》、《魔物獵人》等

這裡比較好的例子有《全境封鎖》系列，其中酷炫的結合場景的寫實 UI 實際上是有設定成【玩家身上的特殊虹膜顯示設備】的。

設定 - 橘色類似錶盤的特殊顯示設備

全境封鎖 UI - 類似使用全息投影/AR 的效果

《生化危機6》則是根據每個人物不同的身份，單獨做了一套風格不同的UI。例如艾達王作為長期神龍見首不見尾的間諜，UI設計基於的是手中的透明方塊狀通訊設備，這一點在劇情CG中也有體現。

生化危機6 艾達王 - 可翻轉的透明方塊狀通訊設備

生化危機6 艾達王 - 右下角UI 採用和通訊設備相同的【立體淡藍色方塊】作為設計元素

苦命怨侶的另一半里昂，因為設定上是政府僱員，UI核心元素則是【智能手機】。值得注意的是雖然 UI 的圖標是沒有立體感的扁平畫風，但是本身UI模擬了一個立體的還會輕微晃動的手機頁面。

生化危機 6 身為政府僱員的里昂 - 【UI圖標】則用的是基於智能手機的【扁平白色圓角幾何圖形】作為設計元素

作為專業反生化危機部隊的克里斯，UI上則是使用了類似軍用設備中雷達和瞄準鏡的【熒光綠色多重圓環】作為UI設計的核心元素。

看完了直接融入場景的立體風 UI，我們來看一下化繁為簡的扁平風UI。

《女神異聞錄5》主角一行人設定上是正義的心靈怪盜，所以這 UI 字體上採用了大量類似剪報和街頭塗鴉的設計，其中最出色的設計個人認為是流暢的戰鬥結束和UI切換時的動畫設計。

女神異聞錄5 - 動漫畫風UI的頂流擁有個人見過最出色的場景轉換動畫

另外一個扁平風比較出彩的是《魔物獵人》系列，特別是系列早期作品。

《魔物獵人》的UI設計很大程度上參考日本北部阿伊努族的傳統紋飾，其中矩形長條、樸素的顏色（深藍/灰/黑/白/棕）為主要設計元素。

阿伊努族的傳統服裝

從左上角的時鐘、道具圖標到正上方血條的標記都是採用了大量的矩形長條作為設計元素。字體也選用的是比較粗短憨厚的像素風字體或《魔物獵人》畫風的風格化字體。順帶一提，因為英文字母只有26個、日文平片假名只有46個，所以相對好做風格化字體許多，中文要做風格化字體會累死人的。

魔物獵人2G 的UI - 整體採用了給人原始部落感覺的比較簡單的畫風

魔物獵人XX 載入畫面 - 右下角的 Now Loading 英文採用了風格化字體

戰鬥信息的呈現方式

在信息呈現上，一般來說單機遊戲越休閒、越PVE導向，UI 的設計就可以走風格化、和場景結合、不直觀、學習成本高的路線

地鐵2033 任務菜單 - 依靠寫字板+指南針呈現任務目標和地點左側的4向的投擲物選擇輪盤是在主機遊戲中非常常見的UI設計

地鐵2033 - 大部分廢土的槍械都是手工製造的子彈會暴露在外面，玩家雖然看不到彈匣內準確彈數，但是可以依靠直接觀察手中的槍做一個大致的判斷

聯機遊戲，越電子競技、越PVP導向，UI 的設計就一般，更直觀、更簡潔。

英雄聯盟 - 大量的數字文字和縮略圖標

泰坦隕落 TitanFall 1代就有的在槍的後方加入小的顯示屏，顯示剩餘彈數的功能。

信息呈現的優先級

在 FPS 中，一般準星的周圍是最高優先級的信息，如《COD 戰區》的破甲提示、很多射擊遊戲的爆頭提示和命中提示都是放在這個區域（下圖中紅色區域）的。展示時間也一般為1秒鐘以內。

中間優先級的信息，如小隊成員的存活情況、自己的裝備信息、計時器等，則一般放在屏幕正下/正上方 (黃色區域），可以常顯示/固定時間展示/滾動展示。

最低優先級的信息，如網絡情況、小地圖等，則一般放在屏幕的4角處或4邊處（綠色區域）。一般是常顯示。

韓國Nexon 的新TPS戰術射擊遊戲 Veiled Experts （暫譯蒙面專家）

特別提一下就是不同的【UI組件】對不同平臺的適配性完全不同。

如為了【實現不同道具間切換】這一功能，轉輪（ItemWheel）對移動端（按住後拖動）和主機端（扳機鍵L1/R1 + 轉動搖桿）比較友好，一般單手可以完成，但是這一個簡單功能在PC端（TAB鍵 + 大幅移動鼠標）往往需要左右手同時操作，而鼠標又不像搖桿會自動歸位，操作比較繁瑣。

荒野大鏢客2 Red Dead Redemption 2 - 道具選擇轉輪

相反，《我的世界》中的每個物品佔一格的常顯示物品欄（屏幕正下方）對只能使用上下左右十字鍵的手柄用戶很不友好，但是對於可以直接用1~9數字鍵選擇的PC用戶或可以直接觸屏點選的移動用戶來說非常方便。

添加了光影Mod 和小地圖Mod 的我的世界

個人總結的基於【方形按鈕】可以派生出的 UI控件 UI Component 和它們在各個平臺的可用性。

美術：畫風與顏色-終極目標超越《P5》？

一般來說概念設計/人物設計的畫法大的分類有下面2種：

賽璐璐畫法：平塗 /Cel painting / Anime drawing style / アニメ塗り（A Ni Me Nu Ri）
油畫畫法：厚塗 / Oil painting / Thick painting (Impasto) / 厚塗り (A Tsu Nu Ri)

本質上畫風【平-厚】是依據畫風的偏【抽象-寫實】的程度進行分類的，每個文化區域有自己不同的一套藝術教育研究體系，很難做到一一對應的翻譯。

畫風的分類 - 更像從一個點開始擴散的同心圓

實際上畫風的分類不是一條直線，而更像一個由圓心擴散的一個個同心圓。各個文化地區的寫實畫風其實比較接近，而【風格化/抽象】畫風則各有各的特色，也就離圓心越遠。

切換動畫效果

除了上文在提到過的《生化危機6》、《魔物獵人》、《女神異聞錄5》等遊戲外，下面的幾個例子也是 UI 的切換動畫做得非常有特色的。

地鐵:離去 - 打開菜單時人物也會同時打開揹包

合金裝備V幻痛 - 打開菜單時 BigBoss 會拿出手中通訊器注意切換菜單時，人物手指也會有相應的動作。

合金裝備V幻痛 - 玩家在返回基地和執行任務載入時 Bigboss 會在直升機中輸液補充能量。玩家這時也可以聽錄音磁帶了解劇情。

音效

音效常在動作遊戲中，和閃光等視覺特效結合，用來幫助玩家判斷蓄力技能的時間點，或者反擊技能是否成功釋放。最大的優點是不需要佔用寶貴的屏幕空間，同時也能提供一種多感官刺激。

魔物獵人世界 - 大劍蓄力的 “噌” - “噌” - “叮” - “咣” 的音效想必很多玩家記憶深刻

Dota2 - Rampage！！！的音效場景

根據油管的 Scruffy 提出的觀點，一些短的相似的旋律（Leitmotif）很容易讓人記住，類似於腦中記憶的一個錨點。個人注意到遊戲中的也有很多類似的經典音效/語音，如《DOTA2》的“Rampage”或者《英雄聯盟》的PentaKill，可以給人很深印象。這塊筆者還沒有什麼積累，權當拋磚引玉，歡迎大神們分享。