硬核乾貨：認識遊戲視覺設計，從理論武裝到實操

本文首發網易遊戲學院，GameRes經授權釋出。

（一）什麼是遊戲視覺設計？

一、瞭解遊戲視覺設計的工作物件

①登入介面：登入介面是玩家進入遊戲本體之前的第一個門檻，可以說是對整個遊戲概念的首要印象。登陸介面通常包含：遊戲LOGO、登入和伺服器選擇資訊、登入入口，以及一些輔助按鈕，如公告、使用者中心等等。


②大廳介面：一些遊戲會有常駐資訊的大廳介面，通常集合了遊戲絕大部分的功能和玩法入口。


③伺服器介面：遊戲裡會存在多個伺服器對玩家進行分流，而伺服器介面就是承載這個功能的。通常可以在伺服器介面看到多個伺服器列表，包含每個伺服器的狀態。


④核心玩法介面（HUD）：玩家主要操作的介面，介面上功能的型別和多少，依據不同遊戲型別略有不同。


⑤系統功能介面：針對遊戲玩法的各個不同系統所對應的功能介面，常見的有角色介面、裝備介面、揹包介面、寵物介面、任務檢視介面、圖鑑介面、建立角色介面、抽卡介面等。不同遊戲 因為世界觀和主題的不同，以及玩法型別的不同，相同功能的系統名稱也會有相應的不同包裝。


⑥結算介面：通常是一局對決或一輪遊戲玩法的結束，一般包含“勝利”或“失敗”、“SABCD”等類似結果判定性提示，以及結果資訊。（重點在於營造正向反饋的氣氛，弱化負面反饋）


⑦活動介面：通常對氛圍的營造要求更貼合活動主題，並且與遊戲其他介面的風格保持一致。屬於遊戲介面中的特殊介面，也是視覺設計師發揮空間最大的介面。


二、瞭解遊戲視覺設計風格

定義：一個遊戲風格的誕生不僅需要視覺設計師的創意，也需要視覺設計師在前期投入大量的精力去了解專案的背景，這樣才能設計出一套符合遊戲世界觀與風格的介面，增加玩家的代入感與沉浸感。

①遊戲型別：不同的遊戲型別，所需要的介面內容是不同的，表現形式也是不同。以下為常見的遊戲型別：

RPG（Role-Playing Game）-角色扮演遊戲
ARPG（Action RPG）-動作角色扮演遊戲
SRPG（Simulation RPG）-模擬角色扮演遊戲
MMORPG（Massive Muti-player Online RPG）-多人線上角色扮演遊戲
AVG（Adventure Game）-冒險遊戲
AAVG（Action AVG）-動作冒險遊戲
ACT（Action）-動作類遊戲
STG（Shooting Game）-射擊遊戲
FPS（First Person Shooting）-第一人稱射擊遊戲
FTG（Fighting Game）-格鬥遊戲
SLG（Strategy Game）-戰略遊戲
RTS（Real-Time Strategy Game）-即時戰略遊戲
RAC（Racing Game）-賽車類競速遊戲

②世界觀：每一個遊戲都有自己獨特的世界觀，世界觀是遊戲中世界的樣子，處於什麼時期什麼背景，生存規則等，在這個世界發生的一切是玩家會了解和經歷的故事

世界觀包括：世界構架、地圖、陣營勢力，英雄甚至是遊戲道具都會包含其中。瞭解世界觀即瞭解的是世界背景、人物設定、數值力量均衡體系、主線故事。世界觀的架構會讓玩家在遊戲中身臨其境的感知，是引導玩家深入體驗的前菜。



③美術風格：作為視覺設計表現中最重要的環節，直接影響整體玩家對遊戲的沉浸感及遊戲的統一完整性體驗。【點選瞭解“美術風格”詳情】

三、瞭解遊戲視覺在遊戲中的作用

①橋樑

縱觀每年世界頂級遊戲廠商的新作，我們可以發現遊戲所承載的精神力量已經遠遠不止於提供娛樂這麼簡單。在對世界的認知，歷史追溯，人性反思這些方面，許多優秀遊戲作品都已經給出了不弱於文學，音樂，影視的驚喜。例如：《P5》真實還原城市，《刺客信條》還原歷史事件，《底特律》AI發展中人性的思考等。這都讓世界對遊戲有了新的認識，同時更堅定了遊戲從業者有更高追求的信心。

不同於人對大多數藝術形式的接受習慣——視、聽，遊戲在這基礎上增加了——操作體驗。這就增加了使用者接受作品新的維度。互動就是這一維度的最直接體現。


②感性與理性的化身

GUI在遊戲製作環節中，是遊戲互動操作的美術包裝，是對互動稿的美化和昇華。需要同時考慮對遊戲美術風格延續，和互動操作手法合理表達這兩點的融合。可以說GUI是藝術（感性）和人類行為學（理性）的雙重化身，對相關從業者有著以上兩點不可或缺的能力要求。GUI做好，玩家投入遊戲的沉浸感和體驗可以事半功倍。

