第 4 章 Web 艺术设计

第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 章 Web 艺术设计

第 4 章 Web 艺术设计

Presentation Transcript