基礎(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 不同弧線的交接處過渡要融洽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 如何通過設(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 建立輔助性控件庫 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ū)分與說明251

11.1.3 影響動(dòng)效設(shè)計(jì)的因素252

11.1.4 動(dòng)效設(shè)計(jì)前需要注意的一些基本問題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如何解決游戲的迭代問題326

13.2.1 處理游戲版本的迭代問題326

13.2.2 處理游戲界面的迭代問題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é)作問題334

13.4.1 明確自我定位334

13.4.2 把控全局335

13.4.3 關(guān)于界面還原的問題337

13.4.4 關(guān)于界面設(shè)計(jì)的決策源問題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 如何解決游戲界面還原過程中的問題348

14.2.1 處理不符合規(guī)范的設(shè)計(jì)問題348

14.2.2 處理圖形變形和圖形模糊問題350

14.2.3 處理大尺寸切圖問題351

14.2.4 處理動(dòng)效優(yōu)化問題355

14.2.5 處理界面控件的適配問題357

14.3 如何走查版本360

14.3.1 每日版本走查360

14.3.2 前端合入時(shí)的視覺驗(yàn)收362

14.3.3 從設(shè)計(jì)之初規(guī)避問題363

14.3.4 避免同類錯(cuò)誤重復(fù)發(fā)生364

14.3.5 時(shí)刻試玩產(chǎn)品368