1網(wǎng)頁(yè)設(shè)計(jì)理論

1.1　網(wǎng)頁(yè)設(shè)計(jì)概念/003

1.2　網(wǎng)頁(yè)的設(shè)計(jì)標(biāo)準(zhǔn)/004

1.2.1　網(wǎng)頁(yè)尺寸/004

1.2.2　網(wǎng)頁(yè)字體/005

1.2.3　網(wǎng)頁(yè)色彩/005

1.3　網(wǎng)頁(yè)設(shè)計(jì)的八大法則/008

1.3.1　比例法則/010

1.3.2　對(duì)稱(chēng)法則/010

1.3.3　不對(duì)稱(chēng)法則/011

1.3.4　和諧法則/011

1.3.5　統(tǒng)一法則/011

1.3.6　平衡法則/012

1.3.7　反復(fù)法則/012

1.3.8　漸變法則/013

1.4　網(wǎng)頁(yè)設(shè)計(jì)的四大原則/013

1.4.1　目的性原則/014

1.4.2　內(nèi)涵性原則/014

1.4.3　個(gè)性化原則/015

1.4.4　藝術(shù)性原則/015

1.5　網(wǎng)頁(yè)設(shè)計(jì)的點(diǎn)線(xiàn)面/016

1.5.1　點(diǎn)/017

1.5.2　線(xiàn)/017

1.5.3　面/018



2網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)知識(shí)

2.1 　網(wǎng)頁(yè)色彩/021

2.1.1　色相、明度、純度/021

2.1.2　主色、輔助色、點(diǎn)綴色/022

2.1.3　鄰近色、對(duì)比色/024

2.1.4　色彩與面積/025

2.1.5　色彩混合/025

2.1.6　色彩與網(wǎng)頁(yè)設(shè)計(jì)的關(guān)系/027

2.2　網(wǎng)頁(yè)設(shè)計(jì)的元素/028

2.2.1　網(wǎng)頁(yè)的規(guī)格/028

2.2.2　網(wǎng)頁(yè)的LOGO/028

2.2.3　頂部通欄/029

2.2.4　網(wǎng)頁(yè)文本/030

2.2.5　圖像的設(shè)計(jì)/030



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

3.1　紅/033

3.1.1　淺談紅色/033

3.1.2　應(yīng)用實(shí)例/034

3.1.3　常見(jiàn)色分析/034

3.1.4　猜你喜歡/035

3.2　橙/035

3.2.1　淺談橙色/035

3.2.2　應(yīng)用實(shí)例/036

3.2.3　常見(jiàn)色分析/036

3.2.4　猜你喜歡/037

3.3　黃/038

3.3.1　淺談黃色/038

3.3.2　應(yīng)用實(shí)例/039

3.3.3　常見(jiàn)色分析/039

3.3.4　猜你喜歡/040

3.4　綠/040

3.4.1　淺談綠色/040

3.4.2　應(yīng)用實(shí)例/041

3.4.3　常見(jiàn)色分析/041

3.4.4　猜你喜歡/042

3.5　青/042

3.5.1　淺談青色/042

3.5.2　應(yīng)用實(shí)例/043

3.5.3　常見(jiàn)色分析/044

3.5.4　猜你喜歡/044

3.6　藍(lán)/045

3.6.1　淺談藍(lán)色/045

3.6.2　應(yīng)用實(shí)例/046

3.6.3　常見(jiàn)色分析/046

3.6.4　猜你喜歡/047

3.7　紫/048

3.7.1　淺談紫色/048

3.7.2　應(yīng)用實(shí)例/049

3.7.3　常見(jiàn)色分析/049

3.7.4　猜你喜歡/050

3.8　黑/050

3.8.1　淺談黑色/050

3.8.2　應(yīng)用實(shí)例/051

3.8.3　猜你喜歡/051

3.9　白/052

3.9.1　淺談白色/052

3.9.2　應(yīng)用實(shí)例/053

