網(wǎng)頁UI設(shè)計(jì)之道（全彩）

CHAPTER　1
關(guān)于網(wǎng)頁UI設(shè)計(jì) 1　
1.1　了解網(wǎng)頁UI 2
1.1.1　什么是網(wǎng)頁界面 2
1.1.2　網(wǎng)頁界面設(shè)計(jì)的特點(diǎn) 2
1.2　網(wǎng)頁UI設(shè)計(jì)要點(diǎn) 5
1.2.1　設(shè)計(jì)與技術(shù)的結(jié)合 5
1.2.2　立體空間節(jié)奏感 8
1.2.3　視覺導(dǎo)向性 9
1.2.4　視覺服務(wù) 10
1.3.1　文字 10
1.3　網(wǎng)頁UI構(gòu)成元素 10
1.3.2　圖形符號 11
1.3.3　圖像 11
1.3.4　多媒體 12
1.3.5　色彩 12
1.4　網(wǎng)頁UI設(shè)計(jì)與審美 13
1.4.1　功能與形式美 13
1.4.2　網(wǎng)頁UI形式美法則 14
1.5　網(wǎng)頁UI的設(shè)計(jì)原則 16
1.5.1　以用戶為中心 16
1.5.2　視覺美觀 16
1.5.3　主題明確 17
1.5.4　內(nèi)容與形式統(tǒng)一 18
1.5.5　有機(jī)的整體 19
1.6　網(wǎng)頁UI創(chuàng)意設(shè)計(jì)方法 20
1.6.1　綜合型 21
1.6.2　趣味型 21
1.6.3　聯(lián)想型 22
1.6.4　比喻型 22
1.6.5　變異型 22
1.6.6　古樸型 23
1.6.7　流行型 23
1.7　扁平化在網(wǎng)頁UI設(shè)計(jì)中的應(yīng)用 24
1.7.1　圖標(biāo) 24
1.7.2　圓角 25
1.7.3　折角 25
1.7.4　標(biāo)簽 26
1.7.5　徽章 26
1.7.6　條紋 26
1.7.7　裝飾元素 27
1.7.8　裝飾背景 27
1.8　本章小結(jié) 28

