网页艺术设计

《网页艺术设计》是一本专门介绍网页艺术设计相关知识的学习工具书，全书共7 章，主要包括艺术设计快速入门、色彩搭配与版式布局、字体与图形元素设计、创意设计和艺术基调以及典型行业设计赏析5 个部分。本书主体内容采用了基础知识介绍+ 案例鉴赏的方式讲解网页设计知识与技巧，书中提供了不同类型的网页设计案例，从不同角度讲解网页设计的技巧和注意事项。图文搭配的内容编排方式能让读者“一举两得”，不仅学习了别人的设计方法，还能够看到实际的应用效果。

《网页艺术设计》适合作为学习网页设计、前端设计、平面设计读者的入门级教材，也可以作为大中专院校网页设计相关专业的教材或网页制作培训机构的教学用书。此外，本书还可以作为网页设计师、网站建设与开发人员、平面设计师、前端设计师及网页设计爱好者岗前培训、扩展阅读、案例培训、实战设计的参考用书。

祝彬，乐山师范学院美术与设计学院副教授，2016年捷克帕拉茨基大学访问学者，2019年日本武藏浦和学院访问学者。从事景观、室内、视觉传达设计等10余年，曾出版多本设计相关图书，深受广大读者喜爱；公开发表设计作品30余件，论文20余篇；指导多名学生考上日本东京女子美术大学、京都造型大学等著名大学研究生。

前言

编写原因

随着我们在网络世界的探索逐渐加深，成千上万的网站不断建立，这些网站若要吸引用户增大浏览量，恰当的网站内容选取和网页设计效果呈现是十分重要的两个因素，巨大的需求从而使网页设计成为炙手可热的行业。而一个网页设计师应该具备哪些基本技能呢？这些知识主要包括色彩运用、字体设计、结构编排等，这些技能的掌握不仅要基本的网页设计知识，更需要从其他案例作品中汲取养分，为此我们编写了本书。

本书内容

本书共7章，从艺术设计快速入门、色彩搭配与版式布局、字体与图形元素设计、创意设计和艺术基调以及典型行业设计赏析5个部分讲解了网页艺术设计的相关知识。各部分的具体内容如下所述。

部分 章节 内容

艺术设计快速入门 第1章 该部分介绍了网页艺术设计的入门知识，包括网页概念常识、基本的布局方式以及设计发展趋势等内容

色彩搭配与版式布局 第2~3章 该部分分别介绍了色彩和版式这两大设计内容，首先介绍了色彩基础知识、基础色相、配色方案和搭配技巧，然后介绍了版式的基本元素、布局形式和呈现技巧

字体与图形元素设计 第4章 该部分主要介绍了网页设计中不可忽视的两大元素——文字和图形，介绍了常见的文字设计技巧和图形设计方法。设计人员可以从本部分中得到启发

创意设计和艺术基调 第5~6章 该部分主要介绍了各种网页艺术设计的形式、设计的创意方法和设计技巧，包括修辞技巧、基本原则、特色元素和常见风格，旨在全方位提升设计人员的审美能力

典型行业设计赏析 第7章 该部分是网页艺术设计的行业赏析部分，以不同行业及领域的网页类型为基础，介绍了电商类网页设计、休闲生活类网页设计、文化艺术类网页设计以及其他类型网页的设计技巧

怎么学习

内容上——实用为主，涉及面广

本书涉及网页艺术设计的不同内容，介绍了设计人员必须掌握的基本技能，包括入门知识、色彩搭配、版式布局、字体与图形元素设计、创意设计和艺术基调以及典型行业设计赏析，很多内容前后关联，互相补充，读者通过对这些内容的学习，可以使个人设计水平获得较大的提升。

结构上——版块设计，案例丰富

本书特别注重版块化的编排形式，每个版块的内容均有案例配图展示，每个网页设计的案例都提供了配色信息和设计赏析内容。对大案例进行分析时，还划分了思路赏析、结构赏析、配色赏析和设计思考4个版块，以从不同角度分析该网页艺术设计的创意点。这样的版式结构能清晰地表达我们需要呈现的内容，也使读者更容易接受。

视觉上——配图精美，阅读轻松

为了让读者充分认识网页设计的艺术性和前卫性，经过我们的精心挑选，无论是案例配图还是欣赏配图，都非常注重配图的美观和版式，是值得读者欣赏的设计作品，力图使读者通过精美的配图提升自己的审美情趣，学习到更多的网页设计技巧。

读者对象

本书适合作为学习网页设计、前端设计、平面设计读者的入门级教材，也可以作为大中专院校网页设计相关专业的教材或网页制作培训机构的教学用书。此外，本书还可以作为网页设计师、网站建设与开发人员、平面设计师、前端设计师及网页设计爱好者岗前培训、扩展阅读、案例培训、实战设计的参考用书。

本书服务

本书额外附赠了丰富的学习资源，包括配套课件、相关图书参考课件、相关软件自学视频，以及海量图片素材等。本书赠送的资源均以二维码形式提供，读者可以使用手机扫描右方的二维码下载使用。由于编者经验有限，加之时间仓促，书中难免会有疏漏和不足，恳请专家和读者不吝赐教。

编 者

目录

第1章网页艺术设计快速入门

1.1　网页艺术设计概述 2