3.9.3　猜你喜歡/053

3.10　灰/054

3.10.1　淺談灰色/054

3.10.2　應(yīng)用實(shí)例/055

3.10.3　猜你喜歡/055



4網(wǎng)頁(yè)設(shè)計(jì)的界面布局方法

4.1　骨骼型/059

4.1.1　手把手教你骨骼型網(wǎng)頁(yè)設(shè)計(jì)方法/059

4.1.2　骨骼型網(wǎng)頁(yè)設(shè)計(jì)方案/060

4.1.3　骨骼型網(wǎng)頁(yè)設(shè)計(jì)/061

4.1.4　骨骼型網(wǎng)頁(yè)設(shè)計(jì)小妙招紅色與綠色互補(bǔ)的視覺(jué)感/062

4.1.5　優(yōu)秀作品賞析/062

4.2　滿(mǎn)版型/063

4.2.1　手把手教你滿(mǎn)版型網(wǎng)頁(yè)設(shè)計(jì)方法/063

4.2.2　滿(mǎn)版型網(wǎng)頁(yè)設(shè)計(jì)方案/064

4.2.3　滿(mǎn)版型網(wǎng)頁(yè)設(shè)計(jì)/065

4.2.4　滿(mǎn)版型網(wǎng)頁(yè)設(shè)計(jì)小妙招實(shí)物與虛景的不同妙處/066

4.2.5　優(yōu)秀作品賞析/066

4.3　分割型/067

4.3.1　手把手教你分割型網(wǎng)頁(yè)設(shè)計(jì)方法/067

4.3.2　分割型網(wǎng)頁(yè)設(shè)計(jì)方案/068

4.3.3　分割型網(wǎng)頁(yè)設(shè)計(jì)/069

4.3.4　分割型網(wǎng)頁(yè)設(shè)計(jì)小妙招縱向分割/070

4.3.5　優(yōu)秀作品賞析/070

4.4　中軸型/071

4.4.1　手把手教你中軸型網(wǎng)頁(yè)設(shè)計(jì)方法/071

4.4.2　中軸型網(wǎng)頁(yè)設(shè)計(jì)方案/072

4.4.3　中軸型網(wǎng)頁(yè)設(shè)計(jì)/073

4.4.4　中軸型網(wǎng)頁(yè)設(shè)計(jì)小妙招色彩的沉著感/074

4.4.5　優(yōu)秀作品賞析/074

4.5　曲線(xiàn)型/075

4.5.1　手把手教你曲線(xiàn)型網(wǎng)頁(yè)設(shè)計(jì)方法/075

4.5.2　曲線(xiàn)型網(wǎng)頁(yè)設(shè)計(jì)方案/076

4.5.3　曲線(xiàn)型網(wǎng)頁(yè)設(shè)計(jì)/077

4.5.4　曲線(xiàn)型網(wǎng)頁(yè)設(shè)計(jì)小妙招不同的線(xiàn)條與色彩/078

4.5.5　優(yōu)秀作品賞析/078

4.6　傾斜型/079

4.6.1　手把手教你傾斜型網(wǎng)頁(yè)設(shè)計(jì)方法/079

4.6.2　傾斜型網(wǎng)頁(yè)設(shè)計(jì)方案/080

4.6.3　傾斜型網(wǎng)頁(yè)設(shè)計(jì)/081

4.6.4　傾斜型網(wǎng)頁(yè)設(shè)計(jì)小妙招高明度與低明度的色彩/082

4.6.5　優(yōu)秀作品賞析/082

4.7　對(duì)稱(chēng)型/083

4.7.1　手把手教你對(duì)稱(chēng)型網(wǎng)頁(yè)設(shè)計(jì)方法/083

4.7.2　對(duì)稱(chēng)型網(wǎng)頁(yè)設(shè)計(jì)方案/084

4.7.3　對(duì)稱(chēng)型網(wǎng)頁(yè)設(shè)計(jì)/085

