本書全面解析了網(wǎng)站頁(yè)面布局與配色設(shè)計(jì)的相關(guān)知識(shí)，完全拋開(kāi)了網(wǎng)頁(yè)設(shè)計(jì)必須遵循的限制條件及有關(guān)設(shè)計(jì)軟件的內(nèi)容，而是運(yùn)用可以激發(fā)創(chuàng)意、擴(kuò)展設(shè)計(jì)思路的方法對(duì)網(wǎng)站頁(yè)面布局與配色設(shè)計(jì)進(jìn)行講解，并對(duì)具體的案例進(jìn)行分析。全書共分為9章，涵蓋了網(wǎng)站設(shè)計(jì)的方方面面。

1. 20大網(wǎng)站設(shè)計(jì)案例，配色設(shè)計(jì)從入門到精通。 2. 視頻講解，輕松易學(xué)。 3. 從圖形與文字排版到頁(yè)面布局與視覺(jué)風(fēng)格，從配色原理到配色技巧與方法。

本書作者編寫過(guò)多本設(shè)計(jì)類、前端開(kāi)發(fā)類暢銷圖書，包括《7天精通Photoshop CS6 UI交互設(shè)計(jì)》、《網(wǎng)站用戶體驗(yàn)設(shè)計(jì)全程揭秘》、《中文版Photoshop CS6完全自學(xué)一本通》等，重印多次，深受讀者好評(píng)。

第 1章　網(wǎng)站設(shè)計(jì)基礎(chǔ)

1.1　了解網(wǎng)站設(shè)計(jì)　2

1.1.1　什么是網(wǎng)站設(shè)計(jì)　2

1.1.2　網(wǎng)站設(shè)計(jì)的特點(diǎn)　2

1.2　網(wǎng)站設(shè)計(jì)構(gòu)成元素　6

1.2.1　文字　6

1.2.2　圖形符號(hào)　6

1.2.3　圖像　7

1.2.4　多媒體　7

1.2.5　色彩　7

1.3　網(wǎng)站設(shè)計(jì)原則　8

1.3.1　以用戶為中心　8

1.3.2　主題明確　9

1.3.3　視覺(jué)美觀　11

1.3.4　內(nèi)容與形式統(tǒng)一　11

1.3.5　有機(jī)的整體　12

1.4　色彩在網(wǎng)站設(shè)計(jì)中的作用　13

1.4.1　突出網(wǎng)頁(yè)主題　13

1.4.2　劃分視覺(jué)區(qū)域　14

1.4.3　吸引瀏覽者的目光　14

1.4.4　增強(qiáng)網(wǎng)站頁(yè)面的藝術(shù)性　14

1.5　如何設(shè)計(jì)出好的網(wǎng)站　15

1.5.1　不要主動(dòng)降低自己的眼光　15

1.5.2　多嘗試新技術(shù)、新方法　15

1.6　如何提升網(wǎng)站的用戶體驗(yàn)　16

1.6.1　用戶體驗(yàn)包含的內(nèi)容　16

1.6.2　用戶體驗(yàn)對(duì)于網(wǎng)站的重要性　18

1.6.3　網(wǎng)站如何尋求突破　19

1.6.4　提升網(wǎng)站用戶體驗(yàn)　20

第　2章 網(wǎng)站頁(yè)面規(guī)劃與元素設(shè)計(jì)

2.1　網(wǎng)站欄目結(jié)構(gòu)與頁(yè)面策劃　22

2.1.1　網(wǎng)站欄目結(jié)構(gòu)　22

2.1.2　網(wǎng)站欄目規(guī)劃　24

2.1.3　網(wǎng)站頁(yè)面策劃　24

2.2　網(wǎng)站 Logo設(shè)計(jì)　25

2.2.1　網(wǎng)站 Logo的特點(diǎn)　25

2.2.2　網(wǎng)站 Logo的設(shè)計(jì)規(guī)范　26

2.2.3　網(wǎng)站 Logo的表現(xiàn)形式　28

2.2.4　實(shí)戰(zhàn)分析：設(shè)計(jì)影視 網(wǎng)站 Logo　29

2.3　網(wǎng)站圖標(biāo)設(shè)計(jì)　31

2.3.1　了解網(wǎng)站圖標(biāo)　31

2.3.2　網(wǎng)站圖標(biāo)設(shè)計(jì)原則　31

2.3.3　網(wǎng)站圖標(biāo)應(yīng)用　33

2.3.4　實(shí)戰(zhàn)分析：設(shè)計(jì)簡(jiǎn)約實(shí)用的 網(wǎng)站圖標(biāo)　34

