网页设计配色从入门到精通

第1章　色彩达人必学知识　｜1

1.1　认识色彩　｜2

1.1.1　色彩是什么　｜2

1.1.2　色彩能够做什么　｜2

1.1.3　色彩的属性　｜4

1.2　主色、辅助色、点缀色的关系　｜8

1.2.1　主色　｜8

1.2.2 辅助色　｜8

1.2.3 点缀色　｜9

1.2.4 设计师谈——画龙点睛的点缀色　｜9

1.2.5　动手练习——视觉中心的主色秘诀　｜10

1.3　色彩的对比　｜11

1.3.1 明度对比　｜12

1.3.2　纯度对比　｜12

1.3.3　色相对比　｜13

1.3.4　面积对比　｜15

1.3.5　冷暖对比　｜16

第2章　网页设计的基础知识　｜17

2.1　什么是网页　｜18

2.2　网页的构成　｜18

2.2.1　网页简介　｜18

2.2.2　网页标题　｜19

2.2.3　网站的LOGO　｜20

2.2.4　网页页眉　｜20

2.2.5　网页页脚　｜21

2.2.6　网页导航　｜21

2.2.7　网页的主体内容　｜21

2.3　网页的尺寸　｜22

2.4　网页的色彩 　｜23

2.4.1　RGB色彩模式　｜23

2.4.2　HTML语言对色彩的描述　｜24

2.4.3　网络安全色　｜25

第3章　了解基础色　｜27

3.1　红　｜29

3.1.1　浅谈红色　｜29

3.1.2　应用实例　｜30

3.1.3　常见色分析　｜30

3.1.4　猜你喜欢　｜31

3.2　橙　｜32

3.2.1　浅谈橙色　｜32

3.2.2　应用实例　｜33

3.2.3　常见色分析　｜33

3.2.4　猜你喜欢　｜34

3.3　黄　｜35

3.3.1　浅谈黄色　｜35

3.3.2　应用实例　｜36

3.3.3　常见色分析　｜36

3.3.4　猜你喜欢　｜37

3.4　绿　｜38

3.4.1　浅谈绿色　｜38

3.4.2　应用实例　｜39

3.4.3　常见色分析　｜39

3.4.4　猜你喜欢　｜40

3.5　青　｜41

3.5.1　浅谈青色　｜41

3.5.2　应用实例　｜42

3.5.3　常见色分析　｜42

3.5.4　猜你喜欢　｜43

3.6　蓝　｜44

3.6.1　浅谈蓝色　｜44

3.6.2　应用实例　｜45

3.6.3　常见色分析　｜45

3.6.4　猜你喜欢　｜46

3.7　紫　｜47

3.7.1　浅谈紫色　｜47

3.7.2　应用实例　｜48

3.7.3　常见色分析　｜48

3.7.4　猜你喜欢　｜49

3.8　黑　｜50

3.8.1　浅谈黑色　｜50

3.8.2　应用实例　｜50

3.8.3　猜你喜欢　｜51

3.9　白　｜52

3.9.1　浅谈白色　｜52

3.9.2　应用实例　｜52

3.9.3　猜你喜欢　｜53

3.10　灰　｜54

3.10.1　浅谈灰色　｜54

3.10.2　应用实例　｜54

3.10.3　猜你喜欢　｜55

第4章　网页布局技巧与色彩　｜57

4.1　网页布局的基础知识　｜58

4.2　黄金分割式布局与左右对齐式布局　｜59

4.2.1　黄金分割式布局　｜60

4.2.2　左右对齐式布局　｜60

4.2.3　动手练习——修改背景颜色　｜61

4.2.4　设计师谈——黑色配色方案　｜61

4.2.5　配色实战　｜61

4.2.6　常见色彩搭配　｜62

4.2.7　猜你喜欢　｜62

4.3　全景式布局与卫星式布局　｜63

4.3.1　全景式布局　｜64

4.3.2　卫星式布局　｜64

4.3.3　动手练习——使用点缀色　｜65

4.3.4　设计师谈——按钮的设计　｜65

4.3.5　配色实战　｜65

4.3.6　常见色彩搭配　｜66

4.3.7　猜你喜欢　｜66

