基礎(chǔ)篇

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

1.1 游戲界面的分類與特點016

1.1.1 按游戲背景劃分016

1.1.2 按美術(shù)風(fēng)格劃分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 界面的表現(xiàn)效果032

1.3.4 培養(yǎng)較強的溝通與表達(dá)能力034



第 2章 游戲界面的設(shè)計流程037

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 界面的細(xì)化043

2.3.1 細(xì)化顏色043

2.3.2 細(xì)化內(nèi)部結(jié)構(gòu)045

2.4 質(zhì)感的強化表現(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è)計基礎(chǔ)053

3.1 圖標(biāo)在界面中的重要性 054

3.1.1 情感化的表現(xiàn)054

3.1.2 強化視覺引導(dǎo)055

3.1.3 完善界面節(jié)奏056

3.2 游戲圖標(biāo)的應(yīng)用場景 058

3.2.1 指代整個游戲058

3.2.2 功能系統(tǒng)入口058

3.2.3 功能性的裝飾058

3.3 游戲圖標(biāo)設(shè)計的基本原則059

3.4 圖標(biāo)的種類劃分062

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

3.4.2 從功能上劃分064



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

4.1 矢量圖標(biāo)的分類與設(shè)計要點068

4.1.1 線性圖標(biāo)設(shè)計要點068

4.1.2 負(fù)形面片圖標(biāo)設(shè)計要點069

4.1.3 多色扁平化圖標(biāo)設(shè)計要點071

4.2 矢量圖標(biāo)的統(tǒng)一設(shè)計規(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)用場景分析 077

4.3.1 輕量化位置077

4.3.2 扁平化位置078

4.3.3 需弱化用于平衡畫面的位置078

4.3.4 需使用業(yè)界通用型設(shè)計的位置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 繪制一個矢量風(fēng)格的相機圖標(biāo)083



第5章 寫實圖標(biāo)的設(shè)計方法解析087

5.1 寫實圖標(biāo)的功能與特點088

5.1.1 寫實圖標(biāo)的功能 088

5.1.2 寫實圖標(biāo)的特點088

5.2 寫實圖標(biāo)的分類與應(yīng)用場景分析091

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

5.2.2 從功能上劃分092

5.3 寫實圖標(biāo)的設(shè)計原則094

5.3.1 大尺寸的寫實圖標(biāo)094

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

5.4 繪制一個寫實風(fēng)格的“郵件”圖標(biāo)100



界面篇

第6章 游戲界面設(shè)計基礎(chǔ)113

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 界面情感化內(nèi)容的表現(xiàn)152

6.3.1 提煉并融入美術(shù)元素152

6.3.2 利用特有材質(zhì)153

6.3.3 處理場景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é)奏感在生活場景中的表現(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è)計與把控184

7.3.1 游戲界面動效設(shè)計的兩大關(guān)鍵點184

7.3.2 游戲界面動效節(jié)奏感的具體表現(xiàn)形式189

7.4 “LEgame”和“PRgame”項目中節(jié)奏感的把控與分析195

7.4.1 設(shè)計之初的節(jié)奏韻律規(guī)劃196

7.4.2 設(shè)計迭代中紊亂節(jié)奏的修正199

7.4.3 設(shè)計復(fù)盤中整體節(jié)奏的調(diào)整200

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



第8章 界面功能需求的強化處理203

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

8.2 如何通過設(shè)計體現(xiàn)界面本質(zhì)207

8.3 影響界面好壞的因素208

8.4 界面功能需求的分析方法211

8.4.1 從人的角度分析211

8.4.2 從事的角度分析211

8.5 “LEgame”項目中界面功能需求的強化設(shè)計與分析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è)計的一致性 228

9.4 “PRgame”項目中視覺的統(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 獎勵系統(tǒng)237

10.1.4 戰(zhàn)斗系統(tǒng)238

10.1.5 圖標(biāo)系統(tǒng)和按鈕系統(tǒng)239

10.2 制訂設(shè)計規(guī)范的方式和方法241

10.2.1 積累階段241

10.2.2 梳理階段242

10.2.3 完善和補充階段242

10.2.4 持續(xù)維護(hù)階段 242

10.3 設(shè)計規(guī)范的邊界243

10.4 設(shè)計規(guī)范細(xì)分化的指定 245

10.4.1 第 一層級系統(tǒng)劃分 245

10.4.2 細(xì)分化的設(shè)計規(guī)范 247

10.4.3 建立輔助性控件庫 248



動效篇

第 11章 游戲界面動效設(shè)計基礎(chǔ)249

11.1 游戲界面動效設(shè)計的基本知識250

11.1.1 動效設(shè)計的基本性質(zhì)與規(guī)則250

11.1.2 動效與特效的區(qū)分與說明251

11.1.3 影響動效設(shè)計的因素252

11.1.4 動效設(shè)計前需要注意的一些基本問題253

11.2 游戲界面動效的分類259

11.2.1 界面切換動效259

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

11.2.3 功能性動效263

11.2.4 看不見的動效265

11.3 游戲界面動效中常見的運動規(guī)律分析266

11.3.1 緩動266

11.3.2 遮罩267

11.3.3 形變267

11.3.4 透視動畫267

11.4 制作游戲界面動效的常用工具解析268

11.4.1 用Unity制作簡單動效268

案例演示：用Unity制作科技風(fēng)格結(jié)算界面動效268

11.4.2 用Unreal Engine 5制作簡單動效 276

案例演示：用Unreal Engine 5制作科技風(fēng)格結(jié)算界面動效 276

11.4.3 用After Effects制作動效286

案例演示：用After Effects制作黃色小球動效286



第 12章 游戲界面動效設(shè)計實例解析293

12.1 用After Effects在“LEgame”項目中制作彈窗入場動效294

12.2 用After Effects在“GGgame”項目中制作復(fù)雜形變和透視動畫309



行業(yè)經(jīng)驗篇

第 13章 日常工作中的一些經(jīng)驗321

13.1 如何進(jìn)行界面練習(xí)322

13.1.1 篩選臨摹對象322

13.1.2 培養(yǎng)尋找亮點的能力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è)計方式332

13.3.3 以變形拉伸的方式輸出切圖333

13.3.4 定期復(fù)查圖集333

13.4 如何解決項目協(xié)作問題334

13.4.1 明確自我定位334

13.4.2 把控全局335

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

13.4.4 關(guān)于界面設(shè)計的決策源問題341



第 14章 項目設(shè)計中的一些經(jīng)驗343

14.1 如何確保界面設(shè)計的規(guī)范性344

14.1.1 發(fā)揮界面設(shè)計規(guī)范的實用價值344

14.1.2 尋找項目限定范圍內(nèi)的發(fā)揮余地345

14.1.3 功能性設(shè)計與創(chuàng)意性設(shè)計的平衡347

14.2 如何解決游戲界面還原過程中的問題348

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

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

14.2.3 處理大尺寸切圖問題351

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

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

14.3 如何走查版本360

14.3.1 每日版本走查360

14.3.2 前端合入時的視覺驗收362

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

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

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