CHAPTER　2
網(wǎng)站基本圖形元素設(shè)計(jì) 29
2.1　認(rèn)識網(wǎng)頁圖標(biāo) 30
2.1.1　圖標(biāo)概述 30
2.1.2　網(wǎng)頁圖標(biāo)應(yīng)用 31
【自測1】設(shè)計(jì)簡約風(fēng)格網(wǎng)站圖標(biāo) 32
【自測2】設(shè)計(jì)按鈕圖標(biāo)工具欄 37
2.2　網(wǎng)頁中圖標(biāo)的設(shè)計(jì)原則 42
【自測3】設(shè)計(jì)水晶質(zhì)感圖標(biāo) 43
2.3　網(wǎng)頁按鈕的常見類型 55
2.4　網(wǎng)站按鈕的特點(diǎn) 56
【自測4】設(shè)計(jì)質(zhì)感游戲按鈕 57
【自測5】設(shè)計(jì)網(wǎng)站個(gè)性按鈕 62
2.5　網(wǎng)頁中按鈕的表現(xiàn)形式 68
2.5.1　實(shí)現(xiàn)提交功能的按鈕 68
2.5.2　實(shí)現(xiàn)鏈接的圖片按鈕 68
【自測6】設(shè)計(jì)網(wǎng)頁中的下載按鈕 69
【自測7】設(shè)計(jì)質(zhì)感播放按鈕 74
2.6　網(wǎng)站LOGO的表現(xiàn)形式 80
2.7　網(wǎng)站LOGO的特點(diǎn)和設(shè)計(jì)規(guī)范 82
【自測8】設(shè)計(jì)影視網(wǎng)站LOGO 84
【自測9】設(shè)計(jì)娛樂網(wǎng)站LOGO 90
2.8　專家支招 99
2.8.1　圖形元素的作用 99
2.8.2　網(wǎng)頁中常用的圖形格式 99
2.9　本章小結(jié) 100
CHAPTER?。?br /> 網(wǎng)站導(dǎo)航設(shè)計(jì) 101
3.1　網(wǎng)站導(dǎo)航概述 102
3.2　網(wǎng)站導(dǎo)航的表現(xiàn)形式 103
【自測1】設(shè)計(jì)游戲網(wǎng)站導(dǎo)航 104
【自測2】設(shè)計(jì)質(zhì)感企業(yè)網(wǎng)站導(dǎo)航 110
3.3　導(dǎo)航菜單在網(wǎng)頁中的布局 117
【自測3】設(shè)計(jì)下拉網(wǎng)站導(dǎo)航 121
【自測4】設(shè)計(jì)垂直網(wǎng)站導(dǎo)航 127
3.4　網(wǎng)站導(dǎo)航的視覺風(fēng)格 136
【自測5】設(shè)計(jì)圖標(biāo)網(wǎng)站導(dǎo)航 139
3.5　專家支招 146
3.6　本章小結(jié) 146
CHAPTER?。?br /> 網(wǎng)頁文字與廣告設(shè)計(jì) 147
4.1　文字在網(wǎng)頁界面中的作用 148
4.2　網(wǎng)頁界面中文字設(shè)計(jì)要求 148
【自測1】設(shè)計(jì)網(wǎng)頁中的變形文字 150
4.3　網(wǎng)頁界面中文字的設(shè)計(jì)原則 156
4.3.1　可讀性 156
4.3.2　藝術(shù)化 157
【自測2】設(shè)計(jì)網(wǎng)頁主題特效文字 159
4.4　網(wǎng)頁界面文字的排版設(shè)計(jì) 167
4.4.1　對比 167
4.4.2　統(tǒng)一與協(xié)調(diào) 169
4.4.3　平衡 169
4.4.4　節(jié)奏與韻律 170
4.4.5　視覺誘導(dǎo) 170
【自測3】設(shè)計(jì)3D廣告文字 171
4.5　網(wǎng)站廣告的特點(diǎn) 179
【自測4】設(shè)計(jì)網(wǎng)站產(chǎn)品宣傳廣告 180
4.6　網(wǎng)絡(luò)廣告的常見類型 186
【自測5】設(shè)計(jì)網(wǎng)站促銷活動廣告 188
【自測6】設(shè)計(jì)產(chǎn)品廣告頁面 197
4.7　專家支招 203
4.8　本章小結(jié) 204
CHAPTER?。?br /> 網(wǎng)頁布局與版式設(shè)計(jì) 205
5.1　了解網(wǎng)頁布局 206
5.1.1　網(wǎng)頁布局的目的 206
5.1.2　網(wǎng)頁布局的操作順序 206
5.2　常見的網(wǎng)頁布局方式 207
【自測1】設(shè)計(jì)手機(jī)宣傳網(wǎng)頁 210
5.3　網(wǎng)頁布局方法 220
【自測2】設(shè)計(jì)咖啡館網(wǎng)頁界面 222
5.4　網(wǎng)頁形式的藝術(shù)表現(xiàn) 230
5.4.1　分割構(gòu)成 230
5.4.2　對稱構(gòu)成 231
5.4.3　平衡構(gòu)成 231
【自測3】設(shè)計(jì)**促銷網(wǎng)頁 232
5.5　網(wǎng)頁界面設(shè)計(jì)風(fēng)格 242
5.5.1　大眾化設(shè)計(jì)風(fēng)格 242
5.5.2　個(gè)性化設(shè)計(jì)風(fēng)格 243
5.6　專家支招 251
5.6.1　網(wǎng)頁界面分割方向的布局方式 251
5.6.2　網(wǎng)頁界面布局的連貫性和多樣性 251
5.7　本章小結(jié) 252
CHAPTER?。?br /> 網(wǎng)頁UI配色 253
6.1　色彩在網(wǎng)頁UI設(shè)計(jì)中的作用 254
6.2　理解色彩 255
6.2.1　色彩屬性 256
6.2.2　基礎(chǔ)配色 257
【自測1】設(shè)計(jì)數(shù)碼產(chǎn)品網(wǎng)站頁面 259
6.3　色彩的搭配 266
6.3.1　網(wǎng)頁UI配色基礎(chǔ) 266
6.3.2　網(wǎng)頁UI配色原則 268
【自測2】設(shè)計(jì)房地產(chǎn)網(wǎng)站頁面 269
6.4　網(wǎng)頁UI配色的方法 278
6.5　網(wǎng)頁中的文本配色 280
【自測3】設(shè)計(jì)珠寶網(wǎng)站頁面 282
6.6　網(wǎng)頁元素色彩搭配 290
【自測4】設(shè)計(jì)手機(jī)網(wǎng)站頁面 292
6.7　影響網(wǎng)頁配色的因素 301
6.7.1　根據(jù)行業(yè)特征選擇網(wǎng)頁配色 301
6.7.2　根據(jù)色彩聯(lián)想選擇網(wǎng)站配色 303
6.7.3　根據(jù)產(chǎn)品銷售周期選擇網(wǎng)頁配色 304
6.8　專家支招 306
6.9　本章小結(jié) 306
CHAPTER　7
兒童類網(wǎng)頁UI設(shè)計(jì) 307
7.1　了解兒童類網(wǎng)站 308
7.1.1　兒童網(wǎng)站的分類 308
7.1.2　兒童網(wǎng)站頁面的設(shè)計(jì)原則 309
7.2　設(shè)計(jì)兒童網(wǎng)站頁面 309
7.2.1　設(shè)計(jì)分析 309
7.2.2　制作兒童網(wǎng)站首頁 310
【自測1】設(shè)計(jì)兒童網(wǎng)站首頁 310
7.2.3　制作兒童網(wǎng)站二級頁面 323
7.3　本章小結(jié) 327
CHAPTER　8
企業(yè)類網(wǎng)頁UI設(shè)計(jì) 329
8.1　了解企業(yè)類網(wǎng)站 330
8.1.1　企業(yè)網(wǎng)站的分類 330
8.1.2　企業(yè)網(wǎng)站頁面的表現(xiàn)形式 331
8.1.3　企業(yè)網(wǎng)站頁面的設(shè)計(jì)原則 331
8.2　設(shè)計(jì)企業(yè)網(wǎng)站頁面 332
8.2.1　設(shè)計(jì)分析 332
8.2.2　制作企業(yè)網(wǎng)站首頁 333
【自測1】設(shè)計(jì)企業(yè)網(wǎng)站首頁 333
8.2.3　制作企業(yè)網(wǎng)站二級頁 343
8.3　本章小結(jié) 347
CHAPTER　9
游戲網(wǎng)類網(wǎng)頁UI設(shè)計(jì) 349
9.1　了解游戲網(wǎng)站設(shè)計(jì) 350
9.1.1　游戲網(wǎng)站的分類 350
9.1.2　游戲網(wǎng)站頁面的表現(xiàn)形式 351
9.1.3　游戲網(wǎng)站頁面的設(shè)計(jì)原則 351
9.2　設(shè)計(jì)游戲網(wǎng)站頁面 352
9.2.1　設(shè)計(jì)分析 352
【自測1】設(shè)計(jì)游戲網(wǎng)站頁面 352
9.3　本章小結(jié) 365