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

基礎(chǔ)篇
第 1章 初識游戲界面設(shè)計 015
1.1 游戲界面的分類與特點 016
1.1.1 按游戲背景劃分 016
1.1.2 按美術(shù)風格劃分 022
1.2 游戲界面設(shè)計師需要了解的常識 024
1.2.1 游戲界面設(shè)計師的職能 024
1.2.2 游戲界面設(shè)計師工作的本質(zhì) 025
1.2.3 如何追求產(chǎn)品的本質(zhì) 026
1.2.4 游戲界面設(shè)計是藝術(shù)還是產(chǎn)品 028
1.3 關(guān)于做好游戲界面設(shè)計的一些建議 029
1.3.1 游戲界面設(shè)計的整體原則 029
1.3.2 掌握合適的學習方法 030
1.3.3 界面的表現(xiàn)效果 032
1.3.4 培養(yǎng)較強的溝通與表達能力 034

第 2章 游戲界面的設(shè)計流程 037
2.1 界面布局設(shè)計 038
2.1.1 解讀需求文檔和交互稿 038
2.1.2 將交互稿轉(zhuǎn)化為界面布局 038
2.2 界面信息設(shè)計 040
2.2.1 設(shè)定基本顏色 040
2.2.2 增加情感化內(nèi)容 040
2.3 界面的細化 043
2.3.1 細化顏色 043
2.3.2 細化內(nèi)部結(jié)構(gòu) 045
2.4 質(zhì)感的強化表現(xiàn) 046
2.4.1 細化紋理材質(zhì) 046
2.4.2 調(diào)整并完善形體結(jié)構(gòu)的細節(jié) 048
2.5 最終資源輸出 050
2.5.1 切圖的輸出 050
2.5.2 標注圖的輸出 051


圖標篇
第3章 游戲圖標設(shè)計基礎(chǔ) 053
3.1 圖標在界面中的重要性 054
3.1.1 情感化的表現(xiàn) 054
3.1.2 強化視覺引導 055
3.1.3 完善界面節(jié)奏 056
3.2 游戲圖標的應(yīng)用場景 058
3.2.1 指代整個游戲 058
3.2.2 功能系統(tǒng)入口 058
3.2.3 功能性的裝飾 058
3.3 游戲圖標設(shè)計的基本原則 059
3.4 圖標的種類劃分 062
3.4.1 從美術(shù)風格上劃分 062
3.4.2 從功能上劃分 064

第4章 矢量圖標的設(shè)計方法解析 067
4.1 矢量圖標的分類與設(shè)計要點 068
4.1.1 線性圖標設(shè)計要點 068
4.1.2 負形面片圖標設(shè)計要點 069
4.1.3 多色扁平化圖標設(shè)計要點 071
4.2 矢量圖標的統(tǒng)一設(shè)計規(guī)范 073
4.2.1 尺寸規(guī)范 073
4.2.2 線條規(guī)范 074
4.2.3 像素規(guī)范 074
4.2.4 基本形的使用規(guī)范 075
4.3 矢量圖標的應(yīng)用場景分析 077
4.3.1 輕量化位置 077
4.3.2 扁平化位置 078
4.3.3 需弱化用于平衡畫面的位置 078
4.3.4 需使用業(yè)界通用型設(shè)計的位置 079
4.4 矢量圖標線條美感的把控 080
4.4.1 不同弧線的交接處過渡要融洽 080
4.4.2 保持合理的結(jié)構(gòu)安排 080
4.4.3 保持足夠的留白 081
4.4.4 保持合理統(tǒng)一的線條走向 081
4.4.5 體現(xiàn)情感化內(nèi)容的處理方式 082
4.5 繪制一個矢量風格的相機圖標 083