2.4　網(wǎng)站按鈕設(shè)計(jì)　36

2.4.1　網(wǎng)站按鈕的功能　36

2.4.2　如何設(shè)計(jì)出色的網(wǎng)站按鈕　38

2.4.3　實(shí)戰(zhàn)分析：設(shè)計(jì)游戲 網(wǎng)站按鈕　42

2.5　網(wǎng)站導(dǎo)航設(shè)計(jì)　43

2.5.1　了解網(wǎng)站導(dǎo)航　43

2.5.2　導(dǎo)航在網(wǎng)站頁(yè)面中的布局位置　45

2.5.3　網(wǎng)站導(dǎo)航設(shè)計(jì)的基本原則　49

2.5.4　實(shí)戰(zhàn)分析：設(shè)計(jì)汽車網(wǎng)站 導(dǎo)航菜單　50

2.6　網(wǎng)站廣告設(shè)計(jì)　53

2.6.1　網(wǎng)站廣告的常見(jiàn)類型　53

2.6.2　如何設(shè)計(jì)出色的網(wǎng)站廣告　55

2.6.3　實(shí)戰(zhàn)分析：設(shè)計(jì)家電網(wǎng)站 宣傳廣告　56

第3　章 網(wǎng)站中的圖形與文字排版設(shè)計(jì)

3.1　網(wǎng)站頁(yè)面中的文字　59

3.1.1　關(guān)于字體　59

3.1.2　網(wǎng)頁(yè)中常用的中文字體　59

3.1.3　字體大小　60

3.1.4　網(wǎng)頁(yè)文字使用技巧　63

3.2　網(wǎng)頁(yè)文字的排版　65

3.2.1　文字排版的易讀性規(guī)則　65

3.2.2　文字排版設(shè)計(jì)常用手法　67

3.2.3　實(shí)戰(zhàn)分析：設(shè)計(jì)手機(jī)宣傳網(wǎng)站頁(yè)面　70

3.3　圖形在網(wǎng)站設(shè)計(jì)中的作用　73

3.4　網(wǎng)站圖形設(shè)計(jì)類型　75

3.4.1　插圖　75

3.4.2　圖形符號(hào)　75

3.4.3　照片　76

3.4.4　頁(yè)面分割　77

3.4.5　立體圖形　77

3.5　網(wǎng)站圖片的排列布局形式　78

3.5.1　傳統(tǒng)矩陣展示　78

3.5.2　大小不一的矩陣展示　79

3.5.3　瀑布流展示　79

3.5.4　下一張圖片預(yù)覽　79

3.5.5　實(shí)戰(zhàn)分析：設(shè)計(jì)產(chǎn)品促銷活動(dòng)頁(yè)面　80

第4　章 網(wǎng)站頁(yè)面布局與視覺(jué)風(fēng)格

4.1　了解網(wǎng)站頁(yè)面布局　85

4.1.1　網(wǎng)站頁(yè)面布局的目的　85

4.1.2　網(wǎng)站頁(yè)面布局的操作順序　86

4.2　網(wǎng)頁(yè)布局的基本方法　86

4.2.1　網(wǎng)頁(yè)布局的設(shè)計(jì)　87

4.2.2　網(wǎng)頁(yè)布局的構(gòu)成原則　87

4.2.3　實(shí)戰(zhàn)分析：設(shè)計(jì)手機(jī)宣傳網(wǎng)站頁(yè)面　88

4.3　根據(jù)整體內(nèi)容位置決定的網(wǎng)頁(yè)視覺(jué)布局　91

4.3.1　滿屏式頁(yè)面布局　91

4.3.2　兩欄式頁(yè)面布局　92

4.3.3　三欄式頁(yè)面布局　95

4.3.4　水平和垂直居中的頁(yè)面布局　96

4.4　頁(yè)面分割方向的布局方式　97

4.4.1　縱向分割　97

4.4.2　橫向分割　98

4.4.3　縱向與橫向復(fù)合型　98

4.4.4　運(yùn)用固定區(qū)域的設(shè)計(jì)　99

4.4.5　實(shí)戰(zhàn)分析：設(shè)計(jì)類網(wǎng)站頁(yè)面　100

4.5　初始頁(yè)面的網(wǎng)頁(yè)布局類型　102

4.6　網(wǎng)頁(yè)布局的要點(diǎn)　104

第5　章 網(wǎng)站頁(yè)面視覺(jué)布局形態(tài)

