基礎(chǔ)篇

第 1章 初識(shí)游戲界面設(shè)計(jì)015

1.1 游戲界面的分類(lèi)與特點(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)化視覺(jué)引導(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)的種類(lèi)劃分062

3.4.1 從美術(shù)風(fēng)格上劃分062

3.4.2 從功能上劃分064



第4章 矢量圖標(biāo)的設(shè)計(jì)方法解析067

4.1 矢量圖標(biāo)的分類(lèi)與設(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 需弱化用于平衡畫(huà)面的位置078

4.3.4 需使用業(yè)界通用型設(shè)計(jì)的位置079

4.4 矢量圖標(biāo)線條美感的把控080

4.4.1 不同弧線的交接處過(guò)渡要融洽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章 寫(xiě)實(shí)圖標(biāo)的設(shè)計(jì)方法解析087

5.1 寫(xiě)實(shí)圖標(biāo)的功能與特點(diǎn)088

5.1.1 寫(xiě)實(shí)圖標(biāo)的功能 088

5.1.2 寫(xiě)實(shí)圖標(biāo)的特點(diǎn)088

5.2 寫(xiě)實(shí)圖標(biāo)的分類(lèi)與應(yīng)用場(chǎng)景分析091

5.2.1 從美術(shù)風(fēng)格上劃分091

5.2.2 從功能上劃分092

5.3 寫(xiě)實(shí)圖標(biāo)的設(shè)計(jì)原則094

5.3.1 大尺寸的寫(xiě)實(shí)圖標(biāo)094

5.3.2 中小尺寸的寫(xiě)實(shí)圖標(biāo)097

5.4 繪制一個(gè)寫(xiě)實(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ù)盤(pán)中整體節(jié)奏的調(diào)整200

7.4.4 設(shè)計(jì)節(jié)奏感的時(shí)效性把控202



第8章 界面功能需求的強(qiáng)化處理203

8.1 游戲界面設(shè)計(jì)的本質(zhì)與目的204

8.2 如何通過(guò)設(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章 界面視覺(jué)的統(tǒng)一化處理219

9.1 界面視覺(jué)的準(zhǔn)確性220

9.2 界面視覺(jué)的唯一性 220

9.2.1 改變界面中的美術(shù)元素221

9.2.2 界面色調(diào)的差異221

9.2.3 設(shè)置不同的材質(zhì)風(fēng)格221

9.3 界面視覺(jué)的一致性 222

9.3.1 美術(shù)元素的一致性223

9.3.2 配色體系的一致性 224

9.3.3 圖形設(shè)計(jì)的一致性 228

9.4 “PRgame”項(xiàng)目中視覺(jué)的統(tǒng)一化處理分析229

9.4.1 準(zhǔn)確性的處理229

9.4.2 唯一性的處理232

9.4.3 一致性的處理233



第 10章 游戲界面視覺(jué)系統(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 建立輔助性控件庫(kù) 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ū)分與說(shuō)明251

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

11.1.4 動(dòng)效設(shè)計(jì)前需要注意的一些基本問(wèn)題253

11.2 游戲界面動(dòng)效的分類(lèi)259

11.2.1 界面切換動(dòng)效259

11.2.2 情感表現(xiàn)動(dòng)效262

11.2.3 功能性動(dòng)效263

11.2.4 看不見(jiàn)的動(dòng)效265

11.3 游戲界面動(dòng)效中常見(jiàn)的運(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)畫(huà)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)畫(huà)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如何解決游戲的迭代問(wèn)題326

13.2.1 處理游戲版本的迭代問(wèn)題326

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

13.4.1 明確自我定位334

13.4.2 把控全局335

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

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

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

14.2.2 處理圖形變形和圖形模糊問(wèn)題350

14.2.3 處理大尺寸切圖問(wèn)題351

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

14.2.5 處理界面控件的適配問(wèn)題357

14.3 如何走查版本360

14.3.1 每日版本走查360

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

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

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

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