③舒適和自尊

好的設計可以引導玩家明確目標、提高對行動及環境的駕馭感。玩家在遊戲中從事任何行為都能得到積極反饋，當然玩家以為的自發行為，其實都是經過精心的設計，由GUI執行的對玩家的引導。正是這些引導，增加玩家的自信，幫助玩家攻克困難、使玩家感受不到時間的改變。最讓人投入的忘我狀態，必須有豐富的感官經驗和強烈的認知參與，GUI的重要程度同遊戲玩法，情節，美術外觀表現，音樂一樣，共同構成遊戲完整核心。

四、遊戲視覺設計（GUI）原則

①馬洛斯需求層級理論

-功能性需求：可以使用

-可靠性需求：穩定，一致的操作體驗

-實用性需求：好不好用，包容性高不高

-熟練度需求：其表現幫助玩家在遊戲中做得更好

-創意需求：在滿足以上需求後，設計本身與玩家產生的新的連線和有益探索

②基礎框架搭建，流程的合理性——滿足玩家功能性需求

在最初就要對整體GUI做定製化設計：基礎框架搭建。這涉及到互動稿理解，功能性與實用性取捨。在明確遊戲型別，目標使用者以及專案未來預期後，需要確定基礎美術風格，以最簡練的包裝表達互動目的。

③世界觀架設——滿足玩家可靠性需求和實用性需求

很多優秀遊戲（《爐石傳說》、《冰汽時代》）的GUI設計在遊戲世界觀架設上已經實現得很到位，使用元素與遊戲背景故事以及主題相融合，動效節奏能夠帶動遊戲主體基調，這時GUI已經融入進遊戲，成為密不可分的完整體。（這也是優秀主機或獨立遊戲的最基本要求）玩家遊戲過程中能夠獲得統一的遊戲操作體驗，介面銜接合理，反饋恰到好處，讓玩家始終保持高度沉浸狀態。



④操作創新+價值輸出——滿足玩家熟練度需求和創意需求

在遊戲設計發展史上，會因為技術進步，裝置更迭，玩家對新遊戲型別的追求而階段性的產生一些操作上的創新設計，例如最早期家用機外接操作鍵盤（任天堂）， 到pc的windows模式帶來的滑鼠熱區UI設計，再到觸屏手機帶來的一系列新穎的技術，和目前新興VR的全息操作模式。

配合以遊戲故事性提升。在主題表達上，GUI通過情節引導，操作體感的配合，時間維度的加入等影響玩家意識從而引導遊戲走向的方式，能夠起到很好的價值輸出的作用。

例如： 《底特律-變人》的全域性QTE設計，只在正常QTE操作中加入了等待時限，這個聽起來不甚重要的設計，直接影響了玩家對選擇的預判，以至於影響到遊戲故事線走向。玩家會為自己倉促中所作的決定而帶來的後果感到惋惜和後悔。這正切合了遊戲主題：人類的侷限性，AI與人類發展前途未知的悲喜結果，以及對人性的探討。可以說GUI操作設計是整部遊戲核心價值觀的重要輸出渠道。


（二）遊戲視覺設計的製作流程

一、風格稿設計

①情緒板製作

敲黑板：設計風格稿前期製作情緒板，可以更高效的和產品溝通，打磨設計內容，同時能夠更快捷，直觀的向團隊傳達自己的設計靈感。

1）向產品索要關鍵詞——客觀時間地點，主觀情緒詞（有色彩傾向最好）；

2）大量搜圖，拼接內容包括紋理、材質、插圖、字型、色相；

3）簡單製作情緒象限圖，用色軸和時間做區分為上述素材劃分割槽域，組成色彩組；

4）展示給團隊，並進行選擇，逐步精確範圍，直到確定方向；

同時在這一步，我們可以尋找貫穿遊戲的主題元素了，這將決定後續設計的方向。

②包裝、介面型別選擇

介面型別需要在初稿階段一起敲定，這涉及到畫面包裝選擇範圍。

介面型別：

1）視窗

2）厚重

3）扁平

4）全屏

根據介面型別，確定包裝強度以及形式，我們幾乎用到的方法都是對現有客觀世界進行模擬。只是不同遊戲佔比不同而已。

③初稿設計

輸出簡單，不完整的設計概念。這一步驟目的不是依照互動稿進行美術裝填，而是GUI理解需求，這個時間是溝通關鍵設計點，並思考設計延展性，新增概念想法和改進表達方式的最佳時機。

二、介面設計

遊戲的介面量很龐大，是GUI設計師主要的工作量。

①通用功能性介面

在初稿的設計中，我們都會優先製作通用功能介面，因為這是全部介面中，能夠最完整表達包裝概念的部分，設計師可以充分表達自己的想法。

