网页布局与配色实战

　　网页的版式布局和色彩搭配往往是设计者感到头疼的问题，尤其是那些非美术或平面设计出身的网页设计者，他们在掌握了网页制作软件和相关技术的同时，还想多学习一些色彩的基础知识和网站的配色方法。为此，除了借鉴大量的成功作品，体会不同的网页设计配色技巧以外，直接的方法就是寻找一本理想的网页配色参考书，通过学习，可以快速提高网页的配色水平。
　　本书共11章，在讲解版式布局和网页配色原理的基础之上，采用了大量国内外网站的配色成功案例进行实战分析，帮助读者在鉴赏过程中逐步掌握不同情况下网页配色的规律与技巧，进而成为网页设计的行家里手。
　　本书可供网页设计师和网页制作人员参考和使用，也可以作为相关专业的教材和辅导用书。

第1章 网页设计入门
1.1 网页设计的原则 / 2
1.1.1 了解用户需要 / 2
1.1.2 内容与形式的统一 / 2
1.1.3 主题鲜明 / 4
1.1.4 易用性 / 4
1.1.5 整体统一 / 6
1.1.6 对比性 / 7
1.2 网页设计的定位 / 7
1.2.1 什么才是好的网页设计 / 7
1.2.2 怎样做好网页设计 / 8
1.3 色彩在网页设计中的重要性 / 11

第2章 网站页面的策划与布局
2.1 网站栏目和页面设计策划/ 14
2.1.1 为什么要进行策划 / 14
2.1.2 网站的栏目策划 / 15
2.1.3 网站的页面策划 / 16
2.2 网站布局的基本元素/ 17
2.2.1 网站Logo / 17
2.2.2 网站Banner / 17
2.2.3 导航栏 / 18
2.2.4 主体内容 / 18
2.2.5 文本 / 19
2.2.6 图像 / 19
2.2.7 Flash 动画 / 19
2.2.8 页脚 / 20
2.2.9 广告区 / 20
2.3 版面布局设计/ 20
2.3.1 版面布局原则 / 21
2.3.2 纸上布局 / 22
2.3.3 软件布局 / 23
2.4 常见的版面布局形式/ 23
2.4.1 “国”字型布局 / 23
2.4.2 “厂”字型布局 / 23
2.4.3 “框架”型布局 / 24
2.4.4 “封面”型布局 / 24
2.4.5 Flash 型布局 / 24
2.5 页面排版布局趋势/ 25

第3章 网站页面的视觉元素设计
3.1 网页构成/ 28
3.1.1 点的应用 / 28
3.1.2 线的应用 / 28
3.1.3 面的应用 / 29
3.2 页面中的文字设计/ 29
3.2.1 文字的字体、字号、行距 / 30
3.2.2 文字的颜色 / 30
3.2.3 文字的图形化 / 31
3.2.4 让文字易读 / 31
3.3 页面中的图像应用/ 32
3.3.1 常见的网页图像格式 / 32
3.3.2 网页中应用图像的注意要点 / 33
3.3.3 让图片更合理 / 34
3.4 网站导航设计/ 35
3.4.1 导航设计的基本要求 / 35
3.4.2 全局导航的基础要素 / 36
3.4.3 导航设计注意要点 / 36
3.4.4 让按钮更易点击 / 37

第4章 网站页面创意和风格

4.1 页面设计创意思维/ 40
4.1.1 什么是创意 / 40
4.1.2 创意思维的原则 / 40
4.1.3 创意过程 / 41
4.2 创意的方法/ 41
4.2.1 富于联想 / 42
4.2.2 巧用对比 / 42
4.2.3 大胆夸张 / 42
4.2.4 趣味幽默 / 43
4.2.5 善用比喻 / 43
4.2.6 以小见大 / 43
4.2.7 偶像崇拜 / 44
4.2.8 古典传统 / 44
4.2.9 流行时尚 / 44
4.2.10 设置悬念 / 45
4.2.11 突出人物 / 45
4.2.12 神奇梦幻 / 45
4.2.13 综合创意 / 46
4.3 网站页面风格/ 46
4.3.1 金属风格 / 46
4.3.2 大幅配图 / 47
4.3.3 面板风格 / 47
4.3.4 像素风格 / 47
4.3.5 三维风格 / 47
4.3.6 书报风格 / 48
4.4 网页的创意视觉表现/ 48

