《Web艺术设计》PPT课件.ppt

第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、关于屏幕分辨率的技术 显示器的屏幕分辨率：是指显示器屏幕 所能显示的象素总数，这一指标是由显示器 和显示卡的性能决定的。通常用水平和垂直 方向的象素数目的乘积表示。如：800600。 随着计算机显示器和显示卡性能的提高 ，在网页设计中，很多人已经将800600作为 基本的分辨率。 4.1.1 Web的技术环境（6 ） 3、关于宽带的技术 网站设计者要考虑用户的低带宽连接。如果 由于页面包含庞大的、详细的图形或复杂的动画 而导致下载速度缓慢，用户就会在页面内容显示 之前改去访问别的站点。因此网站设计者应在不 同的连接速度下进行浏览测试，以获得在不同的 连接速度下浏览网页的真实情况。 在设计时应尽量简化页面，少使用图形或将图 形大小限制在1015KB范围之内。 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位时，显示的颜色数为28256种，一 般可在各种显示器上显示，并称这种具有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 竞争而开发出来的一种可以直接在网上播放视频 节目的视频文件格式。其视频部分采用了先进的 MPEG4压缩算法，音频部分采用了微软的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、版面设计的形式法则 一个页面要设计得具有美感，令人赏心悦目，对眼 睛具有吸引力