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

基礎(chǔ)篇
第1章　初識游戲界面設(shè)計
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　掌握合適的學(xué)習(xí)方法　030
1．3．3　界面的美丑　032
1．3．4　培養(yǎng)較強的溝通與表達能力　034
第2章　游戲界面的設(shè)計流程
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　色彩細化設(shè)計　043
2．3．1　強化色彩區(qū)分　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é)　048
2．5　最終資源輸出　050
2．5．1　切圖的輸出　050
2．5．2　標注圖的輸出　051
圖標篇
第3章　游戲圖標設(shè)計基礎(chǔ)
3．1　圖標在界面中的重要性　054
3．1．1　情感化的表現(xiàn)　054
3．1．2　強化視覺引導(dǎo)　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è)計方法解析
4．1　矢量圖標的分類與設(shè)計要點　068
4．1．1　線性圖標設(shè)計要點　068
4．1．2　負形面片圖標設(shè)計要點　069
4．1．3　多色扁平化圖標設(shè)計要點　071
4．2　矢量圖標設(shè)計的統(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　矢量圖標的應(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)情感化的處理方式　082
4．5　繪制一個矢量風格的相機圖標　083
第5章　寫實圖標的設(shè)計方法解析
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ǔ)
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　界面情感化的表現(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é)奏感的把控
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”項目中節(jié)奏感的把控與分析　184
7．3．1　設(shè)計之初的節(jié)奏韻律的規(guī)劃　184
7．3．2　設(shè)計迭代中紊亂節(jié)奏的修正　187
7．3．3　設(shè)計復(fù)盤中整體節(jié)奏的調(diào)整　188
7．3．4　設(shè)計節(jié)奏感的時效性把控　190
第8章　界面功能需求的強化處理
8．1　游戲界面設(shè)計的本質(zhì)與目的　192
8．2　如何通過設(shè)計體現(xiàn)界面本質(zhì)　195
8．3　影響界面好壞的因素　196
8．4　界面功能需求的分析方法　199
8．4．1　從人的角度分析　199
8．4．2　從事的角度分析　199
8．5　“LEgame”項目中界面功能需求的強化設(shè)計與分析　203

第9章　界面視覺的統(tǒng)一化處理
9．1　界面視覺的準確性　208
9．2　界面視覺的唯一性　208
9．2．1　美術(shù)元素的應(yīng)用方式　209
9．2．2　顏色色調(diào)的差異　209
9．2．3　材質(zhì)風格的差異　209
9．3　界面視覺的一致性　210
9．3．1　美術(shù)元素的一致性　211
9．3．2　配色體系的一致性　212
9．3．3　圖形設(shè)計的一致性　216
9．4　“PRgame”項目中視覺的統(tǒng)一化處理分析　217
9．4．1　準確性的處理　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　獎勵系統(tǒng)　225
10．1．4　戰(zhàn)斗系統(tǒng)　226
10．1．5　圖標系統(tǒng)和按鈕系統(tǒng)　227
10．2　制定視覺規(guī)范的方式和方法　229
10．2．1　積累階段　229
10．2．2　梳理階段　230
10．2．3　完善和補充階段　230
10．2．4　持續(xù)維護階段　230
10．3　視覺規(guī)范的邊界　231
10．4　視覺規(guī)范細分化的指定　233
10．4．1　第一層級系統(tǒng)劃分　233
10．4．2　細分化的視覺規(guī)范　235
10．4．3　建立輔助性控件庫　236

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

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