1、6/7/2022网络信息制作与发布第四章 Web艺术设计6/7/2022第四章 Web艺术设计主要内容：主要内容： 本章主要介绍Web设计所需的美学原理和设计法则，具体涉及到影响网页观感的色彩、文字、图像、导航元件以及版面设计等方面的知识。6/7/20224.1 Web4.1 Web设计环境设计环境 在进行网页设计和制作的过程中，了解网络的相关技术以及访问者的外在条件（如访问者的访问速度、计算机平台、使用何种浏览器等）是十分重要的。这些因素将影响你设计的Web文件大小和设计复杂程度。6/7/20224.1 Web4.1 Web设计环境设计环境4.1.1 Web的技术环境1.关于浏览器的技术2.
2、关于屏幕分辨率的技术3.关于带宽的技术6/7/2022关于浏览器的技术 网页设计者首先面临的问题是如何使网页在不同浏览器中都能正常显示。由于每种浏览器对HTML文件标签的解释都不同，导致对HTML文件的显示方式的解释存在差异。因此设计者应尽量在多种浏览器环境中测试自己的工作，以便对用户使用的浏览器提出要求或说明。6/7/2022关于浏览器的技术（1）采用可兼容的技术 尽量使设计的网页可以在各种浏览器中使用。不使用最新版本的HTML规范编码，便于与各种版本的浏览器兼容。（2）采用最新的技术设计 这就要求用户采用最新的浏览器，还要有能够显示特殊媒体类型的增强插件，这样才能跟上设计者的步伐。（3）采
3、用对用户指定特定浏览器的方式6/7/2022关于浏览器的技术 总之，在对浏览器的选择上，可以采用一种能促进渐进开发的策略。 例如：在创建站点时使用前一个旧版本的HTML来编码，然后慢慢向其中加入一些增强特性，不断向最新版本靠近，使用户使用新旧版本的浏览器都可访问。若要加入一些需要插件支持的动画或特殊效果，则要使用大多数浏览器都支持的开发工具。6/7/2022关于屏幕分辨率的技术 显示器的屏幕分辨率：是指显示器屏幕所能显示的象素总数，这一指标是由显示器和显示卡的性能决定的。通常用水平和垂直方向的象素数目的乘积表示。如：800600。 随着计算机显示器和显示卡性能的提高，在网页设计中，很多人已经将
4、800600作为基本的分辨率。6/7/2022关于宽带的技术 因此网站设计者应在不同的连接速度下进行浏览测试，以获得在不同的连接速度下浏览网页的真实情况。 在设计时应尽量简化页面,少使用图形或将图形大小限制在1015KB范围之内。6/7/20224.1 Web4.1 Web设计环境设计环境4.1.2 Web的媒体环境规划Web站点时应考虑以下几点：1.计算机屏幕的形状2.要有足够的对比度以利于用户阅读3.屏幕分辨率比印刷品低得多6/7/20224.1 Web4.1 Web设计环境设计环境4.1.3 Web的设计流程1. Web设计的两个阶段2. Web设计的一般步骤3. Web站点的主要类型6
5、/7/2022WebWeb设计的两个阶段设计的两个阶段 Web的设计流程通常包含两个阶段： 第一阶段：了解客户需求，然后根据不 同的网站类型进行创意，同时与技术人 员沟通，了解设计所需的技术难度，确 定方案。 第二阶段：制作出页面样例，与客户交 流征求意见，然后修改，直到确认，由 制作人员协助完成设计。6/7/2022WebWeb设计的一般步骤设计的一般步骤1.首先要明确网站的性质和目的。2.要分析网站的用户。3.确定页面的结构和框架。4.应在不同机器、浏览器和不同速度下测试网页，及早查处所出现的问题。 6/7/20224.2 Web4.2 Web设计元素设计元素4.2.1 色彩1. 色彩基础
6、2. 色彩感觉3. 色调和色彩搭配4. 计算机色彩5. 网页色彩搭配的原则6. 搭配技巧6/7/2022色彩基础色彩基础1.颜色的产生2.色彩的属性 色相、饱和度、明度（亮度）3.色彩的三原色和色环 三原色：红、黄、蓝 色环： 暖色、中性色、冷色 同类色、邻近色、对比色、互补色6/7/2022色彩感觉色彩感觉1.心理感觉：冷暖、轻重、软硬、华丽朴素、积极消极2.颜色的联想6/7/2022色调和色彩的搭配色调和色彩的搭配1.色调2.配色 色相搭配 明度搭配 饱和度搭配 整体色调6/7/2022计算机色彩计算机色彩1.色彩模式：RGB、CMYK、Lab2.色深：颜色数2色深位数3.混色4.网络安全
7、色： 256286/7/2022网页色彩搭配的原则网页色彩搭配的原则1.色彩的合理性2.色彩的独特性3.色彩的艺术性6/7/2022搭配技巧搭配技巧1.非彩色的搭配2.彩色的搭配3.网页色彩掌握的过程 单色五彩缤纷标准色单色6/7/20224.2 Web4.2 Web设计元素设计元素4.2.2 文本 网页中的文本有两种状态：HTML文本和图形文件格式的文字图像。1. 字体2. 字号和字距6/7/2022字体字体 网页字体也是网页的主要组成部分，是信息的重要载体。 字体的分类：1. 英文字体2. 中文字体3. 衬线和字族6/7/2022字号和字距字号和字距字号的大小有以下三种标定方法：号数制：从
8、初号、一号到八号，有16种之多。号数越大，字体越小。级数制：从8级到96级，级数越大，字体越大。点数制：从5磅到72磅，有21种之多。磅数越大，字体越大。点数制是世界流行的计算字体的标准单位。6/7/2022字号和字距字号和字距网页文字的字号变化宜少不宜多。选择少量的字体和字号会使页面看起来显得更干净。如果在网页设计中使用了一种用户没有安装的字体，则浏览器将用缺省字体显示。（PC中的英文缺省字体是：Time New Roman）。6/7/2022字号和字距字号和字距字距和行距 字距:字与字之间的距离。行距：行与行之间的距离。字距与行距之间的比例关系：行距至少要大于字距。加宽字距和行距有轻松、疏
9、朗之感。行与行之间要考虑适当增加空白，以便阅读。6/7/2022字号和字距字号和字距 文字块的形状由编排形式决定，在版面设计中，主要有如下编排方式：两边对齐左（或右）对齐中间对齐图文绕排6/7/2022字号和字距字号和字距网页中每一页的文字应尽量完整每一页应有清晰的标题尽量少用闪烁字在文字使用上要特别注意易读性和趣味性一般网页文字字体是稳定的，阅读要求识别轻松，浓淡适宜。6/7/2022小结q 光的三原色是什么？P108q 颜色分为哪两种？P179 q 色彩的属性是什么？P179q WINDOWS的操作系统中缺省的中文字体有哪些？P1916/7/20224.2 Web4.2 Web设计元素设计
10、元素4.2.3 图像与VI设计1. 网页图像和文件格式2. 选择图形工具3. 网页中的图像4. 网页版面中图像的编排5. 视觉标识设计6/7/2022网页图像和文件格式网页图像和文件格式数字图像类型1.位图：又称为栅格图像。是用小方形 栅格（即象素）组成的图像，与分辨 率有关。2.矢量图：由矢量定义的直线或曲线组 成的图像。矢量图形与分辨率无关。6/7/2022网页图像和文件格式网页图像和文件格式图像文件格式基础知识1.GIF2.JPG3.PNG3.BMP6/7/2022网页图像和文件格式网页图像和文件格式 GIF是为网络图形传送而设计的，采用了无损压缩技术，色深为8位。GIF还有两个重要特点
11、：透明和交错显示。 JPG是适合于照片和连续灰度图像的最佳格式，色深24位（真彩色）。适合具有丰富细节的图片。 PNG（便携式网络图形格式）是专为Web设计，但由于缺乏浏览器支持，一直未能普及。6/7/2022网页图像和文件格式网页图像和文件格式 BMP格式是Windows中的标准图像文件格式，有压缩和不压缩两种形式。 TIF最早是为了存储扫描仪图像而设计。也是PC中使用最广泛的图像文件格式。 TGA是Truevision公司为其显卡开发的一种图像文件格式，现已成为数字化图像，6/7/2022网页图像和文件格式网页图像和文件格式Web图像的应用： 统一的格式 速度的限制6/7/2022选择图形
12、图像设计工具选择图形图像设计工具Adobe公司的PhotoshopAdobe的ImageReady是一个微型的Photoshop版本，后来被集成到了Photoshop中。Adobe的Illustrator是一个高端的绘图工具。Macromedia公司的Firework是一款集图形处理和文本处理于一体的功能强大的应用软件。6/7/2022网页中的图像网页中的图像照片类绘画类6/7/2022网页版面中图像的编排网页版面中图像的编排（1）图像的选择与剪裁（2）图像形状的变化（3）虚实的变化6/7/2022视觉标识设计（视觉标识设计（VIVI设计）设计） 视觉标识（VI：Visual Identity
13、）是指通过视觉语言的运用来树立形象和传播信息。其应用一直是CIS（Corporate Identity System：企业识别系统）的基础和最直接的表现形式。CIS的策划和运作往往以VI来表现，是CIS的一部分。6/7/2022视觉标识设计（视觉标识设计（VIVI设计）设计）1.设计网站的标志2.选择网站的标准色彩3.选择网站的标准字体4.构思网站的广告词6/7/20224.2 Web4.2 Web设计元素设计元素4.2.4 动画 网页中的插图可以像电视动画一样真实生动，有人用情景化设计来描绘将来的网页设计。 无论人或动物的视觉，总是先注意到运动着的东西。因此，很多广告公司都将自己的网络广告做
14、成动画的形式，以便获得最大的宣传效果。6/7/2022WebWeb动画的发展状况动画的发展状况（1）动画的初级阶段（2）无处不在的GIF89a（3）动画的新贵Shockware（4）用Java来实现动画（5）Flash动画和Streaming技术6/7/2022动画制作的工具动画制作的工具 GIF Animation Adobe Image Ready Flash6/7/2022动画原理动画原理 传统的动画是由很多静态画面序列连续地播放形成的。计算机的动画和传统的动画原理基本上是一样的，只是有些名词叫法不同。帧（Frame）：每个动画单元帧速率（fps：Frame per second，指一秒
15、钟动画所包含的帧数）是动画概念的一项重要指标6/7/2022网页中的动画广告网页中的动画广告 广告的任务是在最短的时间内传达一个简洁明了的信息或意念，因此网络动画广告的创作比一般意义上的故事情节动画更为自由。6/7/20224.2 Web4.2 Web设计元素设计元素4.2.5 视频和音频 Web多媒体在信息的传递中扮演着重要和独特的角色，因此一个网页设计师要时刻跟踪这些技术的发展状态，对多媒体的应用应有比较理智的认识。 6/7/2022音频音频网上使用的音频格式文件大部分经过压缩，主要有：MIDI格式RA（Real Audio）格式MP3 （MPEG1 Player 3）格式MP4格式：VQ
16、F格式：WMA格式：WAV（Wave From Audio File）格式：AIF格式：AU格式：6/7/2022视频视频 计算机上使用的是数字视频（电视电影视频是模拟信号），它是将传统的模拟视频片断捕捉并进行转换而成（如：VCD），下面介绍有关视频格式和视频嵌入技术方面的知识。6/7/2022视频视频MOVMOV格式格式 AVIAVI格式格式RMRM（Real MediaReal Media）格式）格式ASFASF格式格式6/7/2022视频视频将视频将视频/ /音频文件嵌入到音频文件嵌入到HTMLHTML的方法的方法 链接：这种方式就像放置任何其它链接链接：这种方式就像放置任何其它链接一样
17、。一样。 嵌入：采用这种方法可以对网络上的视嵌入：采用这种方法可以对网络上的视频文件边下载边播放，或者可以让视频频文件边下载边播放，或者可以让视频信息与其它内容出现在同一页面。但是信息与其它内容出现在同一页面。但是这要求用户端有相应的插件（这要求用户端有相应的插件（Plug inPlug in）才能播放。）才能播放。6/7/2022虚拟现实（虚拟现实（VRVR） 虚拟现实（虚拟现实（Virtual RealityVirtual Reality）是一项）是一项与多媒体技术密切相关的边缘技术。与多媒体技术密切相关的边缘技术。 HTMLHTML是面向二维的，而是面向二维的，而VRMLVRML（Vir
18、tualVirtual Reality Modeling Language Reality Modeling Language，虚拟现实，虚拟现实建模语言建模语言) ) 是一个开放的、面向三维的、是一个开放的、面向三维的、可扩充的三维场景描述语言。可扩充的三维场景描述语言。6/7/20224.2 Web4.2 Web设计元素设计元素4.2.6 导航和交互设计 交互式设计就是在无序且繁琐的信息之间创造一个具有吸引力的、高效的浏览路线，给人以极大的自由度去创造和选择他们想要的信息，并轻易地了解整个系统与组织的内容。6/7/2022人机交互的常用方式人机交互的常用方式1.问答式对话2.菜单交互3.功
19、能键4.图符5.查询语言界面6.自然语言界面6/7/2022人机交互的特点人机交互的特点1.简易性2.友好性3.灵活性4.明确性5.一致性6.容错性7.反馈性6.图形化6/7/2022超链接设计超链接设计1.超文本2.友好交互设计3.组织网页上的信息4.增加合理的导航链接6/7/2022超链接设计超链接设计1.超文本 超文本是一个编写和组织信息的丰富环境。有了超文本链接，用户可以按自己的顺序和方式去浏览信息，随心所欲地从一个感兴趣的地方跳到另一处，并立即找到所需的信息。6/7/2022超链接设计超链接设计2.友好交互设计 友好的交互设计还应能让用户知道他在网站中所处的位置，应提供足够的位置信息
20、，使用户清楚地知道： 我在哪？ 我能去哪？ 我怎样去哪？ 我如何回到起点？6/7/2022超链接设计超链接设计3.组织网页上的信息 信息设计是决定一个网站成功与否的重要因素。如何使链接、按钮与网页有机地结合起来，既醒目又和谐统一，是网页设计师的重要任务。A、安排链接结构的原则B、组织网页信息的常用方法6/7/2022超链接设计超链接设计4.增加合理的导航链接导航栏：导航栏就像网站的目录一样，通过它可知道网站有那些栏目。每个栏目的内容如何。导航栏的每部分都与站点的其它页面相链接。其它链接设计：导航栏可以使用户访问站点的各个页面，目录页面可以使用户准确地找到所需的内容。对于较长的页面可以在该页面建
21、立若干个书签，便于阅读。总之，应根据需要采用尽可能多的链接形式。6/7/2022网站目录结构和链接结构对页面设计的影响网站目录结构和链接结构对页面设计的影响设计原则与目的： 设计网站目录结构的原则是方便网站的管理与维护；设计链接结构的原则是方便浏览者的阅读。对页面的影响： 采用何种链接结构将直接影响到版面的布局。总之，设计链接结构的目的在于用最少的链接得到最高的浏览效率。6/7/20224.3 Web4.3 Web页面设计页面设计 Web网页设计不同于传统的平面或版式设计，但从其表现形式来看，还是以图像、文字为主的静态设计。因此与传统的平面和版式设计有一定的类似。6/7/20224.3 Web
22、4.3 Web页面设计页面设计4.3.1 版式设计基础 版面：指页面编排所具有的外在形式，是各种内容编排布局的整体表现形式。 版面设计的任务： 版面设计的基本原则：6/7/2022平面构成基础平面构成基础1.潜在的结构2.点的结构3.线的结构4.面的结构6/7/2022平面构成基础平面构成基础1.潜在的结构 版面中一些潜在的线与点，可衍生出各种各样的结构，使版面的布局更清晰和合理。这些版面结构往往与视觉流程的设计和形式法则的运用有密切的联系。6/7/2022平面构成基础平面构成基础2.点的结构 点是版面设计中一个最灵活的要素，其大小、形态、色彩、空间位置等的变化，常使版面产生不同的视觉效果。
23、6/7/2022平面构成基础平面构成基础3.线的结构 线是点移动的轨迹，线有长度和宽度，有方向及空间场的作用，在版面中起连接、咬合、支撑、聚合、加固以及构筑版面骨架的作用。线有直线、曲线、虚线、实线等各种。 6/7/2022平面构成基础平面构成基础4.面的结构 面是点的密集与放大，是线的加强与重复。面具有几何形态（严谨圆满）和不规则的自由形态（活泼浪漫），在空间中产生层次性的美感。面的表现主要是依据线的表情而定。 6/7/20224.3 Web4.3 Web页面设计页面设计4.3.2 版式设计的形式法则 一个页面要设计得具有美感，令人赏心悦目，对眼睛具有吸引力，能引起人潜意识的注意，快速准确地
24、传递信息。否则会带来误导甚至思维混乱。6/7/2022版式设计的形式法则版式设计的形式法则1.比例与尺寸2.简洁与力度3.对称与均衡6/7/20224.3 Web4.3 Web页面设计页面设计4.3.2 Web综合设计1.网页的布局2.首页的设计6/7/2022网页的布局网页的布局 布局 网页的版面 网页的布局主要包括以下内容：（1）构思与勾画草图（2）细部设计（3）量化描述6/7/2022网页的布局网页的布局1.“T”字型结构布局2. “口”字型布局3. “三”字型布局4. “川”字型布局5. 自由型布局6/7/2022首页的设计首页的设计1. 书籍封面式首页2. 期刊杂志式首页3. 报纸式首页6/7/2022总结q 网页中常用布局方式有几种？P250 q 请说明GIF动画的优缺点？P200
