網(wǎng)頁設計配色從入門到精通

第1章　色彩達人必學知識?。?

1.1　認識色彩?。?

1.1.1　色彩是什么　｜2

1.1.2　色彩能夠做什么?。?

1.1.3　色彩的屬性?。?

1.2　主色、輔助色、點綴色的關系?。?

1.2.1　主色?。?

1.2.2 輔助色?。?

1.2.3 點綴色　｜9

1.2.4 設計師談——畫龍點睛的點綴色?。?

1.2.5　動手練習——視覺中心的主色秘訣?。?0

1.3　色彩的對比?。?1

1.3.1 明度對比　｜12

1.3.2　純度對比?。?2

1.3.3　色相對比?。?3

1.3.4　面積對比?。?5

1.3.5　冷暖對比?。?6

第2章　網(wǎng)頁設計的基礎知識　｜17

2.1　什么是網(wǎng)頁?。?8

2.2　網(wǎng)頁的構成?。?8

2.2.1　網(wǎng)頁簡介?。?8

2.2.2　網(wǎng)頁標題　｜19

2.2.3　網(wǎng)站的LOGO?。?0

2.2.4　網(wǎng)頁頁眉?。?0

2.2.5　網(wǎng)頁頁腳?。?1

2.2.6　網(wǎng)頁導航　｜21

2.2.7　網(wǎng)頁的主體內(nèi)容?。?1

2.3　網(wǎng)頁的尺寸?。?2

2.4　網(wǎng)頁的色彩 ?。?3

2.4.1　RGB色彩模式?。?3

2.4.2　HTML語言對色彩的描述?。?4

2.4.3　網(wǎng)絡安全色?。?5

第3章　了解基礎色　｜27

3.1　紅?。?9

3.1.1　淺談紅色　｜29

3.1.2　應用實例?。?0

3.1.3　常見色分析?。?0

3.1.4　猜你喜歡　｜31

3.2　橙?。?2

3.2.1　淺談橙色　｜32

3.2.2　應用實例?。?3

3.2.3　常見色分析　｜33

3.2.4　猜你喜歡?。?4

3.3　黃?。?5

3.3.1　淺談黃色?。?5

3.3.2　應用實例?。?6

3.3.3　常見色分析?。?6

3.3.4　猜你喜歡　｜37

3.4　綠?。?8

3.4.1　淺談綠色?。?8

3.4.2　應用實例?。?9

3.4.3　常見色分析　｜39

3.4.4　猜你喜歡?。?0

3.5　青　｜41

3.5.1　淺談青色?。?1

3.5.2　應用實例　｜42

3.5.3　常見色分析?。?2

3.5.4　猜你喜歡　｜43

3.6　藍?。?4

3.6.1　淺談藍色?。?4

3.6.2　應用實例?。?5

3.6.3　常見色分析?。?5

3.6.4　猜你喜歡?。?6

3.7　紫?。?7

3.7.1　淺談紫色?。?7

3.7.2　應用實例?。?8

3.7.3　常見色分析?。?8

3.7.4　猜你喜歡?。?9

3.8　黑?。?0

3.8.1　淺談黑色?。?0

3.8.2　應用實例?。?0

3.8.3　猜你喜歡?。?1

3.9　白?。?2

3.9.1　淺談白色　｜52

3.9.2　應用實例?。?2

3.9.3　猜你喜歡?。?3

3.10　灰?。?4

3.10.1　淺談灰色?。?4

3.10.2　應用實例?。?4

3.10.3　猜你喜歡?。?5

第4章　網(wǎng)頁布局技巧與色彩?。?7

4.1　網(wǎng)頁布局的基礎知識?。?8

4.2　黃金分割式布局與左右對齊式布局?。?9

4.2.1　黃金分割式布局?。?0

4.2.2　左右對齊式布局　｜60

4.2.3　動手練習——修改背景顏色?。?1

4.2.4　設計師談——黑色配色方案?。?1

4.2.5　配色實戰(zhàn)　｜61

4.2.6　常見色彩搭配?。?2

4.2.7　猜你喜歡?。?2

4.3　全景式布局與衛(wèi)星式布局?。?3

4.3.1　全景式布局?。?4

4.3.2　衛(wèi)星式布局?。?4

4.3.3　動手練習——使用點綴色?。?5

4.3.4　設計師談——按鈕的設計?。?5

4.3.5　配色實戰(zhàn)?。?5

4.3.6　常見色彩搭配?。?6

4.3.7　猜你喜歡　｜66

4.4　照片組合式布局與包圍式布局?。?7

4.4.1　 照片組合式布局?。?8

4.4.2　包圍式布局?。?8

4.4.3　動手練習——LOGO的設計　｜69