4.4　照片组合式布局与包围式布局　｜67

4.4.1　 照片组合式布局　｜68

4.4.2　包围式布局　｜68

4.4.3　动手练习——LOGO的设计　｜69

4.4.4　设计师谈——扁平化　｜69

4.4.5　配色实战　｜69

4.4.6　常见色彩搭配　｜70

4.4.7　猜你喜欢　｜70

4.5　散开式布局与对称式布局　｜71

4.5.1　敞开式布局　｜72

4.5.2　对称式布局　｜72

4.5.3　动手练习——提高颜色的纯度　｜73

4.5.4　设计师谈——留白　｜73

4.5.5　配色实战　｜73

4.5.6　常见色彩搭配　｜74

4.5.7　猜你喜欢　｜74

第5章　网页色彩的视觉印象　｜75

5.1　女性　｜76

5.1.1　甜美　｜76

5.1.2　时尚　｜76

5.2　男性　｜77

5.2.1　理智　｜77

5.2.2　坚韧　｜77

5.3　儿童　｜78

5.3.1　可爱　｜78

5.3.2　活力　｜78

5.4　老人　｜79

5.4.1　温暖　｜79

5.4.2　踏实　｜79

5.5　华丽　｜80

5.5.1　优雅　｜80

5.5.2　华美　｜80

5.6　质朴　｜81

5.6.1　淳朴　｜81

5.6.2　干净　｜81

5.7　活泼　｜82

5.7.1　天真　｜82

5.7.2　活力　｜82

5.8　庄重　｜83

5.8.1　庄严　｜83

5.8.2　稳重　｜83

5.9　兴奋　｜84

5.9.1　亢奋　｜84

5.9.2　刺激　｜84

5.10　沉静　｜85

5.10.1　安静　｜85

5.10.2　沉寂　｜85

5.11　温暖　｜86

5.11.1　温馨　｜86

5.11.2　和煦　｜86

5.12　凉爽　｜87

5.12.1　劲爽　｜87

5.12.2　冰凉　｜87

5.13　专业　｜88

5.13.1　品质　｜88

5.13.2　专注　｜88

5.14　时尚　｜89

5.14.1　新潮　｜89

5.14.2　前卫　｜89

5.15　雅致　｜90

5.15.1　精致　｜90

5.15.2　优雅　｜90

5.16　环保　｜91

5.16.1　放心　｜91

5.16.2　健康　｜91

5.17　安全　｜92

5.17.1　安稳　｜92

5.17.2　安然　｜92

5.18　信誉　｜93

5.18.1　大气　｜93

5.18.2　信任　｜93

5.19　荣耀　｜94

5.19.1　华丽　｜94

5.19.2　光辉　｜94

5.20　美味　｜95

5.20.1　香甜　｜95

5.20.2　浓香　｜95

5.21　神秘　｜96

5.21.1　奇幻　｜96

5.21.2　深邃　｜96

5.22　梦幻　｜97

5.22.1　绚丽　｜97

5.22.2　迷幻　｜97

5.23　自然　｜98

5.23.1　绿色　｜98

5.23.2　清新　｜98

5.24　严肃　｜99

5.24.1　典范　｜99

5.24.2　规范　｜99

第6章　不同网站的网页色彩搭配　｜101

6.1　 门户网页　｜102

6.1.1　什么是门户网站　｜102

6.1.2　案例分析　｜103

6.1.3　动手练习——降低文字的饱和度　｜104

6.1.4　设计师谈——别忽视网页中的搜索框　｜104

6.1.5　配色实战——扁平化网页的配色方案　｜104

6.1.6　常见色彩搭配　｜104

6.1.7　猜你喜欢　｜105

6.2　企业网站　｜106

6.2.1　什么是企业网站　｜106

6.2.2　案例分析　｜107

6.2.3　动手练习——增加页面空间感，集中用户视线　｜108

6.2.4　设计师谈——企业网站的形象塑造　｜108

6.2.5　配色实战——网页中点缀色配色方案　｜109

6.2.6　常见色彩搭配　｜109

6.2.7　猜你喜欢　｜109

6.3　产品展示 　｜110

6.3.1　什么是产品展示网页　｜110

6.3.2　案例分析　｜111