5.1　網(wǎng)頁(yè)功能與網(wǎng)頁(yè)形態(tài)哪個(gè)更重要　107

5.2　網(wǎng)頁(yè)布局形態(tài)的含義及情感　108

5.2.1　點(diǎn)　108

5.2.2　圓　109

5.2.3　三角形　110

5.2.4　矩形　111

5.2.5　菱形　112

5.2.6　直線　113

5.2.7　斜線　114

5.2.8　曲線　115

5.2.9　自由曲線　116

5.2.10　實(shí)戰(zhàn)分析：設(shè)計(jì)產(chǎn)品促銷頁(yè)面　117

5.3　大眾化網(wǎng)頁(yè)布局形態(tài)　120

5.4　個(gè)性化網(wǎng)頁(yè)布局形態(tài)　122

5.5　常見(jiàn)網(wǎng)頁(yè)視覺(jué)風(fēng)格解析　123

5.5.1　簡(jiǎn)潔風(fēng)格　123

5.5.2　極簡(jiǎn)風(fēng)格　124

5.5.3　扁平化風(fēng)格　124

5.5.4　插畫風(fēng)格　125

5.5.5　懷舊風(fēng)格　126

5.5.6　照片風(fēng)格　127

5.5.7　立體風(fēng)格　128

5.5.8　大字體風(fēng)格　129

5.5.9　實(shí)戰(zhàn)分析：設(shè)計(jì)企業(yè)網(wǎng)站頁(yè)面　130

第6　章 網(wǎng)頁(yè)配色基礎(chǔ)

6.1　色彩基礎(chǔ)　134

6.1.1　色彩的產(chǎn)生　134

6.1.2　光源色與物體色　135

6.2　RGB 顏色與CMYK 顏色的區(qū)別　135

6.2.1　RGB 顏色　136

6.2.2　CMYK 顏色　137

6.3　色彩的屬性　137

6.3.1　色相　137

6.3.2　明度　138

6.3.3　飽和度　138

6.3.4　色調(diào)　139

6.3.5　無(wú)彩色與有彩色　139

6.4　網(wǎng)頁(yè)配色的聯(lián)想作用　140

6.4.1　色彩聯(lián)想和心理效果　140

6.4.2　紅色　141

6.4.3　粉色　141

6.4.4　橙色　141

6.4.5　黃色　142

6.4.6　棕色　142

6.4.7　綠色　142

6.4.8　藍(lán)色　143

6.4.9　紫色　143

6.4.10　黑色　144

6.4.11　白色　144

6.4.12　灰色　144

6.4.13　實(shí)戰(zhàn)分析：設(shè)計(jì)珠寶首飾網(wǎng)站頁(yè)面　145

6.5　網(wǎng)頁(yè)配色常見(jiàn)問(wèn)題　147

6.5.1　如何培養(yǎng)色彩的敏感度　147

6.5.2　通用配色理論是否適用　148

6.5.3　配色時(shí)應(yīng)該選擇雙色還是多色組合　148

6.5.4　盡可能使用兩至三種顏色進(jìn)行搭配　149

6.5.5　如何快速實(shí)現(xiàn)完美的配色　149

6.5.6　實(shí)戰(zhàn)分析：設(shè)計(jì)汽車宣傳網(wǎng)站頁(yè)面　150

第7　章 網(wǎng)頁(yè)元素的基本配色

7.1　網(wǎng)頁(yè)配色的基本方法　154

7.1.1　主題色　154

7.1.2　背景色　155

7.1.3　輔助色　156

7.1.4　點(diǎn)綴色　157

7.2　網(wǎng)頁(yè)文本配色　158

7.2.1　網(wǎng)頁(yè)與文本的配色關(guān)系　158

7.2.2　良好的網(wǎng)頁(yè)文本配色　159

7.3　網(wǎng)頁(yè)元素色彩搭配160

7.3.1　Logo 與網(wǎng)頁(yè)廣告　160

7.3.2　導(dǎo)航菜單　161

7.3.3　背景與文字　161

7.3.4　鏈接文字　162

7.3.5　實(shí)戰(zhàn)分析：設(shè)計(jì)咖啡館宣傳網(wǎng)站頁(yè)面　162

7.4　根據(jù)受眾群體選擇網(wǎng)頁(yè)配色　165

7.4.1　不同性別的色彩偏好　165

7.4.2　不同年齡的色彩偏好　166

7.5　根據(jù)商品銷售階段選擇網(wǎng)頁(yè)配色　168

7.5.1　新產(chǎn)品上市期的網(wǎng)頁(yè)配色　168