第5章 页面色彩搭配基础知识
5.1 色彩的原理/ 52
5.2 色彩的分类/ 52
5.2.1 无彩色 / 52
5.2.2 有彩色 / 53
5.3 色彩的三要素/ 54
5.3.1 明度 / 54
5.3.2 色相 / 55
5.3.3 纯度 / 55
5.4 色彩模式/ 56
5.4.1 RGB 模式 / 56
5.4.2 CMYK 模式 / 56
5.4.3 Lab 模式 / 57
5.5 色调分析/ 57
5.5.1 纯色调 / 57
5.5.2 中纯调 / 58
5.5.3 低纯调 / 58
5.5.4 明灰调 / 58
5.5.5 中灰调 / 58
5.5.6 暗灰调 / 59
5.5.7 中暗调 / 59
5.5.8 深暗调 / 59

第6章 常用色彩处理手法
6.1 色彩对比/ 62
6.1.1 色相对比 / 62
6.1.2 明度对比 / 67
6.1.3 纯度对比 / 68
6.1.4 色彩的面积对比 / 70
6.1.5 色彩的冷暖对比 / 71
6.2 色彩的调和/ 73
6.2.1 色彩调和的原则 / 73
6.2.2 色彩调和的基本方法 / 75
6.3 色彩调和的类型/ 76
6.3.1 同类色调和 / 76
6.3.2 渐变色调和 / 77
6.3.3 对比调和 / 78
6.3.4 同一调和 / 78
6.3.5 面积调和 / 79

第7章 网页配色标准与技巧
7.1 网页配色安全/ 82
7.1.1 216 网页安全色 / 82
7.1.2 网页安全色配色辞典 / 82
7.1.3 使用各种不同的安全色调色板 / 83
7.2 网页配色技巧/ 84
7.2.1 背景与文字颜色搭配 / 84
7.2.2 使用一种色彩 / 86
7.2.3 两色搭配是用色的基础 / 86
7.2.4 色彩的数量 / 87
7.3 使用配色软件/ 88
7.3.1 ColorKey Xp 软件 / 88
7.3.2 Color Scheme Designer / 88
7.3.3 Check My Colours / 89
7.3.4 ColorJack / 89
7.3.5 Color Schemer Online v2 / 90

第8章 主色、辅助色、点缀色
8.1 主色的魅力/ 92
8.1.1 主色可以决定整个作品风格 /92
8.1.2 主色的面积原理 / 92
8.1.3 区别主色的关键 / 94
8.2 辅助色的秘密/ 94
8.2.1 辅助色的功能 / 94
8.2.2 背景色是特殊的辅助色 / 95
8.2.3 选择辅助色的诀窍 / 96
8.3 点缀色的应用/ 96
8.3.1 点缀色也会影响页面风格 / 96
8.3.2 点缀色能让页面放光彩 / 97

第9章 常见基本配色搭配方案
9.1 配色色标/ 100
9.2 强烈/ 102
9.2.1 推荐配色方案 / 102
9.2.2 配色解析 / 103
9.3 丰富/ 103
9.3.1 推荐配色方案 / 103
9.3.2 配色解析 / 105
9.4 浪漫/ 105
9.4.1 推荐配色方案 / 105
9.4.2 配色解析 / 106
9.5 奔放/ 106
9.5.1 推荐配色方案 / 107
9.5.2 配色解析 / 108
9.6 柔和 / 108
9.6.1 推荐配色方案 / 108
9.6.2 配色解析 / 109
9.7 热情 / 109
9.7.1 推荐配色方案 / 110
9.7.2 配色解析 / 111
9.8 动感 / 111
9.8.1 推荐配色方案 / 111
9.8.2 配色解析 / 112
9.9 高雅 / 112
9.9.1 推荐配色方案 / 113
9.9.2 配色解析 / 114
9.10 流行 / 114
9.10.1 推荐配色方案 / 114
9.10.2 配色解析 / 116
9.11 清新 / 116
9.11.1 推荐配色方案 / 116
9.11.2 配色解析 / 117
9.12 古典 / 118
9.12.1 推荐配色方案 / 118
9.12.2 配色解析 / 119
9.13 堂皇 / 119
9.13.1 推荐配色方案 / 119
9.13.2 配色解析 / 121
9.14 神奇 / 121
9.14.1 推荐配色方案 / 121
9.14.2 配色解析 / 122
9.15 职业 / 122
9.15.1 推荐配色方案 / 123
9.15.2 配色解析 / 124


