網(wǎng)頁(yè)色彩搭配寶典

第1章 網(wǎng)頁(yè)設(shè)計(jì)知識(shí)

1.1 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ). 3

1.1.1 網(wǎng)頁(yè)的相關(guān)概念3

1.1.2 網(wǎng)頁(yè)界面設(shè)計(jì)的特點(diǎn)4

1.2 網(wǎng)頁(yè)設(shè)計(jì)界面介紹 5

1.3 網(wǎng)頁(yè)設(shè)計(jì)主題分析 6

1.3.1 網(wǎng)頁(yè)需求分析7

1.3.2 網(wǎng)頁(yè)建設(shè)策劃7

1.4 網(wǎng)頁(yè)設(shè)計(jì)布局分類 7

1.4.1 骨骼型8

1.4.2 對(duì)稱型9

1.4.3 曲線型10

1.4.4 滿屏型11

1.4.5 傾斜型12

1.4.6 分割型13

1.4.7 自由型14

1.4.8 焦點(diǎn)型14

1.5 網(wǎng)頁(yè)的潮流元素. 15

1.5.1 紋理15

1.5.2 混合字體16

1.5.3 半透明17

1.5.4 矢量插畫18

1.5.5 三維18

1.5.6 邊框19

第2章 色彩基礎(chǔ)知識(shí)

2.1 色彩屬性 23

2.2 色環(huán) 24

2.3 色彩對(duì)比 26

3.1 認(rèn)識(shí)網(wǎng)頁(yè)的基本結(jié)構(gòu) 33

3.1.1 網(wǎng)頁(yè)的規(guī)格34

3.1.2 網(wǎng)頁(yè)的LOGO.35

3.1.3 頂部通欄36

3.1.4 網(wǎng)頁(yè)文本37

3.1.5 圖像的設(shè)計(jì)38

3.1.6 文字的設(shè)計(jì)38

3.1.7 頁(yè)眉和頁(yè)腳39

第3章 網(wǎng)頁(yè)設(shè)計(jì)的制作流程

3.1.8 多媒體40

3.2 網(wǎng)頁(yè)設(shè)計(jì)的基本步驟 41

3.2.1 確定主題42

3.2.2 確定構(gòu)圖43

3.2.3 確定風(fēng)格44

3.2.4 確定色彩搭配45

第4章 網(wǎng)頁(yè)設(shè)計(jì)的原則與配色

4.1 統(tǒng)一原則 48

4.1.1 相似元素的規(guī)律排列50

4.1.2 內(nèi)容與文字要相互統(tǒng)一51

4.2 對(duì)比原則 52

4.2.1 矛盾和沖突54

4.2.2 模塊大小的對(duì)比55

4.3 協(xié)調(diào)原則 56

4.3.1 顏色協(xié)調(diào)58

4.3.2 圖形協(xié)調(diào)59

4.4 突出原則 60

4.4.1 使用顏色的進(jìn)退感突出內(nèi)容62

第4章 網(wǎng)頁(yè)設(shè)計(jì)的原則與配色

4.4.2 使用放大圖形的方法突出主體內(nèi)容63

4.5 個(gè)性原則 64

4.5.1 立體感66

4.5.2 特殊的構(gòu)成方式67

4.6 實(shí)用原則 68

4.6.1 清晰地展現(xiàn)頁(yè)面內(nèi)容70

4.6.2 合理搭配顏色71

4.7 分割原則 72

4.7.1 使用色彩進(jìn)行頁(yè)面分割74

4.7.2 使用模塊進(jìn)行頁(yè)面分割75

5.1 扁平化設(shè)計(jì)風(fēng)格. 78

5.1.1 顏色的高飽和度80

5.1.2 以簡(jiǎn)約為基礎(chǔ)81

5.2 3D 設(shè)計(jì)風(fēng)格. 82

5.2.1 生動(dòng)地展現(xiàn)產(chǎn)品84

5.2.2 點(diǎn)、線、面結(jié)合的3D 效果.85

5.3 極簡(jiǎn)設(shè)計(jì)風(fēng)格. 86

5.3.1 用圖講故事88

5.3.2 形的構(gòu)思89

5.4 全屏設(shè)計(jì)風(fēng)格. 90

5.4.1 合理的文字布局92

5.4.2 使用高清的圖片93

5.5 瀑布流設(shè)計(jì)風(fēng)格. 94

5.5.1 多行多列的布局方法96

第5章 網(wǎng)頁(yè)設(shè)計(jì)的常見風(fēng)格

5.5.2 無限加載的網(wǎng)頁(yè)內(nèi)容97

5.6 標(biāo)準(zhǔn)化設(shè)計(jì)風(fēng)格. 98

5.6.1 完善的布局100

5.6.2 清晰的顯示內(nèi)容101

5.7 個(gè)性化設(shè)計(jì)風(fēng)格. 102

5.7.1 大膽的色彩搭配獨(dú)具個(gè)性104

5.7.2 獨(dú)特的頁(yè)面布局和個(gè)性文字105

5.8 矢量化設(shè)計(jì)風(fēng)格. 106

5.8.1 矢量化更能表現(xiàn)細(xì)節(jié)108

5.8.2 矢量化表現(xiàn)立體感109

5.9 復(fù)古化設(shè)計(jì)風(fēng)格. 110

5.9.1 復(fù)古給人一種特殊的情感112

5.9.2 復(fù)古是一種回憶113

第6章 不同類型的網(wǎng)頁(yè)設(shè)計(jì)

