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

李世欽（lesenli）
站酷推薦設計師，歷任遊戲蝸牛互動設計師、CCP FlashArtist、騰訊遊戲視覺設計師和遊戲美術3D動畫特效設計師、心動網絡資深界面動效設計師。
擁有10餘年遊戲行業從業經驗，在遊戲界面設計和遊戲動效設計方面都有著豐富的項目經驗，參與或主導的知名遊戲項目有蝸牛的《九陰真經》，CCP 的EVE DUST514、EVE Legion，騰訊的《全民槍王》、《和平精英》、CluBMIMI、Pgame、Fgame 等。

基礎篇
第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　培養較強的溝通與表達能力　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　強化色彩區分　043
2．3．2　細化內部結構　045
2．4　質感的強化表現　046
2．4．1　細化紋理材質　046
2．4．2　調整併完善細節　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　完善界面節奏　056
3．2　遊戲圖標的應用場景　058
3．2．1　指代整個遊戲　058
3．2．2　功能係統入口　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　矢量圖標設計的統一規範　073
4．2．1　尺寸規範　073
4．2．2　線條規範　074
4．2．3　像素規範　074
4．2．4　基本型的使用規範　075
4．3　矢量圖標的應用場景分析　077
4．3．1　輕量化位置　077
4．3．2　扁平化位置　078
4．3．3　需弱化且平衡畫面的位置　078
4．3．4　需使用業界通用型設計的位置　079
4．4　矢量圖標線條美感的把控　080
4．4．1　不同弧線的交接處過渡要融洽　080
4．4．2　保持合理的結構安排　080
4．4．3　保持足夠的留白　081
4．4．4　保持合理統一的線條走向　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章　界面節奏感的把控
7．1　節奏感的基本表現與分析　172
7．1．1　節奏感在生活場景中的表現　172
7．1．2　節奏感在遊戲界面中的表現　174
7．2　界面節奏感的表現特徵分析　179
7．2．1　均衡的色彩配置　179
7．2．2　均衡的信息排版　180
7．2．3　合理的節奏分配　181
7．3　“LEgame”和“PRgame”項目中節奏感的把控與分析　184
7．3．1　設計之初的節奏韻律的規劃　184
7．3．2　設計迭代中紊亂節奏的修正　187
7．3．3　設計复盤中整體節奏的調整　188
7．3．4　設計節奏感的時效性把控　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章　界面視覺的統一化處理
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”項目中視覺的統一化處理分析　217
9．4．1　準確性的處理　217
9．4．2　唯一性的處理　220
9．4．3　一致性的處理　221

第10章　遊戲界面視覺系統的創立與分析
10．1　界面規範系統的劃分　224
10．1．1　普通系統　225
10．1．2　新手引導系統　225
10．1．3　獎勵系統　225
10．1．4　戰鬥系統　226
10．1．5　圖標系統和按鈕系統　227
10．2　制定視覺規範的方式和方法　229
10．2．1　積累階段　229
10．2．2　梳理階段　230
10．2．3　完善和補充階段　230
10．2．4　持續維護階段　230
10．3　視覺規範的邊界　231
10．4　視覺規範細分化的指定　233
10．4．1　第一層級系統劃分　233
10．4．2　細分化的視覺規範　235
10．4．3　建立輔助性控件庫　236

第11章　遊戲界面設計實例解析
11．1　《突變元年：伊甸園之路》項目實例解析　238
11．1．1　界面設計思路　238
11．1．2　元素的拆解與分析　244
11．1．3　總結　247
11．2　《鎮魔曲》手游項目實例解析　249
11．2．1　界面設計思路　249
11．2．2　元素的拆解與分析　253
11．2．3　總結　270

動效篇
第12章　遊戲界面動效設計基礎
12．1　遊戲界面動效設計的基本知識　274
12．1．1　動效設計的基本性質與規則　274
12．1．2　動效與特效的區分與說明　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　遊戲界面動效中常見的運動規律分析　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

行業經驗篇
第14章　日常工作中的一些經驗
14．1　如何進行界面練習　350
14．1．1　篩選臨摹對象　350
14．1．2　培養尋找亮點的能力　351
14．1．3　保持勤學多練　353
14．2如何解決遊戲的迭代問題　354
14．2．1　處理遊戲版本的迭代問題　354
14．2．2　處理遊戲界面的迭代問題　355
14．3　如何優化切圖方式並節省遊戲包量　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　如何確保界面設計的規範性　372
15．1．1　發揮界面設計規範的實用價值　372
15．1．2　尋找項目限定範圍內的發揮餘地　373
15．1．3　功能性設計與創意性設計的平衡　375
15．2　如何解決遊戲界面還原過程中的問題　376
15．2．1　處理不符合規範的設計問題　376
15．2．2　處理圖形變形和圖形模糊問題　378
15．2．3　處理大尺寸切圖問題　379
15．2．4　處理動效優化問題　383
15．2．5　處理界面控件的適配問題　385
15．3　如何走查界面實現　388
15．3．1　每日版本走查　388
15．3．2　前端合入時的視覺驗收　390
15．3．3　從設計之初規避問題　391
15．3．4　避免同類錯誤重複發生　392
15．3．5　時刻試玩產品　396