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

基礎(chǔ)篇
第1章　初識(shí)游戲界面設(shè)計(jì)
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　界面的美丑　032
1．3．4　培養(yǎng)較強(qiáng)的溝通與表達(dá)能力　034
第2章　游戲界面的設(shè)計(jì)流程
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ì)化設(shè)計(jì)　043
2．3．1　強(qiáng)化色彩區(qū)分　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)整并完善細(xì)節(jié)　048
2．5　最終資源輸出　050
2．5．1　切圖的輸出　050
2．5．2　標(biāo)注圖的輸出　051
圖標(biāo)篇
第3章　游戲圖標(biāo)設(shè)計(jì)基礎(chǔ)
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)用場景　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ì)方法解析
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)設(shè)計(jì)的統(tǒng)一規(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)用場景分析　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　不同弧線的交接處過渡要融洽　080
4．4．2　保持合理的結(jié)構(gòu)安排　080
4．4．3　保持足夠的留白　081
4．4．4　保持合理統(tǒng)一的線條走向　081
4．4．5　體現(xiàn)情感化的處理方式　082
4．5　繪制一個(gè)矢量風(fēng)格的相機(jī)圖標(biāo)　083
第5章　寫實(shí)圖標(biāo)的設(shè)計(jì)方法解析
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)用場景分析　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ǔ)
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　界面情感化的表現(xiàn)　152
6．3．1　提煉并融入美術(shù)元素　152
6．3．2　特有材質(zhì)的利用　153
6．3．3　場景化的處理　154
6．4　游戲界面風(fēng)格如何形成　155
6．4．1　如何根據(jù)游戲背景建構(gòu)設(shè)定界面風(fēng)格　155
6．4．2　成熟游戲界面風(fēng)格的所需要素　165
第7章　界面節(jié)奏感的把控
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　“LEgame”和“PRgame”項(xiàng)目中節(jié)奏感的把控與分析　184
7．3．1　設(shè)計(jì)之初的節(jié)奏韻律的規(guī)劃　184
7．3．2　設(shè)計(jì)迭代中紊亂節(jié)奏的修正　187
7．3．3　設(shè)計(jì)復(fù)盤中整體節(jié)奏的調(diào)整　188
7．3．4　設(shè)計(jì)節(jié)奏感的時(shí)效性把控　190
第8章　界面功能需求的強(qiáng)化處理
8．1　游戲界面設(shè)計(jì)的本質(zhì)與目的　192
8．2　如何通過設(shè)計(jì)體現(xiàn)界面本質(zhì)　195
8．3　影響界面好壞的因素　196
8．4　界面功能需求的分析方法　199
8．4．1　從人的角度分析　199
8．4．2　從事的角度分析　199
8．5　“LEgame”項(xiàng)目中界面功能需求的強(qiáng)化設(shè)計(jì)與分析　203

第9章　界面視覺的統(tǒng)一化處理
9．1　界面視覺的準(zhǔn)確性　208
9．2　界面視覺的唯一性　208
9．2．1　美術(shù)元素的應(yīng)用方式　209
9．2．2　顏色色調(diào)的差異　209
9．2．3　材質(zhì)風(fēng)格的差異　209
9．3　界面視覺的一致性　210
9．3．1　美術(shù)元素的一致性　211
9．3．2　配色體系的一致性　212
9．3．3　圖形設(shè)計(jì)的一致性　216
9．4　“PRgame”項(xiàng)目中視覺的統(tǒng)一化處理分析　217
9．4．1　準(zhǔn)確性的處理　217
9．4．2　唯一性的處理　220
9．4．3　一致性的處理　221

第10章　游戲界面視覺系統(tǒng)的創(chuàng)立與分析
10．1　界面規(guī)范系統(tǒng)的劃分　224
10．1．1　普通系統(tǒng)　225
10．1．2　新手引導(dǎo)系統(tǒng)　225
10．1．3　獎(jiǎng)勵(lì)系統(tǒng)　225
10．1．4　戰(zhàn)斗系統(tǒng)　226
10．1．5　圖標(biāo)系統(tǒng)和按鈕系統(tǒng)　227
10．2　制定視覺規(guī)范的方式和方法　229
10．2．1　積累階段　229
10．2．2　梳理階段　230
10．2．3　完善和補(bǔ)充階段　230
10．2．4　持續(xù)維護(hù)階段　230
10．3　視覺規(guī)范的邊界　231
10．4　視覺規(guī)范細(xì)分化的指定　233
10．4．1　第一層級系統(tǒng)劃分　233
10．4．2　細(xì)分化的視覺規(guī)范　235
10．4．3　建立輔助性控件庫　236

