网络信息制作与发布.ppt

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