4.7.4　對(duì)稱(chēng)型網(wǎng)頁(yè)設(shè)計(jì)小妙招同對(duì)稱(chēng)的形式/086

4.7.5　優(yōu)秀作品賞析/086

4.8　焦點(diǎn)型/087

4.8.1　手把手教你焦點(diǎn)型網(wǎng)頁(yè)設(shè)計(jì)方法/087

4.8.2　焦點(diǎn)型網(wǎng)頁(yè)設(shè)計(jì)方案/088

4.8.3　焦點(diǎn)型網(wǎng)頁(yè)設(shè)計(jì)/089

4.8.4　焦點(diǎn)型網(wǎng)頁(yè)設(shè)計(jì)小妙招圓形的焦點(diǎn)設(shè)計(jì)/090

4.8.5　優(yōu)秀作品賞析/090

4.9　三角型/091

4.9.1　手把手教你三角型網(wǎng)頁(yè)設(shè)計(jì)方法/091

4.9.2　三角型網(wǎng)頁(yè)設(shè)計(jì)方案/092

4.9.3　三角型網(wǎng)頁(yè)設(shè)計(jì)/093

4.9.4　三角型網(wǎng)頁(yè)設(shè)計(jì)小妙招綠色的清爽感/094

4.9.5　優(yōu)秀作品賞析/094

4.10　自由型/095

4.10.1　手把手教你自由型網(wǎng)頁(yè)設(shè)計(jì)方法/095

4.10.2　自由型網(wǎng)頁(yè)設(shè)計(jì)方案/096

4.10.3　自由型網(wǎng)頁(yè)設(shè)計(jì)/096

4.10.4　自由型網(wǎng)頁(yè)設(shè)計(jì)小妙招耐人尋味的色彩/098

4.10.5　優(yōu)秀作品賞析/098



5網(wǎng)頁(yè)設(shè)計(jì)的構(gòu)成元素

5.1　導(dǎo)航/101

5.1.1　手把手教你網(wǎng)頁(yè)導(dǎo)航設(shè)計(jì)方法/101

5.1.2　網(wǎng)頁(yè)導(dǎo)航設(shè)計(jì)方案/102

5.1.3 網(wǎng)頁(yè)導(dǎo)航設(shè)計(jì)/103

5.1.4　網(wǎng)頁(yè)導(dǎo)航設(shè)計(jì)小妙招加入底色突出導(dǎo)航/104

5.1.5　優(yōu)秀作品賞析/104

5.2　banner/104

5.2.1　手把手教你網(wǎng)頁(yè)banner設(shè)計(jì)方法/105

5.2.2　網(wǎng)頁(yè)banner設(shè)計(jì)方案/106

5.2.3　網(wǎng)頁(yè)banner設(shè)計(jì)/107

5.2.4　網(wǎng)頁(yè)banner設(shè)計(jì)小妙招動(dòng)感時(shí)尚的灰色圖片/108

5.2.5　優(yōu)秀作品賞析/108

5.3　模塊/108

5.3.1　手把手教你網(wǎng)頁(yè)模塊設(shè)計(jì)方法/109

5.3.2　網(wǎng)頁(yè)模塊設(shè)計(jì)方案/110

5.3.3　網(wǎng)頁(yè)模塊設(shè)計(jì)/111

5.3.4　網(wǎng)頁(yè)模塊設(shè)計(jì)小妙招幾何形狀/112

5.3.5　優(yōu)秀作品賞析/112

5.4　文字/113

5.4.1　手把手教你網(wǎng)頁(yè)文字設(shè)計(jì)方法/113

5.4.2　網(wǎng)頁(yè)文字設(shè)計(jì)方案/114

5.4.3　網(wǎng)頁(yè)文字設(shè)計(jì)/115

5.4.4　網(wǎng)頁(yè)文字設(shè)計(jì)小妙招字體設(shè)計(jì) 居中擺放/116

5.4.5　優(yōu)秀作品賞析/116



