游戲UI設(shè)計(jì)原則與實(shí)例指導(dǎo)手冊(cè)（第2版）

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

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


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

第4章 矢量圖標(biāo)的設(shè)計(jì)方法解析 067
4.1 矢量圖標(biāo)的分類與設(shè)計(jì)要點(diǎn) 068
4.1.1 線性圖標(biāo)設(shè)計(jì)要點(diǎn) 068
4.1.2 負(fù)形面片圖標(biāo)設(shè)計(jì)要點(diǎn) 069
4.1.3 多色扁平化圖標(biāo)設(shè)計(jì)要點(diǎn) 071
4.2 矢量圖標(biāo)的統(tǒng)一設(shè)計(jì)規(guī)范 073
4.2.1 尺寸規(guī)范 073
4.2.2 線條規(guī)范 074
4.2.3 像素規(guī)范 074
4.2.4 基本形的使用規(guī)范 075
4.3 矢量圖標(biāo)的應(yīng)用場(chǎng)景分析 077
4.3.1 輕量化位置 077
4.3.2 扁平化位置 078
4.3.3 需弱化用于平衡畫面的位置 078
4.3.4 需使用業(yè)界通用型設(shè)計(jì)的位置 079
4.4 矢量圖標(biāo)線條美感的把控 080
4.4.1 不同弧線的交接處過(guò)渡要融洽 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 繪制一個(gè)矢量風(fēng)格的相機(jī)圖標(biāo) 083

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

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

第7章 界面節(jié)奏感的把控 171
7.1 節(jié)奏感的基本表現(xiàn)與分析 172
7.1.1 節(jié)奏感在生活場(chǎng)景中的表現(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è)計(jì)與把控 184
7.3.1 游戲界面動(dòng)效設(shè)計(jì)的兩大關(guān)鍵點(diǎn) 184
7.3.2 游戲界面動(dòng)效節(jié)奏感的具體表現(xiàn)形式 189
7.4 “LEgame”和“PRgame”項(xiàng)目中節(jié)奏感的把控與分析 195
7.4.1 設(shè)計(jì)之初的節(jié)奏韻律規(guī)劃 196
7.4.2 設(shè)計(jì)迭代中紊亂節(jié)奏的修正 199
7.4.3 設(shè)計(jì)復(fù)盤中整體節(jié)奏的調(diào)整 200
7.4.4 設(shè)計(jì)節(jié)奏感的時(shí)效性把控 202

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

第9章 界面視覺的統(tǒng)一化處理 219
9.1 界面視覺的準(zhǔn)確性 220
9.2 界面視覺的唯一性 220
9.2.1 改變界面中的美術(shù)元素 221
9.2.2 界面色調(diào)的差異 221
9.2.3 設(shè)置不同的材質(zhì)風(fēng)格 221
9.3 界面視覺的一致性 222
9.3.1 美術(shù)元素的一致性 223
9.3.2 配色體系的一致性 224
9.3.3 圖形設(shè)計(jì)的一致性 228
9.4 “PRgame”項(xiàng)目中視覺的統(tǒng)一化處理分析 229
9.4.1 準(zhǔn)確性的處理 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 新手引導(dǎo)系統(tǒng) 237
10.1.3 獎(jiǎng)勵(lì)系統(tǒng) 237
10.1.4 戰(zhàn)斗系統(tǒng) 238
10.1.5 圖標(biāo)系統(tǒng)和按鈕系統(tǒng) 239
10.2 制訂設(shè)計(jì)規(guī)范的方式和方法 241
10.2.1 積累階段 241
10.2.2 梳理階段 242
10.2.3 完善和補(bǔ)充階段 242
10.2.4 持續(xù)維護(hù)階段 242
10.3 設(shè)計(jì)規(guī)范的邊界 243
10.4 設(shè)計(jì)規(guī)范細(xì)分化的指定 245
10.4.1 第 一層級(jí)系統(tǒng)劃分 245
10.4.2 細(xì)分化的設(shè)計(jì)規(guī)范 247
10.4.3 建立輔助性控件庫(kù) 248

動(dòng)效篇
第 11章 游戲界面動(dòng)效設(shè)計(jì)基礎(chǔ) 249
11.1 游戲界面動(dòng)效設(shè)計(jì)的基本知識(shí) 250
11.1.1 動(dòng)效設(shè)計(jì)的基本性質(zhì)與規(guī)則 250
11.1.2 動(dòng)效與特效的區(qū)分與說(shuō)明 251
11.1.3 影響動(dòng)效設(shè)計(jì)的因素 252
11.1.4 動(dòng)效設(shè)計(jì)前需要注意的一些基本問(wèn)題 253
11.2 游戲界面動(dòng)效的分類 259
11.2.1 界面切換動(dòng)效 259
11.2.2 情感表現(xiàn)動(dòng)效 262
11.2.3 功能性動(dòng)效 263
11.2.4 看不見的動(dòng)效 265
11.3 游戲界面動(dòng)效中常見的運(yùn)動(dòng)規(guī)律分析 266
11.3.1 緩動(dòng) 266
11.3.2 遮罩 267
11.3.3 形變 267
11.3.4 透視動(dòng)畫 267
11.4 制作游戲界面動(dòng)效的常用工具解析 268
11.4.1 用Unity制作簡(jiǎn)單動(dòng)效 268
案例演示：用Unity制作科技風(fēng)格結(jié)算界面動(dòng)效 268
11.4.2 用Unreal Engine 5制作簡(jiǎn)單動(dòng)效 276
案例演示：用Unreal Engine 5制作科技風(fēng)格結(jié)算界面動(dòng)效 276
11.4.3 用After Effects制作動(dòng)效 286
案例演示：用After Effects制作黃色小球動(dòng)效 286

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

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

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