UI設(shè)計(jì)全書（全彩）

第1 章 關(guān)于UI 設(shè)計(jì)…………………………………………………………… 1
1．1　關(guān)于UI 設(shè)計(jì)……………………………………………………………………… 2
1．1．1　UI 設(shè)計(jì)概念 ………………………………………………………………… 2
1．1．2　設(shè)計(jì)類別 ……………………………………………………………………… 2
1．1．3　UI 設(shè)計(jì)流程 ………………………………………………………………… 6
1．2　了解UI 設(shè)計(jì)師…………………………………………………………………… 8
1．2．1　研究界面――圖形設(shè)計(jì)師 …………………………………………………… 8
1．2．2　研究人與界面的關(guān)系――交互設(shè)計(jì)師 ……………………………………… 8
1．2．3　研究人――用戶測(cè)試/ 研究工程師 ………………………………………… 9
1．3　UI 設(shè)計(jì)應(yīng)用軟件………………………………………………………………… 9
1．3．1　圖片處理――Photoshop……………………………………………………… 9
1．3．2　矢量繪圖――Illustrator …………………………………………………… 10
1．3．3　矢量繪圖――Sketch ……………………………………………………… 10
1．3．4　交互效果――Axure RP …………………………………………………… 11
1．3．5　小動(dòng)畫――Flash …………………………………………………………… 11
1．4　UI 設(shè)計(jì)的構(gòu)成元素…………………………………………………………… 12
1．4．1　文字元素 …………………………………………………………………… 12
1．4．2　圖形符號(hào)元素 ……………………………………………………………… 13
1．4．3　圖像元素 …………………………………………………………………… 13
1．4．4　多媒體元素 ………………………………………………………………… 13
1．4．5　色彩元素 …………………………………………………………………… 13
1．5　UI 設(shè)計(jì)的重要原則…………………………………………………………… 14
1．5．1　清晰明了的設(shè)計(jì) …………………………………………………………… 14
1．5．2　記憶負(fù)擔(dān)最小化 …………………………………………………………… 14
1．5．3　設(shè)計(jì)的一致性 ……………………………………………………………… 15
1．5．4　美觀大方的設(shè)計(jì) …………………………………………………………… 15
Ⅵ
1．5．5　從用戶習(xí)慣考慮 …………………………………………………………… 15
1．5．6　安全性 ……………………………………………………………………… 16
1．5．7　靈活性 ……………………………………………………………………… 16
1．5．8　人性化 ……………………………………………………………………… 16
1．6　專題討論… …………………………………………………………………… 17
1．6．1　為什么要培養(yǎng)設(shè)計(jì)師的產(chǎn)品思維？ ……………………………………… 17
1．6．2　產(chǎn)品層面思考 ……………………………………………………………… 18
1．7　本章小結(jié)… …………………………………………………………………… 18
第2 章 UI 設(shè)計(jì)配色… ……………………………………………………… 19
2．1　初識(shí)色彩… …………………………………………………………………… 20
2．1．1　色彩屬性 …………………………………………………………………… 20
2．1．2　基礎(chǔ)配色 …………………………………………………………………… 21
2．2　軟件界面中的色彩搭配… …………………………………………………… 23
2．2．1　色調(diào)的一致性 ……………………………………………………………… 23
2．2．2　保守地使用色彩 …………………………………………………………… 24
2．2．3　色彩的選擇盡可能符合人們的視覺習(xí)慣 ………………………………… 24
2．2．4　使用色彩作為功能分界的識(shí)別元素 ……………………………………… 25
2．2．5　用戶擁有調(diào)整界面的配色方案 …………………………………………… 25
2．2．6　色彩搭配要便于閱讀 ……………………………………………………… 26
2．2．7　控制色彩的使用數(shù)量 ……………………………………………………… 26
2．3　色彩在網(wǎng)站UI 設(shè)計(jì)中的作用………………………………………………… 26
2．3．1　突出主題 …………………………………………………………………… 27
2．3．2　劃分視覺區(qū)域 ……………………………………………………………… 27
2．3．3　吸引用戶 …………………………………………………………………… 28
2．3．4　增強(qiáng)藝術(shù)性 ………………………………………………………………… 35
2．4　網(wǎng)站UI 設(shè)計(jì)中的色彩搭配…………………………………………………… 36
2．4．1　網(wǎng)站UI 設(shè)計(jì)配色基礎(chǔ) …………………………………………………… 36
2．4．2　網(wǎng)站UI 設(shè)計(jì)配色原則 …………………………………………………… 38
2．5　網(wǎng)站UI 設(shè)計(jì)配色方法………………………………………………………… 40
2．5．1　主色 ………………………………………………………………………… 40
2．5．2　背景色 ……………………………………………………………………… 40
2．5．3　輔色 ………………………………………………………………………… 41
2．5．4　點(diǎn)綴色 ……………………………………………………………………… 42
2．6　網(wǎng)站文本配色… ……………………………………………………………… 50
2．6．1　網(wǎng)頁與文本的配色關(guān)系 …………………………………………………… 51
2．6．2　良好的網(wǎng)頁文本配色 ……………………………………………………… 51
2．6．3　網(wǎng)頁文本配色要點(diǎn) ………………………………………………………… 52
2．7　網(wǎng)頁元素的色彩搭配… ……………………………………………………… 52
2．7．1　Logo 與廣告 ………………………………………………………………… 52
2．7．2　導(dǎo)航菜單 …………………………………………………………………… 53
2．7．3　背景與文字 ………………………………………………………………… 53
2．7．4　鏈接文字 …………………………………………………………………… 54
2．8　手機(jī)游戲界面配色… ………………………………………………………… 55
2．8．1　手機(jī)游戲界面設(shè)計(jì)中的色彩表現(xiàn) ………………………………………… 55
2．8．2　手機(jī)游戲界面設(shè)計(jì)中的色彩設(shè)計(jì)方法 …………………………………… 56
2．9　專題討論… …………………………………………………………………… 57
2．9．1　網(wǎng)站界面配色的基本方法是什么？ ……………………………………… 57
2．9．2　怎樣培養(yǎng)對(duì)色彩的敏感度？ ……………………………………………… 57
2．10　本章小結(jié)……………………………………………………………………… 58
第3 章 圖標(biāo)按鈕設(shè)計(jì)……………………………………………………… 59
3．1 圖標(biāo)按鈕設(shè)計(jì)概述… ………………………………………………………… 60
3．1．1 圖標(biāo)按鈕的起源 …………………………………………………………… 60
3．1．2 圖標(biāo)按鈕的分類 …………………………………………………………… 61
3．2 軟件圖標(biāo)按鈕設(shè)計(jì)… ………………………………………………………… 63
3．2．1 圖標(biāo)設(shè)計(jì)規(guī)范 ……………………………………………………………… 63
3．2．2 圖標(biāo)常用格式 ……………………………………………………………… 65
3．2．3 軟件按鈕設(shè)計(jì) ……………………………………………………………… 66
3．3 圖標(biāo)設(shè)計(jì)風(fēng)格… ……………………………………………………………… 66
3．3．1 簡約化軟件圖標(biāo) …………………………………………………………… 66
3．3．2 扁平化軟件圖標(biāo) …………………………………………………………… 70
3．3．3 擬物化軟件圖標(biāo) …………………………………………………………… 76
3．4　網(wǎng)頁圖標(biāo)按鈕設(shè)計(jì)… ………………………………………………………… 77
3．4．1 網(wǎng)頁中按鈕的設(shè)計(jì)規(guī)則 …………………………………………………… 77
3．4．2 網(wǎng)頁中常見的按鈕類型 …………………………………………………… 79
3．4．3 網(wǎng)頁中按鈕的特點(diǎn) ………………………………………………………… 80
3．4．4 網(wǎng)頁圖標(biāo)的應(yīng)用 …………………………………………………………… 86
3．5 網(wǎng)頁中按鈕的實(shí)際作用… …………………………………………………… 87
3．5．1 具有提交功能的按鈕 ……………………………………………………… 87
3．5．2 具有鏈接功能的按鈕 ……………………………………………………… 88
3．6 游戲界面中的按鈕設(shè)計(jì)… …………………………………………………… 89
3．6．1 按鈕元素 …………………………………………………………………… 89
3．6．2 游戲按鈕的視覺表現(xiàn) ……………………………………………………… 90
3．7 專題討論… …………………………………………………………………… 96
3．7．1 圖標(biāo)的常用尺寸有哪些？ ………………………………………………… 96
3．7．2 如何設(shè)計(jì)出好的圖標(biāo)或按鈕？ …………………………………………… 96
3．8 本章小結(jié)… …………………………………………………………………… 97
第4 章 應(yīng)用軟件UI 設(shè)計(jì)…………………………………………………… 99
4．1 了解軟件UI 設(shè)計(jì)……………………………………………………………… 100
4．1．1 軟件UI 設(shè)計(jì)基礎(chǔ) ………………………………………………………… 100
4．1．2 軟件UI 設(shè)計(jì)原則 ………………………………………………………… 101
4．1．3 軟件UI 設(shè)計(jì)分類 ………………………………………………………… 108
4．1．4 軟件UI 設(shè)計(jì)元素 ………………………………………………………… 111
4．2 開關(guān)和進(jìn)度條設(shè)計(jì)… ………………………………………………………… 112
4．2．1 開關(guān)設(shè)計(jì) …………………………………………………………………… 112
4．2．2 進(jìn)度條設(shè)計(jì) ………………………………………………………………… 117
4．3 軟件菜單和工具欄設(shè)計(jì)… …………………………………………………… 122
4．3．1 軟件菜單的必要性 ………………………………………………………… 122
4．3．2 軟件菜單的設(shè)計(jì)原則 ……………………………………………………… 123
4．3．3 軟件工具欄的作用 ………………………………………………………… 124
4．4 軟件啟動(dòng)界面設(shè)計(jì)… ………………………………………………………… 129
4．4．1 軟件啟動(dòng)界面的作用 ……………………………………………………… 129
4．4．2 軟件啟動(dòng)界面的設(shè)計(jì)原則 ………………………………………………… 137
4．4．3 設(shè)計(jì)軟件啟動(dòng)界面需要注意的事項(xiàng) ……………………………………… 137
4．5 軟件皮膚設(shè)計(jì)… ……………………………………………………………… 140
4．5．1 天氣軟件皮膚設(shè)計(jì) ………………………………………………………… 140
4．5．2 輸入法軟件皮膚設(shè)計(jì) ……………………………………………………… 148
4．6 專題討論… …………………………………………………………………… 148
4．6．1 如何在軟件安裝界面設(shè)計(jì)中提高用戶對(duì)軟件的認(rèn)知？ ………………… 149
4．6．2 在軟件啟動(dòng)界面中通常會(huì)為用戶提供哪些信息？ ……………………… 149
4．7 本章小結(jié)… …………………………………………………………………… 149
第5 章 游戲UI 設(shè)計(jì)………………………………………………………… 151
5．1 了解游戲UI 設(shè)計(jì)……………………………………………………………… 152
5．1．1 游戲UI 設(shè)計(jì)基礎(chǔ) ………………………………………………………… 152
5．1．2 確定游戲設(shè)計(jì)風(fēng)格 ………………………………………………………… 154
5．1．3 游戲UI 設(shè)計(jì)規(guī)范 ………………………………………………………… 155
5．1．4 游戲UI 的三種設(shè)計(jì)方式 ………………………………………………… 158
5．2 游戲UI 設(shè)計(jì)元素……………………………………………………………… 160
5．2．1 圖形圖像元素 ……………………………………………………………… 160
5．2．2 文字元素 …………………………………………………………………… 161
5．2．3 動(dòng)態(tài)顯示元素 ……………………………………………………………… 162
5．2．4 視聽元素 …………………………………………………………………… 168
5．3 網(wǎng)頁游戲UI 設(shè)計(jì)……………………………………………………………… 169
5．3．1 熟悉網(wǎng)頁游戲 ……………………………………………………………… 169
5．3．2 設(shè)計(jì)流程 …………………………………………………………………… 172
5．3．3 設(shè)計(jì)規(guī)則 …………………………………………………………………… 180
5．3．4 設(shè)計(jì)目標(biāo) …………………………………………………………………… 182
5．4 iOS 系統(tǒng)游戲UI 設(shè)計(jì)………………………………………………………… 184
5．4．1 設(shè)計(jì)基礎(chǔ) …………………………………………………………………… 184
5．4．2 設(shè)計(jì)原則 …………………………………………………………………… 185
5．4．3 移動(dòng)端游戲UI 的特點(diǎn) …………………………………………………… 189
5．4．4 iPad 游戲視覺設(shè)計(jì)要素 …………………………………………………… 190
5．5 Android 系統(tǒng)游戲UI 設(shè)計(jì)… ………………………………………………… 199
5．5．1 設(shè)計(jì)基礎(chǔ) …………………………………………………………………… 199
5．5．2 設(shè)計(jì)規(guī)范 …………………………………………………………………… 200
5．5．3 傳統(tǒng)游戲與手機(jī)游戲UI 設(shè)計(jì) …………………………………………… 210
5．5．4 手機(jī)游戲UI 設(shè)計(jì)常見問題 ……………………………………………… 211
5．6 專題討論… …………………………………………………………………… 213
5．6．1 什么是人性化的網(wǎng)頁游戲UI ？ ………………………………………… 213
5．6．2 網(wǎng)頁游戲UI 為什么要具有一定的可擴(kuò)充性？ ………………………… 213
5．7 本章小結(jié)… …………………………………………………………………… 213
第6 章 網(wǎng)頁UI 設(shè)計(jì)………………………………………………………… 215
6．1 網(wǎng)頁UI 設(shè)計(jì)詳解……………………………………………………………… 216
6．1．1 認(rèn)識(shí)網(wǎng)頁界面設(shè)計(jì) ………………………………………………………… 216
6．1．2 網(wǎng)頁界面設(shè)計(jì)要點(diǎn) ………………………………………………………… 219
6．1．3 網(wǎng)頁界面設(shè)計(jì)規(guī)范 ………………………………………………………… 223
6．1．4 網(wǎng)頁界面設(shè)計(jì)思路 ………………………………………………………… 225
6．2 網(wǎng)頁Logo 設(shè)計(jì)… …………………………………………………………… 226
6．2．1 網(wǎng)頁Logo 的表現(xiàn)形式 …………………………………………………… 226
6．2．2 網(wǎng)頁Logo 的設(shè)計(jì)特點(diǎn) …………………………………………………… 227
6．2．3 網(wǎng)頁Logo 的設(shè)計(jì)原則 …………………………………………………… 228
6．3 網(wǎng)頁導(dǎo)航設(shè)計(jì)… ……………………………………………………………… 235
6．3．1 網(wǎng)頁導(dǎo)航概述 ……………………………………………………………… 235
6．3．2 導(dǎo)航在網(wǎng)頁中的表現(xiàn)形式 ………………………………………………… 236
6．3．3 導(dǎo)航的擺放位置 …………………………………………………………… 237
6．4 網(wǎng)頁廣告設(shè)計(jì)… ……………………………………………………………… 247
6．4．1 網(wǎng)頁廣告的特點(diǎn) …………………………………………………………… 247
6．4．2 常見的網(wǎng)頁廣告類型 ……………………………………………………… 249
6．5 網(wǎng)頁布局與版式設(shè)計(jì)… ……………………………………………………… 250
6．5．1 了解網(wǎng)頁布局 ……………………………………………………………… 250
6．5．2 常見的網(wǎng)頁布局形式 ……………………………………………………… 251
6．5．3 網(wǎng)頁構(gòu)成的藝術(shù)表現(xiàn) ……………………………………………………… 263
6．5．4 網(wǎng)頁界面風(fēng)格設(shè)計(jì) ………………………………………………………… 265
6．6 專題討論… …………………………………………………………………… 267
6．6．1 交互式導(dǎo)航的優(yōu)勢(shì)與劣勢(shì) ………………………………………………… 267
6．6．2 文字排版設(shè)計(jì)在網(wǎng)站界面中起到的作用 ………………………………… 267
6．6．3 什么是網(wǎng)站界面布局的連貫性和多樣性？ ……………………………… 267
6．7 本章小結(jié)… …………………………………………………………………… 268
第7 章 淘寶店鋪UI 設(shè)計(jì)…………………………………………………… 269
7．1 淘寶店鋪UI 設(shè)計(jì)基本元素…………………………………………………… 270
7．1．1 關(guān)于網(wǎng)店設(shè)計(jì) ……………………………………………………………… 270
7．1．2 店鋪中的導(dǎo)航表現(xiàn)形式 …………………………………………………… 271
7．1．3 設(shè)計(jì)店鋪中的工具欄 ……………………………………………………… 275
7．2 淘寶店鋪視覺設(shè)計(jì)原則… …………………………………………………… 276
7．2．1 功能性原則 ………………………………………………………………… 276
7．2．2 實(shí)用性原則 ………………………………………………………………… 277
7．2．3 一致性原則 ………………………………………………………………… 279
7．3 店鋪專題海報(bào)設(shè)計(jì)… ………………………………………………………… 280
7．3．1 海報(bào)的擺放位置 …………………………………………………………… 280
7．3．2 海報(bào)設(shè)計(jì)的層次 …………………………………………………………… 281
7．3．3 海報(bào)設(shè)計(jì)中文字的作用 …………………………………………………… 285
7．3．4 利用設(shè)計(jì)凸顯海報(bào)主題 …………………………………………………… 289
7．4 淘寶店鋪廣告設(shè)計(jì)… ………………………………………………………… 293
7．4．1 移動(dòng)端與PC 端淘寶店鋪廣告的不同 …………………………………… 293
7．4．2 廣告設(shè)計(jì)元素 ……………………………………………………………… 294
7．4．3 廣告設(shè)計(jì)要點(diǎn) ……………………………………………………………… 296
7．4．4 廣告設(shè)計(jì)技巧 ……………………………………………………………… 300
7．5 專題討論… …………………………………………………………………… 312
7．5．1 淘寶店鋪的海報(bào)尺寸 ……………………………………………………… 312
7．5．2 店招的作用 ………………………………………………………………… 312
7．6 本章小結(jié)… …………………………………………………………………… 313
第8 章 移動(dòng)端App 設(shè)計(jì)… ………………………………………………… 315
8．1 初識(shí)移動(dòng)端App… …………………………………………………………… 316
8．1．1 什么是App ………………………………………………………………… 316
8．1．2 智能設(shè)備 …………………………………………………………………… 317
8．2 移動(dòng)端屏幕尺寸… …………………………………………………………… 318
8．2．1 Android 系統(tǒng)屏幕尺寸 …………………………………………………… 319
8．2．2 iOS 系統(tǒng)屏幕尺寸 ………………………………………………………… 319
8．2．3 App 啟動(dòng)界面 ……………………………………………………………… 319
8．2．4 App 引導(dǎo)界面分類 ………………………………………………………… 320
8．3 App 界面布局… ……………………………………………………………… 327
8．3．1 Android 系統(tǒng)軟件界面布局 ……………………………………………… 327
8．3．2 iOS 系統(tǒng)軟件布局 ………………………………………………………… 328
8．3．3 音樂App 界面布局 ………………………………………………………… 328
8．3．4 App 界面設(shè)計(jì)要求 ………………………………………………………… 341
8．3．5 App 軟件界面設(shè)計(jì)原則 …………………………………………………… 343
8．4 App 界面視覺設(shè)計(jì)規(guī)范… …………………………………………………… 353
8．4．1 視覺設(shè)計(jì)規(guī)范的意義 ……………………………………………………… 354
8．4．2 常見的App 視覺設(shè)計(jì)流程 ………………………………………………… 354
8．4．3 注意事項(xiàng) …………………………………………………………………… 355
8．5 專題討論… …………………………………………………………………… 356
8．5．1 移動(dòng)端App UI 設(shè)計(jì)與軟件UI 設(shè)計(jì)之間的區(qū)別是什么？ ……………… 356
8．5．2 為什么App 軟件界面非常重要？ ………………………………………… 356
8．6 本章小結(jié)… …………………………………………………………………… 356
第9 章 圖標(biāo)按鈕設(shè)計(jì)綜合案例…………………………………………… 357
9．1 繪制電源按鈕… ……………………………………………………………… 358
9．1．1 按鈕在不同頁面中的作用 ………………………………………………… 358
9．1．2 按鈕在不同環(huán)境下的狀態(tài) ………………………………………………… 361
9．1．3 案例解析 …………………………………………………………………… 361
9．1．4 操作步驟 …………………………………………………………………… 362
9．2 繪制游戲啟動(dòng)圖標(biāo)… ………………………………………………………… 368
9．2．1 產(chǎn)品構(gòu)思 …………………………………………………………………… 368
9．2．2 優(yōu)化設(shè)計(jì) …………………………………………………………………… 368
9．2．3 案例解析 …………………………………………………………………… 369
9．2．4 操作步驟 …………………………………………………………………… 370
9．3 繪制游戲圖標(biāo)… ……………………………………………………………… 380
9．3．1 按鈕屬性 …………………………………………………………………… 381
9．3．2 按鈕分類 …………………………………………………………………… 381
9．3．3 案例解析 …………………………………………………………………… 382
9．3．4 操作步驟 …………………………………………………………………… 383
9．4 繪制水晶質(zhì)感圖標(biāo)… ………………………………………………………… 390
9．4．1 按界面位置和模塊分類 …………………………………………………… 391
9．4．2 按功能模塊分類 …………………………………………………………… 392
9．4．3 案例解析 …………………………………………………………………… 392
9．4．4 操作步驟 …………………………………………………………………… 393
9．5 本章小結(jié)… …………………………………………………………………… 406
第10 章 UI 配色設(shè)計(jì)綜合案例……………………………………………… 407
10．1 繪制新春海報(bào)………………………………………………………………… 408
10．1．1 配色技巧――同色系搭配 ……………………………………………… 408
10．1．2 配色方案的熟練使用 …………………………………………………… 408
10．1．3 案例解析 ………………………………………………………………… 410
10．1．4 操作步驟 ………………………………………………………………… 411
10．2 制作Banner 海報(bào)…………………………………………………………… 415
10．2．1 配色技巧――對(duì)比配色 ………………………………………………… 415
10．2．2 色彩心理學(xué)的重要性 …………………………………………………… 416
10．2．3 案例解析 ………………………………………………………………… 417
10．2．4 操作步驟 ………………………………………………………………… 418
10．3 繪制休閑食品海報(bào)…………………………………………………………… 426
10．3．1 配色技巧――鄰近色配色 ……………………………………………… 427
XIV
10．3．2 從生活中獲取配色 ……………………………………………………… 427
10．3．3 案例解析 ………………………………………………………………… 429
10．3．4 操作步驟 ………………………………………………………………… 429
10．4 繪制數(shù)碼產(chǎn)品促銷海報(bào)……………………………………………………… 437
10．4．1 配色技巧――互補(bǔ)色配色 ……………………………………………… 438
10．4．2 色彩搭配中的文化差異 ………………………………………………… 439
10．4．3 案例解析 ………………………………………………………………… 439
10．4．4 操作步驟 ………………………………………………………………… 440
10．5 本章小結(jié)……………………………………………………………………… 452
第11 章 應(yīng)用軟件設(shè)計(jì)綜合案例… ………………………………………… 453
11．1 繪制視頻播放器界面………………………………………………………… 454
11．1．1 播放器界面設(shè)計(jì) ………………………………………………………… 454
11．1．2 案例解析 ………………………………………………………………… 454
11．1．3 操作步驟 ………………………………………………………………… 455
11．2 半透明音樂播放器界面……………………………………………………… 463
11．2．1 人性化的播放器界面設(shè)置 ……………………………………………… 463
11．2．2 軟件界面設(shè)計(jì)要點(diǎn) ……………………………………………………… 465
11．2．3 案例解析 ………………………………………………………………… 466
11．2．4 制作步驟 ………………………………………………………………… 467
11．3 云空間軟件界面……………………………………………………………… 475
11．3．1 Web 界面設(shè)計(jì)要點(diǎn) ……………………………………………………… 476
11．3．2 播放器界面設(shè)計(jì)原則 …………………………………………………… 477
11．3．3 案例解析 ………………………………………………………………… 480
11．3．4 制作步驟 ………………………………………………………………… 481
11．4 繪制視頻設(shè)置界面…………………………………………………………… 487
11．4．1 界面設(shè)計(jì)趨勢(shì) …………………………………………………………… 487
11．4．2 軟件界面的屏幕顯示 …………………………………………………… 490
11．4．3 案例解析 ………………………………………………………………… 491
11．4．4 制作步驟 ………………………………………………………………… 491
11．5 本章小結(jié)……………………………………………………………………… 502
第12 章 游戲UI 設(shè)計(jì)綜合案例… ………………………………………… 503
12．1 繪制游戲幫助界面…………………………………………………………… 504
12．1．1 按游戲種類分類 ………………………………………………………… 504
12．1．2 按游戲模式分類 ………………………………………………………… 505
12．1．3 案例解析 ………………………………………………………………… 507
12．1．4 制作步驟 ………………………………………………………………… 508
12．2 繪制桌球網(wǎng)頁游戲界面……………………………………………………… 515
12．2．1 網(wǎng)絡(luò)游戲設(shè)計(jì)要求 ……………………………………………………… 515
12．2．2 了解游戲的世界觀 ……………………………………………………… 518
12．2．3 案例解析 ………………………………………………………………… 519
12．2．4 制作步驟 ………………………………………………………………… 520
12．3 繪制拼圖網(wǎng)頁游戲界面……………………………………………………… 532
12．3．1 游戲界面的制作流程 …………………………………………………… 533
12．3．2 案例解析 ………………………………………………………………… 535
12．3．3 制作步驟 ………………………………………………………………… 536
12．4 繪制馬會(huì)游戲界面…………………………………………………………… 544
12．4．1 色彩元素在游戲界面中的作用 ………………………………………… 544
12．4．2 案例解析 ………………………………………………………………… 545
12．4．3 制作步驟 ………………………………………………………………… 545
12．5 本章小結(jié)……………………………………………………………………… 556
第13 章 網(wǎng)頁設(shè)計(jì)綜合案例… ……………………………………………… 557
13．1 設(shè)計(jì)制作企業(yè)網(wǎng)站界面……………………………………………………… 558
13．1．1 了解企業(yè)網(wǎng)站設(shè)計(jì) ……………………………………………………… 558
13．1．2 了解兒童網(wǎng)站設(shè)計(jì) ……………………………………………………… 560
13．1．3 案例解析 ………………………………………………………………… 563
13．1．4 制作步驟 ………………………………………………………………… 564
13．2 設(shè)計(jì)制作咖啡網(wǎng)站界面……………………………………………………… 579
13．2．1 網(wǎng)頁布局設(shè)計(jì) …………………………………………………………… 580
13．2．2 網(wǎng)頁布局原則 …………………………………………………………… 581
13．2．3 案例解析 ………………………………………………………………… 582
13．2．4 制作步驟 ………………………………………………………………… 583
13．3 設(shè)計(jì)制作淘寶促銷網(wǎng)頁……………………………………………………… 591
13．3．1 網(wǎng)頁中文字設(shè)計(jì)要求 …………………………………………………… 592
13．3．2 網(wǎng)頁中文字設(shè)計(jì)原則 …………………………………………………… 593
13．3．3 案例解析 ………………………………………………………………… 596
13．3．4 制作步驟 ………………………………………………………………… 597
13．4 本章小結(jié)……………………………………………………………………… 609