游戲UI設計原則與實例指導手冊（第2版）

李世钦（lesenli） 站酷推荐设计师，曾任职于游戏蜗牛、 CCP、腾讯、心动、叠纸等。拥有10余年游戏行业从业经验，在游戏界面设计和游戏界面动效设计方面都有着丰富的项目经验，参与或指导过的游戏项目主要有《九阴真经》、 DUST 514、 Legion、《全民枪王》、《夜店之王（小程序版）》、《跑跑卡丁车》、《和平精英》、《黎明觉醒》、《APEX手游》、《火力苏打》、《派对之星》、《伊瑟重启日》等。

基礎篇

第 1章 初識游戲界面設計 015

1.1 游戲界面的分類與特點 016

1.1.1 按游戲背景劃分 016

1.1.2 按美術風格劃分 022

1.2 游戲界面設計師需要瞭解的常識 024

1.2.1 游戲界面設計師的職能 024

1.2.2 游戲界面設計師工作的本質 025

1.2.3 如何追求產品的本質 026

1.2.4 游戲界面設計是藝術還是產品 028

1.3 關於做好游戲界面設計的一些建議 029

1.3.1 游戲界面設計的整體原則 029

1.3.2 掌握合適的學習方法 030

1.3.3 界面的表現效果 032

1.3.4 培養較強的溝通與表達能力 034

第 2章 游戲界面的設計流程 037

2.1 界面佈局設計 038

2.1.1 解讀需求文檔和交互稿 038

2.1.2 將交互稿轉化為界面佈局 038

2.2 界面信息設計 040

2.2.1 設定基本顏色 040

2.2.2 增加情感化內容 040

2.3 界面的細化 043

2.3.1 細化顏色 043

2.3.2 細化內部結構 045

2.4 質感的強化表現 046

2.4.1 細化紋理材質 046

2.4.2 調整並完善形體結構的細節 048

2.5 最終資源輸出 050

2.5.1 切圖的輸出 050

2.5.2 標註圖的輸出 051

圖標篇

第3章 游戲圖標設計基礎 053

3.1 圖標在界面中的重要性 054

3.1.1 情感化的表現 054

3.1.2 強化視覺引導 055

3.1.3 完善界面節奏 056

3.2 游戲圖標的應用場景 058

3.2.1 指代整個游戲 058

3.2.2 功能系統入口 058

3.2.3 功能性的裝飾 058

3.3 游戲圖標設計的基本原則 059

3.4 圖標的種類劃分 062

3.4.1 從美術風格上劃分 062

3.4.2 從功能上劃分 064

第4章 矢量圖標的設計方法解析 067

4.1 矢量圖標的分類與設計要點 068

4.1.1 線性圖標設計要點 068

4.1.2 負形面片圖標設計要點 069

4.1.3 多色扁平化圖標設計要點 071

4.2 矢量圖標的統一設計規範 073

4.2.1 尺寸規範 073

4.2.2 線條規範 074

4.2.3 像素規範 074

4.2.4 基本形的使用規範 075

4.3 矢量圖標的應用場景分析 077

4.3.1 輕量化位置 077

4.3.2 扁平化位置 078

4.3.3 需弱化用於平衡畫面的位置 078

4.3.4 需使用業界通用型設計的位置 079

4.4 矢量圖標線條美感的把控 080

4.4.1 不同弧線的交接處過渡要融洽 080

4.4.2 保持合理的結構安排 080

4.4.3 保持足夠的留白 081

4.4.4 保持合理統一的線條走向 081

4.4.5 體現情感化內容的處理方式 082

4.5 繪制一個矢量風格的相機圖標 083

第5章 寫實圖標的設計方法解析 087

5.1 寫實圖標的功能與特點 088

5.1.1 寫實圖標的功能 088

5.1.2 寫實圖標的特點 088

5.2 寫實圖標的分類與應用場景分析 091

5.2.1 從美術風格上劃分 091

5.2.2 從功能上劃分 092

5.3 寫實圖標的設計原則 094

5.3.1 大尺寸的寫實圖標 094

5.3.2 中小尺寸的寫實圖標 097

5.4 繪制一個寫實風格的“郵件”圖標 100

界面篇

第6章 游戲界面設計基礎 113

6.1 游戲界面設計的特點 114

6.1.1 趣味性 114

6.1.2 情感化追求 117

6.1.3 較強的迭代性 117

6.1.4 豐富的表現力和實用性 117

6.2 游戲界面的結構劃分與元素構成 118

6.2.1 界面的結構劃分 118

6.2.2 界面的元素構成與設計分析 122

6.3 界面情感化內容的表現 152

6.3.1 提煉並融入美術元素 152

6.3.2 利用特有材質 153

6.3.3 處理場景 154

6.4 游戲界面風格如何形成 155

6.4.1 如何根據游戲背景建構設定游戲界面風格 155

6.4.2 成熟游戲界面風格的主要特徵 165

第7章 界面節奏感的把控 171

7.1 節奏感的基本表現與分析 172

7.1.1 節奏感在生活場景中的表現 172

7.1.2 節奏感在游戲界面中的表現 174

7.2 界面節奏感的表現特徵分析 179

7.2.1 均衡的色彩配置 179

7.2.2 均衡的信息排版 180

7.2.3 合理的節奏分配 181