第5章 寫實圖標的設(shè)計方法解析 087
5.1 寫實圖標的功能與特點 088
5.1.1 寫實圖標的功能 088
5.1.2 寫實圖標的特點 088
5.2 寫實圖標的分類與應(yīng)用場景分析 091
5.2.1 從美術(shù)風格上劃分 091
5.2.2 從功能上劃分 092
5.3 寫實圖標的設(shè)計原則 094
5.3.1 大尺寸的寫實圖標 094
5.3.2 中小尺寸的寫實圖標 097
5.4 繪制一個寫實風格的“郵件”圖標 100

界面篇
第6章 游戲界面設(shè)計基礎(chǔ) 113
6.1 游戲界面設(shè)計的特點 114
6.1.1 趣味性 114
6.1.2 情感化追求 117
6.1.3 較強的迭代性 117
6.1.4 豐富的表現(xiàn)力和實用性 117
6.2 游戲界面的結(jié)構(gòu)劃分與元素構(gòu)成 118
6.2.1 界面的結(jié)構(gòu)劃分 118
6.2.2 界面的元素構(gòu)成與設(shè)計分析 122
6.3 界面情感化內(nèi)容的表現(xiàn) 152
6.3.1 提煉并融入美術(shù)元素 152
6.3.2 利用特有材質(zhì) 153
6.3.3 處理場景 154
6.4 游戲界面風格如何形成 155
6.4.1 如何根據(jù)游戲背景建構(gòu)設(shè)定游戲界面風格 155
6.4.2 成熟游戲界面風格的主要特征 165

第7章 界面節(jié)奏感的把控 171
7.1 節(jié)奏感的基本表現(xiàn)與分析 172
7.1.1 節(jié)奏感在生活場景中的表現(xiàn) 172
7.1.2 節(jié)奏感在游戲界面中的表現(xiàn) 174
7.2 界面節(jié)奏感的表現(xiàn)特征分析 179
7.2.1 均衡的色彩配置 179
7.2.2 均衡的信息排版 180
7.2.3 合理的節(jié)奏分配 181
7.3 游戲界面節(jié)奏感的設(shè)計與把控 184
7.3.1 游戲界面動效設(shè)計的兩大關(guān)鍵點 184
7.3.2 游戲界面動效節(jié)奏感的具體表現(xiàn)形式 189
7.4 “LEgame”和“PRgame”項目中節(jié)奏感的把控與分析 195
7.4.1 設(shè)計之初的節(jié)奏韻律規(guī)劃 196
7.4.2 設(shè)計迭代中紊亂節(jié)奏的修正 199
7.4.3 設(shè)計復盤中整體節(jié)奏的調(diào)整 200
7.4.4 設(shè)計節(jié)奏感的時效性把控 202

第8章 界面功能需求的強化處理 203
8.1 游戲界面設(shè)計的本質(zhì)與目的 204
8.2 如何通過設(shè)計體現(xiàn)界面本質(zhì) 207
8.3 影響界面好壞的因素 208
8.4 界面功能需求的分析方法 211
8.4.1 從人的角度分析 211
8.4.2 從事的角度分析 211
8.5 “LEgame”項目中界面功能需求的強化設(shè)計與分析 215

第9章 界面視覺的統(tǒng)一化處理 219
9.1 界面視覺的準確性 220
9.2 界面視覺的唯一性 220
9.2.1 改變界面中的美術(shù)元素 221
9.2.2 界面色調(diào)的差異 221
9.2.3 設(shè)置不同的材質(zhì)風格 221
9.3 界面視覺的一致性 222
9.3.1 美術(shù)元素的一致性 223
9.3.2 配色體系的一致性 224
9.3.3 圖形設(shè)計的一致性 228
9.4 “PRgame”項目中視覺的統(tǒng)一化處理分析 229
9.4.1 準確性的處理 229
9.4.2 唯一性的處理 232
9.4.3 一致性的處理 233