6.1 商業(yè)企業(yè) 116

6.1.1 有正式感的布局模式118

6.1.2 模塊清晰化119

6.2 綜合購(gòu)物 120

6.2.1 回到首頁(yè)功能122

6.2.2 模塊分類明確123

6.3 影視娛樂 124

6.3.1 構(gòu)圖個(gè)性突出重點(diǎn).126

6.3.2 吸引視覺注意力127

6.4 教育文化 128

6.4.1 布局整潔舒適130

6.4.2 使用圖片展示重點(diǎn)內(nèi)容131

6.5 多媒體數(shù)碼. 132

6.5.1 顏色的神秘性表現(xiàn)出產(chǎn)品的特性134

6.5.2 使用立體感全方位地展示135

6.6 產(chǎn)品類網(wǎng)站. 136

6.6.1 圖文并茂的模塊布局138

6.6.2 使用產(chǎn)品本身的特性生動(dòng)表示產(chǎn)品139

6.7 休閑生活類網(wǎng)頁(yè). 140

6.7.1 使用圖片生動(dòng)描寫內(nèi)容142

6.7.2 使用個(gè)性的構(gòu)圖模式143

6.8 個(gè)人主頁(yè) 144

6.8.1 適合自己的風(fēng)格146

6.8.2 側(cè)重表現(xiàn)個(gè)人信息內(nèi)容147

7.1 網(wǎng)頁(yè)色彩的冷與暖 150

7.1.1 冷暖色調(diào)的對(duì)比152

7.1.2 根據(jù)不同產(chǎn)品設(shè)置相應(yīng)的冷暖搭配153

7.2 網(wǎng)頁(yè)色彩的輕與重 154

7.2.1 網(wǎng)頁(yè)色彩的輕顏色表現(xiàn)出的效果156

7.2.2 根據(jù)顏色的重量感制造層次157

7.3 網(wǎng)頁(yè)色彩的柔與硬 158

7.3.1 使用柔性色彩可以使人心情愉悅160

7.3.2 色彩柔與硬的結(jié)合161

7.4 網(wǎng)頁(yè)色彩的前進(jìn)與后退. 162

7.4.1 使用色彩的前進(jìn)與后退突出重點(diǎn)內(nèi)容164

7.4.2 打造空間感165

7.5 網(wǎng)頁(yè)色彩的標(biāo)準(zhǔn)與個(gè)性. 166

7.5.1 使頁(yè)面更具熟悉感168

第7章 網(wǎng)頁(yè)的色彩情緒

7.5.2 使用產(chǎn)品的顏色進(jìn)行個(gè)性化表達(dá)169

7.6 網(wǎng)頁(yè)色彩的平淡與刺激. 170

7.6.1 緩和視覺沖擊172

7.6.2 面積的大小影響視覺的感受173

7.7 網(wǎng)頁(yè)色彩的樸實(shí)與華貴. 174

7.7.1 點(diǎn)綴色展現(xiàn)頁(yè)面的華貴感176

7.7.2 純度低的顏色展現(xiàn)頁(yè)面的樸實(shí)感177

7.8 網(wǎng)頁(yè)色彩的古樸與青春. 178

7.8.1 中純度、中明度的搭配給人一種古樸

的感覺180

7.8.2 鮮艷的色彩搭配給人一種青春活力的

感覺181

7.9 網(wǎng)頁(yè)色彩的興奮和沉靜. 182

7.9.1 暗色調(diào)制造出來的沉靜感覺184

7.9.2 明度高的顏色給人一種興奮的感覺185

7.10 網(wǎng)頁(yè)色彩中的男性與女性. 186

7.10.1 灰色展現(xiàn)出男性理智穩(wěn)重的氣質(zhì)188

7.10.2 紅色系可展示女性的柔美189

第8章 新潮的網(wǎng)頁(yè)設(shè)計(jì)方案

方案1：扁平化的極簡(jiǎn)主義風(fēng)潮 191

方案2：錯(cuò)位排版的網(wǎng)頁(yè)布局. 192

方案3：以互動(dòng)圖表的方式展示信息內(nèi)容.193

方案4：以光效和質(zhì)感裝飾的網(wǎng)頁(yè) 194

方案5：網(wǎng)格化和幾何圖形化的設(shè)計(jì)趨勢(shì).195

方案6：使用炫酷文字吸引視覺注意 196

方案7：使用“幽靈”效果實(shí)現(xiàn)簡(jiǎn)約美 197

方案8：黑白灰的主體設(shè)計(jì)配色 198

方案9：鼠標(biāo)移動(dòng)產(chǎn)生的視覺差效果 199

方案10：去界面化的設(shè)計(jì)方法. 200

方案11：一屏以內(nèi)清晰地展示內(nèi)容 201

方案12：隱藏的導(dǎo)航欄模式. 202

方案13：現(xiàn)代復(fù)古風(fēng)格的網(wǎng)頁(yè)設(shè)計(jì) 203

方案14：細(xì)節(jié)個(gè)性十足的炫酷網(wǎng)頁(yè) 204

方案15：小清新的視覺感受. 205

方案16：使用細(xì)小的部分展現(xiàn)網(wǎng)頁(yè)特色. 206

方案17：非常大膽的空間留白. 207

方案18：滾動(dòng)瀏覽的網(wǎng)頁(yè)設(shè)計(jì). 208

方案19： 背景以大圖趨小的方式搭配

設(shè)計(jì)感文字 209

方案20：用強(qiáng)弱對(duì)比展示信息重點(diǎn) 210