（设计艺术学专业论文）网站引导页动画设计初探.pdf

摘要 2 0 世纪后半叶以来，伴随以信息技术为核心的高新技术群的迅速发展，人 类社会开始进入了具有划时代意义的信息网络时代。计算机和网络技术的出现， 毫无疑问的改变了世界，改变了人类的生活方式。而互联网的出现则促成了网络 经济的形成，尤其是在电子商务由概念化走向实用化的过程中，它更是起动了决 定性的作用。互联网是由成千上万的网站组成，而每个网站都是由诸多阿页构成； 故网页是构成互联网的基本元素。而作为网站“脸面”的网站g f 导页在信息传达 和视觉传达方面都具有非常重要的地位，网站引导页的动画设计是整个引导页中 虽具有视觉冲击力与动感色彩的因素，所以网站引导页的动画设计对于整个阿站 的信息与视觉传达都具有非常重要的意义。 虽然网站引导页的动画设计具有如此重要的地位，就我国目前嗽 引导页动 画设计来说，也产生了很多优秀的作品，但是我国学术界对于网站引导页的研究 却很少，对引导页动画设计的研究更是风毛瞵角，呈现出其研究价值与实际被重 视程度相脱节的局面。本文试图通过对引导页与引导页动画设计孵视觉传达效果 的系统研究，来弥补我国学术界对引导页动画研究的不足之处，并希望可以对网 页设计，动画设计，视觉传达领域做出理论与实践上的贡献。本文主要分为以下 几个部分： 本文的第一部分引言部分，通过企业网站的定义、问题的提出和研究背景分 析，着重界定了本文的研究内容和方向。 第二部分从引导页的概念与作用入手，将我国目前的引导页进行分类，并系 统论述了引导页与网站的关系。 第三部分为网站引导页中动画设计的作用。主要从我国网站引导页动画设计 现状，网站引导页动画设计的主要方式，动画设计与引导页视觉传达，引导页动 画设计的过程与意义等四个方面来进行论述。 第四部分为网站引导页中动画设计的原则。主要包括以下五个部分：动画设 计与网站风格的统一，动画设计为网站信息传达服务，动画设计与网站的交互性 强，动画设计与浏览者的心理感受，动画设计与网站的文件下载量。 第五部分主要包括网站引导页中动画设计的视知觉原理，视觉法则，注意原 理，浏览者心理四方面。 第六部分为本文的核心部分一网站引导页中动画设计的方法。网站引导页中 动画设计主要从视觉要素的设计入手，主要包括动画设计与文字编排，动画设计 中的图形设计，动画设计中的色彩设计三个方面。以及如何提高引导页中动画设 计视觉传达效率等，它主要包括正确处理图像效果与速度的矛盾关系，合理使用 多媒体技术，对动画设计进行人文优化，提高与浏览者的交互性，吸引其进入网 站等三个方面。 第七部分为本文的结论部分，在前文的系统研究之后，对网站引导页中动画 设计前景进行了展望。 关键词j 网站引导页动画设计视觉原理视觉要素文字图形色彩 a b s t r a c t t h ef i r s tp a r ti si n t r o d u c t i o n , w h i c hd e f i n e dt h ef o c u so ft h er e s e m c hc o a t e n ta n d d i r e c t i o nb yt h ed e f i n i t i o no fe n t e r p r i s ew e b s i t e sa n dt h ep r o p o s e d r e s e a r c h b a c k g r o u n d t h es e c o n dp a r to ft h ea r t i c l eo b t a i n sf r o mt h ec o n c e p ta n df u n c t i o no ft h e g 血i d a n o ep a g 岛w h i c hc a r r i e so bt h ec l a s s i f i c a t i o no ft h eg u i d a n c ep a g ea tp r e s e n t l i n o u rc o u n t r ，a n ds y s t e m a t i c a l l yo l a b o n t e dt h er e l a t i o n s h i pb e t w e e nt h e ：g u i d a n c ep a g e a n d ，t h ew j e b s i t e t h et h i r dp a r tc l a b o f 龇c 西t t 电a n i l l l a l i o nd e s i g nf u n c t i o ni nt h ew e b s i t eg u i d a n c e p a 窖p i tc a r r i e so 1t h eo l a b o m i o nm a i n yf i x mf o u ra s p e c t s ：t h ep r e s e n ts i t u a t i o no f o u rc o u n t r yw e b s i t eg m d h c ep a g ea n i l i l a t i o nd e s i g n , t h ef u n d a m e n t a lm o d eo ft h e w e b s i t eg u i d o n c e p a g e a n i m a t i o nd e s i g n , t h ea n i m a t i o nd e s i g na n dv i s i 0 0 t r a n s m i s s i o no ft h eg i i 出曲p a g e , a 叫t h ei m x e s sa n d ：t h es i g n i 6 n o ft h e g e i d a n c ei , a g ea n i m a t i o nd e s t g n t h ef o u r t hp a r ti sf o r t h ep 血c i p l co fa n i m a t i o ad 髂i 伊j nw c b s i t c g l l i d , u c cp a g e i tm a i n l yi n c l u d e st h ef o l l o w i n gf i v ep a r e ：t h eu n i f i c t i , o no f 4 1 a ea 血m a t i o nd e s i g na n d t h ew e b s i t e s t y l e , t h e a n i m a t i o nd e s i g ns e r v e sf o rt h ew e b s i t ei n f o r m a t i o n t r a n s m i s s i o n , t h ei n t e r a c t i o nb e t w e e nt h ea r t h n a t i o nd e s i g na n dt h ew e b s i t ei ss 订o n g , a n i m a t i o nd e s i g na n dp s y c h o l o g yf e e l i n go ft h eb r o w s i n g , a n i m a t i o 庙d e s i g na n d d o c u m e n td o w n l o a d i n gc a p a c i t yo ft h ew e b s i t e t h ef i f t hp a r tm a i n l yi n c l u d e sf o u ra s p e c t ：t h ec o n s c i o u s n e s sp r i n c i p l ei nt h e a n i m a t i o nd e s i g no ft h ew e b s i t eg u i d a n c ep a g e ，t h ev i , 删t a lp r i n c i p l e ，t h ea t t e 删o n p r i n c i p l ea n d t h ep s y c h o l o g yo f b r o w s i n g t h es i x t hp a r ti st h ec o l ep a r t i a li nt h i sa r t i c l ew h i c hi st h em e t h o do fa n i m a t i o n d e s i g n t i nt h ew e b s i t e sg u i d a n c ep a g e t h ea n i m a t i o nd e s i g ni nt h ew e b s i t eg u i d a n c e p a g em a i n l yo b t a i n sf r o mt h ev i s u a le s s e n t i a lf a c t o rd e s i g n ，w h i c hm a i n l yi n c l u d e s t h r e ea s p e c t s ：t h ea n i m a t i o nd e s i g na n dt h ew r i t i n gm r a n g e m e n t ，g r a p hd e s i g ni nt h e a n i m a t i o nd e s i g n , c o l o rd e s i g ni nt h ea n i m a t i o nd e s i g n e n h a n c e sv i s i o nt r a n s m i s s i o n e f f i c i e n c yo ft h ea n i m a t i o nd e s i g n i nt h eg u i d a n c ep a g e ，m a i n l yi n c l u d i n gt h r e e a s p e c t s ：c o n r e c tp r o c e s s i n gt h ec o n t r a d i c t o r yr e l a t i o n sb e t w e e np i c t u r ee f f e c ta n dt h e s p e e d , r e a s o n a b l yu s et h em u l t i m e d i at e c h n o l o g y , c a r r i e so nt h eh u m a n i t i e so p t i m i z e t ot h ea n i m a t i o nd e s i g n ，e n h a n c e st h ew e b s i t ea n dt h eb r o w s i n gi n t e r a c t i o n ，a t t r a c t s t h e mt oe n t e rt h ew e b s i t ea n ds oo n t h es e v e n t hp a r ti st h ec o n c l u s i o nf o rt h i sa r t i c l e t h ea r t i c l eh a sf o r e c a s t e dt h e n l p r o s p e c to ft h ea n i m a t i o nd e s i g ni nt h ew c b s i t eg u i d a n c ep a g ca f t e rs y s t e m a t i c a l l y r e s e a r c h e di nt h ef r o n tp a g e k e yw o r d ：w e b s i t eg u i d a n c ep a g e ；a n i m a t i o nd e s i g n ；v i s i o np r i n c i l ，i e ；v i s i o n e s s e n t i a lf a c t o 耳w r i t i n g ；g r a p h ；c o l o r 独创性声明 本人声明，所呈交的论文是本人在导师指导下进行的研究工作及取得的研究 成果。尽我所知，除了文中特别加以标注和致谢韵地方外，论文中不包含其他人 已经发表或撰写过的研究成果，也不包含为获得武汉理工大学或其它教育机构的 学位或证书而使用过的材料。与我一同工作的同志对本研究所做的任何贡献均已 在论文中作了明确的说明并表示了谢意。 研究生签名；翌垫整 日期：垄丑! ! 关于论文使用授权的说明 本人完全了解武汉理工大学有关保留、使用学位论文的规定，即学校有权保 留、送交论文的复印件允许论文被查阅和借阅；学校可以公布论文的全部或部 分内容，可以采用影印、缩印或其他复制手段保存论文。 ( 保密的论文在解密后应遵守此规定) 研究生签名：鎏丛堡l 导师签 闩期： 武汉理工大学硕士学位论文 第一章引言 1 1 信息时代的到来与互联网的发展 2 0 世纪后半叶以来，伴随以信息技术为核心的高新技术的迅速发展，人类 社会开始进入了具有划时代意义的信息网络时代。如果说，由于印刷术、印刷机 的发明导致第一次信息技术革命，使人类社会由农业社会进入工业社会，那么， 以微电子技术、计算机技术、网络通讯技术为基础的互联网建设则导致第二次信 息技术革命，推动人类社会由工业社会进入信息社会，开辟了人类数字化生存的 新时代。马克思曾说过：“各种经济时代的区别，不在于生产什么，而在于怎样 生产，用什么劳动资料生产“信息社会与工业社会的主要不同在于信息处理与 传播方式的变化，如果说工业社会是以机器为中心的商品社会，那么信息社会就 是以网络为中心的服务社会。 互联网( i n t e r n e t ) ( 又称“因特网”或。环球网”，简称唧w ) 是构成信息 社会的显著标志。互联网具有数字化、网络化、虚拟化、全球化、多元化、多媒 体化和交互性、易检性等特征。 计算机和网络技术的出现，毫无疑问的改变了世界，改变了人类的生活方式。 而互联网的出现则促成了网络经济的形成，尤其是在电子商务由概念化走向实用 化的过程中，它更是起到了决定性的作用。i n t e r n e t 永远都处于发展变化之中， 不断有新的国家、地区、网络、主机加入互联网，与前几年相比，互联网最大的 改变，就是从少数企业成功案例的应用，演变为商业运营中普遍采用的利器。包 括电子政务、网络银行、在线购物、远程教育等在内的各种应用深入到人们工作 和生活的各个角落。 1 2 互联网的发展与网页设计 因特网正在改变世界，它促成了网络经济雏形的形成，特别是电子商务正由 新概念走向实用化。由于因特网具有传播信息容量极大、形态多样、迅速方便、 全球覆盖、自由和交互的特点，已经发展成为新的传播媒体，所以全球几乎各个 企业、机构纷纷建立自己的w e b 站点。互联网将是设计的新的舞台，其信息资源 无限、图文互动、高速高效的特点对传统设计媒体有着巨大的冲击，网络经济也 对设计行业带来深远的影响。并由此产生了一个新的设计领域一网站设计。 h 络广告救程脶忠俊北京人学；版_ i = ，2 0 0 4 1 0p1 5 武汉理工大学硕士学位论文 互联网是由成千上万的网站2 组成，而每个网站都是由诸多网页构成，故网 页是构成互联网的基本元素。网页的组成：一般来说，网页上主要有文字、图片、 动画、超链接和特殊组件等元素构成。页面设计也就是对于画面的各个构成要素 诸如标题、文字、图形、符号等的整体规划，亦是在规定的画面空间中把各种要 素进行有机的组合过程，使其按照一定的法则形成画面的节奏。 网页设计是一个全新的设计领域，是一门新兴的设计和网络的交叉学科，它 既有继承传统设计概念的部分又有自己独特的性格。它涉及的范畴不仅包括传统 的视觉传达设计，更包括信息设计、交互设计，以及感官设计等等。 。 相比较传统的传播媒体有着自身独特的优势：首先，超媒体不仅可以像传统 媒体一样传播文字和静态图像，更能够传播动态图形甚至视频、声频等信息。其 次，读者在浏览信息的过程中，相比较传统媒体单一的浏览顺序，超媒体则为用 户提供了很大的自主性：最后，读者在接受信息的过程中，在超媒体的环境下可 以运用操作工具参与或创造信息的接受活动，这种互动的优势也是传统媒体不可 比拟的。 网页这种新的信息载体的出现为设计者提供了新的设计课题，同时也提供了 一个新的设计空间随着网络商业行为被广泛的接受，网页设计也向着更成熟的 方向发展。在设计理念上，网页已经由最初纯粹的。叫卖式”的商业简介，逐渐 发展为更注重个性化的网页设计风格，以体现商业的文化内涵；在网页制作技术 上，也更注重可操作性、功能性以及可读性的提高。越来越多的网页设计作品出 现在人们的视野。 1 3 网页设计的范围与语言 网页3 是网站的基本信息单位。通常一个网站是由众多不同内容的网页组成。 网页一般是由文字和图片构成，复杂一些的网页还会有声音、图像、动画等多媒 2 同站( w e b s i t e ) 是指在因特同上，根据一定的规则，使用h n i l 等工具制作的用于展示特定内容的相关罔页 的集合简单地说。嘲站是一种通讯工具，就像布告栏一样，人们可以通过同站来发布自己想要公开的资 讯t 或者利用网站来提供相关的网络服务人们可以通过同页洲览器来访问同站，获取自己需要的资讯或 者享受嘲络服务- 许多公司都拥有自己的嘲站，他们利用州站束进行宣传、产品资讯发布、招聘等等随 著网页制作技术的流行很多个人也开始制作个人主页，这些通常是制作青用来自我介绍、展现个性的地 方也有以提供嘲络资讯为盈利于段的网络公d 通常这些公u 1 的蹦站i ：提供人们生活各个方面的资讯如 时事新闻、旅游、娱乐、经济等在岗特阳的早期刚站还只能保存单纯的文奉经过几年的发展与万 维m m 现之后，凹像，声音、动l 哂、视频，甚至3 d 技术开始枉州特嘲i ：流行起来，阿站也慢慢地发腱成我 们现n 看到的i 生| 文并茂的样了通过动态州贝技术用户也町以1 ，j 他用户或肯h 站管理肯进行交流。也 自i 一牡州站提供i u 了邮件服务 1 刚贝创意设计发技法龙拿谢正强编湖南) 乏术j i j 版社2 0 0 4 5 2 武汉理工大学硕士学位论文 体内容。几乎所以网站都包含连接，可以方便的跳转到其他相关网页或相关网站。 是存放在w e b 服务器上供客户机用户浏览的页面h t 虬文档。学名称作h t m l 文 件，是一种可以在i n t e r n e t 上传输，并被浏览器认识和翻译成页面显示出来的 文件。要让浏览器显示出我们想要网页表现出的样式，必须要用h t m l 语言加以 设定版面的编排。浏览器是一个用于定位和阅览b t m l 文档的程序。阿页包括以 下基本内容：文字、超链接、图片、声音、影像等等。 对于网页设计来说，有很多软件可以选用。最常见的就是我们常说的“网页 三剑客”d r e a m w e a v e r ，f l a s h ，f i r e w o r k ，另外还有一些软件如：f r o n t p a g e ， p h o t o s h o p 等。最基本的语言有j a v a ，h t m l 等。随着w e b 的普及和计算机技术 的迅猛发展，人们对w e b 语言的要求也日益增长。人们己经不仅仅满足于h t m l 语言编制的二维w e b 页面，三维世界的诱惑开始吸引更多的人们，虚拟现实在 w e b 网上展示其迷人风采，便出现了v i r g i l 语言。 对于网站设计者来说，必须学习跟踪掌握网页设计的新技术，并将其中与本 站点有用的新功能有机地与内容结合起来，具体的如j a v a , d i t t m l ，x 札，s m i l p 咿，c a ；i ，p n g ，p ( ；n l ，d o m 等新技术。 ，4 网页设计文化 计算机网络技术的广泛使用和传播，给现代社会的通讯和以及人与人之问的 交流带来了一场深刻的革命，由此而产生的网络文化现象，对各国传统文化形成 了巨大的冲击。而网站的发布，就意味着全世界都可以看其中的信息。为了适应 各个国家多语言环境，许多跨国公司的网站设置了多语言选择。 互联网网络的触角深入到社会各个层面，改变了个人、机构和组织的行为方 式，形成了奇特的文化现象，并带来了社会文化本身的巨大变化。互联网不仅仅 是一种简单的设备和工具，而且是人类活动的新领域而它作为人类活动的新领 域和社会文化发展的前沿阵地，也必将成为人类社会学科学家研究的新领域。 国内网站建初是仅仅重视功能性要求，经过多年的发展，随着技术的完善和 审美需求的提升，目前已经越来越重视网页的风格与视觉效果。而高水平的网页 设计需求幅增加，但是同时也出现了新问题，很多专业的设计人员在设计网页时， 仅从视觉效果的方面考虑，而完全忽略了网络自身的特点，结果常常会出现网页 打开速度过慢，媒体因素和符号的运用不合理等等问题。 网络信息传播是具有声、像、图、文的，视觉、听觉、互动的视觉传达全球 化的交互信息。网络设计师在未来的眼球大战中代表着新文化的产生，他们把网 络上的图文信息进行整合，设计出美观悦目的界面，给浏览者以强烈的视觉冲击 武汉理工大学硕士学位论文 力和吸引力。未来的设计师必须掌握日新月异的电脑软硬件技术，并灵活把握视 觉新语汇的表达。 喇络，与代 会文化鲍宗囊卜海三联书店2 0 0 1 7 4 武汉理工大学硕士学位论文 第二章网站引导页的应用与设计 2 1 网站引导页的概念 要对网站引导页动画设计进行研究，首先要明确的问题是：什么是引导页? 所谓引导页即是您剐刚打开网站所显示的页面，可以是文字、图片、f l a s h 等。 按照不同的分类方法可以分成不同的类别。网站的引导动画一般是指打开网站首 页之前播放的动画，其目的是为了增强访问者的视觉感受、提升网站的艺术品位、 突出表达网站主题等。5 它是浏览者对于网站的第一印象，也是网站将站内信息 带给浏览者最重要的窗口。网站引导页设计韵水平高低，直接关系到浏览者能不 能被引导页的视觉效果吸引，在最短的时间内了解到网站的基本信息，并最终决 定进入网站浏览网站信息，在整个网站的设计中具有非常重要的地位。 2 2 网站引导页的意义与重要性 扮演着整体网站的窗口，其重要的功能在于让浏览者了解所在的网站的位置 与功能。而引导页是应用于网站首页之前的画面，通常是指进入网站后看到的第 一页，也就是打开网站最先呈现于屏幕上的画面。使用者可借由引导页上的文字、 图像、动画等信息说明，来了解网站上所提供的内容及其各种服务项目以便进 一步去浏览。引导页必需被灵巧的运用，否则将造成浏览者使用上与搜寻上的困 难。作为网站门面的引导页面，一般放视觉冲击强烈的企业宣传图片、企业标识、 企业宣传动画短片、企业主打产品或宣传标语等内容，以及展示企业的风采和产 品，并作为网站的入口，提供网站首页的连接或者分站点连接。 网站的功能设计是一种网页内容设计，来帮助使用者接近网站与沟通的机 制。电子商务带动国际互连网的成长，一个网站可以同时拥有许多不同的地区， 不同区域分别针对不同听众来设计。我们在组织设计网站时，应该注重真正的 对话。网页中互动机制的设置，是吸引浏览者使用网站并且也是让浏览者再度造 访网站的关键。 由此可以看出，引导页除了可以具有其功能性外，也能建立企业在网络上的 形象。更能透过引导页来帮助使用者与企业做沟通，进而吸引浏览者再度拜访。 由此可知，引导页在网页中所占据的重要地位。 。州颤戈t _ 破计亨| i 水灿盂凡奇i ：军编i ：海交通人学版 2 0 0 5 6 6 州贞荚术赴| 十入行实战张帆谭伟宁何形编l u 了t 业；l j 版朴2 0 0 6 9 武汉理【大学硕士学位论文 2 3 引导页与网站的关系 引导页设计是网站整体设计的一部分。引导页的设计虽然越来越得到人们的 重视，而且在引导页的设计过程中，也许有单独设计引导页的人员，但引导页作 为网站整体设计的一部分，是必须融入网站中的。引导页的风格要与网站设计总 体风格一致。如果网站是属于机关、学校、企业或是娱乐行业，它的设计风格也 是绝对不同的。如果是企业推广的网站，整体风格就应该和公司整体形象保持一 致，如果网站是娱乐行业的，在设计引导页时就不要太死板了，应该设计生动有 吸引力。如果网站是政府部门那么引导页就不应该太随意，引导页整体就应该 比较庄重。规整；如果网站是教育部门，那么引导页就应该设计高雅大方。引导 页的色彩也要与网站的色彩相统一、和谐。 2 犀引导页对网站的影响 网站决定了引导页的风格、色调。实际上，网站的风格、色调来自于不同类 型的部门，也就是说，引导页的风格、色调也来源于不同类型的部门的影响，但 是，引导页不会对部门有什么影响，却会对网站有一定的影响。首先，引导页设 计的有趣味，吸引用户了，同样用户也会对网站有好感的，反之也如此。其次， 引导页下载慢了或者动画时问过长，直接影响用户浏览网站的时间延长，这样， 用户浏览的次数越多费的时间就越多，不免有不满的情绪，所以，最好还是有跳 过按钮为好。再次，引导页如果动画效果加强，那网站主页中动的因素就适当少 点，反之也一样，不过不可太过，适度为好。 2 5 网站引导页的分类 按照不同的分类方法可以分成不同的类别。就目前出现的引导页来看，有三 种分类方法： 2 5 1 按引导页表现的形式 按引导页表现的形式可以分为静止的、动画的和动静结合的三类。 静止的页面与动画的页面各有各的特点，静止的页面需要在版式上，颜色上， 构图方面多加推敲否则就会单调，乏味。因为静止的页面没有动画动感，变化 多的特点，所以构图和色彩的设计裁具有非常重要的地位，单调的构图和色彩设 计都会让浏览者觉得乏味，难以引起其进步浏览的兴趣。 6 武汉理工大学硕士学位论文 图2 - 1 幻想世界官方网站i 逝：w w w f m o n s n e n e t 静止的引导页 动态画面的引导页比较多见，有动画的引导页可以更让人产生兴趣，加深印 象。动画设计追求整体的均衡与协调，动画的节奏、颜色、配音等都是重要的方 面，稍有不慎，就会影响引导页的效果。而画面，色彩，音乐，内容任何方面的 缺陷都有可能影响画面视觉传达的整体效果。 而动静结合的动画可以结合二者的优点，具有非常广阔的设计前景，但是这 类设计对设计师的要求比较高，设计前要有周密、清晰的思考过程，设计过程中 更是要注意动中有静，静中有动，综合考虑多个方面，将动画与文字，构图与色 彩，影像与音乐合理搭配，才能有最佳的视觉效果。比如湖北大学网站的引导页， 版面庄重，设计制作规整，颜色搭配和谐。虽然整个画面是是静止的，但在画面 左上角的校徽，那两缕光环不停闪动，使静中又有了动 图2 - 2 湖北大学同站引导页动静结合h t t p ：w w w h u b u e d u c n m d e x 一1 0 2 4 h t m 武汉理工大学硕士学位论文 2 5 2 按引导页表现的内容 可以分为文字的、图片的和文字与图片混合的三类。 文字的类的引导页一般都是公司的名字和公司的宣传标语，目的在于让浏览 者在第一时间了解到公司的经营理念，吸引浏览者进入网站。这种方式的引导页 设计是目前很多公司网站所使用的方式，优点是简单明了的让浏览者了解到网站 信息，缺点是视觉效果不是很理想，比较呆板、生硬。对于习惯了被各种优质影 像所包围的浏览者来说难以产生吸引力。图片类的引导页，是比较直观地在浏览 者头脑里树立公司的形象。一般多为公司的各种照片、产品图片、公司文化象征 性图片。这种方式在视觉吸引力方面非常具有优势，尤其是设计优秀的公司标志， 对于浏览者来说特别具有视觉吸引力，它的缺点在于单纯的图片难以让浏览者对 公司的名称以及公司的经营理念印象深刻。下图为中国地质大学单独的图片引导 页，用了一张很清晰自然、独特的标志性建筑物图片给人留下很深的印象，色调 统一，传统构图 图2 - 3 中国地质大学引导页h t t p ：m c u g e d u c n 还有一类是文字与图片混合出现的引导页，结合了上两种的优点，通过抽象 和形象双重刺激浏览者的大脑，树立公司形象，更好的传达出公司的文化，达到 宣传目的。下图为木兰天池引导页为一个风景展示动画，风景优美，给人想象、 优美舒心的感觉，非常优美、宁静。 b 武汉理工大学硕士学位论文 图2 4木兰天池引导页h t t o ：w w w n , l t c c n 25 3 按弓i 导页的发挥的作用 引导页可以提示浏览者通过更适合的方式浏览网页；可以让浏览者产生兴 趣，增加浏览量；也可以作为企业的一个形象宣传方式；还可以引导浏览者进入 不同的功能区。按引导页的发挥的作用不同可以分为不同的类别。由此可以分为 引导方式型、兴趣型、形象宣传型和功能引导型四类。 引导方式型是从浏览者的利益出发来设计最适合的浏览方式，这种方式有利 于提高浏览者打开页面的速度，也为网站进一步吸引浏览者进入主页打下速度的 基础。它更好的照顾用户的利益，可以让用户看到最佳的网站效果。由于各地方 的发展速度不同，电脑的配置不同，显示器的尺寸不同，用的浏览器也不尽相同。 浏览器显示效果，上网速度等方面的不同，网站的设计者应该充分考虑用户的处 境，选择合适的方式让浏览者最方便的打开网页，并选择一个最佳的方式进行观 看。比如有的习惯用n e t s c a p e 浏览器有的习惯用i e 浏览器，使用的版本也有 不一样，在显示器尺寸方面也不一样，这有一个统计表显示了这个问题。7 用户所使用的浏览器和显示模式设置： 浏览器 i e 6 0i e 5 0其他 5 6 o 4 2 4 1 6 显示模式设置 1 0 2 4 x 7 6 88 0 0 x 6 0 0 1 0 2 4 其他 4 7 7 4 6 3 2 矾2 4 图2 - 5 网上营销新观察h t t p ：m m a r k e t i n g m a n n e t 一个网站设计者，需要设计出不同的环境下显示出最佳效果的网站，充分考 虑用户的处境，这样才是人性化的设计。所以，在用户点击网址后，看到的并不 是网站主页，而是一个引导用户采用最佳方式浏览网页的页面，这样的设计就显 嘲i ：营销新规察冯英健2 0 0 3 0 81 8 9 武汉理工大学硕士学位论文 得要人性化的多。 兴趣型的引导页，这一类一般多见于个人网站或艺术网站，多数是动画，或 者是加入语言的特效。这样的引导页用得好会有事半功倍的功效，特殊效果像水 滴效果、波浪效果、三维效果等，可以最大程度的调动起浏览者兴趣，给人一种 奇特的效果，更能加深印象。 图2 - 6 兴趣型的引导贝 柒夜黎明起飞网站引导页h t t p ：w w w w e b t y c o m 形象宣传型，多数企业网站都选择这种引导页的设计形式，这也是最常见的 种引导页形式。互联网的快速发展，互联网用户的不断增多，以及网络相对低 廉的宣传费用都促使各大企业纷纷建立自己的企业网站。企业网站在公司形象的 确立，理念的传达，以及新产品的发布推销方面都具有很好的效果所以，在这 个信息化的社会，形象宣传型成为一种主要的引导页形式。网站作为一种新的媒 体，是公司的一种新的宣传方式。网站是比较全面地介绍公司各方面的信息，从 总体上进行宣传。引导页可以作为公司的理念宣传、精神宣传、形象宣传，起到 第一印象的作用。引导页好比企业的大门，它既是一个入口，也是一个给人第一 感觉的企业形象。这一类引导页可以做成静止的页面，也可以做成动态的页面， 但都是为了宣传企形象。 1 0 武汉理工大学硕士学位论文 图2 7 形象宣传型 北京保利香槟花园网站引导页h t t p ：m , p o l y x i a n g b i n , c o m c n 功能型引导页，这一类引导页是引导浏览者根据需要进入不同的功能区。这 种引导页分类清楚，简洁明了，可以让浏览者在最快的时间内找到自己所需要的 资料。 图2 - 8 大众汽车同站引导页图2 - 9 华润风凰城网站引导页 2 6 网站引导页的构成要素 在多媒体整合的网络环境中，网页所呈现的信息也越来越多元化，对于网页 浏览者而言，最重要的是网页内容的信息必须有效传达给浏览者，而如何将内容 信息做有效的传达? 则必须在内容设计上借助于网页构成要素的特性来设计以 吸引浏览者的注意。网页的构成要素包括了文字、图形图像、网络动画、网络音 频与视频画面编排、超连结等多媒体要素，借出这些构成要素的良好安捧，不但 能引起使用者注意与兴趣，还可以让信息更迅速的被发现与解读。 在网页设计中，传达信息的形式有多种形式，包括文字、图像、动画、视频、 声音。每种形式都有自己传达信息的特点和优势，同时利用多种形式柬传达信息， 可以调动人的多种感官来接受信息，使信息传达的效果更佳，这也是i n t e r n e t 武汉理工大学硕士学位论文 区别于其他传统媒体的重要特点。5 本研究将网站引导页要素及设计要点归纳如下： 2 6 1 文字 在网页中，文字是信息传达用得最多的形式，最早的网页设计不包括其他的 视听元素，是纯文字设计的。发展到今天，文字依然是网站页面传播信息的主要 载体，在版面中依然占有绝大部分空间。文字的设计是网页设计中不可缺少盼一 环，它既能在外观中产生一定的视觉刺激和视觉意境，又能使浏览者在阅读中产 生丰富的情感和心理意境。漂亮的文字给人以美的享受，可以让人阅读起来轻松 舒适；新奇的字体，可以让人阅读起来印象深刻。这些都很容易引起浏览者的兴 趣，提高信息传达的有效性。 2 6 2 图形、图像 图形、图像：图形图像在网页设计中有举足轻重的地位，现在网络上几乎找 不到没有图形图像的网页。运用图形图像，设计师可以美化网页页面效果，提高 网页艺术价值，吸引浏览者注意力。图形图像与文字结合可以加大信息传播的质 量和数量，提高信息传播的率。9 图像表现方式分为动态与静态、平面与立体的 表现。其运用范围包括，网页版面的配置、浏览界面的设计、资讯内容的辅助说 明，产品外观的说明等 2 弓3 动画 网页动画指的是包含在网页页面中的各种动画效果，作为广告宣传是动画传 达信息的主要应用，这种动画一般都附有超链接，可以通过点击它达到广告的网 站或详细内容的广告页面。网页动画带给网页更生动的画面效果，更灵活的技术 解决方式，更有效的传达信息手段，是如今网页设计大量运用的元素。动画呈现 又分为主动与互动显示。主动显示指在进入首页后，画面立即自动显示。互动显 示指经鼠标触及所产生图像转换的动作。 州贞啦计j 制f f 教程谢成开编南师范人学m 版针2 0 0 6 4 阿贝艺术啦计徐成制裴张龙彭纲川绍斌编晶等教育；版札2 0 0 6 9 1 2 武汉理工大学硕士学位论文 2 6 4 音频与视频 网络的音频和视频是指网络中应用的各种声音和影片形式。网络音频和视频 可应用于网络多媒体表演、网络动画、网络广告、互动点播、远程交流、电子商 务等多种领域。网页中的信息传达，声音用得相对较少，主要用于在线广播、在 线音乐、声音新闻、动画和视频配音等，声音格式以m p 3 为主；视频由于数据量 较大在加上宽带的不足，目前在网页中的应用远不如动画那么广泛，主要用于 在线影视、视频广告、视频下载等方面，具有强烈的真实感和现场感，犹如身临 其境。主要格式是l l m 和m p e g 。 2 6 5 超链接 超链接在本质上属于一个网页的一部分，它是一种允许我们同其他网页或站 点之间进行连接的元素。各个网页链接在一起后，才能真正构成一个罔站。所谓 的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页。 也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个 文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文 本或者是一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在 浏览器上，并且根据目标的类型来打开或运行。” 超链接让使用者想要查询其他类资料时，都能方便的选取，能使网站的资料 得到支援与延伸，然而超链接点设计不当或不清楚，将会造成浏览者使用的困难 与搜寻不易 2 6 ；6 版面编排 版面编捧：所谓版面编捧，就是将画面上的文字、动画、图形视频等视觉 要素，加以适当的整理及配置，使之具有视觉美感，增进使用者对内容的理解， 并且产生最佳诉求效果。网页的版式设计同报刊杂志等平面媒体的版式设计有很 多共同之处，它在网页的艺术设计中占据着重要的地位。所谓网页的版式设计， 是在有限的屏幕空间上将视听多媒体元素进行有机的排列组合，将理性思维个性 化的表现出来，是一种具有个人风格和艺术特色的视听传达方式。它在传达信息 ”按照链接路径的小同网页中超链接一般分为以下3 种类型：内部链接，锚点链接和外部链接。如果按照 使用对象的小h h 贞中的链接又町以分为：史奉超链接，幽像超链接，e 衄il 链接，锚点链接，多媒体 文件链接，窄链接等。超链接足一种对象它以特蛛编码的义奉或图彤的彤式束实现链接，如果甲击该链 接，则相与十指d i 洲览器移乍同一叫贞内的某个位置，或打开一个新的嘲负或打开某一个新的哪m 站 中的川贝( 兀度丌科) 武汉理e 大学硕士学位论文 的同时，也产生感官上的美感和精神上的享受。 网页的版面与书籍杂志的排版又有很多差异。印刷品都有固定的规格尺寸， 网页则不然，它的尺寸是由读者来控制的。这使网页设计者不能精确控制页面上 每个元素的尺寸和位置。而且，网页的组织结构不像印刷品那样为线性组合，这 给网页的版式设计带来了一定的难度 2 7 引导页设计原则 引导页设计是整体网站设计中最受瞩目的焦点，其主要功能除了吸引使用者 外，同时也能将整体网站特色呈现出来。而如何设计出具有方便及有用的引导 页? 。 图5 1 汕头金航水产有限公司引导页地幽趣塑丛地噬整世四! 趔 5 1 2 视知觉传达流程 视觉流程是人们的视觉在接受外界信息时的流动过程。这是因为视野的客观 限制，不能够同时接受所有的对象，必须按照一定的流动顺序进行，来改造世界， 这种流动具有随意性优势。可以说视觉流程的形成是由人类的视觉特性所决定 的，由于人的眼睛结构里，视点的产生只有一个。网页是以视觉元素进入人的眼 睛而实现信息的传达目的，网页动画设计必须适应人们视觉流向的心理和生理的 特点。” 当人们在潮览一个网页的时候，必然会有一个感知过程。首先，在一个网页 里，像平面设计里一样有一个最佳视域区和最佳焦点，同时还有一个视觉流程， ( 如图5 2 ) 在一个完整的画面上，注意力最大的是上部a 旱的圆，b 图的左上 部，d 图的小黑点是最佳焦点，c 图的最佳视域百分比是依据人们在一个页面上 “张慧t 格式塔心理学对彤的探t f 理论界，2 0 0 5 7 武汉理工大学硕士学位论文 的视觉注意力的分布关系，比较特殊的是网页设计里的动态元素会对视觉流程的 顺序起到一定的影响，人们在浏览一个页面的时候，首先会对动态的元素所吸引。 同时一些其它元素也会影响视觉流向，如图中线条的方向。 在引导页动画设计中，合理地安排视觉元素，运用好视觉流程和最佳视域， 组织好符合人们视觉习惯的视觉导向，直接影响到传播者传播信息的准确和有效 性，做到视觉流程的自然、合理、流畅，使得页面上的元素在大小、位置、空问 等方面保持一定的节奏感和美感。 图5 - 2 5 2 网站引导页中动画设计的视觉法则 人类在长期的审美实践活动中，熟悉掌握了各种形式因素的特征，总结出了 多种形式美的法则。多样统一是形式美的总规律，其它的形式美的规律都要统一 在这个总规律下面，它是形式法则的高级形式。多样统一是指形式组合的各部分 之间要有一个共同的结构形式和节奏，使人感到整个艺术作品内部既有变化与差 异，又是一个统一的整体。它也指多样化的形式美法则在美的创造中综合统一的 2 8 武汉理工大学硕士学位论文 运用。多样统一的和谐美，是艺术美的关键。2 它的形式美法则主要包括以下几 个方面： 首先，任何艺术上的感受都必须具有统一性，这早己是一条公认的艺术原则。 为了加强艺术作品整体的完整统一性，各组成部分，应该有主和从的区别，重点 和一般的区别。一个完整形态的构成，必然在整体上表现为主导与从属，并由此 派生出整体与局部韵关系。任何一件作品其构成整体的多个局部之问必须有机联 系，作品的美感是从统一整体的效果中感受到的。主从关系是整体与局部之间韵 法则。引导页动画中的主要角色和次要角色，色彩的主色调和非主色调，线条的 主线和非主线都有这样的主宾关系。动画中的主题与副主题，主题形象与陪衬形 象，重点与一般等，都应该按照一定的主从关系进行处理。不然各部分不分主次， 或者竞相突出自己，都会破坏整体的完整统一性，会流于松散、单调、杂乱。 对于引导页动画来说，因为它是为网站引导页的功能而服务的，所以引导页 动画必须体现出其。引导”的功能，也就是说引导页动画必须在比较短的时间内 让浏览者抓住动画中韵重点。重点是指在设计中有意识地突出其中某个部分或要 素，使其成为整体中最能产生视觉吸引力的“兴趣中心”，其余部分明显处于从 属地位，从而达到主从分明，完整统一。只有抓住突出重点，弱化次要部分，才 能吸引浏览者的兴趣，让其按照设计者的意图顺利进入网站。如下图5 3 所示： 幽5 - 3 法国娇兰网站引导页 ”说觉传逃啦计的扔史j 戈学李砚荷1 芦蟛，中国人民人学m 版 ，2 0 0 0 1 武汉理工大学硕士学位论文 | ! i5 3 1 法国娇兰叫站引导贞的视觉中心点 图5 - 4 诗思恩中国网站 崮5 4 1 诗思恩中国网站视觉中心点 幽5 4 - 2 其次，网站引导页动画设计要追求艺术的均衡与和谐。所谓均衡是指在特定 的空l 日j 范围内，形式各要素之日j 保持视觉上力的平衡关系。在视觉艺术中，均衡 武汉理_ 大学硕士学位论文 是任何观赏对象中都存在的特性，在审美上使人产生了视觉平衡心理，得到审美 上的满足，审美中的均衡观念是人们从经验中积累而形成的。和谐是表现形式之 间的协调性，是构成素的一致和协调。和谐是综合了对称、均衡、比例等美的要 素，从变化中求统一j 很巧妙地构成要素的调和。所谓均衡与和谐不只是指物 体在