7.3 游戲界面節奏感的設計與把控 184

7.3.1 游戲界面動效設計的兩大關鍵點 184

7.3.2 游戲界面動效節奏感的具體表現形式 189

7.4 “LEgame”和“PRgame”項目中節奏感的把控與分析 195

7.4.1 設計之初的節奏韻律規劃 196

7.4.2 設計迭代中紊亂節奏的修正 199

7.4.3 設計復盤中整體節奏的調整 200

7.4.4 設計節奏感的時效性把控 202

第8章 界面功能需求的強化處理 203

8.1 游戲界面設計的本質與目的 204

8.2 如何通過設計體現界面本質 207

8.3 影響界面好壞的因素 208

8.4 界面功能需求的分析方法 211

8.4.1 從人的角度分析 211

8.4.2 從事的角度分析 211

8.5 “LEgame”項目中界面功能需求的強化設計與分析 215

第9章 界面視覺的統一化處理 219

9.1 界面視覺的準確性 220

9.2 界面視覺的唯一性 220

9.2.1 改變界面中的美術元素 221

9.2.2 界面色調的差異 221

9.2.3 設置不同的材質風格 221

9.3 界面視覺的一致性 222

9.3.1 美術元素的一致性 223

9.3.2 配色體系的一致性 224

9.3.3 圖形設計的一致性 228

9.4 “PRgame”項目中視覺的統一化處理分析 229

9.4.1 準確性的處理 229

9.4.2 唯一性的處理 232

9.4.3 一致性的處理 233

第 10章 游戲界面視覺系統的創立與分析 235

10.1 界面規範系統的劃分 236

10.1.1 普通系統 237

10.1.2 新手引導系統 237

10.1.3 獎勵系統 237

10.1.4 戰鬥系統 238

10.1.5 圖標系統和按鈕系統 239

10.2 制訂設計規範的方式和方法 241

10.2.1 積累階段 241

10.2.2 梳理階段 242

10.2.3 完善和補充階段 242

10.2.4 持續維護階段 242

10.3 設計規範的邊界 243

10.4 設計規範細分化的指定 245

10.4.1 第 一層級系統劃分 245

10.4.2 細分化的設計規範 247

10.4.3 建立輔助性控件庫 248

動效篇

第 11章 游戲界面動效設計基礎 249

11.1 游戲界面動效設計的基本知識 250

11.1.1 動效設計的基本性質與規則 250

11.1.2 動效與特效的區分與說明 251

11.1.3 影響動效設計的因素 252

11.1.4 動效設計前需要註意的一些基本問題 253

11.2 游戲界面動效的分類 259

11.2.1 界面切換動效 259

11.2.2 情感表現動效 262

11.2.3 功能性動效 263

11.2.4 看不見的動效 265

11.3 游戲界面動效中常見的運動規律分析 266

11.3.1 緩動 266

11.3.2 遮罩 267

11.3.3 形變 267

11.3.4 透視動畫 267

11.4 製作游戲界面動效的常用工具解析 268

11.4.1 用Unity製作簡單動效 268

案例演示：用Unity製作科技風格結算界面動效 268

11.4.2 用Unreal Engine 5製作簡單動效 276

案例演示：用Unreal Engine 5製作科技風格結算界面動效 276

11.4.3 用After Effects製作動效 286

案例演示：用After Effects製作黃色小球動效 286

第 12章 游戲界面動效設計實例解析 293

12.1 用After Effects在“LEgame”項目中製作彈窗入場動效 294

12.2 用After Effects在“GGgame”項目中製作復雜形變和透視動畫 309

行業經驗篇

第 13章 日常工作中的一些經驗 321

13.1 如何進行界面練習 322

13.1.1 篩選臨摹對象 322

13.1.2 培養尋找亮點的能力 323

13.1.3 保持勤學多練 325

13.2如何解決游戲的迭代問題 326

13.2.1 處理游戲版本的迭代問題 326

13.2.2 處理游戲界面的迭代問題 327

13.3 如何優化切圖方式並減小游戲包量 330

13.3.1 復用共享的控件切圖 330

13.3.2 使用可拉伸的設計方式 332

13.3.3 以變形拉伸的方式輸出切圖 333

13.3.4 定期復查圖集 333

13.4 如何解決項目協作問題 334

13.4.1 明確自我定位 334

13.4.2 把控全局 335

13.4.3 關於界面還原的問題 337

13.4.4 關於界面設計的決策源問題 341

第 14章 項目設計中的一些經驗 343

14.1 如何確保界面設計的規範性 344

14.1.1 發揮界面設計規範的實用價值 344

14.1.2 尋找項目限定範圍內的發揮餘地 345

14.1.3 功能性設計與創意性設計的平衡 347

14.2 如何解決游戲界面還原過程中的問題 348

14.2.1 處理不符合規範的設計問題 348

14.2.2 處理圖形變形和圖形模糊問題 350

14.2.3 處理大尺寸切圖問題 351

14.2.4 處理動效優化問題 355

14.2.5 處理界面控件的適配問題 357

14.3 如何走查版本 360

14.3.1 每日版本走查 360

14.3.2 前端合入時的視覺驗收 362

14.3.3 從設計之初規避問題 363

14.3.4 避免同類錯誤重復發生 364

14.3.5 時刻試玩產品 368