4.4.4　設計師談——扁平化?。?9

4.4.5　配色實戰(zhàn)　｜69

4.4.6　常見色彩搭配?。?0

4.4.7　猜你喜歡?。?0

4.5　散開式布局與對稱式布局?。?1

4.5.1　敞開式布局?。?2

4.5.2　對稱式布局?。?2

4.5.3　動手練習——提高顏色的純度?。?3

4.5.4　設計師談——留白?。?3

4.5.5　配色實戰(zhàn)　｜73

4.5.6　常見色彩搭配?。?4

4.5.7　猜你喜歡?。?4

第5章　網(wǎng)頁色彩的視覺印象?。?5

5.1　女性?。?6

5.1.1　甜美?。?6

5.1.2　時尚　｜76

5.2　男性?。?7

5.2.1　理智　｜77

5.2.2　堅韌?。?7

5.3　兒童?。?8

5.3.1　可愛?。?8

5.3.2　活力?。?8

5.4　老人?。?9

5.4.1　溫暖?。?9

5.4.2　踏實?。?9

5.5　華麗　｜80

5.5.1　優(yōu)雅?。?0

5.5.2　華美?。?0

5.6　質(zhì)樸?。?1

5.6.1　淳樸?。?1

5.6.2　干凈?。?1

5.7　活潑?。?2

5.7.1　天真?。?2

5.7.2　活力?。?2

5.8　莊重?。?3

5.8.1　莊嚴　｜83

5.8.2　穩(wěn)重?。?3

5.9　興奮?。?4

5.9.1　亢奮?。?4

5.9.2　刺激?。?4

5.10　沉靜?。?5

5.10.1　安靜?。?5

5.10.2　沉寂　｜85

5.11　溫暖?。?6

5.11.1　溫馨?。?6

5.11.2　和煦　｜86

5.12　涼爽?。?7

5.12.1　勁爽?。?7

5.12.2　冰涼?。?7

5.13　專業(yè)?。?8

5.13.1　品質(zhì)　｜88

5.13.2　專注?。?8

5.14　時尚?。?9

5.14.1　新潮　｜89

5.14.2　前衛(wèi)?。?9

5.15　雅致?。?0

5.15.1　精致?。?0

5.15.2　優(yōu)雅?。?0

5.16　環(huán)保?。?1

5.16.1　放心?。?1

5.16.2　健康　｜91

5.17　安全?。?2

5.17.1　安穩(wěn)　｜92

5.17.2　安然?。?2

5.18　信譽?。?3

5.18.1　大氣?。?3

5.18.2　信任?。?3

5.19　榮耀?。?4

5.19.1　華麗　｜94

5.19.2　光輝?。?4

5.20　美味　｜95

5.20.1　香甜?。?5

5.20.2　濃香　｜95

5.21　神秘?。?6

5.21.1　奇幻　｜96

5.21.2　深邃?。?6

5.22　夢幻　｜97

5.22.1　絢麗?。?7

5.22.2　迷幻?。?7

5.23　自然?。?8

5.23.1　綠色?。?8

5.23.2　清新　｜98

5.24　嚴肅?。?9

5.24.1　典范　｜99

5.24.2　規(guī)范?。?9

第6章　不同網(wǎng)站的網(wǎng)頁色彩搭配?。?01

6.1　 門戶網(wǎng)頁　｜102

6.1.1　什么是門戶網(wǎng)站?。?02

6.1.2　案例分析?。?03

6.1.3　動手練習——降低文字的飽和度?。?04

6.1.4　設計師談——別忽視網(wǎng)頁中的搜索框?。?04

6.1.5　配色實戰(zhàn)——扁平化網(wǎng)頁的配色方案　｜104

6.1.6　常見色彩搭配?。?04

6.1.7　猜你喜歡?。?05

6.2　企業(yè)網(wǎng)站?。?06

6.2.1　什么是企業(yè)網(wǎng)站　｜106

6.2.2　案例分析?。?07

6.2.3　動手練習——增加頁面空間感，集中用戶視線?。?08

6.2.4　設計師談——企業(yè)網(wǎng)站的形象塑造?。?08

6.2.5　配色實戰(zhàn)——網(wǎng)頁中點綴色配色方案?。?09

6.2.6　常見色彩搭配?。?09

6.2.7　猜你喜歡?。?09

6.3　產(chǎn)品展示 ?。?10

6.3.1　什么是產(chǎn)品展示網(wǎng)頁?。?10

6.3.2　案例分析?。?11

6.3.3　動手練習——減少畫面顏色?。?12

6.3.4　設計師談——各國家的顏色內(nèi)涵?。?12

6.3.5　配色實戰(zhàn)——網(wǎng)頁配色方案　｜113

