游戲UI設計原則與實例指導手冊

基礎篇
第1章　初識游戲界面設計
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　培養(yǎng)較強的溝通與表達能力　034
第2章　游戲界面的設計流程
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　強化色彩區(qū)分　043
2．3．2　細化內部結構　045
2．4　質感的強化表現　046
2．4．1　細化紋理材質　046
2．4．2　調整并完善細節(jié)　048
2．5　最終資源輸出　050
2．5．1　切圖的輸出　050
2．5．2　標注圖的輸出　051
圖標篇
第3章　游戲圖標設計基礎
3．1　圖標在界面中的重要性　054
3．1．1　情感化的表現　054
3．1．2　強化視覺引導　055
3．1．3　完善界面節(jié)奏　056
3．2　游戲圖標的應用場景　058
3．2．1　指代整個游戲　058
3．2．2　功能系統(tǒng)入口　058
3．2．3　功能性的裝飾　058
3．3　游戲圖標設計的基本原則　059
3．4　圖標的種類劃分　062
3．4．1　從美術風格上劃分　062
3．4．2　從功能性上劃分　064
第4章　矢量圖標的設計方法解析
4．1　矢量圖標的分類與設計要點　068
4．1．1　線性圖標設計要點　068
4．1．2　負形面片圖標設計要點　069
4．1．3　多色扁平化圖標設計要點　071
4．2　矢量圖標設計的統(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　矢量圖標的應用場景分析　077
4．3．1　輕量化位置　077
4．3．2　扁平化位置　078
4．3．3　需弱化且平衡畫面的位置　078
4．3．4　需使用業(yè)界通用型設計的位置　079
4．4　矢量圖標線條美感的把控　080
4．4．1　不同弧線的交接處過渡要融洽　080
4．4．2　保持合理的結構安排　080
4．4．3　保持足夠的留白　081
4．4．4　保持合理統(tǒng)一的線條走向　081
4．4．5　體現情感化的處理方式　082
4．5　繪制一個矢量風格的相機圖標　083
第5章　寫實圖標的設計方法解析
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章　游戲界面設計基礎
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章　界面節(jié)奏感的把控
7．1　節(jié)奏感的基本表現與分析　172
7．1．1　節(jié)奏感在生活場景中的表現　172
7．1．2　節(jié)奏感在游戲界面中的表現　174
7．2　界面節(jié)奏感的表現特征分析　179
7．2．1　均衡的色彩配置　179
7．2．2　均衡的信息排版　180
7．2．3　合理的節(jié)奏分配　181
7．3　“LEgame”和“PRgame”項目中節(jié)奏感的把控與分析　184
7．3．1　設計之初的節(jié)奏韻律的規(guī)劃　184
7．3．2　設計迭代中紊亂節(jié)奏的修正　187
7．3．3　設計復盤中整體節(jié)奏的調整　188
7．3．4　設計節(jié)奏感的時效性把控　190
第8章　界面功能需求的強化處理
8．1　游戲界面設計的本質與目的　192
8．2　如何通過設計體現界面本質　195
8．3　影響界面好壞的因素　196
8．4　界面功能需求的分析方法　199
8．4．1　從人的角度分析　199
8．4．2　從事的角度分析　199
8．5　“LEgame”項目中界面功能需求的強化設計與分析　203

第9章　界面視覺的統(tǒng)一化處理
9．1　界面視覺的準確性　208
9．2　界面視覺的唯一性　208
9．2．1　美術元素的應用方式　209
9．2．2　顏色色調的差異　209
9．2．3　材質風格的差異　209
9．3　界面視覺的一致性　210
9．3．1　美術元素的一致性　211
9．3．2　配色體系的一致性　212
9．3．3　圖形設計的一致性　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　新手引導系統(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章　游戲界面設計實例解析
11．1　《突變元年：伊甸園之路》項目實例解析　238
11．1．1　界面設計思路　238
11．1．2　元素的拆解與分析　244
11．1．3　總結　247
11．2　《鎮(zhèn)魔曲》手游項目實例解析　249
11．2．1　界面設計思路　249
11．2．2　元素的拆解與分析　253
11．2．3　總結　270
動效篇
第12章　游戲界面動效設計基礎
12．1　游戲界面動效設計的基本知識　274
12．1．1　動效設計的基本性質與規(guī)則　274
12．1．2　動效與特效的區(qū)分與說明　275
12．1．3　影響動效設計的因素　276
12．1．4　動效設計前需要注意的一些基本問題　277
12．2　游戲界面動效的分類　283
12．2．1　頁面切換動效　283
12．2．2　情感表現動效　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章　游戲界面動效設計實例解析
13．1　用Animate在“LEgame”項目中制作緩動和形變動效　310
13．2　用After Effects在“LEgame”項目中制作彈窗入場動畫　322
13．3　用After Effects在“GGgame”項目中制作復雜形變和透視動畫　337
行業(yè)經驗篇
第14章　日常工作中的一些經驗
14．1　如何進行界面練習　350
14．1．1　篩選臨摹對象　350
14．1．2　培養(yǎng)尋找亮點的能力　351
14．1．3　保持勤學多練　353
14．2如何解決游戲的迭代問題　354
14．2．1　處理游戲版本的迭代問題　354
14．2．2　處理游戲界面的迭代問題　355
14．3　如何優(yōu)化切圖方式并節(jié)省游戲包量　358
14．3．1　復用共用的控件切圖　358
14．3．2　使用可拉伸的設計方式　360
14．3．3　以變形拉伸的方式輸出切圖　361
14．3．4　定期復查圖集　361
14．4　如何解決項目協作問題　362
14．4．1　明確自我定位　362
14．4．2　把控全局　363
14．4．3　關于界面還原的問題　365
14．4．4　關于界面設計的決策源問題　369

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