1）視窗介面（比較有規律可循，目前針對視窗介面的佈局創新不大，設計要求較小，滿足世界觀，選擇適合的元素即可。）

2）全屏介面——仿視窗（和視窗設計佈局方式類似，但是因為可以全屏展示，在氣氛營造上可發揮的空間更多。需要注意的是配色層級和風格統一）

3）全屏介面——情景（對設計品質要求較高，優勢是有極強的代入感，劣勢是資源量大，相關延展製作難度大。）

②大廳介面、戰鬥介面

這基本是一款遊戲曝光率最高的介面。

1）MMO仿端遊的核心體驗HUD（如:《一夢江湖》）;


2）樹狀結構的重包裝全屏大廳介面（如:《陰陽師》）；


3）階梯狀結構注重快節奏功能集中化的大廳介面（如:《荒野行動》）；


4）角色建立介面、結算、活動等特殊功能介面（相對風格化較強的介面型別、其中角色建立介面是MMO型別遊戲玩家最早操作的介面，特別適合培養玩家的好感）；



三、圖示設計及應用

圖示是GUI設計的另一大組成部分，是用圖形指代遊戲中絕大部分需要強調的功能和資訊。

①設計原則

1）美化過的內容更容易增強記憶——圖片比文字更容易記住。快速增強記憶點，正是遊戲希望向玩家所傳達的。

2）生活中充滿 類似、舉例、象徵、強制 等影像特徵的應用，經年累月，這已經成為現代人寫入文化的，約定俗成的認知烙印，在設計中使用可以事半功倍。

3）遊戲內的圖示設計，是遊戲風格傳達的通道，在不同遊戲中，我們有大量不同表現型別的優秀設計。

4）相應的文化規避：例如宗教，民族禁忌，版署規避等，避免出現在圖示設計中。

5）在圖示設計中注意造型飽滿，明度飽和度統一，剪影簡練識別性高，同一型別圖示大小一致，傾斜角度一致，環境光源一致。

6）當圖示造型並不規則時，我們需要採用一些對齊手法。

②按功能區分

1）系統功能圖示；

2）角色技能圖示；

3）消耗道具圖示；

4）商城內售賣圖示；

5）頭像、頭像框；

四、動效設計

動效是一部遊戲中GUI語言重要的組成元素。以往GUI設計常常忽視了這一點，多數動效都作為附加效果新增在有限的特殊提示控制元件上。

①介面切換效果設計

介面的轉場主要針對不同畫面銜接方式，以及UI出現的表現形式。對於節奏把控要求較高。在設計轉場時可以參考情節發展，做針對性設計。類似影視表現。（如《第五人格》進戰推鏡頭流程，《LOL》轉場流程。）



②控制元件操作反饋設計

我們對於玩家操作對應的反饋設計需要滿足：反饋及時良好、節奏自然，作行為和對應結果的效果需要一致，這能很有效提高玩家感官經驗。（例如《冰汽時代》裡所有觸控反饋和介面轉場全部使用煤渣煙塵的擴散效果）


五、Logo、icon以及遊戲衍生設計

①Logo設計

源於商業中的曝光效應，作為遊戲重複度最高的商標元素，logo，icon應滿足相對有趣的設計特徵，用於放大玩家對產品的正面接受度，同時也要滿足能夠在短時間內易於識別的特徵，便於短時，多次，多場合的宣傳應用。


②icon設計

作為智慧機遊戲專用入口圖示，icon製作特徵與logo要求接近，選用代表性圖形或文字表達同時需要在智慧機桌面合同類icon比對，識別更清晰。（Ios和安卓製作規格略有不同，公司有專門的icon加角標模板提供，設計時統一畫布為1024px 72ppi尺寸方形無圓角。）


③官網、品牌相關宣傳、周邊店、周邊等設計

每一部遊戲應輸出統一的視覺規範，可以在介面相關內容確定好後拾取關鍵視覺元素重複使用。


六、多語言製作注意事項

敲黑板：成功專案進軍海外市場是必然形勢，在專案初期鋪量就要考慮到資源的本地化

1）系統字——首先在系統字型選擇上，儘量選擇通用性強，可支援多語言，不帶有過強地域風格的字型。

2）美術字——非必要情況下儘量控制美術字素材的製作，這在日後都將成為本地化的工作量。

3）資源規範和整理—養成製作美術字資源後集中儲存原始檔習慣，根據相同字型進行分類，方便日後製作統計工作量。

4）版權——在本地化字型選擇前，需要先和商務確認字型在目標國是否有版權，使用有公司購買過版權或免費商用字型。

5）輸出規範——尺寸命名都與最初版本一致。

七、自我驗證

設計師需要建立驗證模型，從而檢視設計作品是否易用以及合理，從而得出理想的設計。