第 10章 游戲界面視覺系統(tǒng)的創(chuàng)立與分析 235
10.1 界面規(guī)范系統(tǒng)的劃分 236
10.1.1 普通系統(tǒng) 237
10.1.2 新手引導系統(tǒng) 237
10.1.3 獎勵系統(tǒng) 237
10.1.4 戰(zhàn)斗系統(tǒng) 238
10.1.5 圖標系統(tǒng)和按鈕系統(tǒng) 239
10.2 制訂設(shè)計規(guī)范的方式和方法 241
10.2.1 積累階段 241
10.2.2 梳理階段 242
10.2.3 完善和補充階段 242
10.2.4 持續(xù)維護階段 242
10.3 設(shè)計規(guī)范的邊界 243
10.4 設(shè)計規(guī)范細分化的指定 245
10.4.1 第 一層級系統(tǒng)劃分 245
10.4.2 細分化的設(shè)計規(guī)范 247
10.4.3 建立輔助性控件庫 248

動效篇
第 11章 游戲界面動效設(shè)計基礎(chǔ) 249
11.1 游戲界面動效設(shè)計的基本知識 250
11.1.1 動效設(shè)計的基本性質(zhì)與規(guī)則 250
11.1.2 動效與特效的區(qū)分與說明 251
11.1.3 影響動效設(shè)計的因素 252
11.1.4 動效設(shè)計前需要注意的一些基本問題 253
11.2 游戲界面動效的分類 259
11.2.1 界面切換動效 259
11.2.2 情感表現(xiàn)動效 262
11.2.3 功能性動效 263
11.2.4 看不見的動效 265
11.3 游戲界面動效中常見的運動規(guī)律分析 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制作科技風格結(jié)算界面動效 268
11.4.2 用Unreal Engine 5制作簡單動效 276
案例演示：用Unreal Engine 5制作科技風格結(jié)算界面動效 276
11.4.3 用After Effects制作動效 286
案例演示：用After Effects制作黃色小球動效 286

第 12章 游戲界面動效設(shè)計實例解析 293
12.1 用After Effects在“LEgame”項目中制作彈窗入場動效 294
12.2 用After Effects在“GGgame”項目中制作復雜形變和透視動畫 309

行業(yè)經(jīng)驗篇
第 13章 日常工作中的一些經(jīng)驗 321
13.1 如何進行界面練習 322
13.1.1 篩選臨摹對象 322
13.1.2 培養(yǎng)尋找亮點的能力 323
13.1.3 保持勤學多練 325
13.2如何解決游戲的迭代問題 326
13.2.1 處理游戲版本的迭代問題 326
13.2.2 處理游戲界面的迭代問題 327
13.3 如何優(yōu)化切圖方式并減小游戲包量 330
13.3.1 復用共用的控件切圖 330
13.3.2 使用可拉伸的設(shè)計方式 332
13.3.3 以變形拉伸的方式輸出切圖 333
13.3.4 定期復查圖集 333
13.4 如何解決項目協(xié)作問題 334
13.4.1 明確自我定位 334
13.4.2 把控全局 335
13.4.3 關(guān)于界面還原的問題 337
13.4.4 關(guān)于界面設(shè)計的決策源問題 341

第 14章 項目設(shè)計中的一些經(jīng)驗 343
14.1 如何確保界面設(shè)計的規(guī)范性 344
14.1.1 發(fā)揮界面設(shè)計規(guī)范的實用價值 344
14.1.2 尋找項目限定范圍內(nèi)的發(fā)揮余地 345
14.1.3 功能性設(shè)計與創(chuàng)意性設(shè)計的平衡 347
14.2 如何解決游戲界面還原過程中的問題 348
14.2.1 處理不符合規(guī)范的設(shè)計問題 348
14.2.2 處理圖形變形和圖形模糊問題 350
14.2.3 處理大尺寸切圖問題 351
14.2.4 處理動效優(yōu)化問題 355
14.2.5 處理界面控件的適配問題 357
14.3 如何走查版本 360
14.3.1 每日版本走查 360
14.3.2 前端合入時的視覺驗收 362
14.3.3 從設(shè)計之初規(guī)避問題 363
14.3.4 避免同類錯誤重復發(fā)生 364
14.3.5 時刻試玩產(chǎn)品 368