6.3.6　常見色彩搭配?。?13

6.3.7　猜你喜歡　｜113

6.4　購物網(wǎng)站 ?。?14

6.4.1　什么是購物網(wǎng)站?。?14

6.4.2　案例分析　｜115

6.4.3　動手練習——為留白空間添加裝飾?。?16

6.4.4　設計師談——色彩激發(fā)你的購買欲　｜116

6.4.5　配色實戰(zhàn)——網(wǎng)頁色彩搭配?。?17

6.4.6　常見色彩搭配　｜117

6.4.7　猜你喜歡?。?17

6.5　社交網(wǎng)頁?。?18

6.5.1　什么是社交網(wǎng)站?。?18

6.5.2　案例分析　｜119

6.5.3　動手練習——網(wǎng)站色調(diào)應該與產(chǎn)品相呼應?。?20

6.5.4　設計師談——網(wǎng)站設計中字體粗細的選擇　｜120

6.5.5　配色實戰(zhàn)——不同配色方案的視覺效果?。?21

6.5.6　常見色彩搭配?。?21

6.5.7　猜你喜歡　｜121

6.6　個人網(wǎng)頁 ?。?22

6.6.1　什么是個人網(wǎng)頁?。?22

6.6.2　案例分析?。?23

6.6.3　動手練習——為畫面添加合適素材?。?24

6.6.4　設計師談——網(wǎng)頁設計中的三個小細節(jié)?。?24

6.6.5　配色實戰(zhàn)——舞蹈網(wǎng)站的色彩搭配　｜124

6.6.6　常見色彩搭配?。?25

6.6.7　猜你喜歡?。?25

6.7　社區(qū)論壇　｜126

6.7.1　什么是社區(qū)論壇?。?26

6.7.2　案例分析　｜127

6.7.3　動手練習——別把選項藏起來?。?28

6.7.4　設計師談——單色網(wǎng)頁設計?。?28

6.7.5　配色實戰(zhàn)——網(wǎng)頁色彩搭配?。?28

6.7.6　常見色彩搭配?。?29

6.7.7　猜你喜歡?。?29

6.8　活動網(wǎng)站?。?30

6.8.1　什么是活動網(wǎng)站?。?30

6.8.2　案例分析　｜131

6.8.3　動手練習——盡量減少表單問題?。?32

6.8.4　設計師談——選用兩種色彩進行色彩搭配?。?32

6.8.5　配色實戰(zhàn)——同一網(wǎng)站的配色方案　｜132

6.8.6　常見色彩搭配?。?33

6.8.7　猜你喜歡?。?33

第7章　不同行業(yè)的網(wǎng)頁色彩搭配?。?35

7.1　車品類?。?36

7.1.1　現(xiàn)代風格車品網(wǎng)頁　｜136

7.1.2　粗獷風格車品網(wǎng)頁?。?36

7.1.3　動手練習——打造豪華質(zhì)感的車品網(wǎng)頁?。?37

7.1.4　設計師談——為網(wǎng)頁制作一個漂亮的等待頁面?。?37

7.1.5　常見色彩搭配　｜137

7.2　服飾類?。?38

7.2.1　品牌時裝網(wǎng)頁?。?38

7.2.2　年輕服裝網(wǎng)頁?。?38

7.2.3　動手練習——將商品突顯出來?。?39

7.2.4　設計師談——使用菱形進行頁面的分割?。?39

7.2.5　常見色彩搭配?。?39

7.3　珠寶類?。?40

7.3.1　珠寶類購物網(wǎng)頁?。?40

7.3.2　品牌珠寶網(wǎng)站?。?40

7.3.3　動手練習——淺色與深色背景對珠寶產(chǎn)品的影響　｜141

7.3.4　設計師談——色塊拼貼法?。?41

7.3.5　常見色彩搭配?。?41

7.4　建筑裝潢?。?42

7.4.1　室內(nèi)設計裝飾公司網(wǎng)頁?。?42

7.4.2　景觀事務所網(wǎng)頁?。?42

7.4.3　動手練習——為導航欄添加圖標增加其識別性?。?43

7.4.4　設計師談——簡潔明快的網(wǎng)頁設計風格　｜143

7.4.5　常見色彩搭配　｜143

7.5　媒體、音樂類?。?44

7.5.1　音樂類網(wǎng)頁　｜144

7.5.2　電視劇網(wǎng)頁?。?44

7.5.3　動手練習——為界面換一個合適的點綴色　｜145

7.5.4　設計師談——利用視差滾動，打造全新感官享受?。?45

7.5.5　常見色彩搭配　｜145

7.6　IT科技?。?46

