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

第1章 網(wǎng)頁設計知識

1.1 網(wǎng)頁設計基礎. 3

1.1.1 網(wǎng)頁的相關概念3

1.1.2 網(wǎng)頁界面設計的特點4

1.2 網(wǎng)頁設計界面介紹 5

1.3 網(wǎng)頁設計主題分析 6

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

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

1.4 網(wǎng)頁設計布局分類 7

1.4.1 骨骼型8

1.4.2 對稱型9

1.4.3 曲線型10

1.4.4 滿屏型11

1.4.5 傾斜型12

1.4.6 分割型13

1.4.7 自由型14

1.4.8 焦點型14

1.5 網(wǎng)頁的潮流元素. 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章 色彩基礎知識

2.1 色彩屬性 23

2.2 色環(huán) 24

2.3 色彩對比 26

3.1 認識網(wǎng)頁的基本結(jié)構(gòu) 33

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

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

3.1.3 頂部通欄36

3.1.4 網(wǎng)頁文本37

3.1.5 圖像的設計38

3.1.6 文字的設計38

3.1.7 頁眉和頁腳39

第3章 網(wǎng)頁設計的制作流程

3.1.8 多媒體40

3.2 網(wǎng)頁設計的基本步驟 41

3.2.1 確定主題42

3.2.2 確定構(gòu)圖43

3.2.3 確定風格44

3.2.4 確定色彩搭配45

第4章 網(wǎng)頁設計的原則與配色

4.1 統(tǒng)一原則 48

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

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

4.2 對比原則 52

4.2.1 矛盾和沖突54

4.2.2 模塊大小的對比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 使用顏色的進退感突出內(nèi)容62

第4章 網(wǎng)頁設計的原則與配色

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

4.5 個性原則 64

4.5.1 立體感66

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

4.6 實用原則 68

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

4.6.2 合理搭配顏色71

4.7 分割原則 72

4.7.1 使用色彩進行頁面分割74

4.7.2 使用模塊進行頁面分割75

5.1 扁平化設計風格. 78

5.1.1 顏色的高飽和度80

5.1.2 以簡約為基礎81

5.2 3D 設計風格. 82

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

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

5.3 極簡設計風格. 86

5.3.1 用圖講故事88

5.3.2 形的構(gòu)思89

5.4 全屏設計風格. 90

5.4.1 合理的文字布局92

5.4.2 使用高清的圖片93

5.5 瀑布流設計風格. 94

5.5.1 多行多列的布局方法96

第5章 網(wǎng)頁設計的常見風格

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

5.6 標準化設計風格. 98

5.6.1 完善的布局100

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

5.7 個性化設計風格. 102

5.7.1 大膽的色彩搭配獨具個性104

5.7.2 獨特的頁面布局和個性文字105

5.8 矢量化設計風格. 106

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

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

5.9 復古化設計風格. 110

5.9.1 復古給人一種特殊的情感112

5.9.2 復古是一種回憶113

第6章 不同類型的網(wǎng)頁設計

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

6.1.1 有正式感的布局模式118

6.1.2 模塊清晰化119

6.2 綜合購物 120

6.2.1 回到首頁功能122

6.2.2 模塊分類明確123

6.3 影視娛樂 124

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

6.3.2 吸引視覺注意力127

6.4 教育文化 128

6.4.1 布局整潔舒適130

6.4.2 使用圖片展示重點內(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)品本身的特性生動表示產(chǎn)品139

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

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

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

6.8 個人主頁 144

6.8.1 適合自己的風格146

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

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

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

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

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

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

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

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

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

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

7.4 網(wǎng)頁色彩的前進與后退. 162

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

7.4.2 打造空間感165

7.5 網(wǎng)頁色彩的標準與個性. 166

7.5.1 使頁面更具熟悉感168

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

7.5.2 使用產(chǎn)品的顏色進行個性化表達169

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

7.6.1 緩和視覺沖擊172

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

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

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

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

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

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

的感覺180

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

感覺181

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

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

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

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

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

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

第8章 新潮的網(wǎng)頁設計方案

方案1：扁平化的極簡主義風潮 191

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

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

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

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

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

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

方案8：黑白灰的主體設計配色 198

方案9：鼠標移動產(chǎn)生的視覺差效果 199

方案10：去界面化的設計方法. 200

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

方案12：隱藏的導航欄模式. 202

方案13：現(xiàn)代復古風格的網(wǎng)頁設計 203

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

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

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

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

方案18：滾動瀏覽的網(wǎng)頁設計. 208

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

設計感文字 209

方案20：用強弱對比展示信息重點 210