第11章　游戲界面設(shè)計(jì)實(shí)例解析
11．1　《突變元年：伊甸園之路》項(xiàng)目實(shí)例解析　238
11．1．1　界面設(shè)計(jì)思路　238
11．1．2　元素的拆解與分析　244
11．1．3　總結(jié)　247
11．2　《鎮(zhèn)魔曲》手游項(xiàng)目實(shí)例解析　249
11．2．1　界面設(shè)計(jì)思路　249
11．2．2　元素的拆解與分析　253
11．2．3　總結(jié)　270
動(dòng)效篇
第12章　游戲界面動(dòng)效設(shè)計(jì)基礎(chǔ)
12．1　游戲界面動(dòng)效設(shè)計(jì)的基本知識(shí)　274
12．1．1　動(dòng)效設(shè)計(jì)的基本性質(zhì)與規(guī)則　274
12．1．2　動(dòng)效與特效的區(qū)分與說明　275
12．1．3　影響動(dòng)效設(shè)計(jì)的因素　276
12．1．4　動(dòng)效設(shè)計(jì)前需要注意的一些基本問題　277
12．2　游戲界面動(dòng)效的分類　283
12．2．1　頁面切換動(dòng)效　283
12．2．2　情感表現(xiàn)動(dòng)效　286
12．2．3　功能性動(dòng)效　287
12．2．4　看不見的動(dòng)效　289
12．3　游戲界面動(dòng)效中常見的運(yùn)動(dòng)規(guī)律分析　290
12．3．1　緩動(dòng)　290
12．3．2　遮罩　291
12．3．3　形變　291
12．3．4　透視動(dòng)畫　291
12．4　制作游戲界面動(dòng)效的常用工具解析　292
12．4．1　用Photoshop制作動(dòng)效　292
案例演示：用Photoshop制作黑色小球動(dòng)畫　292
12．4．2　用Animate制作簡單動(dòng)效　296
案例演示：用Animate制作黑色小球動(dòng)畫　296
12．4．3　用After Effects制作動(dòng)效　301
案例演示：用After　Effects制作黃色小球動(dòng)畫　301
12．4．4　游戲引擎和編輯器的運(yùn)用　307
第13章　游戲界面動(dòng)效設(shè)計(jì)實(shí)例解析
13．1　用Animate在“LEgame”項(xiàng)目中制作緩動(dòng)和形變動(dòng)效　310
13．2　用After Effects在“LEgame”項(xiàng)目中制作彈窗入場動(dòng)畫　322
13．3　用After Effects在“GGgame”項(xiàng)目中制作復(fù)雜形變和透視動(dòng)畫　337
行業(yè)經(jīng)驗(yàn)篇
第14章　日常工作中的一些經(jīng)驗(yàn)
14．1　如何進(jìn)行界面練習(xí)　350
14．1．1　篩選臨摹對象　350
14．1．2　培養(yǎng)尋找亮點(diǎn)的能力　351
14．1．3　保持勤學(xué)多練　353
14．2如何解決游戲的迭代問題　354
14．2．1　處理游戲版本的迭代問題　354
14．2．2　處理游戲界面的迭代問題　355
14．3　如何優(yōu)化切圖方式并節(jié)省游戲包量　358
14．3．1　復(fù)用共用的控件切圖　358
14．3．2　使用可拉伸的設(shè)計(jì)方式　360
14．3．3　以變形拉伸的方式輸出切圖　361
14．3．4　定期復(fù)查圖集　361
14．4　如何解決項(xiàng)目協(xié)作問題　362
14．4．1　明確自我定位　362
14．4．2　把控全局　363
14．4．3　關(guān)于界面還原的問題　365
14．4．4　關(guān)于界面設(shè)計(jì)的決策源問題　369

第15章　項(xiàng)目設(shè)計(jì)中的一些經(jīng)驗(yàn)
15．1　如何確保界面設(shè)計(jì)的規(guī)范性　372
15．1．1　發(fā)揮界面設(shè)計(jì)規(guī)范的實(shí)用價(jià)值　372
15．1．2　尋找項(xiàng)目限定范圍內(nèi)的發(fā)揮余地　373
15．1．3　功能性設(shè)計(jì)與創(chuàng)意性設(shè)計(jì)的平衡　375
15．2　如何解決游戲界面還原過程中的問題　376
15．2．1　處理不符合規(guī)范的設(shè)計(jì)問題　376
15．2．2　處理圖形變形和圖形模糊問題　378
15．2．3　處理大尺寸切圖問題　379
15．2．4　處理動(dòng)效優(yōu)化問題　383
15．2．5　處理界面控件的適配問題　385
15．3　如何走查界面實(shí)現(xiàn)　388
15．3．1　每日版本走查　388
15．3．2　前端合入時(shí)的視覺驗(yàn)收　390
15．3．3　從設(shè)計(jì)之初規(guī)避問題　391
15．3．4　避免同類錯(cuò)誤重復(fù)發(fā)生　392
15．3．5　時(shí)刻試玩產(chǎn)品　396