7.6.1　軟件研發(fā)公司網(wǎng)頁　｜146

7.6.2　電腦制造商網(wǎng)頁?。?46

7.6.3　動手練習——衛(wèi)星式布局方式的妙用?。?47

7.6.4　設計師談——為界面添加一個合適的字體　｜147

7.6.5　常見色彩搭配?。?47

7.7　教育類　｜148

7.7.1　知名大學網(wǎng)頁?。?48

7.7.2　私立學校網(wǎng)頁　｜148

7.7.3　動手練習——為頁面填寫一個顯眼的輔助色?。?49

7.7.4　設計師談——為網(wǎng)站設計一個漂亮的404界面?。?49

7.7.5　常見色彩搭配?。?49

第8章　不同風格的網(wǎng)頁設計?。?51

8.1　簡約至上主義風格?。?52

8.1.1　簡潔　｜153

8.1.2　整齊?。?53

8.1.3　動手練習——使網(wǎng)頁看起來唯美、整潔?。?54

8.1.4　設計師談——簡約是一種特殊的表達?。?54

8.1.5　常見色彩搭配?。?54

8.2　絢麗的歐美風格　｜155

8.2.1　突出?。?56

8.2.2　細膩　｜156

8.2.3　動手練習——將頁面改為中純度色彩基調(diào)?。?57

8.2.4　設計師談——歐美風網(wǎng)站的色彩搭配?。?57

8.2.5　常見色彩搭配　｜157

8.3　淡雅的韓式風格?。?58

8.3.1　淡雅?。?59

8.3.2　醇厚　｜159

8.3.3　動手練習——使網(wǎng)頁看起來清新淡雅?。?60

8.3.4　設計師談——韓式的淡雅清新?。?60

8.3.5　常見色彩搭配?。?60

8.4　悠遠的日式風格?。?61

8.4.1　細膩　｜162

8.4.2　民族　｜162

8.4.3　動手練習——使網(wǎng)頁看起來更富意境?。?63

8.4.4　設計師談——日式風格?。?63

8.4.5　常見色彩搭配?。?63

8.5　空間感網(wǎng)頁設計　｜164

8.5.1　層次?。?65

8.5.2　立體　｜165

8.5.3　動手練習——使網(wǎng)頁層次更加清晰?。?66

8.5.4　設計師談——“立體感”的產(chǎn)生?。?66

8.5.5　常見色彩搭配　｜166

8.6　扁平化設計 ?。?67

8.6.1　整潔?。?68

8.6.2　簡約?。?68

8.6.3　動手練習——為頁面選擇一個合適的顏色?。?69

8.6.4　設計師談——力求簡約的扁平化設計?。?69

8.6.5　常見色彩搭配?。?69

8.7　趣味的手繪風格 ?。?70

8.7.1　趣味?。?71

8.7.2　鮮活　｜171

8.7.3　動手練習——添加插畫，活躍頁面氣氛　｜172

8.7.4　設計師談——富有親和力的手繪風?。?72

8.7.5　常見色彩搭配?。?72

8.8　抽象的網(wǎng)頁設計 ?。?73

8.8.1　精煉?。?74

8.8.2　情緒?。?74

8.8.3　動手練習——使網(wǎng)頁風格更加簡約?。?75

8.8.4　設計師談——抽象風是情緒的精煉?。?75

8.8.5　常見色彩搭配　｜175

8.9　懷舊的復古風格 ?。?76

8.9.1　回憶　｜177

8.9.2　濃厚?。?77

8.9.3　動手練習——使網(wǎng)頁視覺重點突出　｜178

8.9.4　設計師談——復古風的融情?。?78

8.9.5　常見色彩搭配　｜178

第9章　綜合版式配色?。?79

9.1　兒童主題網(wǎng)頁?。?80

9.1.1　項目分析　｜180

9.1.2　案例分析?。?80

9.1.3　版式分析?。?81

9.1.4　配色方案　｜182

9.1.5　佳作欣賞?。?83

9.2　自然主題網(wǎng)頁?。?84

9.2.1　項目分析　｜184

9.2.2　案例分析?。?84

9.2.3　版式分析　｜185

9.2.4　配色方案?。?86

9.2.5　佳作欣賞?。?87

9.3　科技類網(wǎng)頁　｜188

9.3.1　項目分析?。?88

9.3.2　案例分析　｜188

9.3.3　版式分析?。?89

9.3.4　配色方案?。?90

9.3.5　佳作欣賞?。?91

9.4　商務風格網(wǎng)頁?。?92

9.4.1　項目分析?。?92

9.4.2　案例分析?。?92

9.4.3　版式分析?。?93

9.4.4　配色方案　｜194

9.4.5　佳作欣賞?。?95