第4章 Web艺术设计
内容简介
本章主要介绍Web设计所需
的美学原理和设计法则，具
体涉及到影响网页观感的色
彩、文字、图像、导航元件
以及版面设计等方面的知识。
学习目标
• 1．掌握：技术和艺术之间的限制关系；网页色彩
设计的一般原则；网页设计流程、网页元素的基本
知识及基本制作方法；网页创意设计的原则以及设
计要点；导航设计的原则；版式设计的基础知识。
• 2．理解：网页设计中应用到的网络技术与传播特
点、与传统媒体设计的区别；版式设计和平面设计
的基本法则；色彩、文字、图像、版面设计中的一
些概念。
• 3．了解：不同的制作软件、视听语言基础和网页
设计的未来趋势。
4.1 Web设计环境
在进行网页设计和制作的过程中，
了解网络的相关技术以及访问者的外在
条件（如访问者的访问速度、计算机平
台、使用何种浏览器等）是十分重要的。
这些因素将影响你设计的Web文件大小和
设计复杂程度。
了解技术和媒体因素是网页艺术设
计的前提，技术和艺术的结合是网页设
计的最高境界。
4.1.1 Web的技术环境（1）
从技术为人服务的观念出发，应
尽可能地从用户的角度来进行Web设
计。要想有更多的人能很好地访问
你所设计的站点，就应使Web站点适
应不同的浏览器、操作系统和计算
机平台访问的技术环境。
4.1.1 Web的技术环境（2）
1、关于浏览器的技术
网页设计者首先面临的问题是如何使
网页在不同浏览器中都能正常显示。由
于每种浏览器对HTML文件标签的解释都
不同，导致对HTML文件的显示方式的解
释存在差异。因此设计者应尽量在多种
浏览器环境中测试自己的工作，以便对
用户使用的浏览器提出要求或说明。
4.1.1 Web的技术环境（3）
为适合不同浏览器，可以采用以下几种方式：
（1）采用可兼容的技术
尽量使设计的网页可以在各种浏览器中使用。不使用最
新版本的HTML规范编码，便于与各种版本的浏览器兼容。
（2）采用最新的技术设计
这就要求用户采用最新的浏览器，还要有能够显示特
殊媒体类型的增强插件，这样才能跟上设计者的步伐。
（3）采用对用户指定特定浏览器的方式
4.1.1 Web的技术环境（4）
总之，在对浏览器的选择上，可以采用
一种能促进渐进开发的策略。
例如：在创建站点时使用前一个旧版本的
HTML来编码，然后慢慢向其中加入一些增强
特性，不断向最新版本靠近，使用户使用新
旧版本的浏览器都可访问。若要加入一些需
要插件支持的动画或特殊效果，则要使用大
多数浏览器都支持的开发工具。
4.1.1 Web的技术环境（5）
2、关于屏幕分辨率的技术
显示器的屏幕分辨率：是指显示器屏幕
所能显示的象素总数，这一指标是由显示器和
显示卡的性能决定的。通常用水平和垂直方向
的象素数目的乘积表示。如：800600。
随着计算机显示器和显示卡性能的提
高，在网页设计中，很多人已经将800600作
为基本的分辨率。
4.1.1 Web的技术环境（6）
3、关于宽带的技术
网站设计者要考虑用户的低带宽连接。如果由于
页面包含庞大的、详细的图形或复杂的动画而导致
下载速度缓慢，用户就会在页面内容显示之前改去
访问别的站点。因此网站设计者应在不同的连接速
度下进行浏览测试，以获得在不同的连接速度下浏
览网页的真实情况。
在设计时应尽量简化页面，少使用图形或将图形
大小限制在10－15KB范围之内。
4.1.2 Web的媒体环境（1）
考虑到计算机屏幕是网页的最终目的地，与
传统的基于纸张的媒体完全不同，故在规划Web站
点时应考虑以下几点：
1、计算机屏幕的形状
2、要有足够的对比度以利于用户阅读
3、屏幕分辨率比印刷品低得多
由于信息显示的载体是计算机屏幕，因此必须
针对屏幕进行设计，即应考虑布局、字体和颜色，
以及它们如何显示。还应考虑超文本的非线性特点，
把合适的链接与相关内容有机地结合起来。
4.1.2 Web的媒体环境（2）
4、Web站点的观感
观感：指用户必须接触到的Web站点界面。
由于用户访问站点的过程，就是观看并感
觉站点的过程，他们可以根据站点允许的自
由度，自主选择信息的访问路径。因此站点
的观感就是站点的运行方式以及传达站点给
用户的个性化设计。
4.1.3 Web的设计流程（1）
1、Web设计的两个阶段
Web的设计流程通常包含两个阶段：
第一阶段：了解客户需求，然后根据不同的网
站类型进行创意，同时与技术人员沟通，了解设计
所需的技术难度，确定方案。
第二阶段：制作出页面样例，与客户交流征求
意见，然后修改，直到确认，由制作人员协助完成
设计。
应该注意：制作前进行完整详尽的规划是十分必
要的。
4.1.3 Web的设计流程（2）
2、Web设计的一般步骤
Web站点的设计一般有如下步骤，但为了达到
用户所希望的观感，实践中还需要灵活掌握。
1、首先要明确网站的性质和目的，这样才能针对不
同类型的网站进行创意。
2、要分析网站的用户，使设计者的目标与用户目标
尽量和谐统一。
3、确定页面的结构和框架。有时可根据好的创意来
决定页面结构。
4、应在不同机器、浏览器和不同速度下测试网页，
及早查处所出现的问题。
4.1.3 Web的设计流程（3）
3、Web站点的主要类型
了解Web站点的类型可在设计网站时进行更
好的创意。目前网上主要的Web站点类型有：
1、公告牌
2、出版物
3、虚拟画廊
4、产品支持
5、电子商务和在线购物
6、内联网和外联网
7、特殊兴趣、大众兴趣及非盈利性组织
4.2 Web的设计元素
4.2.1
色彩
网页的色彩选择和搭配在网页制作中起
到非常重要的作用，也是网页设计的重点之
一，因为它将决定浏览者对网站的第一印象，
好的色彩搭配可以使网页独具魅力，相反则
提不起浏览者的兴趣。网页色彩的选择包括：
色调、背景、文字、图表、边框、链接应采
用何种色彩，如何搭配等内容。
4.2.1 色彩（1）
1、网页设计的色彩基础
（1） 颜色的产生
色彩感觉：当光照射在物体上时,物体的反射光
刺激人的视觉细胞，并作用到大脑，从而引起彩
色感觉。物体色是由于其反射特性引起的。
（2）色彩的属性（或三要素）
任何一种色彩都具有三个要素：色相、饱和度、
亮度（或明度）。
4.2.1
色彩（2）
1、网页设计的色彩基础
• 色相（Hue）：指颜色的种类，它反映了颜色的
基本面貌和性质。如：红、绿、蓝等各种颜色。
• 饱和度（Saturation）：指颜色的深浅程度或
浓淡程度。一般鲜艳的色彩其饱和度都比较高，较
刺眼，故饱和度高的颜色一般不用作网页背景。
• 亮度（Brightness）： 指颜色的明暗程度。如
白色亮度高，黑色亮度低；黄色亮度最高，紫色亮
度最低。
非彩色（指黑色、白色和各种深浅不一的灰色）
只有亮度特征，没有色相和饱和度的区别。
4.2.1 色彩（3）
1、网页设计的色彩基础（续）
（3） 色彩的三原色和色环
• 三基色：任何色彩都是由三种基色（或原色）
混合而成。根据物体是否发光有两种基色系统：
• 发光物体的三基色（RGB）系统：红（R）、绿
（G）、蓝（B）；等量的三基色混合成白光（适
合发光的物体，如显示器）。
• 不发光物体的三基色（CMYK)系统：青（Cyan）、
紫或洋红（Magenta）、黄（Yellow）；等量的三
基色混合成黑色（适合不发光的物体，如颜料）。
4.2.1 色彩（4）
1、网页设计的色彩基础（续）
（3） 色彩的三原色和色环
色环：将色彩按“红黄绿青蓝
紫红”依次过渡渐变，就可以得到一个色
环。
在色环中，可以将颜色分为：暖色、中性
色和冷色几种。
色彩的色环
4.2.1 色彩（5）
1、网页设计的色彩基础（续）
在24色色环中，根据位置的不同，可以构成4种关系，
它们分别是：
• 同类色：色环中相隔45的两个色相。属较弱的对比效
果，是极为协调和单纯的色调。
• 临近色：色环中相隔90的两个色相。色彩倾向近似，
色调统一和谐，感情特征一致。
• 对比色：色环中相隔135的两个色相。属中强对比效
果。
• 互补色：色环中相隔180的两个色相。是对比最强的色
组，富于刺激性，有强烈的视觉冲击力和热烈感。
4.2.1 色彩（6）
2、色彩感觉
（1） 心理感受
人们在面对色彩时，心理会受到颜色的影
响而变化，这种变化虽然有个人的差异，但
大多数会有冷暖、轻重、软硬、华丽朴素、
积极消极等几方面的心理效果。
虽然色彩本身不带任何含义，但人的心
理感觉将它们分成不同的类别。
4.2.1 色彩（7）
2、色彩感觉（续）
（2） 颜色的联想
色彩的联想作用虽然是属于心理学的问题，
但它的适用性在设计上是很重要的。由于色
彩与人的情绪有着微妙的联系，因此利用不
同的色调设计网页会给浏览者不同的心理感
受。
4.2.1 色彩（8）
2、色彩感觉（续）
一般认为，不同的色调对浏览者的感觉有如下规律：
• 红色：是一种激奋的色彩。代表热情、奔放、喜悦、
庆典，有刺激效果，能使人产生冲动，有愤怒、热情和活
力的感觉。
• 绿色：介于冷暖色之间，代表植物、生命、生机、蓬
勃向上、和睦、宁静、健康、安全的感觉。
• 橙色：具有轻快、欢欣、热烈、温馨、时尚的效果。
• 黄色：代表高贵、富有，具有快乐、希望、智慧和轻快
的个性，它的亮度最高。
4.2.1 色彩（9）
2、色彩感觉（续）
• 蓝色：是最具凉爽、清新、专业的色彩。代表天空、清
爽、深远的感觉，能体现柔顺、淡雅、浪漫的气氛。
• 紫色：代表浪漫、爱情，并给人以神秘、压迫的感觉。
• 棕色：代表土地。
• 白色：代表纯洁、单纯、简单，具有洁白、明快、纯真、
清洁的感受。
• 黑色：代表严肃、庄严、夜晚、沉着，具有深沉、神
秘、寂静、悲哀、压抑的感觉。
• 灰色：代表阴暗、消极，具有中庸、平凡、温和、谦
让、中立和高雅的感觉。
4.2.1 色彩（10）
2、色彩感觉（续）
有些色彩有双重的意义，此外不同的国
家、民族、年龄层次的人对色彩有不同的理
解，因此设计者必须根据使用对象的特点来
选择色彩，以便尽量符合人们普遍接受的意
义。
4.2.1 色彩（11）
3、色调和色彩的搭配
（1）色调：在颜色三要素中，色相容易区别，
但饱和度和亮度有时不易区别，因此将亮度和饱和
度合在一起称为色调。色调是色彩作品的总倾向和
总特征，是直接传达设计意念的关键。
色彩的主色调分为以色相关系为主的调子，如：
冷色调、暖色调、红色调、绿色调等；也可分为以
灰色、明暗关系为主的调子，如：明灰调、暗色调
等。
4.2.1 色彩（12）
3、色调和色彩的搭配
（2）配色：指对两种以上的颜色进行组合和搭配，以
便产生更美的效果。主要有以下几种方式：
• 色相搭配：分为类似色搭配和补色搭配两种。主要利
用了“当两种颜色放在一起时，会产生相互反衬的对比效
应，并各自走向自己的极端”。
• 亮度搭配：分为高亮度、中亮度、低亮度和明暗对比。
暗色与高亮色对比，会给人清晰强烈的刺激；中性色与低
亮度色对比；给人模糊、朦胧、深奥的感觉；纯色与高亮
度色的对比，给人跳跃、舞动的感觉；纯色与低亮度色对
比，给人以强硬和不可改变的感觉。
4.2.1 色彩（13）
（2）配色（续）
• 饱和度搭配：分为高饱和度、中饱和度、低
饱和度的搭配。纯色或三基色之间的对比给人的视
觉刺激最强烈，使色彩的效果更明确和肯定。通常
可通过加入黑色、白色或灰色来降低饱和度。
• 整体色调搭配：设计作品给观众的感受是由整
体配色效果决定的，作品的最终的配色效果都由整
体的色调而定，并取决于配色的色相、亮度、饱和
度的关系和色彩面积大小的关系。
4.2.1 色彩（14）
4、计算机色彩
计算机显示器显示的任意一种色彩都是由RGB
（红、绿、蓝）三种基色光混合而成的。在HTML语
言或其它图像处理软件中，色彩的表达是用这三种
颜色的数值来表示的。如：红色（255，0，0）【
十进制】或（FF0000）【十六进制】，十六进制颜
色值为6位数字，前2位定义红色，之间2位定义绿
色，最后2位定义蓝色。
4.2.1 色彩（15）
4、计算机色彩
在计算机显示中有关色彩的概念有：
（1）色彩模式（主要有三种）
• RGB模式：任意色彩由RGB三基色构成适合于本
身发光的物体的颜色（如显示器）。
• CMYK模式：图像由青（C）、洋红（M)、黄（Y
）和黑（K）四种颜色混合而成。适合于不发光的
物体颜色（如：彩色印刷及绘画领域）
• Lab模式：Photoshop的标准模式，也是RGB向
CMYK转换的中间模式。
4.2.1 色彩（16）
4、计算机色彩
（2）色深
色深是指显示卡的数模转换器的位数，是决定显
示卡所能输出的颜色数的重要参数。显示卡所能输
出的颜色数与色深的关系为：
色深位数
颜色数＝2
通常见到的GIF图像的色深为8位，可以显示256种
颜色。32位色深能显示1677万种颜色，称为真彩色
（True Color）。
4.2.1 色彩（17）
4、计算机色彩
（3）混色
当在低色深的显示器上显示高色深的图像时，将
丢失很多颜色信息，这时图像看上去成立颗粒状，
这种现象称为混色。
（4）网络安全色
当色深为8位时，显示的颜色数为28＝256种，一
般可在各种显示器上显示，并称这种具有256种颜
色显示的情况称为网络安全色。
4.2.1 色彩（18）
5、网页色彩搭配的原则
色彩搭配应以大众欣赏习惯为标准，同时兼顾网
站专业特点和艺术规律，一般应遵循以下原则：
（1）色彩的合理性：网页的色彩要引人注目，
同时还要兼顾人眼的生理特点，不要用大面积的高
纯度色相，这样容易使人疲劳。
（2）色彩的艺术性：色彩应服务于网站内容，
和网站的气氛和主要内容相适应。
（3）色彩的独特性：要有与众不同的色彩搭配
，突出网站的个性。
4.2.1 色彩（19）
6、搭配技巧
从人的记忆效果看，对彩色的记忆是黑白的3.5
倍，因此彩色页面比完全的黑白页面更吸引人。
（1）非彩色的搭配：黑白是最简单、最基本的
搭配；灰色是万能色，可以和任何色彩搭配，也可
帮助两种对立的色彩和谐过渡。
（2）彩色的搭配：由同类色（指同一颜色的变
淡或加深）搭配出来的页面看起来比较统一、和谐
，有层次感，比较适合技术性和专业性站点。而临
近色的搭配可使整个页面色彩丰富而不花哨。对比
色搭配时，应以一种颜色为主调（占有较大面积）
，同时辅以对比色，起到丰富点缀的作用。
4.2.1 色彩（20）
6、搭配技巧
（3）网页色彩掌握的过程
随着网页制作经验的积累，颜色使用有
这样一个趋势：
单色  五彩缤纷  标准色  单色
总之，不要将所有颜色都用到，要保持主
色调的一致，初学者最好将颜色控制在三种
以内。
4.2.2
文本（1）
虽然网络上可承载的元素越来越多
，但文字一直是很重要的部分。在同一
语言环境中，文字的传达是比较准确的
，因此文字是任何出版物（包括网络）
的核心。
网页中的文本有两种状态：HTML文
本和图形文件格式的文字图像。
4.2.2
文本（2）
1、字体
文本构成的因素是字体和字号，它们都是由汉字
软件自动生成的。字体是一种灵活的媒介，对不同
字体的选择可以表达感情、语调及结构。
字体也是网页的主要组成部分，是信息的重要载
体。正确选择字体不但关系到网页的美观，还对浏
览者的阅读及信息的传达有直接的影响。
计算机能不能显示某种字体，主要取决于计算机
内的字库里是否安装了这种字体。
4.2.2
文本（3）
2、字体的分类
字体基本上可分为英文字体和中文字体两大类。
（1）英文字体：种类很多，大体上可分为有衬
线字体和无衬线字体两大类。
（2）中文字体：常见的中文字体有：宋体、黑
体、楷体、仿宋体，此外还有各种美术体（如：圆
体、综艺体、幼圆体、琥珀体、彩云体、小姚体、
长美黑等）、各种手写体（如：隶书体、新魏体、
行楷体、古印体、广告体、海报体、新潮体等）。
4.2.2
文本（4）
2、字体的分类（续）
（3）衬线和字族
• 衬线（Serif）：指加在字母主笔画上
两端的修饰性元素，其形态差异反映了不同
时代字体风格的变化。
• 字族：在计算机图形软件中，字体一般
包含字的长扁、粗细、斜直等变化的多款变
体，组成字的家族，我们称为字族。
4.2.2
文本（5）
3、字体在网页中的使用
据研究，有衬线的字体读起来更快，更易识别
。因此，报刊、杂志等读物的正文往往采用宋体。
字体及其大小决定了文本的可读性。一般在一
个页面中，最好不要使用超过三种以上的字体，否
则显得杂乱，没有主题。此外在纸张上易于阅读的
字体，可能在屏幕上却很难阅读。
最后，应确保文本的颜色与背景的颜色有足够
的对比度以利于阅读。
4.2.2
文本（6）
4、字号和字距
（1）字号
计算机中的字号是指字体在显示器上的显示尺寸大小。
网页的字号大小直接关系到阅读效果和页面容量。
字号的大小有以下三种标定方法：
• 号数制：从初号、一号到八号，有16种之多。号数越大
，字体越小。
• 级数制：从8级到96级，级数越大，字体越大。
• 点数制：从5磅到72磅，有21种之多。磅数越大，字体
越大。点数制是世界流行的计算字体的标准单位。
4.2.2
文本（7）
4、字号和字距
（2）字号在网页设计中的使用
• 网页文字的字号变化宜少不宜多，一般用9磅或11
磅（相当于WORD的五号宋体字），9磅以下的字体
不易辨认，12磅以上则浪费页面空间。
• 选择少量的字体和字号会使页面看起来显得更干
净。一般可选三种字号：14磅用于标题；12磅用
于副标题；9磅用于正文。
• 如果在网页设计中使用了一种用户没有安装的字
体，则浏览器将用缺省字体显示（PC中的英文缺
省字体是：Time New Roman）。
4.2.2
文本（8）
4、字号和字距
（3）字距和行距
• 字距：字与字之间的距离。
• 行距：行与行之间的距离。
• 字距与行距之间的比例关系：行距至少要
大于字距。加宽字距和行距有轻松、疏朗
之感。
• 行与行之间要考虑适当增加空白，以便阅
读。
4.2.2
文本（9）
4、字号和字距
（4）文本的编排方式
•
•
•
•
文字块的形状由编排形式决定，在版面设计中
，主要有如下编排方式：
两边对齐：文字组成的字群从左至右长度均齐。
显得端庄严谨。
左（或右）对齐：文字组成的字群以左（或右）
边界对齐。
中间对齐：以中心为轴，两端距离相等。
图文绕排：文字绕图形边缘自由出入，产生生动
随意之感。
4.2.2
文本（10）
4、字号和字距
（5）网页中文本使用的注意事项
•
•
•
•
•
网页中每一页的文字应尽量完整
每一页应有清晰的标题
尽量少用闪烁字
在文字使用上要特别注意易读性和趣味性
一般网页文字字体是稳定的，阅读要求识别轻松
，浓淡适宜。而标题字部分则相当于广告用字，
参与表现的尺度是无限的，但必须积极参与信息
传达和内容表现。
4.2.3
图像和VI设计（1）
图像也是传达信息的重要方法之一
，和文本相比，图像更加直观、生动
、易于理解和接受。图像可以将那些
文字无法表达的信息传达出来。文字
的精确性和图像的模糊性结合，使得
信息的传达更加完整。
4.2.3
图像和VI设计（2）
1、网页图像的文件格式
（1）数字图像的类型
根据计算机对图像的处理方式及应用软件的
使用环境不同，可以将图像分为两大类：位图图
像和矢量图形。
•位图图像：又称为栅格图像。是用小方形栅格
（即象素）组成的图像，与分辨率有关。
•矢量图像：由矢量定义的直线或曲线组成的图
像。矢量图形与分辨率无关。
4.2.3
图像和VI设计（3）
1、网页图像的文件格式（续）
（2）图像文件格式基础
图像是以文件的形式存储在计算机上的，这些
文件有各种各样的格式，每种都有自己的特点。下
面介绍一些常见的图像文件格式。
1) GIF格式文件：GIF是为网络图形传送而设计
的，采用了无损压缩技术，色深为8位。GIF还有两
个重要特点：透明和交错显示。
2) JPG格式文件：JPG是适合于照片和连续灰度
图像的最佳格式，色深24位（真彩色）。适合具有
丰富细节的图片。
4.2.3
图像和VI设计（4）
1、网页图像的文件格式（续）
（2）图像文件格式基础知识
以上两种图像格式主要用于网页设计中的，此外，还有
以下几种图像格式：
3) PNG格式文件（Portable Network Graphics）
：
PNG（便携式网络图形格式）是专为Web设计，但由
于缺乏浏览器支持，一直未能普及。PNG采用了无损
压缩技术，支持8位索引颜色、16位灰度级和24位真
彩色、透明和交错。可将8位图像压缩为比GIF更小
的文件格式。
4.2.3
图像和VI设计（5）
1、网页图像的文件格式（续）
4) BMP格式文件（Bitmap，位图）：
BMP格式是Windows中的标准图像文件格式
，有压缩和不压缩两种形式。BMP以独立于设
备的方法描述位图，有黑白、16色、256色、
真彩色等多种形式，能被多种Windows应用程
序支持。
4.2.3
图像和VI设计（6）
1、网页图像的文件格式（续）
5) TIF格式文件（Tag Image File
Format）：
TIF最早是为了存储扫描仪图像而设计。也
是PC中使用最广泛的图像文件格式。TIF支持
24位真彩色，有压缩（无损压缩）和非压缩
两种形式。其变体很多，兼容性较差。
4.2.3
图像和VI设计（7）
1、网页图像的文件格式（续）
6) TGA格式文件（Tagged Graphics）：
TGA是Truevision公司为其显卡开发的一种
图像文件格式。现已成为数字化图像，以及
运用光线跟踪算法所产生的高质量图像的常
用格式。其结构比较简单，是一种图形、图
像通用的格式，大部分为24位或32位真彩色
。
4.2.3
图像和VI设计（8）
1、网页图像的文件格式（续）
（3）Web图像的应用
Web中的图像并不像传统媒体，只要越清晰越好，网络上
的图形图像，为了方便计算机 进行存储、交换和处理，必须
要有统一的格式，而且还要受到网络传输速度的限制。因此
，如何减少图像大小并保证一定的质量，是Web设计的一个重
要问题。
为了使浏览者尽快看到图像，Web图像采用交替或顺次显示
图像文件的方法。如交错显示可以使图像边下载边显示，图
像逐渐变清晰，不必等图像全部下载完毕才看到图像。
4.2.3
图像和VI设计（9）
2、选择图形图像设计工具
目前流行的Web图形图像制作工具软件主要有：
• Adobe公司的Photoshop，这是网页设计中常用的
图像处理工具。
• Adobe的ImageReady是一个微型的Photoshop版本
，后来被集成到了Photoshop中。
• Adobe的Illustrator是一个高端的绘图工具。
• Macromedia公司的Firework是一款集图形处理和
文本处理于一体的功能强大的应用软件。
4.2.3
图像和VI设计（10）
3、网页中的图像
就形式而言，网页中的图像大体上可分为两大类
型：照片类和绘画类。
•照片类图像：是指由数码相机、扫描照片得到的
图像。它们属于全色调图像，可全方位地表现事物
的形态、结构、空间、体积、质感等视觉属性。
•绘画类图像：一般来自于手工绘画或软件制作。
如：卡通图画、装饰图案、文字图形以及用图形图
像软件加工过的照片等。
4.2.3
图像和VI设计（11）
4、网页版面中图像的编排
图像在吸引读者的注意力、传递信息、美
化版面等方面具有独特的魅力。图像的编排
主要体现在以下几方面：
（1）图像的选择与剪裁
（2）图像形状的变化
（3）虚实的变化
4.2.3
图像和VI设计（12）
5、视觉标识（VI）设计
视觉标识（VI：Visual Identity）是指通过视
觉语言的运用来树立形象和传播信息。其应用一直
是CIS（Corporate Identity System：企业识别系
统）的基础和最直接的表现形式。CIS的策划和运作
往往以VI来表现，是CIS的一部分。
当一个网站在主题和数据信息、图文材料具备之
后，下一个问题就是网站的VI策划和形象设计，它
主要包括以下几方面：
4.2.3
图像和VI设计（13）
5、视觉标识（VI）设计（续）
（1）设计网站的标志
网站标志设计和创意可从以下几种思路开始。
• 选用能代表公司形象的人物、动物、花草等。
• 对于专业性网站，用本专业有代表性的物品作
为标志。
• 最常用和简单的方式是用本网站名称的英文字
母作标志。
4.2.3
图像和VI设计（14）
5、视觉标识（VI）设计（续）
（2）选择网站的标准色彩
网站给人的第一印象是来自视觉的色彩感受，因此
确定网站的标准色彩是网站建设的重要一步。这项工作
又称为定色调。色调不同的色彩及色彩搭配所产生的效
果是不同的。
每个企业网站一般都有自己的标准色。这种标准色一
方面要能体现企业的形象，另一方面要有自己的特点。
标准色一般只能是一种，并以此为中心，利用它的明度
变化产生不同的色彩。标准色要广泛运用于网站的标志
、标题、主菜单和背景色块，给人以整体统一的感觉，
其它色彩只是作为对比和衬托。
4.2.3
图像和VI设计（15）
5、视觉标识（VI）设计（续）
（3）选择网站的标准字体
网站的标准字体是指网站用于标志、标题、主
菜单的特有字体。由于字体也具有它的性格和表情
特征，因此，为了体现站点与众不同的特有风格，
可以根据设计的需要，选择一些特别字体。
应该注意的是，使用各种特殊字体一般只能用图
形图像的形式出现，因为浏览者的计算机字库中若
没有这种特殊字体，则这种效果就无法显示出来。
4.2.3
图像和VI设计（1）
5、视觉标识（VI）设计（续）
（4）构思网站的广告词
网站设计者应努力用一句话、一个词来高
度概括网站的性质特点和网站目标，用简练
的句子来传达信息。
综上所述，标志、色彩、字体和广告词四个
方面是一个网站树立VI形象的关键，是网站
的门面工作。
4.2.4
动画（1）
网页中的插图可以像电视动画一样真实
生动，有人用情景化设计来描绘将来的网页
设计。
无论人或动物的视觉，总是先注意到运动
着的东西。因此，很多广告公司都将自己的
网络广告做成动画的形式，以便获得最大的
宣传效果。
4.2.4
动画（2）
1、Web动画的发展状况
（1）动画的初级阶段
（2）无处不在的GIF89a
（3）动画的新贵－－Shockware
（4）用Java来实现动画
（5）Flash动画和Streaming技术
4.2.4
动画（3）
2、动画制作的工具
• GIF Animation:网页中较早采用的动画软件就
是GIF Animation。其原理类似于播放幻灯片。
• Adobe Image Ready:其原理和制作效果都和GIF
Animation 一样。
• Flash：这是Macromedia公司专为网络设计的交
互式矢量动画设计软件。但播放Flash动画时必须在
浏览器中安装插件。
4.2.4
动画（4）
3、动画原理
传统的动画是由很多静态画面序列连续地播放形
成的。计算机的动画和传统的动画原理基本上是一
样的，只是有些名词叫法不同。
在计算机上，每个动画单元称为帧（Frame）。
帧速率（fps：Frame per second，指一秒钟动画所
包含的帧数）是动画概念的一项重要指标（如：录
像带的帧速率为：30fps；电影为：24fps；计算机
上的动画一般达到15fps时，播放就很流畅了）。
4.2.4
动画（5）
4、网页中的动画广告
广告的任务是在最短的时间内传达一个简洁明
了的信息或意念，因此网络动画广告的创作比一般
意义上的故事情节动画更为自由。
其次，网页上放置的动画应少而精，一帧网页上
一般放一幅动画为宜，若超过两幅，则会相互影响
，整个网页会令人眼花缭乱，反而干扰阅读。或者
设计“跳过”Flash动画的按钮，使不想看的人可以
选择。
4.2.5
视频和音频（1）
Web多媒体在信息的传递中扮演着重要和独特
的角色，因此一个网页设计师要时刻跟踪这些技术
的发展状态，对多媒体的应用应有比较理智的认识
。
音频、视频和动画都是多媒体技术的一部分。
由于网络速度的限制，目前视频和音频基本上是被
作为单独的一部分链接进页面的，还不能成为页面
布局的有机部分，故很难从设计角度进行总结，目
前主要还是考虑下载和播放的技术，并介绍一些概
念性的知识，以便对视频和音频知识有进一步的了
解。
4.2.5
视频和音频（2）
1、音频
（1）概述
声音是多媒体的一个重要方面，可最大限度地增
强展示效果，刺激观众的兴趣。
除了可通过互联网直接播放的音乐（采用所谓的
“音频流”技术）外，还有那些通过网上下载传播
的流行音乐格式（如MP3、VQF等）。数字音频文件
是声波的数字化表示，可以通过不同的平台、以不
同的格式使用。常见的AIF和WAV格式的标准数字音
频文件并未经过压缩，有时不太适合在网上使用。
4.2.5
视频和音频（3）
1、音频
（2）网上常见的音乐格式
•
•
•
•
•
•
•
•
网上使用的音频格式文件大部分经过了压缩，主要有：
MIDI（Musical Instrument Digital Interface）格式：
RA（Real Audio）格式：
MP3 （MPEG1 Player 3）格式：
MP4格式：
VQF格式：
WMA格式：
WAV（Wave From Audio File）格式：
AIF格式：
AU格式：
4.2.5
视频和音频（4）
1、音频
（3）相关概念
• 数字音乐：多媒体中的音乐有两类：音乐和音效
• 音频流：一种专门的音乐压缩技术，可实现下载与播放同
步（典型的有RA，还有微软的WMA）。
• 音乐的编辑：一般的音乐格式，可利用各种音乐编辑软件
进行剪辑、回声、反相、格式转换等编辑功能。
• 音乐的网上发布：常用的网页制作工具可以简单地把诸如
MIDI、WAV等格式文件作为网站的背景音乐，通过一些专门软
件，其它格式的文件也可以较容易地在网上进行播放或发布。
4.2.5
视频和音频（5）
2、视频
计算机上使用的是数字视频（电视电影
视频是模拟信号），它是将传统的模拟视
频片断捕捉并进行转换而成（如：VCD），
下面介绍有关视频格式和视频嵌入技术方
面的知识。
4.2.5
视频和音频（5）
（1）数字视频的主要格式
• MOV格式：这是Apple公司推出的视频格式，相应的播放
软件为Quick Time（1991－现在），也可以在PC上使用，目前
已成为桌面视频产品的工业标准。Quick Time在“视频流”技
术方面取得了不少成果，能在Internet上播放和存储相当清晰
的视频/音频流。
• AVI格式：这是在Windows上使用的视频文件格式，为
Windows95以后的操作平台开发（1992－现在）。目前AVI已成
为PC上最常用的视频数据格式。原始的AVI格式的视频/音频部
分均未经过压缩处理，故一般体积较大，但图像和声音质量都
很好。AVI和MOV都是跨平台兼容的，只需各自安装相应的播放
软件即可。
4.2.5
视频和音频（6）
（1）数字视频的主要格式
• RM（Real Media）格式：这是Real Network
公司制定的音频/视频压缩规范，它包括了流文件格
式的RealAudio和RealVideo文件，主要用于低速率
的网络上实实时传输视频/音频信息的压缩格式。
• ASF格式：ASF是微软公司为了和Real Media竞
争而开发出来的一种可以直接在网上播放视频节目
的视频文件格式。其视频部分采用了先进的MPEG－4
压缩算法，音频部分采用了微软的WMA压缩格式。其
压缩率和图像质量都不错。
4.2.5
视频和音频（7）
（2）将视频/音频文件嵌入到HTML的
方法
• 链接：这种方式就像放置任何其它链接一样
。
• 嵌入：采用这种方法可以对网络上的视频文
件边下载边播放，或者可以让视频信息与其它内
容出现在同一页面。但是这要求用户端有相应的
插件（Plug in）才能播放。
4.2.5
视频和音频（8）
3、虚拟现实（VR）
虚拟现实（Virtual Reality）是一项与多媒体技术密切
相关的边缘技术，它通过综合应用计算机图像处理、模拟与
仿真、传感技术、显示系统等技术设备，以模拟仿真的方式
给用户提供一个真实反映操作对象变化与相应作用的三维图
像环境，从而构成虚拟世界，并通过特殊设备（如头盔和数
据手套）给用户提供一个与该虚拟世界相互作用的三维交互
式用户界面。
HTML是面向二维的，而VRML（Virtual Reality Modeling
Language，虚拟现实建模语言) 是一个开放的、面向三维的
、可扩充的三维场景描述语言。
4.2.6
导航和交互设计（1）
1、概述
与传统媒体相比，网络媒体最大的特点在于
它的交互性。
交互式设计就是在无序且繁琐的信息之间创
造一个具有吸引力的、高效的浏览路线，给人以
极大的自由度去创造和选择他们想要的信息，并
轻易地了解整个系统与组织的内容。
对浏览者而言，网页是杂乱无序的，要在大量
的网站和网站的各部分中找到自己想要的信息，
优秀的导航和交互设计是十分重要的。
4.2.6
导航和交互设计（2）
2、人机交互的常用方式
人机交互的常用方式主要有：
（1）问答式对话交互
这是最简单的人机交互方式。该交互功能使用
自然语言提示用户进行回答，用户通过键盘输入
字符串来进行回答。这种方式的对话，简单的采
用单选或多选方式，将答案限制在很小的范围内
，再根据用户的回答去执行相应的功能，或将使
用者的信息记录保存，放入数据库或资源库中。
4.2.6
导航和交互设计（3）
（2）菜单交互
这是使用较早、最广泛的人机交互方式。其特
点是让用户在一组多个可能对象中进行选择，各
种功能的选择项以菜单形式显示在屏幕上。
若选择项目较少，可以将菜单项按线性或顺
序排列；若选择项过多，且选择项对应功能本身
又有逻辑上的层次结构，则可分层次来组织和安
排菜单交互功能。菜单的深度（即菜单的层数）
和宽度（指同一层中各菜单项的总数）的组织安
排将直接影响用户对菜单的记忆、操作和选择速
度，因此应综合考虑。
4.2.6
导航和交互设计（4）
（3）功能键
使用键盘上的功能键可以代替输入命令或选取功能菜
单，同样可以完成交互功能。常见的功能键有：Insert
、Delete、Enter、Esc、Ctrl+C、Ctrl+V等。功能键的
好处是可以减少记忆负担、加快操作、减少输入和出错
率等。
（4）图符
使用图符可以形象、逼真地反映各种操作功能，使理
解和操作变得更加容易。图符的优点是具体形象，缺点
是无法明确表达语义，必须用文字辅以说明。
4.2.6
导航和交互设计（5）
（5）查询语言界面
查询语言是用户与数据库的交互媒介，是用户定义、检索
、修改和控制数据的工具。很多网站的搜索功能就是查询的
一种方式。数据库查询语言分为数据认定、数据操作和数据
控制三部分。
（6）自然语言界面
指直接用人的自然语言（汉语或英语）来与计算机进行交
互和通讯，这是最理想和方便的。在这种交互中，计算机能
理解用户自然语言（包括键盘输入文本、手写输入、语音输
入等）表达的请求，并转换成交互功能语言，然后提供相应
的功能。实现自然语言界面必须解决语音输入识别、人工智
能等方面的技术。
4.2.6
导航和交互设计（6）
3、人机交互的特性
（1）简易性
在进行人机交互设计时，应尽量让计算机更主
动、做更多的工作，而让操作者尽量少做。
（2）友好性
指用户操作交互功能时的复杂性。操作复杂性
越低，说明交互功能越容易使用，用户感觉使用
过程是轻松愉快的，则用户友好性越强。
4.2.6
导航和交互设计（7）
（3）灵活性
灵活性包含以下含义：
• 交互功能应完全适应各类用户（初级、高级或
专家型用户）。
• 用户可根据需要制定或修改交互方式。
（4）明确性
指交互的功能和行为对用户是明确清楚的。即
不管交互功能本身如何复杂，用户对交互功能是
清楚的，并可随时预测交互功能的行为。
4.2.6
导航和交互设计（8）
（5）一致性
一致性主要体现在指示、反馈方面的一致性。
具体是指网站的不同部分，甚至不同页面之间，
具有相似的交互处理布局、相似的人机交互方法
及相似的信息显示格式等。
（6）容错性
容错性是指交互式设计应能够对可能出现的错
误进行检测和处理（如用户的密码发生错误是应
能给出友好帮助提示，帮用户找回密码）。
4.2.6
导航和交互设计（9）
（7）反馈性
反馈性是指用户从界面一方获得的信息，表示
网络对用户动作作出的反应。若交互功能没有反
馈，用户就无法判断他的操作是否为计算机所接
受、是否正确以及操作的结果如何。
（8）图形化
图形具有直观形象、信息量大的优点，因此使
用图形和形象的比喻手法来表示交互和操作时，
会使用户的操作和反馈更直接、可视和逼真。在
交互式设计中常用到图标和按钮有形式简洁清晰
、强调共性和个性的特点。
4.2.6
导航和交互设计（10）
4、超链接设计
（1）超文本
超文本是一个编写和组织信息的丰富环境。有
了超文本链接，用户可以按自己的顺序和方式去
浏览信息，随心所欲地从一个感兴趣的地方跳到
另一处，并立即找到所需的信息。
（2）友好交互设计
超文本链接可以呈现给用户一种全新的阅读方
式。链接可以使用户迅速回到页面的导航部分、
站点地图或主页。应尽量安排体贴的链接，不要
让用户穿越太多的页面层次来寻找所需的信息。
4.2.6
导航和交互设计（11）
4、超链接设计
（2）友好交互设计
友好的交互设计还应能让用户知道他在网站中所处的位
置，应提供足够的位置信息，使用户清楚地知道：
• 我在哪？ 提供当前所处页面与站点其它页面
的关系。
• 我能去哪？  提供当前页面及内容类型
• 我怎样去哪？  提供一致的、易于理解的链接
• 我如何回到起点？  提供可实现返回的功能。
4.2.6
导航和交互设计（12）
4、超链接设计
（3）组织网页上的信息
信息设计是决定一个网站成功与否的重要因素。如何使
链接、按钮与网页有机地结合起来，既醒目，又和谐统一，
是网页设计师的重要任务。
A、安排链接结构的原则
• 要符合浏览者的思维习惯和浏览习惯
• 要使网站中最重要的信息有更多的机会与
浏览者见面。
4.2.6
导航和交互设计（10）
（3）组织网页上的信息
B、组织网页信息的常用方法
• 建立易于管理的信息段：可将内容分成小的文
件用超链接将它们组织在一起。
• 控制页面的长度：若某页面的显示超过三屏，
则应进行页面分割。
• 使用超文本：提供承前启后的链接将概念、事
实或定义连接起来，并尽力预料用户的信息需求。
最后，对所提供的信息应采用方便的阅读方式。
4.2.6
导航和交互设计（10）
4、超链接设计
（4）增加合理的导航链接
• 导航栏：导航栏就像网站的目录一样，通过它可知
道网站有那些栏目。每个栏目的内容如何。导航栏的每部
分都与站点的其它页面相链接。
• 其它链接设计：导航栏可以使用户访问站点的各
个页面，目录页面可以使用户准确地找到所需的内容。对
于较长的页面可以在该页面建立若干个书签，便于阅读。
总之，应根据需要采用尽可能多的链接形式。
4.2.6
导航和交互设计（11）
5、网站目录和链接结构对页面设计的影
响
• 设计原则与目的：
设计网站目录结构的原则是方便网站的管理与维
护；设计链接结构的原则是方便浏览者的阅读。
• 对页面的影响：
采用何种链接结构将直接影响到版面的布局。总
之，设计链接结构的目的在于用最少的链接得到
最高的浏览效率。
4.3
Web页面设计
虽然Web网页设计不同于传统的平面
或版式设计，但从其表现形式来看，
还是以图像、文字为主的静态设计。
因此与传统的平面和版式设计有一定
的类似。
4.3.1
版式设计基础（1）
1、概述
• 版面：
指页面编排所具有的外在形式，是各种内容编排布
局的整体表现形式。
• 版面设计的任务：
吸引读者的视线，增强阅读的饿兴趣，帮助读者理
解信息。
• 版面设计的基本原则：
◆ 主题鲜明，形象突出
◆ 便于阅读，形式美观
◆ 编排有序，布局合理
4.3.1
版式设计基础（2）
2、平面构成基础
（1）抽象的概念：
指在造型活动中，不以现实形态为依据，而专门研究点、线
、面、体在空间的相对排列关系及形成的一定表现力。版面
设计要受到抽象美术的新的审美观念的影响。
如将版面中的万物归纳为点、线、面、体、空间、色彩等
基本要素的构成。
（2）版面设计结构组织的目的
通过各种运动现状，激发阅读的兴趣，传达一种心声，唤
起读者的想象，达到信息与情感的沟通，从而使版面结构产
生特有的生命力。
将主题意义、力感运动、情感表现，通过形状、数量、方
向、大小等转化为版面组织、版面结构的变化，研究它们的
形式关系，将有助于对版面的理解与分析。
4.3.1
版式设计基础（3）
（2）潜在的结构
版面中一些潜在的线与点，可衍生出各种各样的结构，
使版面的布局更清晰和合理。这些版面结构往往与视觉流程
的设计和形式法则的运用有密切的联系。
（3）点的结构
点是版面设计中一个最灵活的要素，其大小、形态、色
彩、空间位置等的变化，常使版面产生不同的视觉效果。
①单一的点具有放射力，起集中或凝固视线的作用，在版
面中形成紧张的力点感觉；②两点或更多点时，在视觉上会
产生动感，它们之间产生的力线起着互相制约的作用；③三
点以上形成面，点与点的角度产生力的方向。
4.3.1
版式设计基础（4）
（4）线的结构
线是点移动的轨迹，线有长度和宽度，有方向及空间场的
作用，在版面中起连接、咬合、支撑、聚合、加固以及构筑
版面骨架的作用。线有直线、曲线、虚线、实线等各种。
1）直线：直线坚硬、明确，具有男性的气质（如坚定的
头脑、理性的思考、顽强的意志、果断的行为等），具有明
确的方向性。此外，不同粗细的直线往往起到分割空间的作
用。
2）曲线：曲线在版面设计中优雅、柔和、细腻、有感性
，与直线相比，曲线富于变化，动感强而富有活力，具有多
变性和含蓄性，是女性的象征。
曲线大体上可分为几何曲线和自由曲线两种。
4.3.1
版式设计基础（5）
（5）面的结构
面是点的密集与放大，是线的加强与重复。面
具有几何形态（严谨圆满）和不规则的自由形态（
活泼浪漫），在空间中产生层次性的美感。面的表
现主要是依据线的表情而定。
• 直线形的面：简洁、单纯；
• 折线形的面：含有痛苦与紧张之感；
• 曲线形的面：柔软、富有弹性；
• 圆和椭圆的面：完美又显温暖。
4.3.1
版式设计基础（6）
3、版面设计的形式法则
一个页面要设计得具有美感，令人赏心悦目，对眼睛
具有吸引力，能引起人潜意识的注意，快速准确地传递信
息。否则会带来误导甚至思维混乱。
大量的研究发现，能引发视觉愉悦效果的规则是：比
例、均衡、对称、统一、简洁与力度、节奏韵律、虚实空
白等等。
版面中的图文编排并不是一门严谨的科学，不可能有绝
对的法则可循，也不可能用定量分析来描述，只有在大量
的设计实践中才能熟练掌握。
4.3.2
Web综合设计（1）
1、网页的布局
• 布局：指的是在一个限定的面积范围内，合理
安排布置图形、图像和文字的位置，把文章的信息
按照轻重缓急得秩序排列的同时，将页面美化装饰
起来。
• 网页的版面：是指从浏览器看到的完整的一个
页面，页面的结构是由所选用的框架或页面模板所
决定的。
4.3.2
Web综合设计（2）
1、网页的布局
网页的布局主要包括以下内容：
（1）构思与勾画草图：草图的目的是将脑海里
朦胧的想法具体化
（2）细部设计
（3）量化描述
4.2.6
导航和交互设计（12）
4、超链接设计
（3）组织网页上的信息
信息设计是决定一个网站成功与否的重要因素。如何使
链接、按钮与网页有机地结合起来，既醒目，又和谐统一，
是网页设计师的重要任务。
A、安排链接结构的原则
• 要符合浏览者的思维习惯和浏览习惯
• 要使网站中最重要的信息有更多的机会与
浏览者见面。
4.2.6
导航和交互设计（10）
（3）组织网页上的信息
B、组织网页信息的常用方法
• 建立易于管理的信息段：可将内容分成小的文
件用超链接将它们组织在一起。
• 控制页面的长度：若某页面的显示超过三屏，
则应进行页面分割。
• 使用超文本：提供承前启后的链接将概念、事
实或定义连接起来，并尽力预料用户的信息需求。
最后，对所提供的信息应采用方便的阅读方式。
4.2.6
导航和交互设计（10）
4、超链接设计
（4）增加合理的导航链接
• 导航栏：导航栏就像网站的目录一样，通过它可知
道网站有那些栏目。每个栏目的内容如何。导航栏的每部
分都与站点的其它页面相链接。
• 其它链接设计：导航栏可以使用户访问站点的各
个页面，目录页面可以使用户准确地找到所需的内容。对
于较长的页面可以在该页面建立若干个书签，便于阅读。
总之，应根据需要采用尽可能多的链接形式。
4.2.6
导航和交互设计（11）
5、网站目录和链接结构对页面设计的影
响
• 设计原则与目的：
设计网站目录结构的原则是方便网站的管理与维
护；设计链接结构的原则是方便浏览者的阅读。
• 对页面的影响：
采用何种链接结构将直接影响到版面的布局。总
之，设计链接结构的目的在于用最少的链接得到
最高的浏览效率。