6.3.3　动手练习——减少画面颜色　｜112

6.3.4　设计师谈——各国家的颜色内涵　｜112

6.3.5　配色实战——网页配色方案　｜113

6.3.6　常见色彩搭配　｜113

6.3.7　猜你喜欢　｜113

6.4　购物网站 　｜114

6.4.1　什么是购物网站　｜114

6.4.2　案例分析　｜115

6.4.3　动手练习——为留白空间添加装饰　｜116

6.4.4　设计师谈——色彩激发你的购买欲　｜116

6.4.5　配色实战——网页色彩搭配　｜117

6.4.6　常见色彩搭配　｜117

6.4.7　猜你喜欢　｜117

6.5　社交网页　｜118

6.5.1　什么是社交网站　｜118

6.5.2　案例分析　｜119

6.5.3　动手练习——网站色调应该与产品相呼应　｜120

6.5.4　设计师谈——网站设计中字体粗细的选择　｜120

6.5.5　配色实战——不同配色方案的视觉效果　｜121

6.5.6　常见色彩搭配　｜121

6.5.7　猜你喜欢　｜121

6.6　个人网页 　｜122

6.6.1　什么是个人网页　｜122

6.6.2　案例分析　｜123

6.6.3　动手练习——为画面添加合适素材　｜124

6.6.4　设计师谈——网页设计中的三个小细节　｜124

6.6.5　配色实战——舞蹈网站的色彩搭配　｜124

6.6.6　常见色彩搭配　｜125

6.6.7　猜你喜欢　｜125

6.7　社区论坛　｜126

6.7.1　什么是社区论坛　｜126

6.7.2　案例分析　｜127

6.7.3　动手练习——别把选项藏起来　｜128

6.7.4　设计师谈——单色网页设计　｜128

6.7.5　配色实战——网页色彩搭配　｜128

6.7.6　常见色彩搭配　｜129

6.7.7　猜你喜欢　｜129

6.8　活动网站　｜130

6.8.1　什么是活动网站　｜130

6.8.2　案例分析　｜131

6.8.3　动手练习——尽量减少表单问题　｜132

6.8.4　设计师谈——选用两种色彩进行色彩搭配　｜132

6.8.5　配色实战——同一网站的配色方案　｜132

6.8.6　常见色彩搭配　｜133

6.8.7　猜你喜欢　｜133

第7章　不同行业的网页色彩搭配　｜135

7.1　车品类　｜136

7.1.1　现代风格车品网页　｜136

7.1.2　粗犷风格车品网页　｜136

7.1.3　动手练习——打造豪华质感的车品网页　｜137

7.1.4　设计师谈——为网页制作一个漂亮的等待页面　｜137

7.1.5　常见色彩搭配　｜137

7.2　服饰类　｜138

7.2.1　品牌时装网页　｜138

7.2.2　年轻服装网页　｜138

7.2.3　动手练习——将商品突显出来　｜139

7.2.4　设计师谈——使用菱形进行页面的分割　｜139

7.2.5　常见色彩搭配　｜139

7.3　珠宝类　｜140

7.3.1　珠宝类购物网页　｜140

7.3.2　品牌珠宝网站　｜140

7.3.3　动手练习——浅色与深色背景对珠宝产品的影响　｜141

7.3.4　设计师谈——色块拼贴法　｜141

7.3.5　常见色彩搭配　｜141

7.4　建筑装潢　｜142

7.4.1　室内设计装饰公司网页　｜142

7.4.2　景观事务所网页　｜142

7.4.3　动手练习——为导航栏添加图标增加其识别性　｜143

7.4.4　设计师谈——简洁明快的网页设计风格　｜143

7.4.5　常见色彩搭配　｜143

7.5　媒体、音乐类　｜144

7.5.1　音乐类网页　｜144

7.5.2　电视剧网页　｜144

7.5.3　动手练习——为界面换一个合适的点缀色　｜145

7.5.4　设计师谈——利用视差滚动，打造全新感官享受　｜145

7.5.5　常见色彩搭配　｜145

7.6　IT科技　｜146

7.6.1　软件研发公司网页　｜146

7.6.2　电脑制造商网页　｜146

