网页设计中信息的视觉传达研究

《网页设计中信息的视觉传达研究》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

湖北工业大学硕士学位论文网页设计中信息的视觉传达研究姓名：刘中华申请学位级别：硕士专业：设计艺术学指导教师：周峰20090501 湖北工业大学硕士学位论文摘要信息在当今社会是一种不可或缺的资源，信息的传播进入了网络媒体时代给人们获取信息带来了极大地便利。网络媒体的信息传播速度快、效率高，凭借全球互联网，突破了时空限制，具有传统媒体不可比拟的优越性。尤其是网络核心技术WEB2．0的出现，给互联网的信息传播带来了巨大的变革。无论在信息传达的方式上，还是网页界面设计等方面都发生了较大的转变。WEB2．0已经成为互联网新的发展趋势，伴随着WEB2．0时代的兴起，WEB标准系列的发布对网页制作技术产生了一定的影响，它使以前网页制作的思维发生了根本性的变化，强调页面结构清晰和信息层次分明成为了当前网页界面设计的发展趋势。在这样一个新的传媒环境里，网页界面作为用户与信息交流的平台，关乎着信息能否JIl页N的实现流通。因此，它的设计也就变得越来越重要。网页界面设计虽然同平面设计有着很大区别，但它依然是需要通过视觉来传递信息，所以，在网页界面中如何把信息通过大众都能很容易识别的视觉形式表现出来，并且使信息的表述有一个先后的呈现秩序也就非常关键。一个结构合理、信息传达准确而有序且功能性强的界面能让用户使用方便、高效，会增加用户对界面的喜爱和亲睐。反之，信息传递不顺畅的页面会使用户迅速转向其它网站。文章基于对网页界面的信息传播功能特点与网页界面制作技术的发展的分析，运用比较的方法，阐述了网页界面与传统平面设计不同点，指出网页界面设计仍然是视觉设计的范畴，设计师的主要任务就是将信息内容视觉化。只不过这里的平面是电子化的平面，设计手段采用电子技术。虽然多媒体技术使网页的信息传达进入了听觉感知领域，但也是通过网页中显示听觉效果的视觉标识来实现的。紧接着作者对信息在网页中以什么样的形式来表现，如何设计能够有效传递信息的网页界面进行了重点的研究或探讨，较详细地论述了网页界面设计中文字、图形、色彩等视觉元素的运用方法或技巧，又专题论述了多媒体手段在网页设计中的应用和网页界面的版式设计技巧问题。关键词：WEB2．0，网页界面，信息传达，视觉传达，版式设计 湖北工业大学硕士学位论文AbstractIntoday'ssocietyinformationisanindispensableresource．Thedisseminationofinformationintothenetworkmediaeragivespeoplegreataccesstoinformation．Interactmediafeaturesthefastdisseminatingspeedofinformationandhighef五ciency．Byvirtueofthe910balinternet，也einteractmedia，surpassingthelimitationoftimeandspace，takesthewebinterfaceasaplatformtointeractandbearstheunparalleledsuperioritycomparedwiththetraditionalmedia．EspeciallytheappearanceofnetworkcoretechnologiesWEB2．0hasbroughtforththehugetransformationforintemet’Sinformationdissemination．Thetransmissionwayofinformationaswellasthedesignofwebinterfacehasgreatlychanged．WEB2．0hasalreadybecomethenewtrendofinternetandhasopenedinternet’Snewtimes．WiththenewtimesofWEB2．0．theissueofWEBstandardserieshasmadecertaininfluenceonthewebpagetechnique．Ithascausedthefundamentalchangeinthethoughtoftheformerwebpagedesign．Andtheclearwebpagestructureandinformationleve／hasbecomethedevelopmenttrendofthecurrentwebpagedesign．．Inthisnewmediaenvironment，thewebpage，astheexchangeplatformofuserandinformation。greatlyconcernswhetherinformationsmoothlyrealizethecirculation．Therefore，itsdesignbecomesmoreandmoreimportant。Althoughthewebpagedesigndiffersfromtheplanedesign，italsotransfersinformationthroughthevision．Therefore．howtopresenttheinformationthroughtheeasilyidentifiedvisionwayinthewebpageinterfaceandmakethepresentationofinformationinasuccessivelyordermattersa10t．Iftheinterfacehasreasonablestructure．accurateinformationtransmission，orderlyandstrongfunction，itwillmakeusersoperateinalleasyandlli加efficientwayandincreasetheirfavortowardstheinterface．Viceversa，iftheinformationtransmissionisnotsmooth．thei11．functionalinterfacewillmaketheusersdislikeit，SOtheusersquicklyturntotheotherwebsites．Inthisway，thewebpageinterfacedesignhaslostitsfunctiontoconveyinformationandbecomesmeaningless．Basedonthetechnologydevelopmentofwebpageinterfacedesignandthefunctionanalysisoftheinformationdisseminationofwebpageinterface，andemployingcomparativemethod，thisarticleelaboratesthedifferenceofwebpageinterfaceandthetraditionalplanedesign．andpointsoutthatthewebpageinterfacedesignstillbelongstocategoryofthevisualdesignandthemaintaskofdesignersistomaketheinformationvisualized．Theonlydifferenceisthatplaneisthecomputerizedplaneandthedesignmethodusestheelectronictechnology．Althoughthemultimediatechnologymakesthewebpageinformationtransmitintothedomainofauditoryperception，thewaytorealizeitisalSOthroughthevisualmarkthatsymbolizestheauditoryeffect．ThenthisarticlefocusesOiltheexpressionformofinformationinthewebpageandthedesignofwebpageinterfacethatcaneffectivelytransmitinformation．AnditdiscussestheapplicationmethodofthevisualelementssuchasⅡ 湖北工业大学硕士学位论文characters，graphandcolorindetail．Moreover,thisarticlestudiesonthespecialsubjectoftheapplicationofmultimediatechnologytothewebpagedesignandtheformatdesigntechniqueofwebpageinterface．Keywords：WEB2．0；webpageinterface；informationdissemination；visualtransmission；formatdesign 湖班j案大謦学位论文原创性声明和使用授权说明原创性声明本人郑重声明：所呈交的学位论文，是本人在导师指导下，独立进行研究工作所取得的研究成果。除文中已经标明引用的内容外，本论文不包含任何其他个人或集体已经发表或撰写过的研究成果。对本文的研究做出贡献的个人和集体，均已在文中以明确方式标明。本声明的法律结果由本人承担。学位论文作者签名：吾、1、串卑日期：哆年厂月t／日学位论文版权使用授权书本学位论文作者完全了解学校有关保留、使用学位论文的规定，即：学校有权保留并向国家有关部门或机构送交论文的复印件和电子版，允许论文被查阅和借阅。本人授权湖北工业大学可以将本学位论文的全部或部分内容编入有关数据库进行检索，可以采用影印、缩印或扫描等复制手段保存和汇编本学位论文。学位论文作者签名：≥t7(孝军日期：吵引月f，日指导教师签名日期：妒‘『年 湖北工业大学硕士学位论文1．1本文的研究背景第1章引言当今时代国际间的合作与交往越来越密切，信息的交流也越来越频繁，可以说信息把全球紧密联系在一起。信息的表现丰富多样，可以存在于文字中，也可以存在于图象中，又或者存在于视频等形式中。由于不同的媒介对信息传达有着不同的方式，因此，就要对信息进行归纳总结和分类，然后以受众易认知的视觉化的标识符号来表现信息。对信息这样的一个规划，能使信息变得容易理解，从而会提高信息传达的质量和有效性。而所有媒介的目的都是传达信息，设计也是为信息传达服务的，因此，网页设计就是通过对信息进行有效规划来便捷的传达信息，或者说就是对网页界面信息的视觉化设计。互联网的出现不仅扩展了人们收集信息的途径，同时，其作为一种生活方式也对人们的行为方式和思维方式产生了重大的影响。近些年，随着网络技术的飞速发展，尤其是WEB2．0时代的到来，给网络带来了新的信息共享方式及新的技术运用，改变了网络中内容组织和信息传播的方式，也使网页界面视觉传达的形式多样化，例如网页中能够运用数字化技术手段将语言、声音、图象、文字等有机融合在一起，然后通过各种形式表现出来，从而扩展了网页界面视觉设计的表现方式和手段。WEB标准作为一系列规范的总称，它的目的就是要使网页信息能够在未来新的终端设备上显示且能使页面数据被分享和交换。国际万维网组织发布的这套标准要求网页界面结构清晰，信息分布合理，因此，对界面的版式及制作技术产生了巨大变化，它要求以最合理的页面布局来展示信息，必将会极大的促进信息的流通和分享。网页是信息在网络传播中的载体，也是连接信息接受者和信息发布者的纽带，因此，如何对网页中的信息进行有效的规划，使信息有条理、有秩序地表现出来，就不仅仅成为网页界面设计要解决的问题，同时也关乎到网页是否具有吸引力的问题。当前，很多国内网页界面中的信息缺乏秩序性，且仅仅是信息的初始状态，不论对于信息接受者还是提供者而言，都没有最大程度的利用这个载体获取或者提供有效、丰富的信息，这使得网页没有充分发挥其作为传播信息载体的功能，所以，本文从视觉设计的角度来分析并阐述网页界面设计对于传达信息的作用以及怎样通过网页界面设计来提高其传播信息的质量。 湖北工业大学硕士学位论文1．2国内外研究现状近年来，越来越多的人开始从事网页界面设计，使其进入了一个快速发展的阶段。网页作为传递信息的媒介，是为信息内容服务的。尤其在web标准发布后带来的网页制作技术上的改变以及在web2．0时代里信息传播方式发生变化的情况下，对网页界面设计提出了进一步的要求。而目前，国内对这方面的研究还处在较低的层次上。首先，网页结构层次不清晰，视觉信息不明确，浏览者往往要经过多次的点击后才能找到所需信息。其次，国内的网页界面设计多关注网页的视觉效果，以看或者视觉为主，而忽略了信息传达的功能性和受众接受信息的渠道的多样性。除此以外，从信息传播的角度来研究网页界面的论文专著较少，对于网页界面中信息传达而言，显得有些偏颇，不够全面，对于当今时代网页设计发展趋势的指导作用不大。因此，我们还需要在实际工作中进行深入的、系统化的研究。国外的设计同行在网页界面设计中将艺术设计理论、视觉原理、交互原理、信息设计等理论融入其中，以此作为网页界面设计的理论基础。另外，重视网页界面的交互性和重视用户的参与性体验，以及网页界面设计的人性化等都成为构建网站的必要考虑因素。微软公司的网站策划主管peter指出：“在经过一些年的发展后，网站设计的思路开始逐渐清晰，网站要以功能至上，而且是内容来决定形式。大体来讲，网站设计是在发生冲突的需要之间求得平衡的艺术。一方面，网站设计应该尽量简单易用。另一方面，要确保站点中所有强大的工具可为用户所用"。这些研究的成果为网站设计的思路指明了方向，欧美的网页界面设计简洁清晰，在加强界面人机交互功能性的同时，更加注重信息传递的品质。国外在网页界面设计上的成熟理论和实践经验是值得我们借鉴学习地。1．3本课题研究意义网页界面设计是平面设计在网络时代里的一个延伸，或者说是一个新的发展。网页界面设计的好坏直接决定着页面信息能否有效的传达，因此，网页界面中怎样实现信息有效的传达就成为了一个新的研究课题。本文以web2。0时代为背景，从信息传播的视角出发，通过对网页中信息的视觉表现要素的分析，并把它同平面设计领域里的视觉元素进行对比，探讨了网页界面信息的视觉表现要素的特点，使人们对网页界面信息的视觉表现有了进一步认识。同时，结 湖北工业大学硕士学位论文合web标准发布后所带来的网页制作技术的变化，对网页界面设计提出了自己的一点见解，也为日后进行这方面的研究和实践提供了一个可供参考的资料，并希望对网页设计的相关教学能起到一定的指导作用。1．4本文的主要研究方法(1)分析与综合法：借助视觉传达、思维科学以及其他领域的研究成果和方法，把信息传播方式同web2．0时代的网页界面设计的特点相结合，系统的、综合的分析研究网页中信息的传播特点。(2)类比法：把网页界面设计同平面设计进行对比分析，从视觉表现元素以及版面设计形式上来阐述网页界面信息传达的视觉化表现特征和多样化的表现手段。(3)举例例证法：从实际案例出发，选取具有代表性的网页界面设计案例进行分析，通过对其良好的版面形式及特点分析，阐述网页界面设计是怎样提高信息传递的品质的。 湖北工业大学硕士学位论文第2章网络媒体信息传达概述2．1信息概念的现代诠释现代社会已被人们称之为信息社会。信息在当今社会生产、生活的各个方面和各个领域被广泛地使用。然而，何谓信息?其定义似乎让今天的人们越来越模糊。现代汉语词典关于“信息”的解释是指音讯、消息。但就信息在社会中的传播特点来说，媒体的变化使信息不仅仅表现在“音讯消息”的范围，从而让人们对信息概念很难准确的把握。在人类社会进程中，曾经有过辉煌的信息技术创造，语言、文字的形成，印刷术的发明j～为最基本的信息交流奠定了基础。到了近代，电报、电话、广播的发明使远距离快速传输信息成为现实，大大缩短了人与人之间的距离，信息的作用也不断被放大。最早把信息作为科学对象来加以研究的是在通信领域，因为，通信的本质，实际上就是传输信息。通信科技工作者为了解决通信中的种种问题，需要深入研究信息的本质及其度量的方法。1928年，哈特莱在《贝尔系统电话杂志》上发表题为“信息传输"的论文，把信息理解为选择通信符号的形式。控制论的奠基人维纳则把信息看做广义通信的内容，他在《控制论与社会》一书中给出了这样的定义“信息就是我们在适应外部世界，并把这种适应反作用于外部世界的过程中，同外部世界进行交换的内容的名称"。由此可见，通信领域里对信息的研究取得了丰硕的成果。随着科学技术和经济的发展，人们的认识水平不断提高，信息概念也在不断的拓展，在计算机出现后，信息被看做数据，而当信息服务逐渐发展起来后，信息又被看做经验、知识和资料。今天，随着互联网的普及和利用，网络世界把信息带到了人类社会生活的每一个领域和角落，使人们实实在在感受到了信息的普遍性和不可或缺性。现代人们对信息的理解是：包括在网络上传输的一切数据、符号、信号、资料，是一个无所不包的庞大的集合体。由此可见，信息的概念是十分复杂的。前面所列举的信息定义是人们从不同角度在不同条件下对信息的认识和理解，如果没有这些约束条件，我们可以将其定义为：客观事物存在的方式和运动状态的表现形式【221。4 湖北工业大学硕士学位论文2．2信息传播媒介的演进与当今信息传播的特点信息通过媒介才能传播，媒介的形式与先进发达与否，决定了传播的速度与效率。在《理解媒介一论人的延伸》一书中，麦克卢汉以媒介为切入口将人类社会时至今日出现的媒介分为四种类型：(1)人与人进行直接地口头交流的靠口头传播时代"或叫做“语言传播时代"，在人类社会早期穴居生活使劳动高度协同，个体之间的信息交流成为必须，于是人类需要共识信息系统，在表达形式上，首先人类是使用体态语言(如手势、身体动作、面部表情)进行交流，后来出现了有声语言，极大地推动了各族之间的交流融合。(2)由于文字的发明，人类进入了“书写媒介时代’’，文字使人类的信息传播突破了时空的限制，能够被长期的保存和传播。(3)活版印刷技术的出现引发的活字媒介时代。1445年古腾堡的活版印刷技术发明以后，资讯传播得到了扩展，并从15世纪一直持续到20世纪，这被称为“印刷媒介时代”。印刷媒介的诞生，使得报纸、期刊、书籍迅速普及，大大促进了信息的交流，文化知识得到广泛传播。(4)19世纪后半期开始，以贝尔发明电话机、马尔科尼发明的无线电通信为象征的“电子通信时代”，以及20世纪初随着收音、电视机的登场而进入的“电子媒介时代”。印刷媒介和电子媒介在相当长的时间内并驾齐驱，且由于在信息传播模式上的相似，被称为大众媒介。20世纪后期，以计算机和通信技术为基础的互联网的出现，使人类步入了“网络媒介时代”，它融合了前面几种媒介的优势于一体，使信息传播真正突破了时间和空间的限制，带来了信息传播的巨大变革。仔细分析我们上文提到的五种类型的传播媒介，就能发现，前四种媒介在信息的传递上是～种“一对众’’的传播模式，也就是说，信息的传播者借助媒介把自己的思想观念或者意图传达给大众，而不管这些信息是否能被大众接受，是否对大众有用。相对于信息接收者来说，这样一种被动的、受压迫的接受方式，让信息的传受双方处在一个不平等的位置上，这是传统媒介在信息传播中的一个共性，对于信息的交流来说是一种束缚。而网络媒介具有独特综合传播功能，打破了以前各种传播平台之间的壁垒，形成了迄今为止人类最大的综合传播平台，它利用计算机显示屏上的网页界面，使得数以千万的受众不仅可以同时在网上获得信息，而且可以在网络媒介中自由地发布和交换信息。“网络媒介扭转了大众传播给人际传播带来的自上而下、缺少交流、反馈，没有互动的传统传播模式，实现了每个人都可以参与“点对点"自下而上和平行互动的“民众传播’’【51。近几年，随着网络技术的不断革新，使得信息在网络媒体中传播的方式5 湖北工业大学硕士学位论文和手段产生了巨大的变化，同时，也在一定程度上给人们的生活、工作和思维方式进一步带来了重大影响，正如麦克卢汉所说“每一种“媒介”发出的“信息”都代表着或是规模或是速度的变化，所有这些都会介入到人类的活动中"，这句话包含着这样一层意思：一种媒介的产生会在社会中产生新的行为标准和方式。网络使信息的传播表现出如下的三个特点：(1)信息传播的即时性：20世纪末期，以数字化技术为代表的网络媒体以迅猛的速度进入了人类生活。由于数字化技术的优势，使得信息的表现形式丰富多样，同时，网络传播速度快、制作发布信息便捷，还可以随时更新信息，在速度和效率上远远超过了传统媒体。(2)突破了时空限制：数字化网络和通信技术的全面发展，将整个世界连接起来，推动了信息的全球化，互联网络延伸到全球的每一个角落则使信息突破了时间和空间的限制，让人足不出户就能了解全球任何地方发生的事情。与传统媒介相比，网络媒体打破了信息传播的地域限制，扩展了信息传播范围，有利于信息的全球共享。(3)信息的互动性：“网络媒体对信息传播最大的改变表现在信息传播者与接受者关系上的变化，并由此形成的信息交流的互动性”15】。在网络这个全人类共同拥有的平台上，网络技术为用户提供了一个能够自由控制的“信息平台"(例如：博客、播客、个人主页等)，使任何人都可能成为传播主体，自由地编辑和发布信息，与对方甚至大众交流。传播者和接受者处于完全平等的地位，它们相互承认、相互沟通、共同分享着信息，这样一种双向的交互式的传播超越了传统媒介中信息只能单向流动的局限，实现了传受双方的互动，使信息的交流变得更加轻松、方便自由，极大地提高了信息传播的效率。2．3网络媒体的核心技术及信息载体——网页界面2．3．1网络的核心技术WEB2．0网络媒体的信息表现载体是网页界面，网页界面的功能是视觉传达，网页界面设计与运用同网络媒体WEB互联网模式及其技术发展密切相关。了解WEB2．0的特点及其发展是进行网页界面设计的技术依据或前提。WEB2．0是相对2003年以前的互联网模式(简称WEBl．O)的新一类互联网模式的统称，是一次从核心内容N#I-部应用的革命【l】。它在方便用户的前提下对WEBl．0从技术、功能等方面进行了改进和升级。从模式上，是单纯的“读’’6 湖北工业大学硕士学位论文向“写”、“共同建设"发展；由被动地接收互联网信息向主动创造互联网信息迈进。从工具上，是由互联网浏览器向各类浏览器、RSS阅读器等内容发展，实现了网站之间的信息共享和交流。WEB2．0加强了互联网的关联性与社会性，为公众提供了一个技术平台，使得大众都能够积极参与创造信息和发布信息，并根据自己的喜好自由选择信息的聚合，成为了WEB2．0的显著标志，同时这种变化也对网页界面设计的形式提出了新的要求。WEB2．0无论从交互方式、网络技术等方面都是全新的体验，它的出现给互联网带来了一场巨大的变革。2．3．2WEB标准与网页界面现实生活中，我们常用手机中的QQ软件进行聊天、上网或者浏览网页，尽管大家的手机型号、手机的运营网络并不一样，但它们之间仍然能够通过网络实现信息的流通，这是什么原因呢?实际上这是“标准"在起作用，这个“标准"能使信息通过XML格式进行转换，从而实现在各种不同型号、不同网络的手机之间顺利流通，这个标准就是WEB标准，它是一系列规范的总称，主要包括XHTML、CSS2．0、DOMl．0和ECMAjavascript。它是国际万维网组织(w3C)在HTML基础上，制定的一系列的技术规范，以实现大量HTML信息向XML标准的过渡，按照这些规范制作的网页符合XML格式规范，能够在PDA、网络电视、移动电话以及任何网络终端设备上显示，而且还能使网页页面数据在以后被分享、重用和交换。用WEB标准制作的页面代码量小，可以节省带宽。因为用DIV(层)来布局结构本身就比TABLE(表格)简单，表格布局的层层嵌套造成代码臃肿，文件尺寸膨胀，而用DIV+CSS比用TABLE布局能节省2／3的代码，同时还使页面信息结构清晰，内容与表现相互分离，这样就引起了网页版面编排的变化，版面不再以“表现”为主进行设计，而是以内容为前提来分析和规划界面结构。WEB标准对网页在制作方法上的改变，使版面设计从注重形式向以功能为主转变，尤其对网页界面的版式设计产生了很大的影响。 湖北工业大学硕士学位论文第3章网页界面的特点及网页界面的设计3．1网页界面的概念及制作技术的发展界面在《现代汉语词典》中的定义是：划分、隔开两物体之间的接触面。可以说它是连接两个物体的中介，且通过这个中介可以实现信息的交流。从设计的角度来看，界面可以理解为是实现人与机器之间进行信息交流的媒介，界面是为交流而产生的，网页界面也不例外，可以说网页界面是用户与互联网之间相互交流信息的媒介，或是指用户在互联网上便捷地获取所需信息，同时也能发布相关信息的一种交流平台。1992年，美国国家超级计算机活动中心(NCSA)的MarcAndreessen开发了一种叫做MOSAIC(首个具备图形界面的网页浏览器)的程序。它能够在界面上显示图形，且能通过超链接实现网页间的漫游，而所有操作只需利用鼠标即可实现，有了MOSAIC作为技术支持的工具，INTERNET浏览器受到了用户及媒体的广泛关注，并由此成为了一个国际性的大舞台。而网页有了图形化的界面后，逐步开始走上了技术和艺术化相结合的道路，特别是近几年，随着网络技术的发展，网页中融合了更多的多媒体元素，使得网页界面的形式更加丰亩【41】田o21世纪初期，HTML(超文本标识语言)的不断发展，网页制作技术的不断改进，加上很多可视化的专业开发工具(比如：Dreamweaver、Fireworks、Flash、Frontpage等)的出现，降低了进入网页界面设计的门槛，使得越来越多的从事艺术设计行业的人开始进行网页界面设计，从而使其逐渐成为一大新的设计领域，并由此进入了一个快速发展的阶段。网页界面是传达信息的一个平台，也是用户和互联网发生互动的一个场所，用户与互联网之间的信息交流正是在网页界面上进行的。网络上的各类信息通过网页界面传达给用户，用户在获得信息后经过人脑的思考加工，再通过网页界面反馈给对方。这样，网页界面就实现了用户与网络之间信息的交流。而如何使信息的传达更加有效，如何使用户操作起来更为简便，这就不得不涉及到网页界面设计的问题。一个好的网页界面设计，不仅要满足和适合人们在视觉及心理上接受信息的需求和特点，还要注重网页界面各信息传达载体之间的关系。WEB2．0时代的到来，改变了过去信息传播的方式，加强了信息传播的互8 湖北工业大学硕士学位论文动性，对网页界面设计提出了更高的要求，直观易懂，操作简单且具有引导功能的网页界面成为当前网页界面设计新的趋势，它不仅使信息的交流更加顺畅，还给用户带来良好的体验，最终达到提高网页界面使用效率的目的。3．2网页界面中的视觉传达和信息传达视觉传达设计就是以眼睛可以看到的造型元素对信息进行设计的一种行为，视觉传达设计这一概念大概是上世纪末期由国外引入我国的，以前我们把它叫做平面设计，实际上，视觉设计是对平面设计概念的一种提升。传统的平面设计被称为视觉传达设计，是因为平面设计作品主要是给人们以观看的，超出眼睛观看的范畴的其它感觉方法，就不能称为视觉传达。视觉传达在设计领域中，也就是通过可视化的元素将所要传达的信息表现出来，即将信息内容形式化、视觉化。在电子及数字化技术中，网页界面较之传统的平面设计方法有了广泛的拓展。但网页的传达功能与平面设计没有根本性的不同，网页除了载体性质同平面纸质不一样外，仍是借助电脑显示屏来表现着平面性，它给人们带来的仍然是视觉效果，是没有超出眼睛范围的其它感知方式。其所用的造型元素仍然是通过视觉传达信息，故网页的第一功能仍然是视觉传达功能。平面设计的目的是传达信息，但平面设计的信息表现有其局限性，局限于文字、图形、色彩等比较有限的、且属静态的范围。而在网页中，由于使用了数字化技术手段，使网页界面的视觉传达方式与平面的视觉传达有了很大不同，最主要的特点就是文字可以滚动，图形可以变化，色彩可以转换，某些造型元素产生了动态的效果，这些变化虽然没有超出视觉感受的范围，但使网页界面视觉传达的内涵有了新的扩展。视觉传达手段的数字化，使得网页的信息传达远远不是局限在传统的平面设计范围，信息传达变得更为丰富多彩，这表现在二个方面：一是视频界面中的动态带来了丰富性；二是视频界面也可以切换和链接，每一层界面都有每层界面的视觉要素组合，也提供了一层新的信息。视频界面的转换及可链接性使网页的视觉传达与信息传达构成立体的建筑，增加了网络的信息传达的丰富性。网站的首界面是一个网站的“领航”页，它是用视觉元素来表现提炼后的信息，或是概念化的信息，而不是信息的全部具体内容，主页的视觉传达不可能反映信息全部完整的内容。浏览者要了解全部的信息内容，就要从视频界面中选择自己需要了解的信息表现元素，然后通过鼠标点击来获得所要的全部信息，从而产生网页的信息传达。鼠标的点击是实现视觉传达到信息传达目的的“开关"或闸门。这也说明网页的视觉传达与信息传达的实现之间是有界限区9 湖北工业大学硕士学位论文分的，这是平面设计视觉传达没有的功能。基于通信和数字化技术的网络媒体，不仅具备超链接特性以及交互性特征，还综合了以往传统媒介的特点，这使得网页中的信息传播具有以下特点：(1)选择性：网页界面信息表现形式不仅仅是图形、文字等还包含着声音、视频、音频、动画等，这些表现元素在视觉、听觉甚至触觉上刺激人的感官使人获取信息，扩展了人获取信息的渠道，同样也给受众提供了选择性，受众可以根据自己的喜好、习惯来选择最合适的表现形式理解信息。例如：网页界面中，对同一个信息，分别以文字、图像、视频等形式进行表述，有的浏览者可选择阅读文字来获取信息，有的则通过关看视频来获取信息，这种选择性加强了受众对信息的关注度，从而提高信息传达的质量。其次，网页具备超链接的功能，它实现了信息之间的跳转，使信息的联系更为紧密，在传统媒介中，例如报纸、书籍上的信息都是从头到尾前后相连，是一种直线性的传递方式，同时，其受篇幅的影响，只能承载一定量的信息，读者也只能被动接收，对于某些相关联的信息缺乏了解。而由于超链接技术，网页之间能进行跳转，不再是直线传递，实现了信息的跳跃性传递，不仅使浏览者能看到信息，通过链接也能了解相关的信息，而由于网页的无限性传播特点，信息量非常庞大，能够给予浏览者充分自由的选择，体现了网页中信息传达的灵活性。(2)互动性：“互动’’一词极为常见，社会心理学家给出的定义是：“两个或两个以上的人们之间的行为互相影响的过程。，，【5】互动性是指信息传达者与受众之间的互动交流，网页中的互动应该说是信息的交流双方利用网页界面中具有交互性功能的设置互相回应对方的过程。例如：通过操作按钮、表单等元素来表达意见，同对方进行信息的互动。这些互动设置使信息交流的双方充分向彼此表达自己的观点，从而提高了信息传达的有效性。信息的互动成为了网页中信息传达的一种新的经验和行为。(3)网页的信息传达具有层次性，网页的信息传达是通过鼠标一次次的点击来传达全部信息的，每一次的点击反映出一个层面，因而具有层次性。(4)信息传达方式的多样性：由于网页数字化技术带来的新的信息传达手段，不仅通过对视觉刺激产生信息，还有声音冲击及影像变化产生的对人体其它感觉器官的冲击，所以，有学者总结认为，网页的信息传达触动了人的“五观”，信息传达类型更丰富多样。10 湖北工业大学硕士学位论文3．3网页界面设计同平面设计的差异麦克卢汉说：“媒介之间是相互关联的，一种媒介注定是另一种媒介的内容"。王受之先生也曾提到：“二十一世纪平面设计是朝着多媒体方向发展的"。可以说网页设计是平面设计的一种空前的延伸，网页界面设计的视觉元素依然是与平面设计相同的元素，但由于网页界面设计受到电子通信技术和网络传输以及网页制作技术的影响，所以，网页界面设计有着一般平面设计不同的地方。表现在三个方面：(1)媒介及尺寸的不同网页界面是伴随着计算机及通信技术的发展而产生的，它是以图形、文字、色彩及多媒体视听元素为表现载体且通过显示器呈现出来的；平面设计作品是以图形、文字：色彩为视觉表现元素，以纸为媒介的印刷品形式表现出来的；两者在媒体上存在着本质的不同。另外，印刷媒介和网络媒介最大的区别是色彩模式，印刷品的色彩是由CMYK四种色彩组成，而网页界面所使用的显示器色彩由RGB三种色光所组成，其色彩亮度要大于平面的印刷色彩，利用这些色彩可以创造出活泼亮丽的视觉感受。由于两者的媒介不同，尺寸单位也不一样了。印刷是以生活中常用的度量单位来计算，而网页是以电脑显示器的单位(像素)来计算的。印刷品的尺寸可以根据实际需求预先知晓且印刷品尺寸在印刷前后都是一样，因此，设计者对其就能有一个很好的把握；网页的页面是根据浏览者电脑显示器窗口的大小来显示的，而由于页面在制作过程中所使用的显示器的分辨率不同，导致了网页在其它浏览器窗口中的显示大小不一样。(2)交互功能：交互性是网页界面设计区别于其他传统媒介的最大的优势之一。网页的互动是指网络与用户之间的信息双向沟通和传输，网页界面的互动设计是通过利用超链接技术、按钮、表单等方式，给用户提供了充分自由选择的权利，用户不再是被动的接受信息，还能够根据自己的需求主动发布信息或针对某信息反馈自己的观点和意见，从而享受到参与的喜悦。传统的平面设计只能单向的向大众传递信息，不能同受众进行互动交流，也无法即时获得受众的反馈信息。(3)多媒体元素：以数字化技术为基础的互联网集中了报纸、广播、电视三大媒体的综合优势，实现了声音、文字、图像、影像等的有机结合。这种多媒体技术使得网页在信息传达的表现形式上更加丰富，同时也给用户带来了丰富的视觉效果，令其产生审美愉悦。比如：FLASH制作的广告动画，不仅丰富 湖北工业大学硕士学位论文了视觉体验，吸引浏览者的目光，同时也传递了商业信息，达Silt宣传目的。再比如音频、视频、影像这些多媒体元素有利于更为全面直观的传递某娄信息，弥补图形、文字等传达信息的不足。而传统的平面设计作品是以静态的视觉元素来表现的，同多媒体元素相比在信息传达的形式和功能上要差得多。竭页界面设计平面设计可视化的屏幕尺寸纸媒介及其大小多攥体{见听元素围开；文宇色彩(声音、视频’版面设计线性阅读跳跃性阅读立j性圈3-l以上粗略的分析了网页界面设计的几个特点，是与传统的平面设计为参照对象的(见图3-1)，但这并不是说网页界面设计与平面设计是根本不同的，相反，网页界面设计与平面设计都是视觉传这设计，两者并没有本质上的差异，目标都是一个，即将信息内容视觉化，通过视觉设计实现信息传达。3．4网页界面设计与受众网页界面是给人传递信息的。现实生活中的行业众多，同样，网站的行业属性也不尽相同，其所面对的受众也不一样。而由于人在年龄、性别、职业以及受教育程度、生活习俗等方面的差异，自然对于信息的需求也各不相同，尤其这些差异所形成的独特的办事方法，直接影响了人们在浏览网页时的内容选择和操作方式。人的不同的行为特征对网页界面设计产生了很大的影响。所以在规划网页界面设计时，要对目标群体的特征进行分析，同时还耍对目标群体的行为方式加以研究(见图3—2)．从而采取有个性的视觉表现形式。受众的分析大致可以从以下几方面入手： 湖北工业大学硕士学位论文H斯谫戒掌生学Ht&自顿一捏乐怍m§*日＆*nj舢≮男性^*I}{*童性～*弃"尚图3—2(I)性别：性别的不同对网页界面设计的形式带有不同的偏好。男性和女性由于生理上的特点所关注的事物各不相同，网页界面设计就可以从色彩、图形上强化其特色，例如：化妆品网页，以Maybelline为例(如图3-3)，网页上的图片都是以时尚女性为主，夕。I。∥+。。彩-．⋯—■■——■—■■■■●■——■■●■■■■■l如图3-3展示女性各个化妆部位特征，且画面色彩依据产品的特色或是浓厚艳丽或是淡雅柔和，充分展现了女性特色，让人一眼就能辨别该网站的属性。(2)年龄：目标群体属于哪一年龄层，是青少年?还是中老年?不同的年龄层行为方～{耋粹夕一广塑惩_》h潞铲l!}_||I-，，吖墅～雌 湖北工业大学硕士学位论文式及兴趣爱好不一样，关心的事物亦不同，即使同一事物关注的侧重点也有所不同。比如：青少年个性张扬、孤立独行、喜欢新奇的事物，现如今许多网络游戏就根据这些特性设计游戏人物角色和界面，吸引了众多青少年。例如QQ幻想这款游戏，人物造型较为卡通，活泼可爱，贴近青少年心目中想象的角色形象，同时，场景优美且富于变化，界面元素较为丰富，不仅带来了视觉享受，也给青少年玩家一个新鲜的环境体验，深受青少年的追捧；而中老年人则喜欢传统的游戏，例如：象棋、围棋，由于中老年人只注重走棋的功能，因此，这类游戏界面就只需要简洁就可以了。(3)工作：是学生?还是上班族?若是上班族，从事的职业又是什么?对于学生，特别是大学生来说，多以查询资料和交流信息为主，而上班族多以自身的兴趣爱好去浏览网页，因此，在网页界面上的相关功能性的设计就不相同。例如，在教育考试网站中，界面应该注重搜索和信息发布功能的设置，以满足学生的需求，而上班族因其纯粹的兴趣爱好去了解相关事物的信息，所以，对网页界面设计的某些方面要求要低一些。任何事物的产生和发展总有其原因，网页也是如此。起初网页是借助于通信传输而后又以网络技术逐渐走进人们的生活。现在，网页界面作为人们从互联网上获取信息的终端，已经同人们的生活密不可分，而为了更加方便网页中信息的交流和传输，网页界面设计就显得越来越重要。由于网页界面设计受到人以及网络技术等诸多因素的影响，因此，我们不能孤立的去看待它。网页界面设计从艺术的角度来说要满足人的审美需求，从功能角度来说，它要实现信息的有效沟通，从设计的角度来说，它综合了传统媒体所有的信息传达要素，对于信息的传达有着很大的优势。所以，可以说网页界面设计是一个涉及到了视觉设计、认知心理学、网页制作技术等多学科相互交叉与融合的较为复杂的设计领域。14 湖北工业大学硕士学位论文第4章网页界面设计的视觉元素与运用4．1人对信息的视觉反映与视觉设计要求人主要是通过视觉来获取信息的，网页界面中的信息首先也是依靠视觉元素来判别的。如何才能让网页界面中信息对浏览者产生深刻的印象呢?为此，我们有必要了解视觉是怎样感知和理解信息的。人的眼睛是人感知外部世界的主要器官，它是通过接收外物反射光并将其聚焦于视网膜而得到物体外观形象的，眼睛获得了信息，理解信息的则是大脑。正是由于大脑把眼睛收集到的信息进行处理，才使信息有了意义，才有可能把这个信息长久的留在脑海里，让它成为知识积累中的一部分。那么大脑是如何看到由眼睛提供的视觉信息，以及大脑是如何处理这些信息的呢?美国的科学家胡贝尔和威塞尔通过试验得出这样一个结论：视觉皮层上的每个大脑细胞与所接收到的不同刺激类型几乎存在着一对一的反应关系，根据所有这些信息，大脑为视网膜接收到的视觉形象建立起一套对应关系图谱。大脑借助这些庞大的专门细胞阵列，以最快的速度、最便捷的方式，对被视物体的4个主要属性(色彩、形式、纵深和位移)做出反应【2】，因此，进行网页界面设计时要使某一视觉信息被长久地记忆，就要首先在这4种视觉信号上下功夫。大脑在获得了这些信息后，把这些信息同记忆中的相关经验进行对比，如果记忆中没有相关联的事物，那么大脑会把这些信息当做新的知识存储起来，而如果记忆中有相似的经验，那么大脑就会将两者进行结合，形成一种新的信息存储起来。以上就是人对信息的视觉感知，只有了解了视觉感知原理，才能在网页设计中运用各种视觉元素或手段去显示和突出某些信息，从而设计出让受众欢迎的网页。入在接收信息的过程中，由于获取信息的方式不同，对信息的认知心理也就不同，自然他们的行为反应亦不同。人们接受和理解信息是受态度、愿望、需要等心理因素影响的，因此对信息具有选择性，就是说，人们总是愿意接触那些与自己原有态度相一致的信息【5】。所以，这种需求心理的差异，加上对信息的接收是人的生理和心理刺激感觉的过程，且不同视觉元素的刺激会带来不同的效果，就决定了网页上的视觉信息不仅应当尽可能丰富，以适合更多的受众所用，而且决定了网页设计应充分利用好电子手段可能达到的视觉元素的运用效果。 湖北工业大学硕士学位论文4．2网页界面视觉设计中信息的表现类型在平面设计中，设计的任务是将要传达的信息通过各种视觉语言表现出来，而由于纸张媒介的局限性，使得平面设计中可能表现的信息十分有限，因此，平面设计要有很强的创意，对信息进行提炼，这就使得平面的表现手法必须具有高度的概括性，但不论怎么做，平面所表述的信息与网页相比，还是有极大的差距，虽然网页界面也是采用视觉造型元素或视觉语言来表现信息，也是为信息找出合适的表现形式，但由于网页采用的数字技术设计手段，除了同样是利用视觉元素来概括表现信息，进行创意之外，其对信息的处理手段确实要比平面设计简便易行、效果又好得多。便捷的方式可概括为三点：第一，分类表现。网页界面的视觉传达设计可将信息分类概括，用相应符号或标识显示，这可以极大地扩展网页界面信息荷载量，同时适应更多的受众的选择要求。而具体信息可以通过鼠标的点击以界面链接转换再现信息，实现信息的传达。第二，动、静结合表现，网页界面的视觉传达设计最大的不同，就是可以动、静结合，在同样的一个区域内，平面设计中可能容纳的信息十分有限，但在网页中，由于可以作动态变换，这样网页界面中同样的区域则可以装载更加丰富的视觉信息，包括文字的滚动、图片的变换、色彩的变化等等。所以，网页界面看似有限，实则可以无限扩大。我们至今所见到的任何网页界面，都是动静结合的视觉界面。第三，概括性与创意性结合。网页界面视觉传达设计的概括性、创意性不及平面设计要求高，我们知道在平面设计中，由于版面空间的有限性，要表现相应的信息，要求具有高度的概括性、创意性，无论是标志设计，还是平面广告和招贴设计，反映其设计水平的都是看其概括的准确性和高度的创意性。而在网页界面设计中，这些要求都不如平面设计的要求高，主要原因是网页界面的设计有了数字化技术手段的便利。如果说网页界面设计同样有高度概括性、创意性要求，那就主要表现在有关数字化手段的运用方面。43网页界面设计的视觉元素与运用网页综合了人类既有的各种类型的传媒特点以及信息传达方式，实现了独特的综合传达功能。那么信息是怎样在网页中传达或者说信息是如何被表现出来的呢?笔者从信息的表现形式和人接收信息的角度，将网页中信息的传达手段分为16 湖北工业大学硕士学位论文3种：视觉表现手段、听觉表现手段、其它表现手段。目前数字化技术在网页中的传达手段包括视觉、听觉等感知领域，视觉包括文字、图形、色彩等，听觉主要是音频设置。4．3．1网页界面设计中的文字与运用文字是人类为了准确传达和记录信息的需要而创造的一种符号系统，从其发明之初就一直是信息传播的主要承载者。网络作为一种新的信息传播媒介，尤其是在WEB2．O时代，数字化技术的应用，加强了人与人之间的信息沟通，使文字在网页界面中的信息传递作用显得越来越重要，因此文字可以说是表达信息最简洁明了的符号。网页中经常用大量的文字来描述传播的内容，所以，通过阅读文字来了解信息在网页中占了较大的份额。网页中的文字可以分为“静态文字’’、“动态文字"、“图像文字"和“色彩文字"等几类。“静态文字”顾名思义，就是指静止不动的文字，其特性也就决定了这类文字在网页中主要起着一个说明信息内容的作用，它是浏览者获取信息的重要部分。静态文字以何种面貌呈现尤为重要，正文文字的表现主要涉及到字体的样式、大小以及字距、行距等。在进行编排时特别要注意文字的大小和行距，这两个因素在视觉上给人带来的影响是比较大的。正文安排得当，在整体的视觉效果上会给人清晰、简洁工整的印象，使人产生愉悦感，从而达到有效传达信息的目的。反之，会使浏览者产生模糊、不舒适的感觉，更不会产生美感，势必也无法准确传递信息。另外，由于浏览者观看网页时，文字的显示器是以自己电脑中的字体为前提，因此，在网页制作过程中，这类文字应以电脑系统自带的字体为主，这样可以避免在其它电脑上显示不出文字的情况了。动态文字是以多媒体技术为支撑来实现的，它最大的特点就是能产生互动，网页中，动态文字的运用体现在这两方面，一是在网页中为了让浏览者第一时间注意到某类信息而运用的动态文字，大多是通过色彩的变化或是不停的闪动来表现，它较其它类文字更能吸引浏览者目光；二是当鼠标点击这类文字后会出现相应的变化，网页中具有链接功能的文字都属于此类。除此之外，有一些文字会根据用户的操作出现不同的反应，例如：不断变换的文字，当用户点击不同时间段出现的文字时就会出现不同的界面或相关的信息内容。图像文字从网页制作的角度讲，它不是以文字的格式出现，而是以图片的格式显示的，因此，其在显示上就不会受到电脑本身所带字体的影响。不同色彩的文字更能强化信息的视觉刺激，这样网页中图像文字、多种字体及彩色文字的运用丰富了视觉，不仅容易引起视觉上的注意，对单调的正文文字也起到视觉上的调节作用(如图4一1)。17 I～L-Y齐方疆宽■■口盈盈墨强臣面圆■-錾衍地圊AIRTMAP图4-1网页中文字的这些特点，对于不同的信息传达起着各自不同的作用，如何运用文字的这些特点呢?设计师就要从信息内容的特点出发，在字体的选择上要和内容相适应，吼给人清晰的视觉印象。同时，也可以利用这些文字的特性来区分信息的主次，让受众在浏览时能够及时了解主要内容。总之，文字在网页设计中具有多种表现技法，应充分利用好文字的视觉功能。4．3．2网页界面中的图形与运用图形同文字一样都是传达信息的载体，但在传播信息的过程中，图形有着不同于文字的特效。因为图形比文字更形象、更具体且无需翻译，即使不同国家、民族以及文化层次不同的人都能看懂图形的意义，所以，人们常常把图形比喻为“世界语言”口”。特别在当今时代，面对铺天盖地袭来的大量信息，人们似乎更愿意选择在图形中快速获取信息。在网络页面中，合理的运用图形能够丰富网页视觉效果．并生动形象地表现信息，图形在网页界面中的出现，还打破了网页初期纯粹的文字界面给人的呆板的视觉效果，带来了一种较为直观的新的视觉感受。它的出现不仅增加了网页提供的信息类型，同时在很大程度上也美化了网页界面。单调的文字叙述配上强有力的诉求性画面，可激发受众的阅读兴趣，增加视觉印象，对受众更好的理解信息起到很好的帮助。网页中图形元素的表现形式由于利用多媒体技术手段，也形成了形式各异的视觉表达特点，从目前网页制作的图形表现性质看，可以分为动态图形和静态图形，动态图形是指具有链接功能和可变换的图形，静态图形则是相对于动态来说的，指不具备动态图形功能的图形。从运用方式看，图形元素可以分为正文图形、背景图形、广告图形、图标等。网页界面中图形的不同表现形式对于网页界面中信息的传达有着不同的效果。比如：正文图形，它是在正文中出现，帮助读者理解内容的，因此就要注意用户阅读流向中的文字与图片之间的节奏安排，什么时候阅读文字，在浏览多少文字量后使用图片来调节视觉，这种变换信息的传达方式能让用户视觉得到放松，避免了纯文字带给人的枯燥的视觉感受，从而使用户 湖北工业大学硕士学位论文能够继续浏览信息；背景图形是作为背景出现在界面的最底层，可以衬托主体文字内容，同时也能使用户产生同主题信息相关的视觉联想，从而更进一步的美化视觉。另外，背景图形的运用还使网页界面中信息传达的视觉层次感更加丰富。广告图形是指在网页界面中宣传商品或服务的图形，它是商家在网站界面上做广告的一种方式，也是网站盈利的一种手段。广告图形的表现形式丰富多样，例如：网页界面左右两边对联式的广告形式或是打开页面时突然弹出的的广告画面等(如图4—2)，这些形式都给用户一种不同的视觉感受，在细节上不仅进行了宣传，体上也起到了视觉调节的作用。此外，广告图形还起到了划分栏目与栏目之间的位黄的作用(如图4．3)。⋯≈￡iiⅢ#dit6￡趾^詈=?eI力～图4-2aQ鏖刁：兰孟⋯臀”盟“掣苎釜桊罗箍票搿图4-3臣毫西窿颤溉，≈臣．篓：三蚤彗!薯动态图形的特点在于图形能够“动”。在人的视觉生理现象中，眼睛总是会先注意动的事物，所以，动态图形较于静态图形来说更具有吸引力。报纸杂志中的图形是以一种静态的方式呈现的，在某一位置只能放置一张图形。而在网页界面中，由于javai吾言程序和制作技术的支撑，在一个相同位置能让图形不停的变换，这样就增加了信息的宣传量，也吸引了用户视线。如今很多网站都采用这种形式来表现信息。(如图4-4)。燮 图4—4同时网页中信息的传达是有层次的，动态图形的这种优先吸引视线的特点也就决定了其更多是用来表现主要信息的。在网页界面中，动态图形不能随便滥用，否则会造成信息的无主次，也使浏览者的视线不能集中，不但阻碍了信息传达的顺畅，而且还会使浏览者产生反感，因此，要合理使用动态图形。网页界面中的图形各具特色，每一个都有自己的表现信息的长处。设计师在进行规划时就要根据主题内容的需要．统筹安排图形。例如：在大型的门户网站中，信息量较大，图形的数量相对来说会比较少、尺寸也比较小，但为了更多的宣传及表达信息，会大量使用可变换的GIF格式的动态图形或用flashN作的图形广告；而在企业类的网站中为了宣传其商品，会使用较大的、甚至是整页的图形作为背景，或者采用很多的图片来表现信息。网页界面中图形多样化的表现形式，不仅使信息的传达多样化，也丰富了网页界面的视觉。总之，图形在网页界面设计中表现信息的技巧也很多，值得设计者们认真地研究探讨。4．3．3网页界面中的色彩与运用色彩也是人的视觉敏感的东西，当我们观看某个事物时，给我们第一印象的就是色彩。色彩作为网页界面设计的一个表现元素，除了具有吸引浏览者视觉，维持网站形象外．就是有效传递页面主题信息。色彩用来传递或表现信息，在平面设计中人们已研究较多，网页中色彩的运用原理同平面设计中一样，例如：色彩的自然属性和社会属性在网页设计中同样适用，但在网页设计中，需要掌握电子技术下色彩的表现技巧，这样才能合理的进行设计，最大限度发挥色彩的功能。网页界面设计中的色彩可以根据不同的主题来进行设计，以体现该网站特色。也就是说什么样的主题，就应该采取什么样的用色。同时，网页中也可以根据表达的信息内容的不同，运用不同色彩表现事物的丰富性或真实性。例如：医药行业类的网站就不能采用较为鲜艳的红色、橙色等，这会给受众造成一种紧张 湖北工业大学硕士学位论文和不安的感受。应该多采用一些比较冷静、沉着的色彩，如；深蓝色、深绿色等，这些色彩能给人庄重、严肃的感觉。同样像政府部门类的网页就应考虑到其性质是作为发布国家政策信息的窗口，要注重政府机构的庄严性质，所以可以利用中国特有的大红色或者亮丽点的橙色。网页界面中的色彩是通过其象征性、情感性来传递信息的。下面我们就从以下几个案例中对色彩的运用进行论述：图4-5图4．5是武汉友芝友牛奶的网站，为了突出产品的清新和加强该品牌的色彩识别印象，我使用了天蓝色作为网站的主色调，在色彩上运用渐变的形式，增加页面视觉上的空间感，给人一种舒畅的感觉。参霸薰：B：蓄笺：≯：霉篓jj=．_一一⋯¨．’^妻。函蓄兰≥i量篓i譬一连黧蔓鼍誊j藁—●———蕾西■圈置—■■_图4-6 湖北工业大学硕士学位论文图4．6是湖北人大的网站，考虑到其作为政府网站，要突出庄严肃穆的感觉，因此，我采用了红色和浅黄色作为网站色彩基调，较好的体现了政府网站特色。图4—7图4．7湖北梁子湖高尔夫球场的网站，该网站以绿色为主色，强调其良好的环境和大自然的宁静，让人在视觉上能感受到运动和健康的气息。4．4网页界面设计中多媒体与信息表达多媒体是集声音、视频、动画、图像、文字于一身的一种技术表现形式，突破了传统媒介阻视觉为主的信息传达方式，增加了听觉、运动视觉的感知功能，使人接收信息的途径更加多样化。4．4．1多媒体的视觉表现功能网页界面信息传达的虽大优势就是融入了多媒体元素，这是网页界面独有的信息传达载体。多媒体元素在网页上的视觉表现形式包括动画、视频，它们各自以其独特的表达方式，满足了不同需求的浏览者。动画是集合了图形、色彩、文字众多视觉元素并通过电脑技术将它们“组合运动”起来的一种表达方式。网页界面中动画的表现形式多种多样，有flash、毋f图片、三维动画等，它们或是用『^J烁的画面吸引浏览者的注意．或是采用nash广告及片头这种动感强烈的形式突出主要传达的信息。动画也是实现信息交互的一种表现手段，在动画中适当加入有交互性的画面或按钮，能够吸引浏览者的积极互动，起到很好 湖北工业大学硕士学位论文的传达信息的效果。网页中动画的应用较为广泛，但也要根据网站的行业性质来设计制作。例如：在大型网站中，信息多以文字为主，对动画的需求不多，因此，只在广告条或弹出式广告中运用动画形式；在儿童类网站中，动画制作的各类成语、寓言小故事等深得小朋友的喜欢，他仃丁对于动画这种形式更容易接受，在观看动画的同时，也获得了知识，寓教于乐，这是动画元素发挥作用的一块广大的领域。而在企业类网站中，大多是进行产品宣传，文字信息量相对较少，因此，常采用flash动画形式，丰富视觉效果和调节视觉，这类网站要么整个是用flash制作，要么通过flash来制作商品的宣传广告。另外，像网上的各种电子贺卡，基本上都是以动画的形式表现，不仅画面形象生动，更能体现赠送者的心意，受到广大用户的欢迎。网络视频是集互联网、多媒体、通信技术于一体，向用户提供包括数字电视在内的多种交互式服务技术，它拓展了电影电视的传播领域，形成了新的传播形态，同时，通过深化和延伸电影电视的传播，扩大了网络的影响，也使这两种传播媒体形成优势互动和互补【51。视频的表现形式有数字电视节目、电影点播、在线视频等，其在网页中的运用主要表现在以下几点：(1)作为辅助元素帮助理解信息②是一种通信的手段，方便传输。例女口：在新闻类网页中，运用实拍视频可以让受众更加全面详实的了解焦点新闻。而在一些聊天软件或者论坛中，即时通讯的视频可以使双方看到相互的状态和情景，比如我们平时聊天的QQ软件就具备即时传输视频的功能。这种形式大多用于远程的交流。此外，在一些专门通过提供影视等休闲视频节目点播类treJ网站中，视频作为一种中介的工具，通过浏览者选择喜欢的节目来实时传输画面。要注意的是多媒体元素的文件都比较大，它在传输过程中的流动性，受至!J了网络带宽的限制，因此，设计者要根据实际情况，在适当的场景和环境里合理的使用。4．4．2多媒体的听觉表现手段与运用用声音传递信息是人类最初的信息传达方式。声音是通过刺激人的耳细胞来让人接受信息的，它能触动人的心理，让人产生想象，不同的声音能给人不同的心理感受，也就对受众接受信息会产生一定的影响，例如：欢快活泼的声音给人一种积极的有力量的感受，婉转悠扬的声音，给人一种安静平和的感觉。多媒体的运用，不仅使网页的视觉感知范围超出了以往的平面设计的视觉领域，同时，也使网页的信息传达调动了听觉感知功能，拓展了信息传达的途径。网页中使用声音来表现信息有两种方式，一种是通过程序语言把声音文件内嵌在网页中；一种是以多媒体元素来表现，包括语音和音频两种形式。 湖北工业大学硕士学位论文前一种表现方式是将声音嵌入在网页中作为网页的背景音乐出现。当浏览者访问某个页面时，音乐会随着网页的呈现而慢慢自动播放出来，音乐的内容则是与页面主题信息相关或在某种意义上有联系性。这种背景乐大多运用在个人网站或企业网站以及一些网上论坛里。在个人网页中，由于主题内容的私人化特点较为强烈，所以，常把一些个人喜欢的音乐作为背景乐来表现其独特个性；而一些休闲娱乐类论坛的网页使用音乐时，随着一些轻音乐或乐曲的飘出，可为浏览者营造了一个舒适的环境，让人心情放松，进而能慢慢“品味”页面中的信息。网页界面中的语音可以说是广播与网络相互结合产生的一种信息的表现方式。最初广播在互联网上的运用将线性收听改变为非线性收听，变单向被动收听为双向互动收听，克服了由于频率所限而所受的地域限制。同时，通过网络数据库，使转瞬即逝的广播节目变成了可以保存的文件。“播客’’就是当今网页中通过语音来传达信息最重要的形式。“播客"的推动者Doe·Searls将其定义为是个人能够自由选择的数字广播，人们可以随意选择收听的内容、收听时间以及收听方式。“播客"与其他类型的在线传递截然不同，它能使独立的制作者发布广播秀，从而给广播节目一个新的分类，频道收听者可以通过“播客"软件，自动核实和下载订阅新内容f5】。从信息传达角度看，“播客”将不再局限于语音传输，随着技术的发展，它可以整合文字、视频等信息表现方式。从接受信息角度看，“播客”是另一种音频文件通过互联网进行传达和接受的方式，这种文件可以订阅与下载，订阅的内容能够自动更新，存放到便携式音乐播放器中。“播客"与广播一样都是传达声音信息的媒介，但它更代表的是未来信息内容可订制、可携带的一种更先进的科技。音频可以被看作是传递声音信息、增加动画和视频表现力的重要元素。在网页中，音频的文件格式有很多，比如：mp3、midi、wmv等等，目前由于技术上的成熟，各类音频播放器都能对不同格式的音频文件进行识别和播放，这也在无形中扩大了声音的表现范围。网页中诸多谈话类的节目和在线音乐是使用声音表现信息的主要表达方式。听觉运用增加了网页的信息传达方式，但在网页中它仍然是以音频标识或链接开关来实现的。同时，声音作为帮助传达信息的元素，也是不可随便滥用的，因为它的出现必定会使浏览者心理产生某些相关想象，所以，在网页界面设计中，要准确选择，并对其进行合理的设置，否则，就会对浏览者产生相应的干扰，阻碍信息的传达。 湖北工业大学硕士学位论文4．5网页界面设计中信息表现手段的匹配在传统媒体中，信息都是以视觉可以认知的表现形式如文字、图像、色彩这些视觉元素来表述的，利用视觉元素来传达信息是人类历史上最古老也是最普遍的信息传达方法。作为信息接收者的人是各种感觉的集合体，我们常说人有“五感”即视觉、听觉、嗅觉、触觉和味觉，它们是人类获取信息的探测器，在与周围事物接触的过程中，感官所带来的有关外部环境状态的信息会对人们产生刺激，感官就是根据这些与其相对应的刺激展开活动的【4】，从人自身特点来说，虽然视觉对人的影响作用非常大，科学实验也证明：视觉获取的信息量占人类获取信息量的70％，听觉占20％，其他感觉器官仅占10％，可见，视觉在信息的传达过程中占重要的地位，但其它感官对接收信息所起的作用也是不容忽视的。人类在信息的交流中，是以多种感觉器官为介质的。在认知科学领域，除视觉外的听觉和以触觉为中心的各种感觉近几年越来越受到人们的广泛关注，人类这种极为纤细的感觉作为接受信息的途径得到了重视，研究也证明，多感官记忆要比单一感官记忆效果好的多，同一信息，如果只靠阅读，经过一段时间后，记忆度不到10％，而通过多感官记忆的记忆度是前者的5倍之多【7】，因此，信息的有效传达并不仅仅是靠视觉方式，而是通过对人的不同感官的刺激来传达的。我们在设计领域里，应充分发挥网页载体的多渠道的信息传达方式。25 湖北工业大学硕士学位论文第5章网页界面的版式设计5．1网页界面的版面概述网页的版式设计是一个比平面设计的版面内涵更加丰富的概念，是网页设计中一个必须研究的专题问题。信息的传达都有主次之分，同时网页传播的信息容量无限之大、之多，实现信息的大量有效传达，与版面设计的技术技巧关系非常密切。它是网页设计与传统平面设计的一个重要差异之处所在。版面设计就是通过对信息进行合理编排，来使受众有秩序、有条理的接受信息。如果没有经过版面设计的“精致加工”，即便信息传达的设计要素选用的再好，也会影响受众的阅读兴趣，从而降低信息传达的质量。另外，网页界面为了保持外观形象给访问者一个有机整体的印象，必须要保证站点内所有的页面形式保持一致，而这也正需要通过版面设计来完成。5．1．1版面设计的含义及发展版面设计又叫编排设计，是指在有限的空间内，将版面构成的诸多要素根据特定内容的需要进行组合排列，并运用造型原理，把构思与计划用视觉形式表现出来的一种创造性的活动。网页的版式设计在性质上与传统的版面设计没有本质区别。版面设计的目的是为更好地传达信息，但网页的版面设计的思维方式和手段与平面设计不同。比如网页界面的滚动和切换性、表达信息类型的多样性，使网页版面设计的内容布局和展示方法不同于平面，还有网页内容的多样性要求网页界面设计要有吸引力。以前一讲到版面设计，人们就自然而然的把它局限在报纸或书籍杂志里面，还有人认为版面设计只是技术性的工作，不属于艺术范畴，所以不重视它的艺术价值，更有人认为版面设计只要规定一种格式就行了，放上字体和图片而不需要什么设计。实际上，网页的版面不再是单纯的技术编排，如今，由于各种技术的成熟和人们审美能力的提高，对版面设计也有了更高的要求，网页界面不仅要有层次、有顺序，还要具备美的特征。当今，随着科技的发展和信息社会的到来，催生了各种媒体的发展与更新，对网页设计的要求将是越来越高，网页界面版式设计也就非常重要。当然，网页界面的版式设计同平面设计领域中的版式设计有着很多相通之处。“传统媒体所培养的感觉在新媒体中并非毫无用处，在一个媒体中形成的传达方式，可以在别的媒体中继续有效’’【4】。不同之处在于网页的界面性质是电26 湖北工业大学硕士学位论文子显示屏，借助电子技术手段的滚动，使网页界面可以超出显示屏的面积。在早期的网页界面设计里，版面设计大多是由技术人员来完成，而由于他们缺乏相关艺术知识，使得网页界面缺少艺术感和层次感。后来越来越多的设计由以往的艺术设计者参与进来了，并成为网页设计的主力军，这样，才有了许多网页明显地显示出有美术功底的设计效果。因此，设计师不仅要规划好信息，确定信息的主次关系，同时也要运用美的形式法则进行版面编排。5．1．2网页界面版式的功能特点在第2章中，我们讨论过网页界面同传统平面设计的关系，虽然两者的载体不一样，但其功能都是传达信息。但由于媒介的各自特点，网页界面中版面的功能与平面媒介的版面不同，表现在：(1)界面的可变动性传统平面作品大多是以纸为载体且通过印刷出来的，版面尺寸都是固定不变。网页界面就不一样，由于其发布的最终媒介是电脑显示器，所以其版面大小要根据电脑显示器的像素大小来显示，一般的电脑显示屏都有着固定的标准尺寸，比如：800×600，1024x768像素等，因此，在制作网页界面时，为了使受众能够看到整个界面，其宽度的设定都要比显示器的宽度要小，一般是采用778像素。高度是随着页面内容的多少来确定，所以要灵活一些，但高度的值一旦超过显示器满屏的高度，浏览器右边就会出现可以上下滑动的滚动条，以便浏览者能够浏览到全部的页面内容。由于网页界面的可延长性，使网页界面的信息量相对平面媒介的版面来说要丰富得多，但这就增加了网页界面版式设计的难度。(2)内容的导航性在网页界面中，如何有效传递信息并帮助浏览者迅速找到其所需求的内容是版式设计要优先考虑的问题，就好像书籍、杂志的目录能让读者快速找到感兴趣的内容一样，类似目录的导航系统也成了网页界面版式设计中的一个要着重考虑的问题。很显然，网页界面中不可能利用杂志一样的目录，而是利用特有的设计模式及网页的超链接特点。网络中海量的信息、纷繁复杂，使得网页界面的导航元素比较复杂。可以说网页界面中的导航元素是无处不在的，好的导航设计会大大方便受众有效获取信息。所以，导航系统在进行网页版面设计时要依据视觉手段给予特别的规划。一般来说，导航系统应该直观、清晰和明确，这样才能建立起一个有效的、快捷的途径供浏览者使用。在较为大型的门户网站中，我们可以看到明显的导27 湖北工业大学硕士学位论文航栏，通过导航栏很快可以了解该网站整个信息构架的，这就好像我们去商场购物时，要先看看商场的购物指导规划图，要了解商场有几层，每一层所买的是什么东西，然后才能有目的去进行购买。所以，只有在了解了网站整体信息构架以后，才能有选择的点击自己感兴趣的栏目进入相应的内容板块页浏览信息。但在这里有一个问题，当我们浏览完该栏目后，想去看另外一个栏目，该怎么办呢?要解决这个问题，我们可以采取退回主界面的办法，重新点击其它所需的栏目，而这样一来就比较麻烦，因此，我们可以采用便捷的处理办法，就是在每一级页面都设置一个相同的导航栏目，并放在界面较为醒目的位置，例如：新浪、搜狐等门户网站，导航栏大多是放在页面的顶端或上部(如图5-1)，这是视线容易看到的地方，当浏览者打开页面后，导航栏就能够迅速的出现在眼前。抖$⋯确删’抖粗Ⅲ册#嘲《删b渊岫±Ⅱ_辨t菇&￡船口嚣嚣：：：：嚣兰：：嚣警篓：：嚣菱嚣盎萎=嚣≯：i嚣|∞⋯⋯t堋㈣#州t■&■自；I琳t^*#m■*艚⋯㈣t#图5--1这样无论该网站信息多么庞杂，通过导航栏浏览者始终能够知道自己所处的位置以及随时访问任何感兴趣的栏目。所以，在每一个页面都设有导航栏，这也是网页界面与报纸、期刊杂志的目录晟大的不同点。，曼。。、i⋯。i薹五蔓■≮缪湖】cA隆企Ⅱ集团一目口{舶＆tnzm*暖!F月十一：#{e《Ⅱ{R错‰t*t】图52如图5-2是笔者工作中的一个案例，把导航信息放在公司LOGO下面显著的位置，使网站信息构架简洁清晰。另外，网站中的栏目众多，如何编排好这些栏目也是导航系统要解决的问题．因此，既要根据网站的性质和定位来确定信息的先后关系，又要了解用户，考虑它们的需求和访问习惯来设计导航系统，所以导航系统也不可能是很完美，只要符合一般大众就可以了。一个有条理的导航系统会使网站的结构更清晰．也会让用户方便的使用网站，快速查找信息并高效的接受信息。(3)信息传达的互动性 湖北工业大学硕士学位论文交互技术在版式上最直接地体现是浏览者能对版式信息进行控制，例如：浏览者可以通过界面上的按钮、菜单等交互设置，按自身的需求和习惯来选择信息。这样，“浏览者阅读的过程是主动地，这种行为也就会极大地提高读者的阅读兴趣和阅读效率”【131。而传统的平面印刷品的制作和发布者都是由传播者控制的，一旦印刷完成后，版式也就定型，不能更改了，读者也只能按设计师的设计意图被动地完成信息的阅读。因此，这是网页版面与平面设计版式的又一个显著不同之处。网页界面中交互技术的表现形式是指具有超链接和跳转功能的交互元素，网页界面版式的互动性同这些交互元素也就密切相关。当读者点击这些交互元素时，信息就会跳转到某个特定区域，甚至引起版式上的改变，这样通过读者的行为而触发了网页界面版式的变动，就带来了一种全新的版式设计思维。网页界面版式的互动特性对于浏览者接受信息有着重要的影响，所以，在版式设计时，对交互元素的设置必须贴切合理，符合逻辑，同时，用户在浏览网页时，通过对版式的操控也会不断获得新的感官体验，而这种新鲜感和趣味性会使浏览者记住或再次访问该网页。5．1．3版面设计应遵循的基本规律谈到版面设计，不能不涉及视觉流程，这是版式设计必须遵循的一个基本规律。何谓视觉流程，它是指人在进行观察和阅读时，其视线有一种自然的流动习惯。其规律是：由左到右，由上而下，由左上沿着弧线向右下方流动，在流动过程中，注意值也逐渐降低，这种流动线就是“视觉流程"p11。视觉流程是版式设计的重要指导原则，根据人的这种视觉认知模式，设计师常常将主要的信息放在适当的位置上，以引起读者注意。当然，人的视线也是可以通过视觉元素所引导的，视觉中心也可以出现在版面任何位置。所以，网页的版面设计一方面要合理的运用视觉流程规律，根据信息的主次来精心安排，适应观者的视线，同时也可以利用某些视觉技术手段，建立视觉中心。网页界面是通过设计元素来实现信息内容传达的，为了使信息有效地传达给受众，在网页界面设计时，首先要以信息内容为主，仔细分析人们视觉流向的特点，然后根据信息内容并运用版式设计中重复、均衡、节奏等美的形式来设计视觉流向，再以此来设置网页界面各类视觉元素，达到传递信息的目的。29 湖北工业大学硕士学位论文5．2现代网页版式设计的主要模式——网格系统5．2．1网格系统设计在目前的网页中，有效传达信息、提高传达质量是网页界面版式设计要注重的关键问题，那么，采取什么样的版面形式最合适呢?笔者认为采用网格结构系统是最合适网页的版面编排形式。下面我就对既有的版面形式进行简要的概述。早在十五世纪四十年代，德国人古腾堡经过多次的试验发明了金属活字并改进了印书技术，大大促进了书籍和文化的发展与传播。此时的书籍已经具有了基本的版面形式：书籍的左右两个页面版式相同、相互对称，且内文的天头、地角及页边距按照一定的数比关系形成版心。文字与图片全部安排在版心里面，整本书籍文字的格式一样，这种版面形式我们称之为古典版式设计。即使到了今天，书籍设计依旧在采用这种版面设计形式。后来，在二十世纪四十年代，瑞士形成并发展起来了网格系统设计，其特点是运用数学的比例关系，将版心划分为许多尺寸大小相同的格子，或一栏、二栏及更多的栏，然后，把文字、图像等有秩序的编排在里面，并在设计上把平衡、对称、比例、对比互补关系等这些美的形式以高度的理性化的方法融入其中，从而使整个版面具有一定的视觉上的美感。这种编排形式，使版面出现简单的纵横结构，因此，得到的平面效果也非常的标准化和规范化。所以，具有简明而准确传达信息的视觉特点。再后来，由于战后西欧部分国家经济复苏并且迅猛发展、使得市场逐步趋于国际化、信息的交流也日益密切，这时它就需要一种能够促进国际之间迅速交流的平面设计形式，而网格设计简明而准确的特点恰好满足了国际间信息传达的要求。所以，网格设计在很短的时间内得到普及，直到现在，在各类媒介的版面编排中依然以网格设计作为主题模式。但是网格设计主张高度的次序化、准确的视觉传达功能造成高度的标准化和理性化的设计特点，也具有千篇一律、单调、刻板、缺乏人情味的不足之处，尤其是它对于要求不同的对象都采用同样的方法，因而也受到了诸多强调视觉美的设计家的批评11⋯。二十世纪八十年代末期，由于人们对于网格系统的厌倦，再加上激光照排技术的产生和发展以及电脑介入平面设计领域，使得自由版式设计逐渐风靡全球。其最具代表性的人物是美国人Davidcarson，他把版式设计与电脑相结合，颠覆了人们对版式设计的传统观念和看法，开创了具有前卫意识的版面形式和风格。自由版式设计的特点是：①无版心的束缚，是指它打破了古典版式和网格系统版心的制约与限制，各设计元素能够随心所欲的自由编排。②字体、字 湖北工业大学硕士学位论文距、行距的多变性以及图文混合特点。@整体的散构性和局部的装饰性等。自由版式设计给当今多样化的版面形式提供了很好的借鉴pJ。从以上的叙述，我们可以看到，就传达的功能来讲，网格系统版式具有简洁、清晰、有序、理性的显著特点，最能够明确有效传达信息；就形式上来说，自由版式设计最为丰富，而网页界面作为人们获取信息的窗口，有效地传达信息才是其主要的目的。如果不能传递信息，即使再美好的界面也不可能受到人们的青睐。尤其在未来信息量将更为庞杂，信息表述的质量就尤为重要，因此，高效的传递信息的版面设计形式才是网页界面要选择和使用的。而网格设计准确清晰的传达信息的版面形式，不仅从功能上符合网页界面的版式设计要求，而且也是提高网页界面传达信息的有效途径。5．2．2网格结构设计与WEB标准WEB20时代的到来，使各网站之间的信息共享和信息交流路径大大拓展了。为了让网站间信息更好的流通，w3c组织推出了WEB标准，它要求制作的网页界面结构清晰、准确，从而推动了网页界面的版式设计发生了新变化，越来越重视信息传达的功能性和网页界面的结构布局。'ojk日uK⋯E日口■●●●■目■■=霹■■■，$_璧一==图53如图5-3是一个国外的插图网站，该网站运用网格系统进行设计，使得信息的层次分明、结构明晰，让人一目了然。在初期阶段，进行网页界面设计时，总是先考虑怎么设计，考虑图片、字体、颜色等视觉上的表现，根本不注重界面结构。大多是利用PHOTOSHOP、F1REWORKSD等软件将效果页制作出来，然后再用DREAMWEAVER软件制作，由于在DREAMWEAVER软件中基本是用表格规划布局，因此，先要根据篷麓曜嚣 湖北工业大学硕士学位论文效果页的版式编排来设置表格，再将效果页切分成若干个方格，把它放在对应的表格中。这样，一个完整的页面就被制作出来了，但这种页面制作从一开始就在考虑页面的视觉效果，根本没有考虑在网页制作过程中的界面规划。并且，先制作页面且不考虑页面结构的这种做法，使得在DI冱AMwEAVl弧中制作时，为了实现页面效果而使表格的布局不合理，产生了许多不必要的、多余的代码，从而使整个页面代码臃肿、冗长，不仅增加了浏览器识别的时间(网页是通过浏览器识别页面的程序语言代码而以视觉化的表现形式呈现出来)，也使得该页面显示时间拉长。从信息传达的角度来讲，页面的这种制作方法，形式大于功能，不但起不到有效传达信息的效果，还会因页面显示时间的拖延而使访问者失去耐心。WEB标准提出运用DIV+CSS布局的方式，将形式和内容相分离。使页面的形式不再是最重要的，而是强调页面信息传达的功能性，因此，在规划页面时，要先分析页面内容的主次以及每块栏目内容服务的目的，然后再根据这些内容目的来设计版面、划分界面结构并用层来进行布局，这样不仅能使页面的信息结构清晰，具有较强的传达功能，而且用层布局，还使页面版式灵活多变。网格设计中强调信息传达功能以及版面所形成的纵横结构，工整有序、层次分明的特点也就契合了WEB标准发布后，注重网页界面有效传达信息的功能性和其用层来布局页面的制作方式的特征。所以，网格设计的基本原理对于网页界面的版式设计有着重要意义。图5．4是mp3的国际网站，mp3是一个有关音乐的网站，专为音乐爱好者提供最新的音乐动态及相关信息，甚至是音乐下载，深受广大音乐爱好者的喜欢。该网站首页界面版式运用网格系统进行设计，将版面以五栏为基础，划分为左右两大块，使版式结构清晰明了，同时运用跨栏的形式，灵活多变的把信息进行编排，例如右边占据三栏，放置主要信息，在面积大小上较为突出，也很容易吸引浏览者的视线，左边占据两栏，放置专题信息。这样的页面格局简洁、准确、生动、灵活富于变化，具有较强的信息传达特点。32 图5-4 湖北工业大学硕士学位论文第6章案例分析鞋庄是一个以经营休闲鞋和运动鞋为主的网上商城，其主要针对16_35岁的青年群体。2007年初我参与了该网站的建设。先来对其进行一个整体的分析：首先，其作为一个商业性质的网站，卖的是什么商品、有哪些类别、价格是多少、怎样购买以及服务质量就成为其所要传达的主要信息。如何把它们合理的表达出来是界面设计所要解决的问题。在同客户进行深入沟通后，理清了各类信息之间的关系井对其进行了归纳，确定了首页界面的信息内容。而从首页的信息构架来看，界面可以分为上中下三大板块(见图6-1)，上部为导航栏、广告栏；中间放置要传达的主要商品信息；下部则是网站相关信息。接着开始着手进行界面的规划，网格设计的多栏结构具有准确清晰的信息传达功能，且栏的数量越多对于信息的表现也就越细致，也能给人信息量较多的感觉，同时考虑到网页界面的特征并根据信息的层次关系，我采用网格设计的形式将界面划分为五栏结构，并以此为基础进行视觉信息的编排。图6-1由于商业性的特点，该网站信息的传达多以图像为主，尤其在界面的中部区域，因此，依据这个特征，我在五栏的基础上将整个界面规划为左右两块区域(见图6-2) 湖北工业大学硕士学位论文E二画i盈莲螽随繇鞲Fo⋯口⋯⋯m⋯⋯⋯■一●，■⋯4⋯⋯⋯№∞‘⋯M∞⋯⋯一一～9⋯日自L_⋯■⋯{⋯'目Ⅲ嫡蜻国黼■⋯■一■一a一图6-2左边区域占据一栏，放置文字信息，例如：网站商品的分类信息以及相关球鞋的知识等信息。右边区域占据四栏，主要放置图片信息，如：新品上架、特价专区及推荐商品。从面积和位置上看，右边区域在视觉上要比左边更能吸引浏览者注意，所以，我把整个页面最重要的商品信息放在这块，采用四栏进行编排，并且在各栏目之间运用广告条进行横向上的分割，使信息的表现更加细致，也使版式看起来更加工整。通过这样一个对比布局，不仅满足了客户的要求，也能使浏览者一目了然的注意到商品信息。整个版式将重要信息与次要信息有效的区别丌来．同时对右边区域栏的灵活运用，避免了五栏结构的呆板，给人一种较强的节奏感。对于导航栏，我把它安排在界面的项部(见图6-3)，同网站logo编排放置，使浏览者能够很容易的看到并以此了解网站构架．另外，还针对导航栏里的内容筛选出浏览者较关注的栏目，放在醒目的位置．这样浏览者可以根据自己的需求，通过导航栏找到相关信息并进行网上订购。 湖北工业大学硕士学位论文圉6-3紧接着导航栏的是广告栏，用于网站各类信息的广告活动发布(见图6-4)。在广告栏的最右边设置了互动元素，浏览者通过点击按钮能同网站的客服人员进行即时交流，准确详细的了解某类商品的情况。圈6—4这个互动设置加强了网站与用户之间的联系，能够迅速地解决用户的问题，使用户产生一种信赖感，同时，也是商家了解不同用户需求的窗口和途径，为商家及时做出相应的调整提供了便利。把导航栏和互动设置两个重要的元素放置在界面的最佳视觉区域，为浏览者更好的访问该网站起到了很好的引导作用。在色彩的选择上，考虑到网站是以商品图像为主，由于不同的商品色彩亦不同，且繁杂的色彩容易造成视觉上的散乱。因此，我选择灰色作为网站的主色调。狄色是一种和谐色，它可以包容所有的色彩，运用灰色作为主色能够对不同的色彩进行调和，降低它们之间的对比度，使它们都统一在灰色中，从而给人一种视觉上的整体感和舒适感。虽然用灰色来统一色调，但灰色和各种商品色彩略显轻浮．所以，对每个标题栏，使用了具有沉稳感的黑色，同时，黑色的运用也起到了划分栏目区域的作用。鞋庄同许多网上商城一样，为了准确传递商品信息，都是以图片来直接展示商品，因此，页面上的图形都是实拍的商品照片．图形的这种直观性让浏览者能快速找到喜欢的商品．且多角度的图片展示方式也给浏览者提供了详细的商品信息。但首页上的这些图片都以静态的形式来呈现，给人的整体感觉较为单调，于是，我使用1ava程序编制了一个动态图形，并将其放在界面上部的中间位置(见罔6-5)．金略置妊8焉j洒謦静簿iC静汉、。蹩翟图6-5蠖鼋 湖北工业大学硕士学位论文同时在各栏目间运用了动态GIF图片(见图6-6)，这样既增强了新商品的宣传量，又调节了浏览者的视线。图6-6整个网站以图形为主，文字信息量相对较少，大都是作为说明商品信息的辅助元素，所以．在文字上采用的是大众化的且能在所有电脑上都显示的宋体字。：⋯躲妇鹫量毒造也．墅釜兰兰}璺澳肇聱≥主：一兰。一三一三-；瀑辫紫辫i艺基L兰：一兰rL兰‘一r≥，■■■■———丽鬈墨夏；=堪萝≥!。蔓’。j詈“i望2奎矗：汪；二之；F筹善嚣一，一$》§聋·甓争’?f。，Ⅻ?￡墒■瞳曩醛!i莓：一：?震爹爹羹萝一，■一毒二一二二百■■———————_i=，．⋯，图6—7该网站是我按照WEB标准规范制作的第一个网站(见图6—7)，在制作过程中，我尝试将网格设计运用到页面版式中，并按页面信息进行规划。使页面信息结构清晰且布局简洁，实现了有效传达信息的功能。通过这次设计，使我 湖北工业大学硕士学位论文改变了以前注重页面视觉效果的观念，逐步认识到了“结构"的重要意义。这对我今后进行网页设计起到很大的帮助。虽然该方案被采用，但还是有不足的地方，比如，在商品信息间的距离较小，整体看上去显得稍微有点紧凑。基于网络媒体的网页界面设计同网络技术的发展息息相关。WEB2．0时代的到来及所带来的技术，对网页界面设计产生了深刻影响，逐步实现了由形式向功能的转变，信息的合理表现和有效传达成为了衡量网页设计的标准，并且由于网页界面独特的交互特点，操作方便，易于控制的界面也成为WEB2．0时代网页界面设计的趋势。因此，作为网页设计师，不仅要深入了解媒体特征，更要多从信息传达的角度出发，全面地考虑诸多设计因素的关系，只有这样，才能设计出具备准确传达信息功能的网页界面。38 湖北工业大学硕士学位论文第7章结论与后续研究当今社会，随着媒体的多元化发展，信息量的迅速增加和传播速度的增快，传媒环境也相应的发生不断的变化，但无论怎样改变，传媒的最终目的是传达信息，正如麦克卢汉所说，媒体其实是一种信息，新媒体中蕴涵着新的传媒观念。网络媒体作为一种新兴的媒体，使信息传播的方式发生了相当大的转变，继而影响了许多行为方式。这种情况下，网页是以怎样的形式来传递信息，信息如何在网页界面中得到有效表现，它不仅是网页界面设计的关键与核心所在，也是本文讨论的主要问题。本文从网页界面的特性以及传播学和视觉规律的基础理论入手，通过对WEB2．0时代网页界面信息传达特点，以及人对信息接收和处理方式分析的基础上，探讨了网页界面信息传达的表现方式和手段，并强调互动性、听觉在网页界面中对信息传达的作用，同时，通过对传统版式设计的比较以及对WEB2．0时代下，网页界面设计趋势的分析，提出了一些设计思路和方法，主要有以下几点：(1)网页中信息传达的视觉手段的多样化，使信息的表现多样化，那么网页中信息到底以怎样的方式来表现呢?因此，就要对信息进行归纳并分类，然后再利用相关的视觉符号来表现，从而让用户在使用界面时便捷高效。除此之外，网页中的多媒体表现手段，把图象、声音相互结合，运用视觉、听觉来传达信息，增强了信息的传达效率。(2)WEB2．0时代，网页界面注重用户的交互性体验，所以，在进行网页设计时要考虑用户的一般性操作特征，并以此为基础来设置界面的交互元素和工具，越是方便和易于操控，越能引起用户的兴趣，进而使用户积极参与信息的交流。(3)网页中的版式设计继承了传统媒体中形成的版面设计方式，网格系统设计在网页中的运用不仅对于信息的编排起到了规范和标准化的作用，还能使页面结构清晰、信息分明，有利于简明而准确传达信息的视觉功能，能够有效提高信息传达的质量。本文有一些观点都是自己在实践过程中的一些体会，所以有些地方做的不够深入和全面，且由于水平学识有限，文中难免有不少疏漏之处，希望各位老师批评指正。我的着眼点主要是从信息传达和视觉的角度来谈网页界面设39 湖北工业大学硕士学位论文计，但其实在进行网页界面设计时，还有很多因素要考虑，例如：网络速度、界面的人文优化等等，这些对于信息的传达效果都有着很大的影响，希望以后能在这方面进行更深入的研究。 湖北工业大学硕士学位论文参考文献[1]丁清典．基于web2．0的互联网新模式研究[D]．学位论文北京：北京邮电大学2006[2](美)莱斯特．视觉传播：形象载动信息[M]．中国传媒大学出版社．2003．7．[3](美)鲁道夫阿恩海姆．艺术与视知觉[M]．四川人民出版社．1998．3．[4](日)原研哉设计中的设计[加．山东人民出版社．2006．11．[5]赵莉，钱维多，崔敬．互动传播的思维[M]．中国轻工业出版社．2007．1．[6]麦奎尔．受众分析[M]．人民大学出版社．2006．3．[7]高利明．传播媒体和信息技术[蛔．北京大学出版社．1998．9．[8]胡崧，于慧．新锐网页版式与风格设计案例指南[M]⋯中国青年出版社．2007．4．[9]马月．网站界面设计[M]．北京理工大学出版社．2006．8．[10]王受之．世界现代平面设计史[M]．新世纪出版社．1999．4．[11]邬烈炎．视觉传达设计视觉体验[M]．江苏美术出版社．2008．1．[12](英)达博纳(Dabner，D．)．英国版式设计教程[M]．上海人民美术出版社．2005．3[13]蒋杰．版式设计的新领域—互动版式设计[D]．学位论文．南京艺术学院2002．[14]王彦发．视觉传达设计原理[M]．高等教育出版社．2008．1．[15]师晟．视觉构造原理[M]．东华大学出版社．2006．1．[16]薛红艳．设计的视觉语言[M]．化学工业出版社．2006．7．[17]董焱．信息文化论一数字化生存状态的冷思考[M]．北京图书馆出版社．2003．1．[18](美)鲁道夫阿恩海姆．视觉思维[M]．四川人民出版社．1998．3．[19]王令中．视觉艺术心里[M]．人民美术出版社．2005．8．[20](美)海姆著．和谐界面——交互设计基础[M]．电子工业出版社．2007．10[21]李砚祖，芦影．平面设计艺术[M]．中国人民大学出版社．2005．1．[22]马费成．信息管理学基础[田．武汉大学出版社．2002．12．[23](美)诺曼．情感化设计[M]．电子工业出版社．2005．5．1．[24](美)尼葛洛庞帝．数字化生存[M]．海南出版社．2000[25]尹定邦．设计学概论[M]．湖南科学技术出版社．2003．11[26]倪洋．网页设计[M]．上海人民美术出版社．2006．6．[27]邹慧琴，敖蕾，谭开界．互动网页设计与易用度[M]．中国轻工业出版社．2007．1．[28](美)RichardSaulWurman．信息饥渴一信息选取，表达与透析[M]．电子工业出版社．2001．8．[29]孙守迁．设计信息学[M]．机械工业出版社．2008．741 湖北工业大学硕士学位论文[30I(日)佐佐木刚土．版式设计原理[M2．中国青年出版社．2007．9．[31]王汀．版面构成[M]．广东人民出版社．2000．10．[32]黄建平，吴莹．版式设计基础[M]．上海人民美术出版社．2007．4．[33]肖勇．视觉设计经典[M]．华中科技大学出版社．2008．06．[343(美)怀特．平面设计原理[M]．上海人民美术出版社．2005．1．[353海军．视觉的诗学——平面设计的符号向度[M]．重庆大学出版社．20．07．4．[36]庞蕾．视觉传达设计视觉形态[M]．江苏美术出版社．2008．1．[37]黄海燕．网页界面视觉传达研究[J]．《装饰》2004．08．[38]吴娇娇，彭纲．论网页的版式设计[J]．《装饰》2004．09．[393蔡顺兴．论自由版式设计[J]．《装饰》2000．06[40]岳小莉曹存根．信息设计和知识设计[J]．《中国科学院计算技术研究所内部刊物一—信息技术快报》2004．11．。⋯’‘’[41](美)布托．用户界面设计指南[M]．机械工业出版社．2008．1．[42](韩)崔美善．设计师谈网页风格构成[M]．电子工业出版社．2006．9．[43](美)海姆著．和谐界面——交互设计基础[M]．电子工业出版社．2007．10[44](英)斯潘塞．现代版式设计先驱[M]．上海人民美术出版社．2006．11．[45](英)巴纳德．艺术设计与视觉文化[M]．江苏美术出版社．2006．8．[463(美)弗兰克著．视觉艺术原理[M]．上海人民美术出版社．2008．02[47](英)安布罗斯，哈里斯．版式设计[M]．中国青年出版社．2008．5．[48](英)拉克什米·巴斯卡兰．大容量信息整合设计[M]．上海人民美术出版社．2006．[49](美)麦金太尔．Web视觉设计[M]．机械工业出版社出．2008．8．[50]RobertJacobson．InformationDesign[M]．TheMITPress1999．[51](美)普里斯．交互设计——超越人机交互[M]．电子工业出版社．，2003．6．[52](美)沙尔文迪．人机交互：以用户为中心的设计和评估[M]．清华大学出版社．2003．9[53](英)安布罗斯．LAYOUT版式设计[M]．中国青年出版社．2006．10．[54]陈玲．新媒体艺术史纲：走向整合的旅程[M]．清华大学出版社．2007．2．[55](加)马歇尔麦克卢汉——理解媒介[M]．商务印书馆．2001参考相关网站：咝mnyzymilk．comh主主乜；』』燮：兰in垒：￡Q里：竺坠http：{}棚．tiktuk．comhttp：／／,ww．mp3．comhttp：／／www．xiezhuang．corn42 湖北工业大学硕士学位论文致谢本课题是在尊敬的导师周峰副教授的悉心指导下完成的。在过去三年的学习、工作、生活中，导师对我在学习、工作上严格要求，在生活上无微不至地关怀。从课题的选定、资料的搜集、方案的选定、论文的理论等各个环节上都倾注了大量的心血。尤其是导师严谨的治学态度、渊博的学识、兢兢业业的工作精神、正直宽厚的品格，使我受益非浅，我将受益终生，在此谨向导师致以最衷心的感谢，感谢导师三年来对我悉心的培养。湖北工业大学大学艺术设计学院的各位领导和老师对论文的完成给予了很多支持和帮助，在此表示衷心的感谢。06级平面设计专业同学是一个团结向上、充满活力的集体，在这里我感受到了集体的帮助和友爱。感谢张俊杰、朱艳、刘玲等全体研究生的关心和帮助。在此谨向所有帮助、关心过我的老师、同学表示衷心的感谢。向多年来默默支持我完成学业，始终给予我最高信任的父母家人表示深深的感谢。43 湖北工业大学硕士学位论文附录1．《消费市场技术变动与现代包装设计发展》2006．10武汉船舶职业技术学院学报ISSNl671—8100CN42—1670／Z刘中华2．《论戴维卡森自由版式设计的功能特点》2009．3沙洋师范高等专科学校学报ISSNl672—0768周峰刘中华3．参与编撰《编排设计基础》一书，已由武汉大学出版社出版发行 网页设计中信息的视觉传达研究作者：刘中华学位授予单位：湖北工业大学相似文献(0条)本文链接：http://d.g.wanfangdata.com.cn/Thesis_Y1551948.aspx下载时间：2010年5月20日