6.不同行業(yè)的網(wǎng)頁(yè)色彩搭配

6.1　食品類(lèi)/119

6.1.1　手把手教你食品類(lèi)網(wǎng)頁(yè)設(shè)計(jì)方法/119

6.1.2　食品類(lèi)網(wǎng)頁(yè)設(shè)計(jì)方案/120

6.1.3　食品類(lèi)網(wǎng)頁(yè)設(shè)計(jì)/121

6.1.4　食品類(lèi)網(wǎng)頁(yè)設(shè)計(jì)小妙招棕色的沉穩(wěn)感/122

6.1.5　優(yōu)秀作品賞析/122

6.2　服裝類(lèi)/123

6.2.1　手把手教你服裝類(lèi)網(wǎng)頁(yè)設(shè)計(jì)方法/123

6.2.2　服裝類(lèi)網(wǎng)頁(yè)設(shè)計(jì)方案/124

6.2.3　服裝類(lèi)網(wǎng)頁(yè)設(shè)計(jì)/125

6.2.4　服裝類(lèi)網(wǎng)頁(yè)設(shè)計(jì)小妙招網(wǎng)頁(yè)的版式設(shè)計(jì)/126

6.2.5　優(yōu)秀作品賞析/126

6.3　企業(yè)類(lèi)/127

6.3.1　手把手教你企業(yè)類(lèi)網(wǎng)頁(yè)設(shè)計(jì)方法/127

6.3.2　企業(yè)類(lèi)網(wǎng)頁(yè)設(shè)計(jì)方案/128

6.3.3　企業(yè)類(lèi)網(wǎng)頁(yè)設(shè)計(jì)/129

6.3.4　企業(yè)類(lèi)網(wǎng)頁(yè)設(shè)計(jì)小妙招富饒與簡(jiǎn)易的對(duì)比/130

6.3.5　優(yōu)秀作品賞析/130

6.4　美妝類(lèi)/131

6.4.1　手把手教你美妝類(lèi)網(wǎng)頁(yè)設(shè)計(jì)方法/131

6.4.2　美妝類(lèi)網(wǎng)頁(yè)設(shè)計(jì)方案/132

6.4.3　美妝類(lèi)網(wǎng)頁(yè)設(shè)計(jì)/133

6.4.4　美妝類(lèi)網(wǎng)頁(yè)設(shè)計(jì)小妙招黑色對(duì)稱(chēng)版式/134

6.4.5　優(yōu)秀作品賞析/134

6.5　數(shù)碼類(lèi)/135

6.5.1　手把手教你數(shù)碼類(lèi)網(wǎng)頁(yè)設(shè)計(jì)方法/135

6.5.2　數(shù)碼類(lèi)網(wǎng)頁(yè)設(shè)計(jì)方案/136

6.5.3　數(shù)碼類(lèi)網(wǎng)頁(yè)設(shè)計(jì)/137

6.5.4　數(shù)碼類(lèi)網(wǎng)頁(yè)設(shè)計(jì)小妙招繪畫(huà)的插入/138

6.5.5　優(yōu)秀作品賞析/138

6.6　文娛類(lèi)/139

6.6.1　手把手教你文娛類(lèi)網(wǎng)頁(yè)設(shè)計(jì)方法/139

6.6.2　文娛類(lèi)網(wǎng)頁(yè)設(shè)計(jì)方案/140

6.6.3　文娛類(lèi)網(wǎng)頁(yè)設(shè)計(jì)/141

6.6.4 文娛類(lèi)網(wǎng)頁(yè)設(shè)計(jì)小妙招簡(jiǎn)潔的分割手法/142

6.6.5 優(yōu)秀作品賞析/142

6.7　家居類(lèi)/143

6.7.1　手把手教你家居類(lèi)網(wǎng)頁(yè)設(shè)計(jì)方法/143

6.7.2　家居類(lèi)網(wǎng)頁(yè)設(shè)計(jì)方案/144