1.1.1　什么是网页艺术设计 3

1.1.2　网页页面等级 3

1.1.3　网页艺术设计原则 4

1.1.4　网页艺术设计流程 7

1.2　了解网站基础布局 9

1.2.1　网站Logo 10

1.2.2　网站Banner 10

1.2.3　导航栏 11

1.2.4　主体内容 12

1.2.5　标题 13

1.2.6　页眉 13

1.2.7　页脚 14

1.2.8　广告区 14

1.2.9　Flash 动画 15

1.3　网页艺术设计的发展趋势 16

1.3.1　视差滚动技术 17

1.3.2　滚动加载页面内容 17

1.3.3　全屏图片背景 18

1.3.4　扁平化网页设计 19

1.4　常见的网站类型 20

1.4.1　门户网站 21

1.4.2　电商网站 21

1.4.3　企业网站 22

1.4.4　个人网站 23

1.4.5　视频网站 24

第2章网页色彩搭配秘诀

2.1　色彩基础知识 26

2.1.1　色相、纯度、明度 27

2.1.2　主色、辅助色、点缀色 29

2.1.3　邻近色、对比色 30

2.1.4　认识色彩的混合 31

2.2　网页基础色相配色 32

2.2.1　红色 33

2.2.2　橙色 35

2.2.3　黄色 37

2.2.4　绿色 39

2.2.5　蓝色 41

2.2.6　紫色 43

2.2.7　黑、白、灰 45

2.3　常见的网页配色方案 47

2.3.1　柔和明亮 48

2.3.2　洁净爽朗 50

2.3.3　女性化风格 52

2.4　网页设计的色彩搭配技巧 54

2.4.1　冷色调搭配 55

2.4.2　暖色调搭配 57

2.4.3　网站主题色搭配 59

第3章网页版式设计与布局

3.1　版式设计的基本元素 62

3.1.1　网页版式中的点 63

3.1.2　网页版式中的线 65

3.1.3　网页版式中的面 67

3.2　常见的网页布局形式 69

3.2.1　“国”字形布局 70

3.2.2　“T”形结构布局 72

3.2.3　封面型布局 74

3.3　网页版式设计的呈现技巧 76

3.3.1　重复与交错 77

3.3.2　节奏与韵律 79

3.3.3　对称与均衡 81

3.3.4　利用留白区域 83

3.3.5　规范对齐 85

第4章网页字体与图形元素设计手法

4.1　网页字体元素设计 88

4.1.1　增加文字的易读性 89

4.1.2　对文字进行强调 91

4.1.3　文字颜色的多样性 93

4.1.4　外文字体花式运用 95

4.1.5　文字图形化 97

4.2　网页图形元素设计 98

4.2.1　图形的象征意义 99

4.2.2　情感渲染 101

4.2.3　夸张式图形 103

4.2.4　直观表达的图形 105

4.2.5　圆形的运用 107

4.2.6　常见的几何图形 109

第5章网页的创意设计方法

5.1　网页修辞手法运用 112

5.1.1　想象 113

5.1.2　比喻 115

5.1.3　借代 117

5.1.4　虚实 119

5.1.5　幽默 121

5.2　网页艺术设计常用技巧 122

5.2.1　跟随流行趋势 123

5.2.2　制造梦幻神奇 125

5.2.3　突出画面人物 127

5.2.4　大幅配图 129

5.2.5　改变视觉惯性 131

5.2.6　小中见大 133

5.2.7　少就是多 135

第6章网页设计的艺术基调

6.1　网页设计的基本原则 138

6.1.1　强调原则 139

6.1.2　简约原则 141

6.1.3　平衡原则 143

6.1.4　对比原则 145

6.1.5　统一原则 147

6.2　网页中的特色元素 149

6.2.1　中国风元素运用 150

6.2.2　网页动画设计 152

6.3　常见的网页设计风格 154

6.3.1　金属风格 155

6.3.2　无边框风格 157

6.3.3　插画风格 159

6.3.4　现实风格 161

第7章典型行业网页设计赏析

7.1　电商类网页设计 164

7.1.1　食品网站艺术设计 165

7.1.2　珠宝饰品类网站艺术设计 167

7.1.3　鞋类网站艺术设计 169

7.1.4　家具类商城艺术设计 171

7.1.5　综合电商网站艺术设计 173

【深度解析】综合电商网站艺术设计 173

7.2　休闲生活类网页设计 176

7.2.1　门户网站艺术设计 177

7.2.2　旅游类网站艺术设计 179

7.2.3　婚恋交友类网站艺术设计 181

7.2.4　医疗保健类网站艺术设计 183

7.2.5　游戏类网站艺术设计 185

7.2.6　餐饮酒店类网站艺术设计 187

【深度解析】餐饮酒店类网站艺术设计 187

7.3　文化艺术类网页设计 190

7.3.1　音乐类网站艺术设计 191

7.3.2　教育类网站艺术设计 193

7.3.2　新闻类网站艺术设计 195

【深度解析】新闻类网站艺术设计 195

7.4　其他类型网页设计 198

7.4.1　科技类网站艺术设计 199

7.4.2　个人类网站艺术设计 201

7.4.3　在线视频类网站艺术设计 203

【深度解析】在线视频类网站艺术设计 203