7.6.3　动手练习——卫星式布局方式的妙用　｜147

7.6.4　设计师谈——为界面添加一个合适的字体　｜147

7.6.5　常见色彩搭配　｜147

7.7　教育类　｜148

7.7.1　知名大学网页　｜148

7.7.2　私立学校网页　｜148

7.7.3　动手练习——为页面填写一个显眼的辅助色　｜149

7.7.4　设计师谈——为网站设计一个漂亮的404界面　｜149

7.7.5　常见色彩搭配　｜149

第8章　不同风格的网页设计　｜151

8.1　简约至上主义风格　｜152

8.1.1　简洁　｜153

8.1.2　整齐　｜153

8.1.3　动手练习——使网页看起来唯美、整洁　｜154

8.1.4　设计师谈——简约是一种特殊的表达　｜154

8.1.5　常见色彩搭配　｜154

8.2　绚丽的欧美风格　｜155

8.2.1　突出　｜156

8.2.2　细腻　｜156

8.2.3　动手练习——将页面改为中纯度色彩基调　｜157

8.2.4　设计师谈——欧美风网站的色彩搭配　｜157

8.2.5　常见色彩搭配　｜157

8.3　淡雅的韩式风格　｜158

8.3.1　淡雅　｜159

8.3.2　醇厚　｜159

8.3.3　动手练习——使网页看起来清新淡雅　｜160

8.3.4　设计师谈——韩式的淡雅清新　｜160

8.3.5　常见色彩搭配　｜160

8.4　悠远的日式风格　｜161

8.4.1　细腻　｜162

8.4.2　民族　｜162

8.4.3　动手练习——使网页看起来更富意境　｜163

8.4.4　设计师谈——日式风格　｜163

8.4.5　常见色彩搭配　｜163

8.5　空间感网页设计　｜164

8.5.1　层次　｜165

8.5.2　立体　｜165

8.5.3　动手练习——使网页层次更加清晰　｜166

8.5.4　设计师谈——“立体感”的产生　｜166

8.5.5　常见色彩搭配　｜166

8.6　扁平化设计 　｜167

8.6.1　整洁　｜168

8.6.2　简约　｜168

8.6.3　动手练习——为页面选择一个合适的颜色　｜169

8.6.4　设计师谈——力求简约的扁平化设计　｜169

8.6.5　常见色彩搭配　｜169

8.7　趣味的手绘风格 　｜170

8.7.1　趣味　｜171

8.7.2　鲜活　｜171

8.7.3　动手练习——添加插画，活跃页面气氛　｜172

8.7.4　设计师谈——富有亲和力的手绘风　｜172

8.7.5　常见色彩搭配　｜172

8.8　抽象的网页设计 　｜173

8.8.1　精炼　｜174

8.8.2　情绪　｜174

8.8.3　动手练习——使网页风格更加简约　｜175

8.8.4　设计师谈——抽象风是情绪的精炼　｜175

8.8.5　常见色彩搭配　｜175

8.9　怀旧的复古风格 　｜176

8.9.1　回忆　｜177

8.9.2　浓厚　｜177

8.9.3　动手练习——使网页视觉重点突出　｜178

8.9.4　设计师谈——复古风的融情　｜178

8.9.5　常见色彩搭配　｜178

第9章　综合版式配色　｜179

9.1　儿童主题网页　｜180

9.1.1　项目分析　｜180

9.1.2　案例分析　｜180

9.1.3　版式分析　｜181

9.1.4　配色方案　｜182

9.1.5　佳作欣赏　｜183

9.2　自然主题网页　｜184

9.2.1　项目分析　｜184

9.2.2　案例分析　｜184

9.2.3　版式分析　｜185

9.2.4　配色方案　｜186

9.2.5　佳作欣赏　｜187

9.3　科技类网页　｜188

9.3.1　项目分析　｜188

9.3.2　案例分析　｜188

9.3.3　版式分析　｜189

9.3.4　配色方案　｜190

9.3.5　佳作欣赏　｜191

9.4　商务风格网页　｜192

9.4.1　项目分析　｜192

9.4.2　案例分析　｜192

9.4.3　版式分析　｜193

9.4.4　配色方案　｜194

9.4.5　佳作欣赏　｜195