第10章 网站色相与配色
10.1 红色系的配色/ 126
10.1.1 红色系的分类/ 126
10.1.2 红色适合的配色方案/ 128
10.1.3 适用红色系的网站/ 130
10.2 橙色系的配色/ 131
10.2.1 橙色系的分类/ 131
10.2.2 橙色适合的配色方案/ 133
10.2.3 适用橙色系的网站/ 134
10.3 黄色系的配色/ 135
10.3.1 黄色系的分类/ 135
10.3.2 黄色适合的配色方案/ 137
10.3.3 适用黄色系的网站/ 138
10.4 紫色系的配色/ 141
10.4.1 紫色系的分类/ 141
10.4.2 紫色适合的配色方案/ 142
10.4.3 适用紫色系的网站/ 144
10.5 绿色系的配色/ 146
10.5.1 绿色系的分类/ 146
10.5.2 绿色适合的配色方案/ 147
10.5.3 适用绿色系的网站/ 149
10.6 蓝色系的配色/ 151
10.6.1 蓝色系的分类/ 151
10.6.2 蓝色适合的配色方案/ 153
10.6.3 适用蓝色系的网站/ 154
10.7 无彩色的配色/ 157
10.7.1 白色系的网站/ 157
10.7.2 灰色系的网站/ 157
10.7.3 黑色系的网站/ 157

第11章 各类网站设计与配色案例解析
11.1 个人网站/ 160
11.1.1 个人网站特点/ 160
11.1.2 页面分析/ 160
11.1.3 网站配色讲解/ 161
11.2 政府网站/ 161
11.2.1 政府网站的特点/ 161
11.2.2 页面分析/ 163
11.2.3 网站配色讲解/ 164
11.3 艺术网站/ 164
11.3.1 艺术网站的特点/ 164
11.3.2 页面分析/ 165
11.3.3 网站配色讲解/ 165
11.4 在线视频网站/ 166
11.4.1 在线视频网站的特点/ 166
11.4.2 页面分析/ 166
11.4.3 网站配色讲解/ 167
11.5 音乐网站/ 167
11.5.1 音乐网站的特点/ 167
11.5.2 页面分析/ 168
11.5.3 网站配色讲解 / 168
11.6 游戏网站 / 168
11.6.1 游戏网站的特点 / 168
11.6.2 页面分析 / 170
11.6.3 网站配色讲解 / 171
11.7 婚恋交友网站 / 171
11.7.1 婚恋交友网站的特点 / 171
11.7.2 页面分析 / 172
11.7.3 网站配色讲解 / 172
11.8 旅游网站 / 173
11.8.1 旅游网站的特点 / 173
11.8.2 页面分析 / 175
11.8.3 网站配色讲解 / 176
11.9 医疗保健网站 / 176
11.9.1 医疗保健网站的特点 / 176
11.9.2 页面分析 / 177
11.9.3 网站配色讲解 / 178
11.10 设计装饰类网站 / 179
11.10.1 设计装饰类网站的特点 / 179
11.10.2 页面分析 / 179
11.10.3 网站配色讲解 / 180
11.11 房地产网站 / 180
11.11.1 房地产网站的特点 / 180
11.11.2 页面分析 / 180
11.11.3 网站配色讲解 / 181
11.12 餐饮酒店网站 / 182
11.12 餐饮酒店网站/ 182
11.12.1 餐饮酒店网站的特点/ 182
11.12.2 页面分析/ 182
11.12.3 网站配色讲解/ 183
11.13 新闻网站/ 184
11.13.1 新闻网站的特点/ 184
11.13.2 页面分析/ 185
11.13.3 网站配色讲解/ 187
11.14 教育网站/ 188
11.14.1 教育网站的特点/ 188
11.14.2 页面分析/ 188
11.14.3 网站配色讲解/ 189
11.15 综合门户网站/ 189
11.15.1 综合门户网站的特点/ 190
11.15.2 页面分析/ 190
11.15.3 网站配色讲解/ 191
11.16 女装网站/ 191
11.16.1 女装网站的特点/ 191
11.16.2 页面分析/ 192
11.16.3 网站配色讲解/ 192
11.17 美容化妆网站/ 193
11.17.1 美容化妆网站的特点/ 193
11.17.2 页面分析/ 194
11.17.3 网站配色讲解/ 195
11.18 IT 数码网站/ 196
11.18.1 IT 数码网站的特点/ 196
11.18.2 页面分析/ 197
11.18.3 网站配色讲解/ 198
11.19 家居日用品网站/ 198
11.19.1 家居日用品网站的特点/ 198
11.19.2 页面分析/ 199
11.19.3 网站配色讲解/ 200
11.20 男性商品类网站/ 201
11.20.1 男性商品类网站的特点/ 201
11.20.2 页面分析/ 201
11.20.3 网站配色讲解/ 201
11.21 鞋类网站/ 202
11.21.1 鞋类网站的特点/ 202
11.21.2 页面分析/ 202
11.21.3 网站配色讲解/ 202
11.22 童装网站/ 204
11.22.1 童装网站的特点/ 204
11.22.2 页面分析/ 204
11.22.3 网站配色讲解/ 204
11.23 珠宝饰品网站/ 206
11.23.1 珠宝饰品网站的特点/ 206
11.23.2 页面分析/ 206
11.23.3 网站配色讲解/ 207
11.24 食品网站/ 207
11.24.1 食品网站的特点/ 207
11.24.2 页面分析/ 208
11.24.3 网站配色讲解/ 208