7.5.2　產(chǎn)品拓展期的網(wǎng)頁(yè)配色　168

7.5.3　產(chǎn)品穩(wěn)定銷售期的網(wǎng)頁(yè)配色　169

7.5.4　產(chǎn)品衰退期的網(wǎng)頁(yè)配色　169

7.5.5　實(shí)戰(zhàn)分析：設(shè)計(jì)酒類產(chǎn)品宣傳網(wǎng)站頁(yè)面　170

7.6　如何打造成功的網(wǎng)頁(yè)配色　172

7.6.1　遵循色彩的基本原理　172

7.6.2　考慮網(wǎng)頁(yè)的特點(diǎn)　173

7.6.3　靈活應(yīng)用配色技巧　174

7.6.4　避免配色混亂　175

7.6.5　實(shí)戰(zhàn)分析：設(shè)計(jì)產(chǎn)品宣傳網(wǎng)站頁(yè)面　176

第8　章 網(wǎng)頁(yè)配色的方法

8.1　基于色相進(jìn)行配色　180

8.1.1　基于色相的配色關(guān)系　180

8.1.2　相反色相、類似色調(diào)配色　181

8.1.3　相反色相、相反色調(diào)配色　181

8.1.4　漸變配色　182

8.1.5　無(wú)彩色和彩色　183

8.2　基于色調(diào)進(jìn)行配色　183

8.2.1　基于色調(diào)的配色關(guān)系　184

8.2.2　同一色相或類似色相、類似色調(diào)配色　184

8.2.3　同一色相或類似色相、相反色調(diào)配色　185

8.3　色彩感覺(jué)在網(wǎng)頁(yè)配色中的應(yīng)用　186

8.3.1　冷暖感　186

8.3.2　輕重感　188

8.3.3　軟硬感　189

8.3.4　前后感　189

8.3.5　大小感　190

8.3.6　華麗感與樸實(shí)感　191

8.3.7　寧?kù)o感與興奮感　192

8.3.8　活力感與莊重感　193

8.3.9　實(shí)戰(zhàn)分析：設(shè)計(jì)計(jì)算機(jī)產(chǎn)品促銷廣告頁(yè)面　193

8.4　色彩對(duì)比的配色　196

8.4.1　冷暖對(duì)比　196

8.4.2　面積對(duì)比　198

8.4.3　色相對(duì)比　200

8.4.4　同時(shí)對(duì)比　204

8.4.5　連續(xù)對(duì)比　204

8.4.6　實(shí)戰(zhàn)分析：設(shè)計(jì)運(yùn)動(dòng)鞋宣傳網(wǎng)站頁(yè)面　205

第9　章 網(wǎng)頁(yè)配色的技巧

9.1　突出主題的配色技巧　209

9.1.1　明確主題焦點(diǎn)　209

9.1.2　提高飽和度　209

9.1.3　增大明度差　210

9.1.4　增強(qiáng)色相　211

9.1.5　增強(qiáng)點(diǎn)綴色　212

9.1.6　抑制輔助色或背景　213

9.2　整體融合的配色技巧　214

9.2.1　接近色相　215

9.2.2　統(tǒng)一明度　216

9.2.3　接近色調(diào)　216

9.2.4　添加類似色或同類色　217

9.2.5　網(wǎng)頁(yè)產(chǎn)生穩(wěn)定感　217

9.2.6　實(shí)戰(zhàn)分析：設(shè)計(jì)房地產(chǎn)宣傳網(wǎng)站頁(yè)面　218

9.3　網(wǎng)頁(yè)配色印象　221

9.3.1　女性化的網(wǎng)站配色　221

9.3.2　男性化的網(wǎng)站配色　222

9.3.3　穩(wěn)定安靜的網(wǎng)站配色　223

9.3.4　興奮激昂的網(wǎng)站配色　224

9.3.5　輕快律動(dòng)的網(wǎng)站配色　225

9.3.6　清爽和風(fēng)的網(wǎng)站配色　226

9.3.7　浪漫甜美的網(wǎng)站配色　227

9.3.8　傳統(tǒng)穩(wěn)重的網(wǎng)站配色　229

9.3.9　雍容華貴的網(wǎng)站配色　230

9.3.10　實(shí)戰(zhàn)分析：設(shè)計(jì)清新自然的環(huán)保網(wǎng)站頁(yè)面　231

9.4　使用配色軟件進(jìn)行配色　233

9.4.1　ColorKey XP 軟件　233

9.4.2　Color Scheme Designer　235

9.4.3　Check My Colours　236

9.4.4　ColorJack　236