（设计艺术学专业论文）网页设计中信息的视觉传达研究.pdf

湖北工业大学硕士学位论文 摘要 信息在当今社会是一种不可或缺的资源，信息的传播进入了网络媒体时代给 人们获取信息带来了极大地便利。网络媒体的信息传播速度快、效率高，凭借全 球互联网，突破了时空限制，具有传统媒体不可比拟的优越性。尤其是网络核心 技术w e b 2 0 的出现，给互联网的信息传播带来了巨大的变革。无论在信息传达 的方式上，还是网页界面设计等方面都发生了较大的转变。w e b 2 0 已经成为互 联网新的发展趋势，伴随着w e b 2 0 时代的兴起，w e b 标准系列的发布对网页制 作技术产生了一定的影响，它使以前网页制作的思维发生了根本性的变化，强调 页面结构清晰和信息层次分明成为了当前网页界面设计的发展趋势。 在这样一个新的传媒环境里，网页界面作为用户与信息交流的平台，关乎着 信息能否j i l 页n 的实现流通。因此，它的设计也就变得越来越重要。网页界面设计 虽然同平面设计有着很大区别，但它依然是需要通过视觉来传递信息，所以，在 网页界面中如何把信息通过大众都能很容易识别的视觉形式表现出来，并且使信 息的表述有一个先后的呈现秩序也就非常关键。一个结构合理、信息传达准确而 有序且功能性强的界面能让用户使用方便、高效，会增加用户对界面的喜爱和亲 睐。反之，信息传递不顺畅的页面会使用户迅速转向其它网站。 文章基于对网页界面的信息传播功能特点与网页界面制作技术的发展的分 析，运用比较的方法，阐述了网页界面与传统平面设计不同点，指出网页界面设 计仍然是视觉设计的范畴，设计师的主要任务就是将信息内容视觉化。只不过这 里的平面是电子化的平面，设计手段采用电子技术。虽然多媒体技术使网页的信 息传达进入了听觉感知领域，但也是通过网页中显示听觉效果的视觉标识来实现 的。紧接着作者对信息在网页中以什么样的形式来表现，如何设计能够有效传递 信息的网页界面进行了重点的研究或探讨，较详细地论述了网页界面设计中文字、 图形、色彩等视觉元素的运用方法或技巧，又专题论述了多媒体手段在网页设计 中的应用和网页界面的版式设计技巧问题。 关键词：w e b 2 0 ，网页界面，信息传达，视觉传达，版式设计 湖北工业大学硕士学位论文 a bs t r a c t i nt o d a y ss o c i e t yi n f o r m a t i o ni sa ni n d i s p e n s a b l er e s o u r c e t h ed i s s e m i n a t i o no f i n f o r m a t i o ni n t ot h en e t w o r km e d i ae r ag i v e sp e o p l eg r e a ta c c e s st oi n f o r m a t i o n i n t e r a c tm e d i af e a t u r e st h ef a s td i s s e m i n a t i n gs p e e do fi n f o r m a t i o na n dh i g he f 五c i e n c y b yv i r t u eo ft h e9 1 0 b a li n t e r n e t ，也ei n t e r a c tm e d i a ，s u r p a s s i n gt h el i m i t a t i o no ft i m e a n ds p a c e ，t a k e st h ew e bi n t e r f a c ea sap l a t f o r mt oi n t e r a c ta n db e a r st h eu n p a r a l l e l e d s u p e r i o r i t yc o m p a r e dw i t ht h et r a d i t i o n a lm e d i a e s p e c i a l l yt h ea p p e a r a n c eo fn e t w o r k c o r et e c h n o l o g i e sw e b 2 0h a sb r o u g h tf o r t ht h eh u g et r a n s f o r m a t i o nf o ri n t e m e t s i n f o r m a t i o nd i s s e m i n a t i o n t h et r a n s m i s s i o nw a yo fi n f o r m a t i o na sw e l la st h ed e s i g n o fw e bi n t e r f a c eh a sg r e a t l yc h a n g e d w e b 2 0h a sa l r e a d yb e c o m et h en e wt r e n do f i n t e r n e ta n dh a so p e n e di n t e r n e t sn e wt i m e s w i t ht h en e wt i m e so fw e b 2 0 t h ei s s u e o fw e bs t a n d a r ds e r i e sh a sm a d ec e r t a i ni n f l u e n c eo nt h ew e bp a g et e c h n i q u e i th a s c a u s e dt h ef u n d a m e n t a lc h a n g ei nt h et h o u g h to ft h ef o r m e rw e bp a g ed e s i g n a n dt h e c l e a rw e bp a g es t r u c t u r ea n di n f o r m a t i o nl e v e h a sb e c o m et h ed e v e l o p m e n tt r e n do f t h ec u r r e n tw e b p a g ed e s i g n i nt h i sn e wm e d i ae n v i r o n m e n t ，t h ew e bp a g e ，a st h ee x c h a n g ep l a t f o r mo fu s e r a n di n f o r m a t i o n 。g r e a t l yc o n c e r n sw h e t h e ri n f o r m a t i o ns m o o t h l yr e a l i z et h ec i r c u l a t i o n t h e r e f o r e ，i t sd e s i g nb e c o m e sm o r ea n dm o r ei m p o r t a n t 。a l t h o u g ht h ew e bp a g e d e s i g nd i f f e r sf r o mt h ep l a n ed e s i g n ，i ta l s ot r a n s f e r si n f o r m a t i o nt h r o u g ht h ev i s i o n t h e r e f o r e h o wt op r e s e n tt h ei n f o r m a t i o nt h r o u g ht h ee a s i l yi d e n t i f i e dv i s i o nw a yi n t h ew e bp a g ei n t e r f a c ea n dm a k et h ep r e s e n t a t i o no fi n f o r m a t i o ni nas u c c e s s i v e l y o r d e rm a t t e r sa1 0 t i ft h ei n t e r f a c eh a sr e a s o n a b l es t r u c t u r e a c c u r a t ei n f o r m a t i o n t r a n s m i s s i o n ，o r d e r l ya n ds t r o n gf u n c t i o n ，i tw i l lm a k eu s e r so p e r a t ei na l le a s ya n d l l i 加e f f i c i e n tw a ya n di n c r e a s et h e i rf a v o rt o w a r d st h ei n t e r f a c e v i c ev e r s a ，i ft h e i n f o r m a t i o nt r a n s m i s s i o ni sn o ts m o o t h t h ei 1 1 f u n c t i o n a li n t e r f a c ew i l lm a k et h eu s e r s d i s l i k ei t ，s ot h eu s e r sq u i c k l yt u r nt ot h eo t h e rw e b s i t e s i nt h i sw a y ，t h ew e bp a g e i n t e r f a c ed e s i g nh a sl o s ti t sf u n c t i o nt oc o n v e yi n f o r m a t i o na n db e c o m e sm e a n i n g l e s s b a s e do nt h et e c h n o l o g yd e v e l o p m e n to fw e bp a g ei n t e r f a c ed e s i g na n dt h e f u n c t i o na n a l y s i so ft h ei n f o r m a t i o nd i s s e m i n a t i o no fw e bp a g ei n t e r f a c e ，a n d e m p l o y i n gc o m p a r a t i v em e t h o d ，t h i sa r t i c l ee l a b o r a t e s t h ed i f f e r e n c eo fw e bp a g e i n t e r f a c ea n dt h et r a d i t i o n a lp l a n ed e s i g n a n dp o i n t so u tt h a tt h ew e bp a g ei n t e r f a c e d e s i g ns t i l lb e l o n g st oc a t e g o r yo ft h ev i s u a ld e s i g na n dt h em a i nt a s ko fd e s i g n e r si st o m a k et h ei n f o r m a t i o nv i s u a l i z e d t h eo n l yd i f f e r e n c ei st h a tp l a n ei st h ec o m p u t e r i z e d p l a n ea n dt h ed e s i g nm e t h o du s e st h ee l e c t r o n i ct e c h n o l o g y a l t h o u g ht h em u l t i m e d i a t e c h n o l o g ym a k e st h ew e bp a g ei n f o r m a t i o nt r a n s m i ti n t ot h ed o m a i no fa u d i t o r y p e r c e p t i o n ，t h ew a yt or e a l i z ei ti sa l s ot h r o u g ht h ev i s u a lm a r kt h a ts y m b o l i z e st h e a u d i t o r ye f f e c t t h e nt h i sa r t i c l ef o c u s e so i lt h ee x p r e s s i o nf o r mo fi n f o r m a t i o ni nt h e w e bp a g ea n dt h ed e s i g no fw e bp a g ei n t e r f a c et h a tc a ne f f e c t i v e l yt r a n s m i t i n f o r m a t i o n a n di td i s c u s s e st h ea p p l i c a t i o nm e t h o do ft h ev i s u a le l e m e n t ss u c ha s 湖北工业大学硕士学位论文 c h a r a c t e r s ，g r a p ha n dc o l o ri nd e t a i l m o r e o v e r , t h i sa r t i c l es t u d i e s o nt h es p e c i a l s u b j e c to ft h ea p p l i c a t i o no fm u l t i m e d i at e c h n o l o g yt ot h ew e bp a g ed e s i g na n dt h e f o r m a td e s i g nt e c h n i q u eo fw e b p a g ei n t e r f a c e k e yw o r d s ：w e b 2 0 ；w e bp a g ei n t e r f a c e ；i n f o r m a t i o nd i s s e m i n a t i o n ；v i s u a l t r a n s m i s s i o n ；f o r m a td e s i g n 湖班j 案大謦 学位论文原创性声明和使用授权说明 原创性声明 本人郑重声明：所呈交的学位论文，是本人在导师指导下，独立进行研究工作所取 得的研究成果。除文中已经标明引用的内容外，本论文不包含任何其他个人或集体已经 发表或撰写过的研究成果。对本文的研究做出贡献的个人和集体，均已在文中以明确方 式标明。本声明的法律结果由本人承担。 学位论文作者签名：吾、1 、串卑日期：哆年厂月t 日 学位论文版权使用授权书 本学位论文作者完全了解学校有关保留、使用学位论文的规定，即：学校有权保留 并向国家有关部门或机构送交论文的复印件和电子版，允许论文被查阅和借阅。本人授 权湖北工业大学可以将本学位论文的全部或部分内容编入有关数据库进行检索，可以采 用影印、缩印或扫描等复制手段保存和汇编本学位论文。 学位论文作者签名：t7 ( 孝军 日期：吵引月f ，日 指导教师签名 日期：妒年 湖北工业大学硕士学位论文 1 1 本文的研究背景 第1 章引言 当今时代国际间的合作与交往越来越密切，信息的交流也越来越频繁，可 以说信息把全球紧密联系在一起。信息的表现丰富多样，可以存在于文字中， 也可以存在于图象中，又或者存在于视频等形式中。由于不同的媒介对信息传 达有着不同的方式，因此，就要对信息进行归纳总结和分类，然后以受众易认 知的视觉化的标识符号来表现信息。对信息这样的一个规划，能使信息变得容 易理解，从而会提高信息传达的质量和有效性。而所有媒介的目的都是传达信 息，设计也是为信息传达服务的，因此，网页设计就是通过对信息进行有效规 划来便捷的传达信息，或者说就是对网页界面信息的视觉化设计。 互联网的出现不仅扩展了人们收集信息的途径，同时，其作为一种生活方 式也对人们的行为方式和思维方式产生了重大的影响。近些年，随着网络技术 的飞速发展，尤其是w e b 2 0 时代的到来，给网络带来了新的信息共享方式及 新的技术运用，改变了网络中内容组织和信息传播的方式，也使网页界面视觉 传达的形式多样化，例如网页中能够运用数字化技术手段将语言、声音、图象、 文字等有机融合在一起，然后通过各种形式表现出来，从而扩展了网页界面视 觉设计的表现方式和手段。 w e b 标准作为一系列规范的总称，它的目的就是要使网页信息能够在未来 新的终端设备上显示且能使页面数据被分享和交换。国际万维网组织发布的这 套标准要求网页界面结构清晰，信息分布合理，因此，对界面的版式及制作技 术产生了巨大变化，它要求以最合理的页面布局来展示信息，必将会极大的促 进信息的流通和分享。 网页是信息在网络传播中的载体，也是连接信息接受者和信息发布者的纽 带，因此，如何对网页中的信息进行有效的规划，使信息有条理、有秩序地表 现出来，就不仅仅成为网页界面设计要解决的问题，同时也关乎到网页是否具 有吸引力的问题。当前，很多国内网页界面中的信息缺乏秩序性，且仅仅是信 息的初始状态，不论对于信息接受者还是提供者而言，都没有最大程度的利用 这个载体获取或者提供有效、丰富的信息，这使得网页没有充分发挥其作为传 播信息载体的功能，所以，本文从视觉设计的角度来分析并阐述网页界面设计 对于传达信息的作用以及怎样通过网页界面设计来提高其传播信息的质量。 湖北工业大学硕士学位论文 1 2 国内外研究现状 近年来，越来越多的人开始从事网页界面设计，使其进入了一个快速发展 的阶段。网页作为传递信息的媒介，是为信息内容服务的。尤其在w e b 标准发 布后带来的网页制作技术上的改变以及在w e b 2 0 时代里信息传播方式发生变 化的情况下，对网页界面设计提出了进一步的要求。而目前，国内对这方面的 研究还处在较低的层次上。首先，网页结构层次不清晰，视觉信息不明确，浏 览者往往要经过多次的点击后才能找到所需信息。其次，国内的网页界面设计 多关注网页的视觉效果，以看或者视觉为主，而忽略了信息传达的功能性和受 众接受信息的渠道的多样性。除此以外，从信息传播的角度来研究网页界面的 论文专著较少，对于网页界面中信息传达而言，显得有些偏颇，不够全面，对 于当今时代网页设计发展趋势的指导作用不大。因此，我们还需要在实际工作 中进行深入的、系统化的研究。 国外的设计同行在网页界面设计中将艺术设计理论、视觉原理、交互原理、 信息设计等理论融入其中，以此作为网页界面设计的理论基础。另外，重视网 页界面的交互性和重视用户的参与性体验，以及网页界面设计的人性化等都成 为构建网站的必要考虑因素。微软公司的网站策划主管p e t e r 指出：“在经过一 些年的发展后，网站设计的思路开始逐渐清晰，网站要以功能至上，而且是内 容来决定形式。大体来讲，网站设计是在发生冲突的需要之间求得平衡的艺术。 一方面，网站设计应该尽量简单易用。另一方面，要确保站点中所有强大的工 具可为用户所用 。这些研究的成果为网站设计的思路指明了方向，欧美的网页 界面设计简洁清晰，在加强界面人机交互功能性的同时，更加注重信息传递的 品质。国外在网页界面设计上的成熟理论和实践经验是值得我们借鉴学习地。 1 3 本课题研究意义 网页界面设计是平面设计在网络时代里的一个延伸，或者说是一个新的发 展。网页界面设计的好坏直接决定着页面信息能否有效的传达，因此，网页界 面中怎样实现信息有效的传达就成为了一个新的研究课题。本文以w e b 2 。0 时代 为背景，从信息传播的视角出发，通过对网页中信息的视觉表现要素的分析， 并把它同平面设计领域里的视觉元素进行对比，探讨了网页界面信息的视觉表 现要素的特点，使人们对网页界面信息的视觉表现有了进一步认识。同时，结 湖北工业大学硕士学位论文 合w e b 标准发布后所带来的网页制作技术的变化，对网页界面设计提出了自己 的一点见解，也为日后进行这方面的研究和实践提供了一个可供参考的资料， 并希望对网页设计的相关教学能起到一定的指导作用。 1 4 本文的主要研究方法 ( 1 ) 分析与综合法：借助视觉传达、思维科学以及其他领域的研究成果和 方法，把信息传播方式同w e b 2 0 时代的网页界面设计的特点相结合，系统的、 综合的分析研究网页中信息的传播特点。 ( 2 ) 类比法：把网页界面设计同平面设计进行对比分析，从视觉表现元素 以及版面设计形式上来阐述网页界面信息传达的视觉化表现特征和多样化的表 现手段。 ( 3 ) 举例例证法：从实际案例出发，选取具有代表性的网页界面设计案例 进行分析，通过对其良好的版面形式及特点分析，阐述网页界面设计是怎样提 高信息传递的品质的。 湖北工业大学硕士学位论文 第2 章网络媒体信息传达概述 2 1 信息概念的现代诠释 现代社会已被人们称之为信息社会。信息在当今社会生产、生活的各个方 面和各个领域被广泛地使用。然而，何谓信息? 其定义似乎让今天的人们越来 越模糊。现代汉语词典关于“信息”的解释是指音讯、消息。但就信息在社会 中的传播特点来说，媒体的变化使信息不仅仅表现在“音讯消息”的范围，从 而让人们对信息概念很难准确的把握。在人类社会进程中，曾经有过辉煌的信 息技术创造，语言、文字的形成，印刷术的发明j 为最基本的信息交流奠定了 基础。到了近代，电报、电话、广播的发明使远距离快速传输信息成为现实， 大大缩短了人与人之间的距离，信息的作用也不断被放大。最早把信息作为科 学对象来加以研究的是在通信领域，因为，通信的本质，实际上就是传输信息。 通信科技工作者为了解决通信中的种种问题，需要深入研究信息的本质及其度 量的方法。1 9 2 8 年，哈特莱在贝尔系统电话杂志上发表题为“信息传输 的论文，把信息理解为选择通信符号的形式。控制论的奠基人维纳则把信息看 做广义通信的内容，他在控制论与社会一书中给出了这样的定义“信息就 是我们在适应外部世界，并把这种适应反作用于外部世界的过程中，同外部世 界进行交换的内容的名称 。由此可见，通信领域里对信息的研究取得了丰硕的 成果。 随着科学技术和经济的发展，人们的认识水平不断提高，信息概念也在不 断的拓展，在计算机出现后，信息被看做数据，而当信息服务逐渐发展起来后， 信息又被看做经验、知识和资料。今天，随着互联网的普及和利用，网络世界 把信息带到了人类社会生活的每一个领域和角落，使人们实实在在感受到了信 息的普遍性和不可或缺性。现代人们对信息的理解是：包括在网络上传输的一 切数据、符号、信号、资料，是一个无所不包的庞大的集合体。由此可见，信 息的概念是十分复杂的。前面所列举的信息定义是人们从不同角度在不同条件 下对信息的认识和理解，如果没有这些约束条件，我们可以将其定义为：客观 事物存在的方式和运动状态的表现形式【2 2 1 。 4 湖北工业大学硕士学位论文 2 2 信息传播媒介的演进与当今信息传播的特点 信息通过媒介才能传播，媒介的形式与先进发达与否，决定了传播的速度 与效率。在理解媒介一论人的延伸一书中，麦克卢汉以媒介为切入口将人 类社会时至今日出现的媒介分为四种类型：( 1 ) 人与人进行直接地口头交流的 靠口头传播时代 或叫做“语言传播时代 ，在人类社会早期穴居生活使劳动高 度协同，个体之间的信息交流成为必须，于是人类需要共识信息系统，在表达 形式上，首先人类是使用体态语言( 如手势、身体动作、面部表情) 进行交流， 后来出现了有声语言，极大地推动了各族之间的交流融合。( 2 ) 由于文字的发 明，人类进入了“书写媒介时代，文字使人类的信息传播突破了时空的限制， 能够被长期的保存和传播。( 3 ) 活版印刷技术的出现引发的活字媒介时代。1 4 4 5 年古腾堡的活版印刷技术发明以后，资讯传播得到了扩展，并从1 5 世纪一直持 续到2 0 世纪，这被称为“印刷媒介时代”。印刷媒介的诞生，使得报纸、期刊、 书籍迅速普及，大大促进了信息的交流，文化知识得到广泛传播。( 4 ) 1 9 世纪 后半期开始，以贝尔发明电话机、马尔科尼发明的无线电通信为象征的“电子 通信时代”，以及2 0 世纪初随着收音、电视机的登场而进入的“电子媒介时代”。 印刷媒介和电子媒介在相当长的时间内并驾齐驱，且由于在信息传播模式上的 相似，被称为大众媒介。 2 0 世纪后期，以计算机和通信技术为基础的互联网的出现，使人类步入了 “网络媒介时代”，它融合了前面几种媒介的优势于一体，使信息传播真正突破 了时间和空间的限制，带来了信息传播的巨大变革。 仔细分析我们上文提到的五种类型的传播媒介，就能发现，前四种媒介在 信息的传递上是种“一对众的传播模式，也就是说，信息的传播者借助媒 介把自己的思想观念或者意图传达给大众，而不管这些信息是否能被大众接受， 是否对大众有用。相对于信息接收者来说，这样一种被动的、受压迫的接受方 式，让信息的传受双方处在一个不平等的位置上，这是传统媒介在信息传播中 的一个共性，对于信息的交流来说是一种束缚。而网络媒介具有独特综合传播 功能，打破了以前各种传播平台之间的壁垒，形成了迄今为止人类最大的综合 传播平台，它利用计算机显示屏上的网页界面，使得数以千万的受众不仅可以 同时在网上获得信息，而且可以在网络媒介中自由地发布和交换信息。“网络媒 介扭转了大众传播给人际传播带来的自上而下、缺少交流、反馈，没有互动的 传统传播模式，实现了每个人都可以参与“点对点 自下而上和平行互动的“民 众传播【5 1 。 近几年，随着网络技术的不断革新，使得信息在网络媒体中传播的方式 5 湖北工业大学硕士学位论文 和手段产生了巨大的变化，同时，也在一定程度上给人们的生活、工作和思维 方式进一步带来了重大影响，正如麦克卢汉所说“每一种“媒介”发出的“信 息”都代表着或是规模或是速度的变化，所有这些都会介入到人类的活动中 ， 这句话包含着这样一层意思：一种媒介的产生会在社会中产生新的行为标准和 方式。网络使信息的传播表现出如下的三个特点： ( 1 ) 信息传播的即时性：2 0 世纪末期，以数字化技术为代表的网络媒体 以迅猛的速度进入了人类生活。由于数字化技术的优势，使得信息的表现形式 丰富多样，同时，网络传播速度快、制作发布信息便捷，还可以随时更新信息， 在速度和效率上远远超过了传统媒体。 ( 2 ) 突破了时空限制：数字化网络和通信技术的全面发展，将整个世界连 接起来，推动了信息的全球化，互联网络延伸到全球的每一个角落则使信息突 破了时间和空间的限制，让人足不出户就能了解全球任何地方发生的事情。与 传统媒介相比，网络媒体打破了信息传播的地域限制，扩展了信息传播范围， 有利于信息的全球共享。 ( 3 ) 信息的互动性：“网络媒体对信息传播最大的改变表现在信息传播者 与接受者关系上的变化，并由此形成的信息交流的互动性”1 5 】。在网络这个全 人类共同拥有的平台上，网络技术为用户提供了一个能够自由控制的“信息平 台 ( 例如：博客、播客、个人主页等) ，使任何人都可能成为传播主体，自由 地编辑和发布信息，与对方甚至大众交流。传播者和接受者处于完全平等的地 位，它们相互承认、相互沟通、共同分享着信息，这样一种双向的交互式的传 播超越了传统媒介中信息只能单向流动的局限，实现了传受双方的互动，使信 息的交流变得更加轻松、方便自由，极大地提高了信息传播的效率。 2 3 网络媒体的核心技术及信息载体网页界面 2 3 1 网络的核心技术w e b 2 0 网络媒体的信息表现载体是网页界面，网页界面的功能是视觉传达，网页 界面设计与运用同网络媒体w e b 互联网模式及其技术发展密切相关。了解 w e b 2 0 的特点及其发展是进行网页界面设计的技术依据或前提。 w e b 2 0 是相对2 0 0 3 年以前的互联网模式( 简称w e b l o ) 的新一类互联 网模式的统称，是一次从核心内容n # i - 部应用的革命【l 】。它在方便用户的前提 下对w e b l 0 从技术、功能等方面进行了改进和升级。从模式上，是单纯的“读 6 湖北工业大学硕士学位论文 向“写”、“共同建设 发展；由被动地接收互联网信息向主动创造互联网信息 迈进。从工具上，是由互联网浏览器向各类浏览器、r s s 阅读器等内容发展， 实现了网站之间的信息共享和交流。 w e b 2 0 加强了互联网的关联性与社会性，为公众提供了一个技术平台， 使得大众都能够积极参与创造信息和发布信息，并根据自己的喜好自由选择信 息的聚合，成为了w e b 2 0 的显著标志，同时这种变化也对网页界面设计的形 式提出了新的要求。w e b 2 0 无论从交互方式、网络技术等方面都是全新的体 验，它的出现给互联网带来了一场巨大的变革。 2 3 2w e b 标准与网页界面 现实生活中，我们常用手机中的q q 软件进行聊天、上网或者浏览网页， 尽管大家的手机型号、手机的运营网络并不一样，但它们之间仍然能够通过网 络实现信息的流通，这是什么原因呢? 实际上这是“标准 在起作用，这个“标 准 能使信息通过x m l 格式进行转换，从而实现在各种不同型号、不同网络 的手机之间顺利流通，这个标准就是w e b 标准，它是一系列规范的总称，主 要包括x h t m l 、c s s 2 0 、d o m l 0 和e c m a j a v a s c r i p t 。 它是国际万维网组织 ( w 3 c ) 在h t m l 基础上，制定的一系列的技术规范，以实现大量h t m l 信 息向x m l 标准的过渡，按照这些规范制作的网页符合x m l 格式规范，能够在 p d a 、网络电视、移动电话以及任何网络终端设备上显示，而且还能使网页页 面数据在以后被分享、重用和交换。 用w e b 标准制作的页面代码量小，可以节省带宽。因为用d i v ( 层) 来 布局结构本身就比t a b l e ( 表格) 简单，表格布局的层层嵌套造成代码臃肿， 文件尺寸膨胀，而用d i v + c s s 比用t a b l e 布局能节省2 3 的代码，同时还使 页面信息结构清晰，内容与表现相互分离，这样就引起了网页版面编排的变化， 版面不再以“表现”为主进行设计，而是以内容为前提来分析和规划界面结构。 w e b 标准对网页在制作方法上的改变，使版面设计从注重形式向以功能为主转 变，尤其对网页界面的版式设计产生了很大的影响。 湖北工业大学硕士学位论文 第3 章网页界面的特点及网页界面的设计 3 1 网页界面的概念及制作技术的发展 界面在现代汉语词典中的定义是：划分、隔开两物体之间的接触面。 可以说它是连接两个物体的中介，且通过这个中介可以实现信息的交流。从设 计的角度来看，界面可以理解为是实现人与机器之间进行信息交流的媒介，界 面是为交流而产生的，网页界面也不例外，可以说网页界面是用户与互联网之 间相互交流信息的媒介，或是指用户在互联网上便捷地获取所需信息，同时也 能发布相关信息的一种交流平台。 1 9 9 2 年，美国国家超级计算机活动中心( n c s a ) 的m a r ca n d r e e s s e n 开发 了一种叫做m o s a i c ( 首个具备图形界面的网页浏览器) 的程序。它能够在界 面上显示图形，且能通过超链接实现网页间的漫游，而所有操作只需利用鼠标 即可实现，有了m o s a i c 作为技术支持的工具，i n t e r n e t 浏览器受到了用户 及媒体的广泛关注，并由此成为了一个国际性的大舞台。而网页有了图形化的 界面后，逐步开始走上了技术和艺术化相结合的道路，特别是近几年，随着网 络技术的发展，网页中融合了更多的多媒体元素，使得网页界面的形式更加丰 亩【4 1 】 田o 2 1 世纪初期，h t m l ( 超文本标识语言) 的不断发展，网页制作技术的不 断改进，加上很多可视化的专业开发工具( 比如：d r e a m w e a v e r 、f i r e w o r k s 、 f l a s h 、f r o n t p a g e 等) 的出现，降低了进入网页界面设计的门槛，使得越来越多 的从事艺术设计行业的人开始进行网页界面设计，从而使其逐渐成为一大新的 设计领域，并由此进入了一个快速发展的阶段。 网页界面是传达信息的一个平台，也是用户和互联网发生互动的一个场所， 用户与互联网之间的信息交流正是在网页界面上进行的。网络上的各类信息通 过网页界面传达给用户，用户在获得信息后经过人脑的思考加工，再通过网页 界面反馈给对方。这样，网页界面就实现了用户与网络之间信息的交流。而如 何使信息的传达更加有效，如何使用户操作起来更为简便，这就不得不涉及到 网页界面设计的问题。一个好的网页界面设计，不仅要满足和适合人们在视觉 及心理上接受信息的需求和特点，还要注重网页界面各信息传达载体之间的关 系。 w e b 2 0 时代的到来，改变了过去信息传播的方式，加强了信息传播的互 8 湖北工业大学硕士学位论文 动性，对网页界面设计提出了更高的要求，直观易懂，操作简单且具有引导功 能的网页界面成为当前网页界面设计新的趋势，它不仅使信息的交流更加顺畅， 还给用户带来良好的体验，最终达到提高网页界面使用效率的目的。 3 2 网页界面中的视觉传达和信息传达 视觉传达设计就是以眼睛可以看到的造型元素对信息进行设计的一种行 为，视觉传达设计这一概念大概是上世纪末期由国外引入我国的，以前我们把 它叫做平面设计，实际上，视觉设计是对平面设计概念的一种提升。传统的平 面设计被称为视觉传达设计，是因为平面设计作品主要是给人们以观看的，超 出眼睛观看的范畴的其它感觉方法，就不能称为视觉传达。视觉传达在设计领 域中，也就是通过可视化的元素将所要传达的信息表现出来，即将信息内容形 式化、视觉化。在电子及数字化技术中，网页界面较之传统的平面设计方法有 了广泛的拓展。但网页的传达功能与平面设计没有根本性的不同，网页除了载 体性质同平面纸质不一样外，仍是借助电脑显示屏来表现着平面性，它给人们 带来的仍然是视觉效果，是没有超出眼睛范围的其它感知方式。其所用的造型 元素仍然是通过视觉传达信息，故网页的第一功能仍然是视觉传达功能。 平面设计的目的是传达信息，但平面设计的信息表现有其局限性，局限于 文字、图形、色彩等比较有限的、且属静态的范围。而在网页中，由于使用了 数字化技术手段，使网页界面的视觉传达方式与平面的视觉传达有了很大不同， 最主要的特点就是文字可以滚动，图形可以变化，色彩可以转换，某些造型元 素产生了动态的效果，这些变化虽然没有超出视觉感受的范围，但使网页界面 视觉传达的内涵有了新的扩展。视觉传达手段的数字化，使得网页的信息传达 远远不是局限在传统的平面设计范围，信息传达变得更为丰富多彩，这表现在 二个方面：一是视频界面中的动态带来了丰富性；二是视频界面也可以切换和 链接，每一层界面都有每层界面的视觉要素组合，也提供了一层新的信息。视 频界面的转换及可链接性使网页的视觉传达与信息传达构成立体的建筑，增加 了网络的信息传达的丰富性。 网站的首界面是一个网站的“领航”页，它是用视觉元素来表现提炼后的 信息，或是概念化的信息，而不是信息的全部具体内容，主页的视觉传达不可 能反映信息全部完整的内容。浏览者要了解全部的信息内容，就要从视频界面 中选择自己需要了解的信息表现元素，然后通过鼠标点击来获得所要的全部信 息，从而产生网页的信息传达。鼠标的点击是实现视觉传达到信息传达目的的 “开关 或闸门。这也说明网页的视觉传达与信息传达的实现之间是有界限区 9 湖北工业大学硕士学位论文 分的，这是平面设计视觉传达没有的功能。 基于通信和数字化技术的网络媒体，不仅具备超链接特性以及交互性特征， 还综合了以往传统媒介的特点，这使得网页中的信息传播具有以下特点： ( 1 ) 选择性：网页界面信息表现形式不仅仅是图形、文字等还包含着声音、 视频、音频、动画等，这些表现元素在视觉、听觉甚至触觉上刺激人的感官使 人获取信息，扩展了人获取信息的渠道，同样也给受众提供了选择性，受众可 以根据自己的喜好、习惯来选择最合适的表现形式理解信息。例如：网页界面 中，对同一个信息，分别以文字、图像、视频等形式进行表述，有的浏览者可 选择阅读文字来获取信息，有的则通过关看视频来获取信息，这种选择性加强 了受众对信息的关注度，从而提高信息传达的质量。其次，网页具备超链接的 功能，它实现了信息之间的跳转，使信息的联系更为紧密，在传统媒介中，例 如报纸、书籍上的信息都是从头到尾前后相连，是一种直线性的传递方式，同 时，其受篇幅的影响，只能承载一定量的信息，读者也只能被动接收，对于某 些相关联的信息缺乏了解。而由于超链接技术，网页之间能进行跳转，不再是 直线传递，实现了信息的跳跃性传递，不仅使浏览者能看到信息，通过链接也 能了解相关的信息，而由于网页的无限性传播特点，信息量非常庞大，能够给 予浏览者充分自由的选择，体现了网页中信息传达的灵活性。 ( 2 ) 互动性：“互动一词极为常见，社会心理学家给出的定义是：“两个 或两个以上的人们之间的行为互相影响的过程。，【5 】互动性是指信息传达者与受 众之间的互动交流，网页中的互动应该说是信息的交流双方利用网页界面中具 有交互性功能的设置互相回应对方的过程。例如：通过操作按钮、表单等元素 来表达意见，同对方进行信息的互动。这些互动设置使信息交流的双方充分向 彼此表达自己的观点，从而提高了信息传达的有效性。信息的互动成为了网页 中信息传达的一种新的经验和行为。 ( 3 ) 网页的信息传达具有层次性，网页的信息传达是通过鼠标一次次的点 击来传达全部信息的，每一次的点击反映出一个层面，因而具有层次性。 ( 4 ) 信息传达方式的多样性：由于网页数字化技术带来的新的信息传达手 段，不仅通过对视觉刺激产生信息，还有声音冲击及影像变化产生的对人体其 它感觉器官的冲击，所以，有学者总结认为，网页的信息传达触动了人的“五 观”，信息传达类型更丰富多样。 1 0 湖北工业大学硕士学位论文 3 3 网页界面设计同平面设计的差异 麦克卢汉说：“媒介之间是相互关联的，一种媒介注定是另一种媒介的内 容 。王受之先生也曾提到：“二十一世纪平面设计是朝着多媒体方向发展的 。 可以说网页设计是平面设计的一种空前的延伸，网页界面设计的视觉元素依然 是与平面设计相同的元素，但由于网页界面设计受到电子通信技术和网络传输 以及网页制作技术的影响，所以，网页界面设计有着一般平面设计不同的地方。 表现在三个方面： ( 1 ) 媒介及尺寸的不同 网页界面是伴随着计算机及通信技术的发展而产生的，它是以图形、文字、 色彩及多媒体视听元素为表现载体且通过显示器呈现出来的；平面设计作品是 以图形、文字：色彩为视觉表现元素，以纸为媒介的印刷品形式表现出来的； 两者在媒体上存在着本质的不同。 另外，印刷媒介和网络媒介最大的区别是色彩模式，印刷品的色彩是由 c m y k 四种色彩组成，而网页界面所使用的显示器色彩由r g b 三种色光所组 成，其色彩亮度要大于平面的印刷色彩，利用这些色彩可以创造出活泼亮丽的 视觉感受。 由于两者的媒介不同，尺寸单位也不一样了。印刷是以生活中常用的度量 单位来计算，而网页是以电脑显示器的单位( 像素) 来计算的。印刷品的尺寸 可以根据实际需求预先知晓且印刷品尺寸在印刷前后都是一样，因此，设计者 对其就能有一个很好的把握；网页的页面是根据浏览者电脑显示器窗口的大小 来显示的，而由于页面在制作过程中所使用的显示器的分辨率不同，导致了网 页在其它浏览器窗口中的显示大小不一样。 ( 2 ) 交互功能：交互性是网页界面设计区别于其他传统媒介的最大的优势 之一。网页的互动是指网络与用户之间的信息双向沟通和传输，网页界面的互 动设计是通过利用超链接技术、按钮、表单等方式，给用户提供了充分自由选 择的权利，用户不再是被动的接受信息，还能够根据自己的需求主动发布信息 或针对某信息反馈自己的观点和意见，从而享受到参与的喜悦。传统的平面设 计只能单向的向大众传递信息，不能同受众进行互动交流，也无法即时获得受 众的反馈信息。 ( 3 ) 多媒体元素：以数字化技术为基础的互联网集中了报纸、广播、电视 三大媒体的综合优势，实现了声音、文字、图像、影像等的有机结合。这种多 媒体技术使得网页在信息传达的表现形式上更加丰富，同时也给用户带来了丰 富的视觉效果，令其产生审美愉悦。比如：f l a s h 制作的广告动画，不仅丰富 湖北工业大学硕士学位论文 了视觉体验，吸引浏览者的目光，同时也传递了商业信息，达s i l t 宣传目的。 再比如音频、视频、影像这些多媒体元素有利于更为全面直观的传递某娄信息， 弥补图形、文字等传达信息的不足。而传统的平面设计作品是以静态的视觉元 素来表现的，同多媒体元素相比在信息传达的形式和功能上要差得多。 竭页界面设计平面设计 可视化的屏幕 尺寸 纸媒介及其大小 多攥体 见听元素 围开；文宇色彩 ( 声音、视频 版面设计 线性阅读 跳跃性阅读 立j 性 圈3 - l 以上粗略的分析了网页界面设计的几个特点，是与传统的平面设计为参照 对象的( 见图3 - 1 ) ，但这并不是说网页界面设计与平面设计是根本不同的，相 反，网页界面设计与平面设计都是视觉传这设计，两者并没有本质上的差异， 目标都是一个，即将信息内容视觉化，通过视觉设计实现信息传达。 3 4 网页界面设计与受众 网页界面是给人传递信息的。现实生活中的行业众多，同样，网站的行业 属性也不尽相同，其所面对的受众也不一样。而由于人在年龄、性别、职业以 及受教育程度、生活习俗等方面的差异，自然对于信息的需求也各不相同，尤 其这些差异所形成的独特的办事方法，直接影响了人们在浏览网页时的内容选 择和操作方式。人的不同的行为特征对网页界面设计产生了很大的影响。所以 在规划网页界面设计时，要对目标群体的特征进行分析，同时还耍对目标