附录1 各行业网站色彩搭配/ 209
附录2 配色形容词色卡/ 214
附录3 页面安全色/ 218
附录4 160 种配色方案/ 221

　　怎样才能设计出与众不同的漂亮网页呢？一个优秀的网页除了有合理的版式、恰当的内容之外，精美的色彩搭配也是优秀的网页必不可少的要素。在网络世界中，人们不再局限于简单的文字与图片的组合，而是更加追求网页的美观与舒适。布局版式风格特色鲜明，并有与网站主题相得益彰的配色方案，是决定网站成功与否的重要因素。所以网页设计者不仅要掌握基本的网页制作技术，还需要掌握有关页面布局风格设计及色彩搭配等方面的知识和技巧，才能成为一名优秀的网页设计师。
　　本书主要内容
　　本书在讲解版式布局和网页配色原理的基础之上，采用了大量国内外网站的配色成功案例进行实战分析。帮助读者在鉴赏过程中逐步掌握不同情况下网页配色的规律与技巧，进而成为网页设计的行家里手。本书共11章。
　　第1章网页设计入门基础，讲解网页设计的原则、什么才是好的网页设计、好的网页设计是怎样做出来的、色彩在网页设计中的重要性。
　　第2~4章页面的布局与创意风格，讲述网站布局的基本元素、网站页面布局方法、常见的版面布局形式、网站页面的视觉元素文字、图片和导航的设计、网站页面创意的方法和风格。
　　第5~8章介绍色彩的基础知识、常用色彩处理手法、网页配色标准与技巧、主色、辅色、点缀色。帮助读者掌握最基本的理论，为系统学习网页配色知识打好基础。
　　第9章基本配色搭配，介绍常见的配色搭配方法，详解配色方案，供读者即学即用。
　　第10章网站色相与配色，重点介绍不同色彩红、橙、黄、绿、青、蓝、紫、黑、灰的配色方案，和适用的网站分析，同时提供经典案例，对其进行解析。
　　第11章各类网站设计与配色案例解析，介绍18类不同网站的特点、网页精彩配色
　　案例。把理论融入到设计中，既可锻炼网页设计者对网页设计的分析能力和审美能力，又能够激发出网页设计者的创意与灵感，使网页设计者能够很好地掌握网页配色在设计中的应用要点。
　　本书主要特点
　　●通过本书，可以系统地学习网站色彩知识，掌握网站色彩搭配技巧，提升网站色彩运用理念。读者也可以将它作为一本字典式的工具书。
　　●紧跟当今最前卫的色彩流行趋势。本书展示了最时尚的网页设计风格，提供了最实用的设计版式和最前卫的配色经验，拓展读者的创意空间。强化对视觉心理的分析能力，把握设计网页与色彩心理表现之间的关系，发挥读者的视觉审美能力和艺术鉴赏能力。
　　●本书通过分析不同类型网站的特点，并针对不同的网站主题来合理布置色彩，有针对性地使用色彩来体现网站的特色，使读者快速领会配色要诀。
　　●通过案例培养读者的实际操作能力，将理论与实际相结合，注重读者思维、方法、技能的多向性，及创造性思维能力的培养，让读者在获得知识和提高能力上同步发展。
　　●提供最丰富的配色方案和版式设计方案。颜色搭配得当，网页就成功了一半，再搭配合理的版式设计，使网页更成功。
　　●本书通过优秀的网页设计作品，以多个角度、多个案例的结合，为读者的实务设计提供新的灵感和创意点。在开阔读者眼界的同时，结合理论进行讲解，帮助读者全面地掌握网站设计的精髓。
　　本书作者
　　本书由上海工程技术大学铁钟编写，由上海市设计学IV类高峰学科项目-包装文化与品牌研究团队资助，另外参加编写的还有王彩梅、程振宏、冯雷雷、晁辉、陈石送、何琛、吴秀红、王冬霞、何本军、乔海丽、邓仰伟、孙雷杰、孙文记、何立、倪庆军、赵良涛、徐曦、刘桂香、葛俊科、葛俊彬等。在编写本书的过程中，我们以科学、严谨的态度，力求精益求精，但书中不足之处在所难免，欢迎广大读者批评指正。
　　2017年6月
　　作者