搜索
第一章网页设计的基本理论网页设计的基本理论网页设计艺术主要内容1.1网页设计概述11.2网页设计的构成要素及特性21.3网页设计的定位31.4网页美工与设计流程4进入21世纪，我们进入了一个崭新的信息时代，从传呼机退出历史舞台到3G手机的使用，从电视接收闭路信号到数字电视点播，人类社会正向数字时代的转变。Internet作为信息社会的典型代表，正在全世界进行着越来越深刻的革命。它代表着一种崭新的信息交流方式，它使信息的传播突破了传统的政治、经济、地域及文化的阻隔，使信息传达的范围、速度与效率都产生了质的飞跃。Internet是由成千上万的网站组成，而每个网站都是由诸多网页构成，故网页是构成Internet的基本元素。网页设计是网络视觉信息的编排及归类，这是网页设计的特点，也是身处于信息化、数字化时代的当今设计者所必须具备的基本素质。1.1网页设计概述网页从最早的以文字为主的页面，发展到今天图、文、声、像、多媒体并茂的页面，从以静态网页为主，发展到今天可以像博客这样由浏览者定制的交互式动态网页，从实现信息传达功能为主，发展到要求功能与审美兼得页面。“美”与“技术”这两个要素的结合，正是如今网页设计领域研究的中心内容。网页设计在视觉传达设计这一领域中，“美”和“技术”必然要结合在一起，而如何结合与实现，正是本书所要探讨的内容。1.1网页设计概述网页设计作为设计学科的一个分支，具有很高的实用价值。它以科学技术和艺术的结合为基础，以外观表现形式为主要手段，谋求网页界面的功能美与形式美，并体现网页的时代感，以优良的设计努力满足浏览者的心理需求。从设计类型上来看，网页设计应属于视觉传达设计的领域，故而网页设计的主要构成元素和设计指导原则都遵循视觉传达设计的一般规律。在本书以后章节中将对网页设计的主要构成元素和设计指导原则一一予以阐述，并研究网页设计的常用软件与实现方法。1.1网页设计概述对于网页设计来讲，其信息内容的有效传达是通过将各种构成要素的设计编排来实现的。网页的构成要素包括文字、图形图像、色彩、版式等构成要素。1.2网页设计的构成要素及特性1.2.1网页设计的构成要素版式色彩文字图形图像1.文字的编排与设计文字在视觉传达中作为页面的构成要素之一，除了表意以外，还具有传达感情的功能，因而必须具有视觉上的美感，能给人以美好印象，获得良好的心理反应。作为信息传达的主要手段的文字目前是网页设计的主体，是网页中必不可少的元素，也是网页中的主要信息构成要素。1.文字的编排与设计要达到网页文字传达的有效性，必须重视文字编辑的整体效果，使网页文字能给人以清晰的视觉印象，避免页面繁杂零乱，减去不必要的装饰变化，使人易认、易懂、易读。网页文字的设计不能为了艺术造型而编辑，忘记了文字本身是传达内容和表达信息的主题。2.图形图像的创意与设计在视觉顺序上，图形往往能首先吸引人们的注意力，这是由于图形给人的视觉印象要比文字强烈得多，图片的引入也大大美化了网页。可以说，要使网页在纯文本基础上变得更有趣味，最为简捷省力的办法就是使用图片。几乎所有的网页都用到了图形，善用图形，可以生动、形象、直观地表达网页的主题，增强网页的宣传力、号召力和感染力，吸引浏览者的注意，引起浏览者的兴趣。网页可以图文并茂地向用户提供信息，成倍地加大了它所提供的信息量。对于一条信息来说，图片对浏览者吸引也远远超过单纯的文字。北京大学新版主页图文并茂、稳重高雅、色彩搭配稳重得体，与旧版相比增色不少。2.图形图像的创意与设计图形图像必须完全符合网页的主题，并以创新的构思和强烈的个性，来使主题与表现两者较好地统一，以有利于信息的传达。图片的位置、面积、数量、形式、方向等直接关系到网页的视觉传达。在图文混排时，要注意统一、悦目、重点突出，特别是在处理和相关文字编排在一起的图片时，应考虑图片在整体编辑计划中的作用，达到和谐整齐。3.版式的设计与编排网页版式的设计是技术性与艺术性的高度统一，是视觉传达的重要手段，是网页设计的重要组成部分。它是指将文字、图形等视觉元素进行组合配置，使页面整体的视觉效果美观而易读，便于阅读理解，实现信息传达的最佳效果。许多设计成功的网页能够吸引浏览者，往往并非仅仅依赖于几张引人注目的图片或嗦头式的标题，而是靠成功的版式设计。好的版式首先能以清晰的视觉导向使浏览者对网页内容一目了然，其次又以巧妙的图文配置使浏览者获得悦目的视觉效果。4.色彩的搭配我们在浏览网页时，留下的第一印象就是页面的色彩设计，它的好坏直接影响阅读者的观赏兴趣。在网页设计领域，彩色的网页总是要胜于单色的网页。网页也是一种艺术品，因为它既要求文字的优美流畅，又要求页面的新颖、整洁，使用色彩可以产生强烈的视觉效果，使页面更加生动。5.多媒体元素的选择网页中的多媒体元素在能够很大程度上增强对浏览者的吸引力。浏览者希望在网上看到更具创造性、更具吸引力和更具情趣的网页，多媒体元素正是实现这一目标的重要手段。网页中所涉及到的多媒体元素主要是音频、视频和动画等。动画动画音频视频（1）音频随着音频技术及语音控制技术的进一步发展和普及，以音频进行人机交流满逐步成为实现网页交互性的重要手段。在网上浏览时时常可以发现一些网页设置了背景音乐，伴随轻柔优美的乐曲，使浏览者在网上冲浪成了更加惬意的休闲活动。加入音乐，动画文件大小变大，下载时间就会加长。因此，在运用音效时要谨慎处理，尽量在不影响效果的情况下减小文件的大小。在网页中常用的音频格式有：WAV、MIDI、MP3、RealMedia等。目前支持WAV格式的环境很多，但WAV格式基本上都是保存没有压缩过的音频，因此文件比较大，不便于下载。MP3是在尽量保持良好音质的同时，减小了文件的大小，是在网页中比较常用的音频格式。RealMedia是网络流媒体的文件格式，在非常低的网速下能够提供较好的音质，但是需要有RealPlayer软件支持才能播放，因此不太适合在网页中应用。大多数比较小的MIDI文件都可以提供比较长的播放时间，若单独放在网页中，下载时间也是比较理想的。（2）视频网速的提高使得以视频为传达媒介的信息成为可能，视频形象生动、易于理解，对浏览者的文化水平要求不高，具有较强的吸引力。而且在信息的层次深入方面，视频表现也具有一定优势。网络视频常见的有视频短片，远程教学，视频聊天，视频点播等。像百事可乐这样一些企业甚至直接将视频搬到了网上。但是，我们还是要考虑网速问题，如果视频播放不流畅也会影响浏览效果。常见的视频文件格式主要有AVI、MPEG、RealVideo和MOV等。AVI是目前最广泛使用的一种视频格式。（3）动画网页中，动画往往是第一视觉中心。因此在传达重要信息时，动画是有效的手段。动画具有调节页面的重要作用，在以静态页面为主的网站中适当加入动画，可以达到“动静相宜”的良好视觉效果。从那些有着成功动画设计的网页中可以发现，以动画为主的表现手法往往能提高人们观赏页面的兴致，增加浏览的乐趣，并引导人们的思想意识。在Flash技术流行的今天，动画日益成为网页设计的热点，全站Flash的网站层出不穷，成为展示商品与烘托效果的首选工具。（3）动画在网页中加入多媒体元素时，要注意多媒体文件的大小，虽然Flash文件是矢量化格式，文件不是很大，但如果展示很多图片同样会造成延时，站在浏览者的立场上来看，多等一秒都是令人厌烦的。因此在保证准确传达的前提下，应尽量优化文件、压缩大小，使浏览者在最短的时间内获得最多的信息。1.2.2网页设计的特性1.信息传达性虽然网页设计是将技术性与艺术性融为一体的创造性活动，但网页设计应时刻围绕“信息传达”这一主题来进行。从根本上来看，它是一种以功能性为主的设计。网页设计是一项创造性的工作，要求网页设计师通过有效吸引视线的艺术形式清晰、准确、有力地传达信息。网页审美从属于网页内容，其本身不可能独立存在。因而网页设计的审美功能不仅由界面形式所决定，很大程度上也受到操作顺畅程度、信息接受心理及信息接受形式等因素的影响，具有很明显的综合性。网页设计需要充分体现功能第一性的原则，以功能要求为设计的主要出发点，综合考虑、整体设计，以求达到最佳效果。2.主题明确性对网页中主题形象的构思要以注意明确、易于接受的原则来设计。在网页中出现的视觉形象要适应大多数浏览者的口味，越明确、越通俗、越具体越好。应尽量以各层次的浏览者都能接受、理解、通俗易懂的形象来吸引浏览者的注意，诱发他们的联想从而达成信息的认知。尽量避免用费解的、冷漠的形象进行说教式的信息传递。3.形式简洁性形式简洁是网页应具有的外在特征。这是加强网页界面的视觉冲击力，迅速传递信息的要求。这就要求网页的形式应力求“删繁就简”、“以少胜多”，一切分散浏览者注意力的图形、线条、可有可无的“装饰”都应摒弃，使参与形式构成的诸元素均与欲传递的内容直接相关。各种元素的编排也应简明、清晰。与此同时，形式简洁也是形式美的要求。简洁的图形、醒目的文字、大的色块更符合形式美的要求和当今人们的欣赏趣味，令人百看不厌，并能回味无穷，联想丰富。4.界面一致性一致性是实用性的关键，网页设计应保持一贯性，网站内的各个页面应保持一贯性，不能给用户带来混乱感，比如导航的位置，页面的版式等。在使用方面，可能的话应遵循普遍规律，设计得能让用户很容易适应；网页界面的构成不能太复杂；主要内容应设计在引人注目的地方。同时，导航栏的使用要方便，要考虑好使用的色彩系统或字体，去除不必要的内容，把信息分类设计得成体系，让用户很容易就能找到想要的内容。5.使用便利性在网页设计方面，重要的一点就是要站在浏览者的立场上去进行设计。既能给浏览者带来方便，又兼备视觉的冲击力，这样的网页才是每个网页设计人员应思考并追求的东西。网页设计不能让浏览者在使用导航要素时进入的是胡同，而应是四通八达的路口，要以制作者为中心的思考模式转化为以用户为中心的思考模式，看起来便利又意义分明的视觉要素有机结合起来加以运用。为了网页美观把页面文字调得很小或与背景颜色太接近，都会给浏览者读取网页的时候带来不便。如果用户在不注意的情况下发生失误，也能对此进行改正并很容易就能挽回失误，这样的功能和设计是很有必要的。另外，提高使用上的融通性也应该是设计网页界面时多考虑的地方。1.3网页设计的定位任何网页都要根据主题的内容决定其风格与形式，只有形式与内容的完美统一，才能达到理想的传达效果。目前，网页的应用范围日益扩大，几乎包括了所有的行业，但归纳起来大体有几类：商业性、娱乐性、文化性、教育性、综合性、行业性、区域性，各种属性的网站又可细分为不同层次的专题性。根据网站的类型和网站所服务的对象进行设计定位，才能有的放矢，在设计方面尽力做到合理。了解并满足服务对象的视觉兴趣，考虑读者是如何与网站交互的，它可以使设计者与每一个潜在读者进行交流。1.3.1网页设计定位不同的网站对应不同的的浏览群体，特定的浏览群体意味着有特定的主题内容。为此，网页设计定位应着眼于浏览者需求。时刻想着浏览者的需求，并千方百计地满足他们的需求。1．风格定位风格即特点，是指网站的整体内容与形式给浏览者的综合感受。风格是指能让浏览者明确青睐的网站特点。浏览者主要以视觉方式从屏幕上接受网站的文本、颜色和从动画中接收信息。形式与功能在大多数时间里与内容具有互补性。如果网站的形式和内容都显得不一般，浏览的兴趣就会渐渐提升。1．风格定位（1）保证界面一致性，确保网站形成统一整体的界面风格。网页上所有的图像、文字，包括背景颜色、区分线、字体、标题、注脚等网页构成要素要形成统一的整体。这种整体的风格要与其他网站的界面风格相区别，形成自己的特色。（2）确保网页界面的清晰、简洁、美观，易访问。（3）根据视觉流程，合理安排视觉要素，让读者在浏览网页的过程中体验到视觉的秩序感、节奏感、新奇感。2.功能定位功能定位是指为特定读者群的各层次的需求服务，并尽量在简化操作。因此，设计者应该对浏览者与对网页设计技术有同样的理解。在网页上使用最新、最好的技术工具，提高网站形象是一个方法但并不容易，应尽量把新技术在旧