游戲UI設(shè)計之道（第二版 全彩）

CHAPTER　1
關(guān)于游戲UI設(shè)計 1　
1.1　UI設(shè)計與GUI設(shè)計 2
1.1.1　什么是UI設(shè)計 2
1.1.2　什么是GUI設(shè)計 2
1.1.3　關(guān)于用戶體驗 3
1.1.4　認(rèn)知心理學(xué)與UI設(shè)計的關(guān)系 4
1.1.5　游戲UI與UI設(shè)計的區(qū)別 4
1.2　理解游戲UI設(shè)計 5
1.2.1　 什么是游戲UI設(shè)計 5
1.2.2　游戲UI設(shè)計的重要性 6
1.3　游戲UI設(shè)計的準(zhǔn)備工作 7
1.3.1　了解游戲的世界觀 7
1.3.2　確定游戲UI的設(shè)計風(fēng)格 8
1.3.3　 游戲UI設(shè)計的流程 10
1.4　游戲UI設(shè)計原則 12
1.5　游戲界面設(shè)計的3種形式 15
1.6　本章小結(jié) 16
CHAPTER　2
游戲UI設(shè)計基本元素 17
2.1　游戲UI設(shè)計中的基本視覺元素 18
2.2　圖形元素設(shè)計 19
【自測1】設(shè)計游戲圖標(biāo) 21
【自測2】設(shè)計游戲啟動圖標(biāo) 28
2.3　文字元素設(shè)計 39
【自測3】設(shè)計游戲文字 40
2.4　動態(tài)控制元素設(shè)計 48
2.4.1　按鈕元素 49
【自測4】設(shè)計游戲按鈕 50
2.4.2　進度條元素 54
【自測5】設(shè)計游戲加載進度條 55
2.4.3　滾動條元素 58
2.4.4　列表選項元素 59
【自測6】設(shè)計游戲選項面板 59
2.4.5　文本輸入元素 70
2.5　其他元素設(shè)計 71
2.5.1　視聽元素的重要性 71
2.5.2　聲音元素的作用 72
2.5.3　合理配色的重要性 72
【自測7】設(shè)計游戲背景 73
2.6　專家支招 80
2.7　本章小結(jié) 80
CHAPTER?。?br />網(wǎng)頁游戲UI設(shè)計 81
3.1　了解網(wǎng)頁游戲 82
3.1.1　網(wǎng)頁游戲的優(yōu)勢 82
3.1.2　網(wǎng)頁游戲的用戶群 82
3.1.3　網(wǎng)頁游戲的分類 83
3.1.4　網(wǎng)頁游戲的不足 85
3.2　網(wǎng)頁游戲UI設(shè)計流程 85
【自測1】設(shè)計網(wǎng)頁游戲按鈕 86
【自測2】設(shè)計網(wǎng)頁游戲?qū)Ш?94
3.3　網(wǎng)頁游戲UI設(shè)計原則 99
3.3.1　界面風(fēng)格統(tǒng)一 99
3.3.2　方便用戶操控游戲 100
3.3.3　界面要足夠友善 100
3.3.4　簡潔易用 100
3.3.5　及時的信息反饋 101
3.3.6　增強游戲玩家的沉浸感 101
【自測3】設(shè)計網(wǎng)頁游戲登錄界面 101
【自測4】設(shè)計拼圖網(wǎng)頁游戲界面 109
3.4　網(wǎng)頁游戲界面設(shè)計目標(biāo) 117
3.4.1　可用性目標(biāo) 117
3.4.2　用戶體驗?zāi)繕?biāo) 118
【自測5】設(shè)計桌球網(wǎng)頁游戲界面 118
3.5　專家支招 128
3.6　本章小結(jié) 129
CHAPTER?。?br />iOS系統(tǒng)游戲UI設(shè)計 131
4.1　iOS系統(tǒng)游戲UI設(shè)計基礎(chǔ) 132
4.1.1　iOS系統(tǒng)UI尺寸 132
4.1.2　iOS系統(tǒng)圖標(biāo)尺寸 133
4.2　iOS系統(tǒng)游戲UI設(shè)計原則 133
【自測1】制作連字手機游戲界面 137
4.3　手機游戲的特點 143
4.3.1　手機游戲的優(yōu)勢 143
4.3.2　手機游戲的缺點 144
【自測2】設(shè)計iOS游戲圖標(biāo) 144
【自測3】設(shè)計五子棋手機游戲
　　 界面 149
4.4　iPad游戲視覺設(shè)計要素 159
4.4.1　圓角、陰影和高光 159
4.4.2　半透明 160
4.4.3　擬物化 160
4.4.4　空間感 161
4.4.5　擬物音效 161
【自測4】設(shè)計iPad游戲登錄界面 162
【自測5】設(shè)計iPad游戲開始界面 173
【自測6】設(shè)計iPad游戲運行界面 183
4.5　專家支招 191
4.6　本章小結(jié) 192
CHAPTER?。?br />Android系統(tǒng)游戲UI設(shè)計 193
5.1　 Android系統(tǒng)UI設(shè)計基礎(chǔ) 194
5.1.1　Android系統(tǒng)UI尺寸 194
5.1.2　Android系統(tǒng)圖標(biāo)尺寸 194
5.1.3　Android系統(tǒng)圖標(biāo)的設(shè)計
規(guī)則 195
5.2　Android手機游戲UI設(shè)計
規(guī)范 195
【自測1】設(shè)計消除類手機游戲
圖標(biāo) 197
【自測2】設(shè)計消除類手機游戲
界面 204
5.3　手機游戲界面設(shè)計的色彩
搭配 215
5.3.1　手機游戲界面設(shè)計中的色彩
表現(xiàn) 215
5.3.2　手機游戲界面設(shè)計中的色彩
設(shè)計方法 216
【自測3】設(shè)計休閑類手機游戲
界面 217
5.4　傳統(tǒng)游戲與手機游戲UI設(shè)計
的異同 225
5.4.1　傳統(tǒng)游戲與手機游戲UI設(shè)計
的相同點 225
5.4.2　傳統(tǒng)游戲與手機游戲UI設(shè)計
的不同點 225
【自測4】設(shè)計釣魚手機游戲
界面 226
5.5　手機游戲UI設(shè)計常見問題 235
5.5.1　同類元素外觀類型不一致 236
5.5.2　使用過多的字體類型 236
5.5.3　游戲界面之間的切換處理
不當(dāng) 237
【自測5】設(shè)計Q版手機游戲界面 237
5.6　專家支招 249
5.7　本章小結(jié) 250

CHAPTER?。?br />網(wǎng)絡(luò)游戲UI設(shè)計 251
6.1　游戲類別與UI設(shè)計的關(guān)系 252
6.1.1　按游戲種類劃分 252
6.1.2　按游戲模式劃分 253
6.2　網(wǎng)絡(luò)游戲界面設(shè)計要求 255
6.3　棋牌游戲UI設(shè)計 257
【自測1】棋牌游戲UI設(shè)計 257
6.4　《賽馬》游戲UI設(shè)計 275
【自測2】《賽馬》游戲UI設(shè)計 275
6.5　《劍俠》游戲UI設(shè)計 295
【自測3】《劍俠》游戲UI設(shè)計 295
6.6　《古神志》游戲UI設(shè)計 309
【自測3】《古神志》游戲UI設(shè)計 310
6.7　專家支招 324
6.8　本章小結(jié) 324