网页界面艺术设计（第2版）

第2版前言
从 2015年 6月本书第 1版出版 ,到现在已经五年多了。这期间除了作者所在的上海第二工业大学应用艺术设计学院相关专业的学生选用该书作为教材外，许多兄弟院校和网页设计爱好者也先后将该书选为教材和参考书。在这五年的使用过程中，许多老师和读者留言对作者给予支持和鼓励，并对该书提出了宝贵的使用意见和修改建议。 本次再版主要修订了第 1版中表述不够准确的专业名词和表达方法，删减了表述过时的文字内容，增加了必要的设计内容和设计方法。保留了原有的参考图片，也许有些网站的内容已经更新（网页设计是个日新月异的行业），但是它们留下的设计作品依然经典！ 在多年的网页界面设计教学实践中，作者发现无论时代怎样变迁，设计行业如何发展，设计的初衷永远不会改变，以人为本的设计理念，形式和功能的完美结合是所有设计行业从业者所追求的终目标。如果本书能在各位未来的设计师追求终极目标的路上助一臂之力，那将是作者莫大的荣幸！也希望各位同行在使用本书的过程中提出宝贵、中肯的批评和建议，这将是激励作者继续前进的动力源泉！ 再次对此次再版过程中提供帮助的各位人士表示衷心感谢！ 作 者 2020.5  第 1版前言 现代网络技术的飞速发展令人目不暇接。网页的界面设计也经历了形形色色的流行趋势，无论网页技术如何变迁，网页界面的设计风格如何更迭，设计师要从用户的需求出发，设计功能性与形式感完美统一的网页作品的基本原则是不变的。 在崇尚个性的今天，网页设计也不可避免地需要体现自身的特点。在遵循基本设计原则的前提下，设计师需要根据行业和用户的差异，合理增加个性化因素。这首先要求网页设计师要对行业和用户做一个理性的调查和分析，再结合设计师自身对艺术、审美、时尚的理解，运用感性和理性的手法，在网页设计作品中综合完美地表现出来，这也是现代网页设计师的根本使命。 简单地说，一个成功的网页设计作品（即信息）能够高效，并且准确无误地传递给用户，用户对网页内容印象深刻并保留深入了解的欲望。这其中，组成网页作品的文字、色彩、图形或图像、链接、导航等元素是构成网页作品成功的几个不可或缺的必要条件。如何将这些可视和可用的元素以恰当的形式表现出来，同时完美地展现其功能性，是目前很多设计者需要认真思考的，这也是本书作者的一个简单、基本的初衷，希望能以此为契机，和网页设计界的同仁们共同探讨未来网页设计发展的各种可能性。由于能力所限，本书内容或许会有各种不妥之处，望各位批评、指正、包涵！

作 者 2015.6 

本教材主要以网页界面的艺术设计为主题。从艺术设计角度讲解网页设计的相关知识，如网页的版式设计、网页的色彩设计、网页的字体设计等。在此基础上，以用户为导向，强调网页中的导航、链接的的人性化设计。总而言之，是在视觉美的基础上，强调网页设计的功能性和实用性。 本教材适用学生范围：学院——艺术设计学院、数字艺术学院、计算机学院。 专业——视觉传达设计、多媒体设计、数字艺术设计、数字技术设计。

本教材主要以网页界面的艺术设计为主题。从艺术设计角度讲解网页设计的相关知识，如网页的版式设计、网页的色彩设计、网页的字体设计等。在此基础上，以用户为导向，强调网页中的导航、链接的的人性化设计。总而言之，是在视觉美的基础上，强调网页设计的功能性和实用性。 本教材适用学生范围：学院——艺术设计学院、数字艺术学院、计算机学院。 专业——视觉传达设计、多媒体设计、数字艺术设计、数字技术设计。

何丽萍
单位：上海第二工业大学 
职务、职称：副教授  
性别：女 年龄：41 
专业：设计艺术学
学历：硕士 
研究领域：数字媒体艺术、视觉传达设计 
研究成果：发表《试论网页设计教学结构的合理构建》、《图形符号在数字图形界面中的应用和设计分析》、《网页色彩的导向性》等专业论文十余篇；编写教材《网页界面艺术设计》。

1.1网页设计基础  2

1.1.1 网页的定义和基本构成  2

1.1.2 网页的分类  3

1.1.3 网页的特点  6

1.2网页的整体规划  7

1.2.1前期调研阶段  8

1.2.2创意与风格定位阶段  8

1.2.3 设计制作阶段  9

1.2.4 发布、测试和维护阶段  9

2.1网页版面设计的基本原则  12

2.1.1 强调  14

2.1.2 重复  14

2.1.3 对比  17

2.1.4 平衡  22

2.1.5 对齐  25

2.1.6节奏和韵律  28

2.1.7 简约  29

2.2网页版面设计的基本方法  32

2.2.1网页版面的视觉引导  32

2.2.2页面内容  33 

2.2.3视觉元素 34

2.3网页的版面结构 35

2.3.1规则的组合方式 35

2.3.2 不规则的组合方式 44

2.4网页版面的基本类型 46

3.1网页文字的使用和编排 58

3.1.1字体的使用 58

3.1.2字号的使用 59

3.1.3字距和行距 60

3.1.4文字的编排 60

3.2网页文字设计的基本原则和方法 63

3.2.1 文字设计的基本原则 64

3.2.2 文字设计方法 69

4.1图像的规格 78

4.1.1 图像的使用规则 78

4.1.2 图像的格式 81

4.2图像和风格主题 83

4.3统一与背景 88

4.3.1 图像的统一 88

4.3.2 图像的背景 89

5.1网页色彩模式 94

5.1.1 216网络安全色 94

5.1.2 网页色彩模式 95

5.2网页配色原则 96

5.2.1色彩的鲜明性 96

5.2.2色彩的独特性 96

5.2.3色彩的适宜性 101

5.2.4色彩的联想性 103

5.3网页配色方法 110

5.3.1单色的使用 110

5.3.2相似色的使用 116

5.3.3补色的使用 118

6.1导航 122

6.1.1导航的位置 122

6.1.2导航的表现形式 129

6.1.3导航的功能性 132

6.2主页 132

6.3页脚 140

6.4网页中的图形符号 142

本教材主要以网页界面的艺术设计为主题。从艺术设计角度讲解网页设计的相关知识，如网页的版式设计、网页的色彩设计、网页的字体设计等。在此基础上，以用户为导向，强调网页中的导航、链接的的人性化设计。总而言之，是在视觉美的基础上，强调网页设计的功能性和实用性。 本教材适用学生范围：学院——艺术设计学院、数字艺术学院、计算机学院。 专业——视觉传达设计、多媒体设计、数字艺术设计、数字技术设计。

何丽萍
单位：上海第二工业大学 
职务、职称：副教授  
性别：女 年龄：41 
专业：设计艺术学
学历：硕士 
研究领域：数字媒体艺术、视觉传达设计 
研究成果：发表《试论网页设计教学结构的合理构建》、《图形符号在数字图形界面中的应用和设计分析》、《网页色彩的导向性》等专业论文十余篇；编写教材《网页界面艺术设计》。