网页配色设计手册

第1章  网页的基础知识

色彩的基础知识 2 1.1

1.1.1　认识色彩 3

1.1.2　网页色彩的特性 4

1.1.3　色彩的属性 4

1.1.4　色彩的分类 5

1.1.5　色彩的心理感受 6

1.1.6　主色、辅助色、点缀色的关系 7

网页设计的点、线、面 8 1.2

1.2.1　点 8

1.2.2　线 9

1.2.3　面 10

网页的构成 10 1.3

1.3.1　网页的尺寸 11

1.3.2　网页标题 12

1.3.3　网站的Logo 13

1.3.4　网页页眉 14

1.3.5　网页页脚 14

1.3.6　网页导航 15

1.3.7　网页的主体内容 15

 

第2章  网页设计的五大原则

2.1　主题鲜明性原则 17

2.2　形式统一性原则 20

2.3　色彩和谐性原则 24

2.4　简洁清晰性原则 27

2.5　界面友好性原则 31

 

第3章  网页设计的基础色

3.1　红 36

3.1.1　认识红色 36

3.1.2　洋红&胭脂红 37

3.1.3　玫瑰红&朱红 37

3.1.4　鲜红&山茶红 38

3.1.5　浅玫瑰红&火鹤红 38

3.1.6　鲑红&壳黄红 39

3.1.7　浅粉红&博朗底酒红 39

3.1.8　威尼斯红&宝石红 40

3.1.9　灰玫红&优品紫红 40

3.2　橙 41

3.2.1　认识橙色 41

3.2.2　橘红&橘色 42

3.2.3　橙色&阳橙 42

3.2.4　蜜橙&杏黄 43

3.2.5　沙棕&米色 43

3.2.6　灰土&驼色 44

3.2.7　椰褐&褐色 44

3.2.8　柿子橙&酱橙色 45

3.2.9　金茶色&肤色 45

3.3　黄 46

3.3.1　认识黄色 46

3.3.2　黄&铬黄 47

3.3.3　金色&香蕉黄 47

3.3.4　鲜黄&月光黄 48

3.3.5　柠檬黄&万寿菊黄 48

3.3.6　香槟黄&奶黄 49

3.3.7　土著黄&黄褐 49

3.3.8　卡其黄&含羞草黄 50

3.3.9　芥末黄&秋菊色 50

3.4　绿 51

3.4.1　认识绿色 51

3.4.2　黄绿&苹果绿 52

3.4.3　嫩绿&叶绿 52

3.4.4　草绿&苔藓绿 53

3.4.5　芥末绿&橄榄绿 53

3.4.6　枯叶绿&碧绿 54

3.4.7　绿松石绿&青瓷绿 54

3.4.8　孔雀石绿&铬绿 55

3.4.9　孔雀绿&钴绿 55

3.5　青 56

3.5.1　认识青色 56

3.5.2　青&铁青 57

3.5.3　深青&天青 57

3.5.4　群青&石青 58

3.5.5　青绿&青蓝 58

3.5.6　瓷青&淡青 59

3.5.7　白青&青灰 59

3.5.8　水青&藏青 60

3.5.9　清漾青&浅葱色 60

3.6　蓝 61

3.6.1　认识蓝色 61

3.6.2　蓝色&天蓝色 62

3.6.3　蔚蓝色&普鲁士蓝 62

3.6.4　矢车菊蓝&深蓝 63

3.6.5　道奇蓝&宝石蓝 63

3.6.6　午夜蓝&皇室蓝 64

3.6.7　浓蓝色&蓝黑色 64

3.6.8　爱丽丝蓝&水晶蓝 65

3.6.9　孔雀蓝&水墨蓝 65

3.7　紫 66

3.7.1　认识紫色 66

3.7.2　紫&淡紫色 67

3.7.3　靛青色&紫藤 67

3.7.4　木槿紫&藕荷色 68

3.7.5　丁香紫&水晶紫 68

3.7.6　矿紫&三色堇紫 69

3.7.7　锦葵紫&淡紫丁香 69

3.7.8　浅灰紫&江户紫 70

3.7.9　蝴蝶花紫&蔷薇紫 70

3.8　黑、白、灰 71

3.8.1　认识黑、白、灰 71

3.8.2　白&月光白 72

