第1篇 基础篇 2
第1章 初识网站色彩 2
1.1 色彩基础知识 3
1.2 认识网页色彩 8
1.3 Web 216安全色 10
1.4 色彩的三要素与色立体 12
1.4.1 色彩的色相 12
1.4.2 色彩的明度 13
1.4.3 色彩的纯度 13
1.5 网站的色彩应用 14
1.5.1 购物网站色彩应用 14
1.5.2 社交网站色彩应用 15
1.5.3 企业门户网站色彩应用 16
1.5.4 休闲旅游网站色彩应用 17
1.5.5 时政新闻网站色彩应用 18
1.5.6 微博/博客色彩应用 18
1.5.7 影音视频网站色彩应用 19
1.5.8 电子商务网站色彩应用 20
高手私房菜 21
技巧1:配色前不能忽略的前期工作 21
技巧2:特殊配色效果的实现 22
第2章 色彩与情感表达 23
2.1 如何选择网页的基本色 24
2.2 与行业特点相匹配的色彩选择 28
2.3 增强食欲的餐饮类网站色彩选择 33
2.4 男性青睐的色彩选择 34
2.5 女性青睐的色彩选择 35
2.6 与季节对应的色彩选择 36
2.7 体现都市氛围的色彩选择 39
2.8 体现自然氛围的色彩选择 40
2.9 表现健康形象的色彩选择 44
高手私房菜 45
技巧:不同配色风格的融合方法——采用“隐藏”手段 45
第3章 网页配色必备的6种手法 47
3.1 手法一:动静交映——网页中的“静态色彩”与“动态色彩” 48
3.1.1 静态色彩 48
3.1.2 动态色彩 49
3.2 手法二:重点突出——网页中主题色彩的运用 50
3.3 手法三:一枝独秀——单一页面的色彩布局 53
3.3.1 色彩平衡 53
3.3.2 色彩面积对比 55
3.3.3 色彩情感与插图情感一致 56
3.4 手法四:层峦叠嶂——多栏目页面的色彩布局 57
3.5 手法五:色以类聚——网站同色系规划 60
3.5.1 “可读性”的色彩设计 60
3.5.2 色彩计划 62
3.6 手法六:我行我素——色彩设计与网站风格 64
高手私房菜 66
技巧:网页配色——透明度 66
第2篇 进阶篇 68
第4章 网站配色要领 68
4.1 网页的版式结构 69
4.1.1 “国”字型网站结构 69
4.1.2 “吕”字型网站结构 70
4.1.3 “川”字型网站结构 71
4.1.4 “回”字型网站结构 72
4.2 网站配色常识 73
4.2.1 网站Logo的配色常识 73
4.2.2 网站Banner的配色常识 76
4.2.3 网站导航的配色常识 79
4.2.4 网站主页面的配色常识 81
4.2.5 网站子页面的配色常识 83
4.3 网页配色技巧 84
4.3.1 巧用对比色配色 84
4.3.2 巧用邻近色配色 85
4.3.3 巧用冷暖互补配色 87
4.3.4 巧用色彩的叠加配色 88
4.3.5 巧用色彩的柔光配色 90
4.3.6 巧用色彩的透明度配色 91
高手私房菜 93
技巧1:自由格式型网站 93
技巧2:色彩搭配原则 94
第5章 网页设计中的色彩应用技巧 95
5.1 基于色相、色调的配色方案 96
5.1.1 认识色相与色调 96
5.1.2 实例1——科技网配色 101
5.2 基于色彩情感的配色方案 102
5.2.1 认识色彩情感 103
5.2.2 实例2——女性购物网配色 106
5.3 体现节奏和韵律的色彩 107
5.3.1 认识色彩的韵律 107
5.3.2 实例3——家居生活网配色 109
高手私房菜 113
技巧:体现节奏和韵律的色彩在网站制作中的应用 113
第6章 配色工具的使用 115
6.1 建立漂亮的颜色方案 116
6.2 通过内置的工具获取配色方案 117
6.3 高级颜色公式 118
6.4 高级颜色方案分析 122
6.5 网页配色工具的使用 125
6.5.1 使用Kuler网页配色工具 125
6.5.2 使用Web Safe Colours网页配色工具 127
6.5.3 使用Color Schemer网页配色工具 130
6.5.4 使用Colortoy网页配色工具 131
6.5.5 使用Colorjack网页配色工具 132
高手私房菜 132
技巧:配色工具Color Scheme Designer的应用 133
第7章 网站文字与色彩 139
7.1 网站标志色彩的分析 140
7.2 网页插图色彩的选取与使用 141
7.3 图像色彩艺术 143
7.4 文字色彩艺术 145
7.4.1 字号对文字显示的影响 145
7.4.2 文字与背景色彩的搭配 147
7.4.3 文字与图片的配色 149
7.5 图文色彩排版 152
高手私房菜 153
技巧:常用文字颜色的搭配方案 153
第8章 根据网站色调配色 155
8.1 红色主题色调网站 156
8.1.1 网站类型分析 156
8.1.2 配色详解 157
8.2 橙色和黄色主题色调网站 159
8.2.1 网站类型分析 159
8.2.2 配色详解 160
8.3 黄绿色主题色调网站 162
8.3.1 网站类型分析 162
8.3.2 配色详解 163
8.4 绿色和青绿色主题色调网站 165
8.4.1 网站类型分析 165
8.4.2 配色详解 166
8.5 蓝色和蓝紫色主题色调网站 170
8.5.1 网站类型分析 170
8.5.2 配色详解 171
8.6 紫色主题色调网站 175
8.6.1 网站类型分析 175
8.6.2 配色详解 176
8.7 紫红色主题色调网站 177
8.7.1 网站类型分析 177
8.7.2 配色详解 178
8.8 黑色主题色调网站 179
8.8.1 网站类型分析 179
8.8.2 配色详解 180
8.9 白色主题色调网站 181
8.9.1 网站类型分析 181
8.9.2 配色详解 182
8.10 灰色主题色调网站 183
8.10.1 网站类型分析 183
8.10.2 配色详解 184
高手私房菜 185
技巧:适用粉色系的网站配色 185
第9章 根据网站风格配色 187
9.1 简洁、质朴的配色 188
9.1.1 配色分析 188
9.1.2 配色详解 189
9.2 尊贵、华丽的配色 190
9.2.1 配色分析 190
9.2.2 配色详解 192
9.3 男性化的配色 193
9.3.1 配色分析 193
9.3.2 配色详解 194
9.4 女性化的配色 194
9.4.1 配色分析 194
9.4.2 配色详解 195
9.5 自然舒适的配色 196
9.5.1 配色分析 196
9.5.2 配色详解 197
9.6 古典主义的配色 197
9.6.1 配色分析 197
9.6.2 配色详解 199
9.7 生动活泼的配色 199
9.7.1 配色分析 199
9.7.2 配色详解 200
9.8 柔软稚嫩的配色 201
9.8.1 配色分析 201
9.8.2 配色详解 202
9.9 成熟稳重的配色 203
9.9.1 配色分析 203
9.9.2 配色详解 204
9.10 厚重、金属风格的配色 204
9.10.1 配色分析 204
9.10.2 配色详解 206
9.11 不同国家的配色 206
9.11.1 韩国风格的网站配色分析 207
9.11.2 欧洲风格的网站配色分析 208
9.11.3 印度风格的网站配色分析 209
9.11.4 日本风格的网站配色分析 210
9.11.5 中国风格的网站配色分析 211
9.11.6 美国风格的网站配色分析 213
9.11.7 加拿大风格的网站配色分析 214
高手私房菜 215
技巧1:不同国家的男性化网站配色 215
技巧2:不同国家的女性化网站配色 216
第10章 根据网站类别配色 217
10.1 购物网站配色 218
10.1.1 配色分析 218
10.1.2 制定配色方案 218
10.1.3 配色步骤 219
10.2 社交网站配色 219
10.2.1 配色分析 220
10.2.2 制定配色方案 220
10.2.3 配色步骤 220
10.3 企业门户网站配色 222
10.3.1 配色分析 222
10.3.2 制定配色方案 222
10.3.3 配色步骤 223
10.4 休闲旅游网站配色 224
10.4.1 配色分析 224
10.4.2 制定配色方案 224
10.4.3 配色步骤 225
10.5 时政新闻网站配色 225
10.5.1 配色分析 225
10.5.2 制定配色方案 226
10.5.3 配色步骤 226
10.6 微博/博客配色 227
10.6.1 配色分析 227
10.6.2 制定配色方案 228
10.6.3 配色步骤 228
10.7 影音视频网站配色 229
10.7.1 配色分析 229
10.7.2 制定配色方案 230
10.7.3 配色步骤 230
10.8 电子商务网站配色 232
10.8.1 配色分析 232
10.8.2 制定配色方案 232
10.8.3 配色步骤 233
高手私房菜 234
技巧:搜索网站配色 234
第11章 根据网站区域配色 235
11.1 千变万化的导航区域配色 236
11.2 导航区域配色分析 237
11.3 导航区域配色详解 238
11.4 网站主体内容色彩为主 239
11.5 网站主体内容配色分析 240
11.6 网站主体内容配色详解 240
11.7 周边色彩为辅 242
11.8 网站边缘配色分析 243
11.9 网站边缘配色详解 245
11.10 导航与网站风格协调统 246
11.11 可用性Flash导航 247
11.12 网站区域配色的基本法则 248
高手私房菜 251
技巧:色彩的黄金法则(60:30:10) 251
第3篇 实战案例篇 254
第12章 购物网站配色全过程 254
12.1 实例解析 255
12.2 主要配色法则及设计 256
12.3 实战操作 257
高手私房菜 261
技巧:如何让网站的主题更加突出 261
第13章 社交网站配色全过程 265
13.1 实例解析 266
13.2 主要配色法则及设计 267
13.3 实战操作 272
高手私房菜 276
技巧:社交网站的配色 276
第14章 企业门户网站配色全过程 279
14.1 实例解析 280
14.2 主要配色法则及设计 284
14.3 实战操作 286
高手私房菜 289
技巧:企业门户网站的配色 289
第15章 休闲旅游网站配色全过程 291
15.1 实例解析 292
15.2 主要配色法则及设计 296
15.3 实战操作 298
高手私房菜 301
技巧:休闲旅游网站的配色 301
第16章 时政新闻网站配色全过程 303
16.1 实例解析 304
16.2 主要配色法则及设计 306
16.3 实战操作 309
高手私房菜 313
技巧:时政新闻类网站的配色 313
第17章 微博/博客配色全过程 315
17.1 实例解析 316
17.2 主要配色法则及设计 320
17.3 实战操作 321
高手私房菜 326
技巧:微博/博客的配色 326
第18章 影音视频网站配色全过程 329
18.1 实例解析 330
18.2 主要配色法则及设计 334
18.3 实战操作 336
高手私房菜 339
技巧:影音视频网站的配色 339
第19章 电子商务网站配色全过程 341
19.1 实例解析 342
19.2 主要配色法则及设计 343
19.3 实战操作 345
高手私房菜 349
技巧:电子商务网站的配色 349