网页色彩搭配宝典

第1章 网页设计知识

1.1 网页设计基础. 3

1.1.1 网页的相关概念3

1.1.2 网页界面设计的特点4

1.2 网页设计界面介绍 5

1.3 网页设计主题分析 6

1.3.1 网页需求分析7

1.3.2 网页建设策划7

1.4 网页设计布局分类 7

1.4.1 骨骼型8

1.4.2 对称型9

1.4.3 曲线型10

1.4.4 满屏型11

1.4.5 倾斜型12

1.4.6 分割型13

1.4.7 自由型14

1.4.8 焦点型14

1.5 网页的潮流元素. 15

1.5.1 纹理15

1.5.2 混合字体16

1.5.3 半透明17

1.5.4 矢量插画18

1.5.5 三维18

1.5.6 边框19

第2章 色彩基础知识

2.1 色彩属性 23

2.2 色环 24

2.3 色彩对比 26

3.1 认识网页的基本结构 33

3.1.1 网页的规格34

3.1.2 网页的LOGO.35

3.1.3 顶部通栏36

3.1.4 网页文本37

3.1.5 图像的设计38

3.1.6 文字的设计38

3.1.7 页眉和页脚39

第3章 网页设计的制作流程

3.1.8 多媒体40

3.2 网页设计的基本步骤 41

3.2.1 确定主题42

3.2.2 确定构图43

3.2.3 确定风格44

3.2.4 确定色彩搭配45

第4章 网页设计的原则与配色

4.1 统一原则 48

4.1.1 相似元素的规律排列50

4.1.2 内容与文字要相互统一51

4.2 对比原则 52

4.2.1 矛盾和冲突54

4.2.2 模块大小的对比55

4.3 协调原则 56

4.3.1 颜色协调58

4.3.2 图形协调59

4.4 突出原则 60

4.4.1 使用颜色的进退感突出内容62

第4章 网页设计的原则与配色

4.4.2 使用放大图形的方法突出主体内容63

4.5 个性原则 64

4.5.1 立体感66

4.5.2 特殊的构成方式67

4.6 实用原则 68

4.6.1 清晰地展现页面内容70

4.6.2 合理搭配颜色71

4.7 分割原则 72

4.7.1 使用色彩进行页面分割74

4.7.2 使用模块进行页面分割75

5.1 扁平化设计风格. 78

5.1.1 颜色的高饱和度80

5.1.2 以简约为基础81

5.2 3D 设计风格. 82

5.2.1 生动地展现产品84

5.2.2 点、线、面结合的3D 效果.85

5.3 极简设计风格. 86

5.3.1 用图讲故事88

5.3.2 形的构思89

5.4 全屏设计风格. 90

5.4.1 合理的文字布局92

5.4.2 使用高清的图片93

5.5 瀑布流设计风格. 94

5.5.1 多行多列的布局方法96

第5章 网页设计的常见风格

5.5.2 无限加载的网页内容97

5.6 标准化设计风格. 98

5.6.1 完善的布局100

5.6.2 清晰的显示内容101

5.7 个性化设计风格. 102

5.7.1 大胆的色彩搭配独具个性104

5.7.2 独特的页面布局和个性文字105

5.8 矢量化设计风格. 106

5.8.1 矢量化更能表现细节108

5.8.2 矢量化表现立体感109

5.9 复古化设计风格. 110

5.9.1 复古给人一种特殊的情感112

5.9.2 复古是一种回忆113

第6章 不同类型的网页设计

6.1 商业企业 116

6.1.1 有正式感的布局模式118

6.1.2 模块清晰化119

6.2 综合购物 120

6.2.1 回到首页功能122

6.2.2 模块分类明确123

6.3 影视娱乐 124

6.3.1 构图个性突出重点.126

6.3.2 吸引视觉注意力127

6.4 教育文化 128

6.4.1 布局整洁舒适130

6.4.2 使用图片展示重点内容131

6.5 多媒体数码. 132

6.5.1 颜色的神秘性表现出产品的特性134

6.5.2 使用立体感全方位地展示135

6.6 产品类网站. 136

6.6.1 图文并茂的模块布局138

6.6.2 使用产品本身的特性生动表示产品139

6.7 休闲生活类网页. 140

6.7.1 使用图片生动描写内容142

6.7.2 使用个性的构图模式143

6.8 个人主页 144

6.8.1 适合自己的风格146

6.8.2 侧重表现个人信息内容147

7.1 网页色彩的冷与暖 150

7.1.1 冷暖色调的对比152

7.1.2 根据不同产品设置相应的冷暖搭配153

7.2 网页色彩的轻与重 154

7.2.1 网页色彩的轻颜色表现出的效果156

7.2.2 根据颜色的重量感制造层次157

7.3 网页色彩的柔与硬 158

7.3.1 使用柔性色彩可以使人心情愉悦160

7.3.2 色彩柔与硬的结合161

7.4 网页色彩的前进与后退. 162

7.4.1 使用色彩的前进与后退突出重点内容164

7.4.2 打造空间感165

7.5 网页色彩的标准与个性. 166

7.5.1 使页面更具熟悉感168

第7章 网页的色彩情绪

7.5.2 使用产品的颜色进行个性化表达169

7.6 网页色彩的平淡与刺激. 170

7.6.1 缓和视觉冲击172

7.6.2 面积的大小影响视觉的感受173

7.7 网页色彩的朴实与华贵. 174

7.7.1 点缀色展现页面的华贵感176

7.7.2 纯度低的颜色展现页面的朴实感177

7.8 网页色彩的古朴与青春. 178

7.8.1 中纯度、中明度的搭配给人一种古朴

的感觉180

7.8.2 鲜艳的色彩搭配给人一种青春活力的

感觉181

7.9 网页色彩的兴奋和沉静. 182

7.9.1 暗色调制造出来的沉静感觉184

7.9.2 明度高的颜色给人一种兴奋的感觉185

7.10 网页色彩中的男性与女性. 186

7.10.1 灰色展现出男性理智稳重的气质188

7.10.2 红色系可展示女性的柔美189

第8章 新潮的网页设计方案

方案1：扁平化的极简主义风潮 191

方案2：错位排版的网页布局. 192

方案3：以互动图表的方式展示信息内容.193

方案4：以光效和质感装饰的网页 194

方案5：网格化和几何图形化的设计趋势.195

方案6：使用炫酷文字吸引视觉注意 196

方案7：使用“幽灵”效果实现简约美 197

方案8：黑白灰的主体设计配色 198

方案9：鼠标移动产生的视觉差效果 199

方案10：去界面化的设计方法. 200

方案11：一屏以内清晰地展示内容 201

方案12：隐藏的导航栏模式. 202

方案13：现代复古风格的网页设计 203

方案14：细节个性十足的炫酷网页 204

方案15：小清新的视觉感受. 205

方案16：使用细小的部分展现网页特色. 206

方案17：非常大胆的空间留白. 207

方案18：滚动浏览的网页设计. 208

方案19： 背景以大图趋小的方式搭配

设计感文字 209

方案20：用强弱对比展示信息重点 210