6.7.3　家居類(lèi)網(wǎng)頁(yè)設(shè)計(jì)/145

6.7.4　家居類(lèi)網(wǎng)頁(yè)設(shè)計(jì)小妙招清爽的視覺(jué)/146

6.7.5　優(yōu)秀作品賞析/146

6.8　汽車(chē)類(lèi)/147

6.8.1　手把手教你汽車(chē)類(lèi)網(wǎng)頁(yè)設(shè)計(jì)方法/147

6.8.2　汽車(chē)類(lèi)網(wǎng)頁(yè)設(shè)計(jì)方案/148

6.8.3　汽車(chē)類(lèi)網(wǎng)頁(yè)設(shè)計(jì)/149

6.8.4　汽車(chē)類(lèi)網(wǎng)頁(yè)設(shè)計(jì)小妙招典雅端莊的黑色/150

6.8.5　優(yōu)秀作品賞析/150

6.9　旅游類(lèi)/151

6.9.1　手把手教你旅游類(lèi)網(wǎng)頁(yè)設(shè)計(jì)方法/151

6.9.2　旅游類(lèi)網(wǎng)頁(yè)設(shè)計(jì)方案/152

6.9.3　旅游類(lèi)網(wǎng)頁(yè)設(shè)計(jì)/153

6.9.4　旅游類(lèi)網(wǎng)頁(yè)設(shè)計(jì)小妙招圓圈元素設(shè)計(jì)/154

6.9.5　優(yōu)秀作品賞析/154

6.10　創(chuàng)意類(lèi)/155

6.10.1　手把手教你創(chuàng)意類(lèi)網(wǎng)頁(yè)設(shè)計(jì)方法/155

6.10.2　創(chuàng)意類(lèi)網(wǎng)頁(yè)設(shè)計(jì)方案/156

6.10.3　創(chuàng)意類(lèi)網(wǎng)頁(yè)設(shè)計(jì)/157

6.10.4　創(chuàng)意類(lèi)網(wǎng)頁(yè)設(shè)計(jì)小妙招動(dòng)畫(huà)的趣味性/158

6.10.5　優(yōu)秀作品賞析/158



7網(wǎng)頁(yè)色彩的情感

7.1　美味/161

7.1.1　手把手教你美味網(wǎng)頁(yè)設(shè)計(jì)方法/161

7.1.2　美味網(wǎng)頁(yè)設(shè)計(jì)方案/162

7.1.3　美味網(wǎng)頁(yè)設(shè)計(jì)/163

7.1.4　美味網(wǎng)頁(yè)設(shè)計(jì)小妙招暗色背景的使用/164

7.1.5　優(yōu)秀作品賞析/164

7.2　清新/165

7.2.1　手把手教你清新網(wǎng)頁(yè)設(shè)計(jì)方法/165

7.2.2　清新網(wǎng)頁(yè)設(shè)計(jì)方案/166

7.2.3　清新網(wǎng)頁(yè)設(shè)計(jì)/167

7.2.4　清新網(wǎng)頁(yè)設(shè)計(jì)小妙招帶有灰度的顏色/168

7.2.5　優(yōu)秀作品賞析/168

7.3　溫暖/169

7.3.1　手把手教你溫暖網(wǎng)頁(yè)設(shè)計(jì)方法/169

7.3.2　溫暖網(wǎng)頁(yè)設(shè)計(jì)方案/170

7.3.3　溫暖網(wǎng)頁(yè)設(shè)計(jì)/171

7.3.4　溫暖網(wǎng)頁(yè)設(shè)計(jì)小妙招暖系燈光/172

7.3.5　優(yōu)秀作品賞析/172

7.4　涼爽/173

7.4.1　手把手教你涼爽網(wǎng)頁(yè)設(shè)計(jì)方法/173

7.4.2　涼爽網(wǎng)頁(yè)設(shè)計(jì)方案/174