3.8.3　雪白&象牙白 72

3.8.4　10%亮灰&50%灰 73

3.8.5　80%炭灰&黑 73

 

第4章  网页的布局

网页的布局方式 75 4.1

4.1.1　国字型布局 75

4.1.2　拐角型布局 77

4.1.3　封面型布局 80

4.1.4　对称型布局 82

4.1.5　口字型布局 84

4.1.6　通栏型布局 85

4.1.7　骨骼型布局 88

网页版面设计的常用技巧 90 4.2

4.2.1　对比技巧 90

4.2.2　重复技巧 92

4.2.3　分类技巧 92

旅游主题网页设计 93 4.3

4.3.1　设计说明 93

4.3.2　不同布局方式解析 94

4.3.3　其他旅游网站布局解析 95

4.3.4　同类网页欣赏 96

 

第5章  不同行业的网页色彩搭配

服饰类网页设计 99 5.1

5.1.1　活泼风格的网页设计 100

5.1.2　极简风格的网页设计 101

5.2　美容、护肤类网页设计 103

5.2.1　浪漫风格的美容、护肤类网页设计 103

5.2.2　典雅风格的美容、护肤类网页设计 104

食品类网页设计 106 5.3

5.3.1　写实风格的食品类网页设计 107

5.3.2　清爽风格的食品类网页设计 108

数码类网页设计 110 5.4

5.4.1　理性风格的数码类网页设计 111

5.4.2　新锐风格的数码类网页设计 112

5.5　汽车类网页设计 114

5.5.1　含蓄风格的汽车类网页设计 115

5.5.2　高调风格的汽车类网页设计 116

5.6　奢侈品类网页设计 118

5.6.1　优雅风格的奢侈品类网页设计 119

5.6.2　神秘风格的奢侈品类网页设计 120

5.7　艺术设计类网页设计 122

5.7.1　插画风格的艺术设计类网页设计 123

5.7.2　拼贴风格的艺术设计类网页设计 124

5.8　游戏类网页设计 126

5.8.1　趣味风格的游戏类网页设计 126

5.8.2　未来感风格的游戏类网页设计 128

旅游类网页设计 130 5.9

5.9.1　民族风格的旅游类网页设计 131

5.9.2　轻松风格的旅游类网页设计 132

家居类网页设计 134 5.10

温馨风格的家居类网页设计 135 5.10.1

素雅风格的家居类网页设计 136 5.10.2

购物类网页设计 138 5.11

时尚风格的购物类网页设计 138 5.11.1

活泼风格的购物类网页设计 140 5.11.2

教育类网页设计 142 5.12

创新风格的教育类网页设计 143 5.12.1

严肃风格的教育类网页设计 144 5.12.2

医疗类网页设计 146 5.13

简洁风格的医疗类网页设计 147 5.13.1

现代风格的医疗类网页设计 148 5.13.2

体育类网页设计 150 5.14

积极风格的体育类网页设计 151 5.14.1

整洁风格的体育类网页设计 152 5.14.2

餐饮类网页的设计方案 154 5.15

企业类网页的设计方案 155 5.16

数码类网页的设计方案 156 5.17

公益类网页的设计方案 157 5.18

农业类网页的设计方案 159 5.19

 

第6章  网页色彩的视觉印象

6.1　清凉 162

6.2　热情 164

6.3　干净 166

环保 168 6.4

6.5　坚硬 170

6.6　理性 172

6.7　健康 174

6.8　甜蜜 176

6.9　生机 178

朴实 180 6.10

清新 182 6.11

欢乐 184 6.12

温柔 186 6.13

成熟 188 6.14

音乐狂欢夜活动的网页设计 190 6.15

设计说明 190 6.15.1

不同视觉印象解析 191 6.15.2

其他音乐网页不同视觉感受解析 193 6.15.3

同类网页欣赏 194 6.15.4

 

第7章 网页设计秘笈

7.1　网页文字的排版技巧 196

7.2　首页设计的重要性 197

7.3　如何把握网页的一致性 198

7.4　首页中的文字处理技巧 200

7.5　导航栏的种类 201

7.6　网页Banner的构图技巧 202

7.7　网页配色的基本原则 204

7.8　网页设计中要提高用户体验 204

7.9　扁平化设计五大原则 205