7.4.3　涼爽網(wǎng)頁(yè)設(shè)計(jì)/175

7.4.4　涼爽網(wǎng)頁(yè)設(shè)計(jì)小妙招巧用藍(lán)色背景/176

7.4.5　優(yōu)秀作品賞析/176

7.5　飽滿(mǎn)/177

7.5.1　手把手教你飽滿(mǎn)網(wǎng)頁(yè)設(shè)計(jì)方法/177

7.5.2　飽滿(mǎn)網(wǎng)頁(yè)設(shè)計(jì)方案/178

7.5.3　飽滿(mǎn)網(wǎng)頁(yè)設(shè)計(jì)/179

7.5.4　飽滿(mǎn)網(wǎng)頁(yè)設(shè)計(jì)小妙招運(yùn)用飽和度較高的色彩/180

7.5.5　優(yōu)秀作品賞析/180

7.6　時(shí)尚/181

7.6.1　手把手教你時(shí)尚網(wǎng)頁(yè)設(shè)計(jì)方法/181

7.6.2　時(shí)尚網(wǎng)頁(yè)設(shè)計(jì)方案/182

7.6.3　時(shí)尚網(wǎng)頁(yè)設(shè)計(jì)/183

7.6.4　時(shí)尚網(wǎng)頁(yè)設(shè)計(jì)小妙招用黃色點(diǎn)綴暗系背景/184

7.6.5　優(yōu)秀作品賞析/184

7.7　神秘/185

7.7.1　手把手教你神秘網(wǎng)頁(yè)設(shè)計(jì)方法/185

7.7.2　神秘網(wǎng)頁(yè)設(shè)計(jì)方案/186

7.7.3　神秘網(wǎng)頁(yè)設(shè)計(jì)/187

7.7.4　神秘網(wǎng)頁(yè)設(shè)計(jì)小妙招合理運(yùn)用黑色背景/188

7.7.5　優(yōu)秀作品賞析/188

7.8　喧鬧/189

7.8.1　手把手教你喧鬧網(wǎng)頁(yè)設(shè)計(jì)方法/189

7.8.2　喧鬧網(wǎng)頁(yè)設(shè)計(jì)方案/190

7.8.3　喧鬧網(wǎng)頁(yè)設(shè)計(jì)/191

7.8.4　喧鬧網(wǎng)頁(yè)設(shè)計(jì)小妙招多種顏色的搭配/192

7.8.5　優(yōu)秀作品賞析/192

7.9　科技/193

7.9.1　科技感網(wǎng)頁(yè)設(shè)計(jì)的搭配特征/193

7.9.2　科技感網(wǎng)頁(yè)設(shè)計(jì)方案，舉一反三/194

7.9.3　神秘悠揚(yáng)的科技感色彩搭配/195

7.9.4　設(shè)計(jì)巧妙的科技感色彩搭配/196

7.9.5　科技感網(wǎng)頁(yè)設(shè)計(jì)小妙招/196

7.9.6　優(yōu)秀作品賞析/198

7.10　專(zhuān)業(yè)/198

7.10.1　專(zhuān)業(yè)感網(wǎng)頁(yè)設(shè)計(jì)的搭配特征/198

7.10.2　專(zhuān)業(yè)感網(wǎng)頁(yè)設(shè)計(jì)方案，舉一反三/199

7.10.3　清爽簡(jiǎn)潔的專(zhuān)業(yè)感色彩搭配/200

7.10.4　現(xiàn)代化的專(zhuān)業(yè)感色彩搭配/201

7.10.5　專(zhuān)業(yè)感網(wǎng)頁(yè)設(shè)計(jì)小妙招/201

7.10.6　優(yōu)秀作品賞析/202



8網(wǎng)頁(yè)配色實(shí)戰(zhàn)

8.1　簡(jiǎn)約風(fēng)格網(wǎng)頁(yè)設(shè)計(jì)/204

8.2　矢量風(fēng)格圖像裝飾/208