浅析网页视觉设计

吕文静

(郑州铁路职业技术学院，河南 郑州 450052)

在今天，网络已经成为我们生活和工作中不可缺少的组成部分。对于平面视觉设计师来说，新媒介带来的不仅是资讯方式的改变和新职业结构的形成，而更多的是对于新网络媒体视觉设计的认知和探索，使这个具有强大生命力的新媒介成为信息视觉传达的传播利器，也逐步促进了相应辅助设计学科的建设和完善。

1 平面设计与网络媒体的融合

作为设计学科的一个新专业门类的网络媒体设计是依靠其他多个相关领域的支持，在传统的平面设计媒体的审美设计原则的基础上，实现了与传统媒体完全不同的传播个性。突破了传统媒体的信息容纳性、沟通渐进性、互动双向性、成本低廉性和反馈直接性等限制，成为在内容表现形态、技术制作形态和传播高效形态上的优秀信息传播途径。在网络中传播信息的主要形式是基于HTML语言结构的网页页面，网页本身的分类是抽象的，它最重要的特质在于其交互性，所以从其交互性的本质特点上我们把它分为静态网页和动态网页。从其应用类别上又可以分为商务资源类、信息资讯类、社团机构类、休闲娱乐类、艺术文化类和个人风格类。根据网站的功能和结构形式，还可以归类为门户网站、普及型网站、电子商务型网站、媒体信息网站、事务咨询类网站等。网页策划和设计是通过对网站主题和内容体裁进行整理、分析及定位，结合消费心理、广告传播、市场营销和审美表现等相关因素对网页实施的版面、字体、图形及色彩等元素的设计。

网页设计在研究静态版面设计和创意流程方面与平面设计体系基本相符，传统设计体系与网络媒体学科同属的视觉传达学科中并保持着紧密的学术关系。网页设计中除静态版面元素以外，还要考虑动态页面切换和动画效果的应用，互动的观念在网页设计中得到充分展现。平面设计也有互动，是观者被画面唤起的心理共鸣和实践参与，而网页设计的互动表现为浏览者真实点击网页中的链接对象和按钮来完成，互动的传达更加贴切和真实。相对于传统媒体，网络媒体的优势主要表在传播范围广泛，不在受到国家和地域的限制;传播过程经济，技术先进支持的网页的高效率表现;信息更新的动态性;沟通信息的交互性。网页设计所显现的局限性也非常突出，比较传统平面媒体而言，网络语言技术和硬件设备上的限制使网页的表现空间、创意空间和浏览群受到很大的影响，网络传输的数据流量限制也成为设计师不得不考虑的苛刻条件。

网页设计的审美需求是对平面视觉传达设计美学的一种继承和延伸。两者的表现形式和目的都有一定的相似性，网页设计是把传统平面设计中美的形式规律同现代的网页设计的具体问题相结合起来，运用平面设计法则到网页设计中，结合网页设计的媒体特性，寻求其内涵融合而风格不同的设计。所以，网页设计的视觉传达是运用媒体手段在实现平面设计。

2 网站界面的发展

界面是一种由色彩、文字、图像、符号等视觉元素以及多媒体元素构成的，用来传达特定信息，以方便人机交流为目的的中间媒体。相对于计算机网络来说，网站的出现要晚得多。1989年，欧洲粒子物理实验室研究员Tim Berners－Lee发明了一种用于网上交换文本的格式，即基于标记的语言HTML，并创建了网上软件平台World Wide Web(万维网)。HTML最吸引人的地方，在于其超文本链接技术，通过超链接，可以非常方便地跳转到其他任何一个网页上。万维网实现了媒体思想家特德·纳尔逊于1965年提出的超文本设想。万维网的出现，带动了网站的裂变式发展。

1990年11月，第一个Web服务器nxoc01.cern.ch运行，Tim Berners－Lee在自己编写的图形化Web浏览器World Wide Web上，看到了最早的Web页面。虽然世界上第一个网站(当时的网址是http://nxoe01.cern.ch/hypertext/www/theproject.html)早在1992年就关闭了，然而幸运的是这一界面却被保留了下来。只要点击下面这一链接:http://www.w3.org/History/19921103－hypertext/hypertext/theproject.html就能看到历史上最早的网页，尽管用今天的眼光来看，这一网页是再简陋不过了，但正是这一简陋的网页，开启了今天丰富多彩的网络生活。最早的网页界面无一例外都是由字符组成的，而今天在互联网上看到的网页几乎都是五光十色、图文并获、有动画有视频的。

1992年，美国国家超级计算机活动中心(NCSA)的MaM Andressen开发出一种UNIX版的Mosaic浏览器，它可以显示图形，并能在超链接间漫游，所有的操作只需利用鼠标就可以完成。Marc给WWW网的超文本语言(HTML)增加了一些新特点，特别是可以显示图像。Mosaic的设计使用户可十分方便浏览WWW网的内容。有了Mosaic，作为技术支持的Internet受到公众及媒体的广泛瞩目，并由此真正成为一个国际性的大舞台。而网页设计有了图形化的界面，也逐步由以技术设计为主，转而走上了技术设计与艺术设计相组合的道路。［1］

近年来，随着Microsoft公司的FrontPage，Macmmedia公司的 Dreamweaver、Firwork、Flash 等可视化专业网页设计及开发工具的出现，网页界面设计不仅仅是计算机人员才能驾驭的技术了。越来越多的网络爱好者、设计爱好者都步入这个艺术设计的新领域，特别是专业艺术设计人员的介入，使网页设计成为一个新兴的职业。

3 网页视觉形象语言的形成

当我们在浏览器的地址栏输入想要访问的网页地址，服务器会把搜索到网页页面显示在浏览者的显示器屏幕上，每个页面都是由HTML语言格式编写，在HTML格式文档中，文字、图片、声音、动画等页面元素被后台语言描绘并承载。［2］网页是通过视觉元素的引人注目而实现信息内容的传达，为了使网页获得最大的视觉传达功能，使网络真正成为可读强性而且新颖的媒体，网页的设计必须适应人们视觉流向的心理和生理的特点，由此确定各种视觉构成元素之间的关系和秩序。因此，设计时应该研究各种视觉造型元素之间的距离、位置、面积和视觉流程的问题。

网页视觉流程的形成是由人类的视觉特性所决定的。人们在阅读一种信息时，视觉总有一种自然的流动习惯，视觉流程往往会体现出比较明显的方向感，它无形中形成一种脉络，似乎有一条线、一股气贯穿其中，使整个版面的运动趋势有一个主旋律。心理学的研究表明，在一个平面上，上半部让人轻松和自在，下半部则让人稳定和压抑。同样，平面的左半部让人轻松和自在，右半部让人稳定和压抑。所以网页平面的视觉影响力上方强于下方，左侧强于右侧。这样平面的上部和中上部被称为“最佳视域”，也就是最优选的设计表现空间，重要的视觉信息都表现在这一区域，在网页设计中一些突出的信息，如LOGO、条幅、导航设计、主标题、每天更新的内容等通常都放在这些位置。当然视觉流程是一种感觉而非确切的数学公式，只要符合人们认识过程的心理顺序和思维发展的逻辑顺序，就可以更为灵活的运用。在网页设计中，灵活而合理地运用视觉流程和最佳视域，组织好自然流畅的视觉导向，直接影响到传播者传达信息的准确与有效性。所以在网页的编辑设计中，视觉导向是一个要点，网页的设计是一种创造，首先要立足信息的传达，但又要符合人们较为普遍的思维习惯，做到视觉流程自然、合理、畅快。成功的视觉流程安排，能使网页上的各种信息要素在一定空间内合理分布，能使页面上各信息要素的位置、间隙、大小保持一定的节奏感和美感。［3］

在网页的设计活动中，包含着主观和客观两方面的因素，在确立了网页主题之后，首先要明确和熟悉设计的对象和构成的要素。网页设计涉及的具体内容很多，可以概括为视听元素和版式设计两个方面。

(1)视听元素

这里所说的视听元素，主要包括:文本、背景、按钮、图标、图像、表格、颜色、导航工具、背景音乐、动态影像等。无论是文字、图形、动画，还是音频、视频，网页设计者所要考虑的是如何以感人的形式把它们放进页面这个“大画布”里。多媒体技术的运用大大丰富了网页艺术设计的表现力。

以上各视听元素大多数浏览器本身都可以显示或收听，无需任何外部程序或模块支持。比如，大部分浏览器都可以显示GIF、JPEG图形和GIF动画。还有些多媒体文件(如MP3音乐)需要启动相应的外部程序来播放。［4］另外，在浏览器使用插件(Plug－in)可以播放更多格式的多媒体文件。微软推出IE浏览器后，提供了基于OLE的ActiveX技术，用来在网页中播放多媒体，目前Active已经成为热门技术。另一种播放多媒体的技术是JavaApplet。它是用Java语言编写的应用于网页之中的小应用程序，相比于插件和Ative，JavaApplet具有更大的灵活性和良好的跨平台能力，因此具有很好的发展前景。总之，技术的不断发展使多媒体元素在网页艺术设计中的综合运用越来越广泛，使浏览者可以享受到更加完美的视听效果。这些新技术的出现，也对网页的艺术设计提出了更高的要求。

(2)版式设计

网页的版式设计同报刊杂志等平面媒体的版式设计有很多共同之处，它在网页的艺术设计中占据着重要的地位。所谓网页的版式设计，是在有限的屏幕空间上将视听多媒体元素进行有机的排列组合，将理性思维个性化的表现出来，是一种具有个人风格和艺术特色的视听传达方式。它在传达信息的同时，也产生感官上的美感和精神上的享受。

但网页的排版与书籍杂志的排版又有很多差异。印刷品都有固定的规格尺寸，网页则不然，它的尺寸是由读者来控制的。这使网页设计者不能精确控制页面上每个元素的尺寸和位置。而且，网页的组织结构不像印刷品那样为线性组合，这给网页的版式设计带来了一定的难度。

从平面角度考虑，网页版面是视觉设计优秀与否的关键所在，特定的格局模式和实现技术是形成这种视觉语言的基本条件。众多的视觉元素依靠类似版面设计风格的表现技术进行整合排列，既要做到网页结构技术的严谨性又要实现风格灵活多样的视觉效果。这种审美特性与内在技术完美结合的视觉语言形式汇成所有静态与动态的视觉元素生成特有的媒体艺术形式。

4 网页视觉设计的发展现状

人们对美的追求是不断深入的，网页设计同样如此。网页不光是把各种东西放上去，能看就行，还要考虑如何使受众能更好地和更有效率地接收网页上的信息。这就需要从审美方面入手，制作出清晰、整体性好的页面，使人浏览起来心情愉快，接收信息也会更加容易。

网页设计经历从最早的简单以文本和数据等字符组成显示界面的功能第一的审美原则，发展到追求创意和风格表现的现代网页设计目标。网页设计师的风格就是在运用自己所掌握的手段，包括所拥有的审美的素质、应用软件的能力以及感受生活的敏锐的觉察力，来建立起自己独特的设计形式、独特的作风。

在我国，网页设计整体水平的提高，和这个新兴职业的形成有着必然的关系。由专业艺术设计人员转型进入网络领域的视觉设计，提升了网页视觉的创意和精美表现。但网页设计要求设计人员应该具备全面的科学与人文素养，全面系统的专业知识，全新的认知与判断方式，更需要具备设计艺术的创造才能。从现有的大量网站建设和网页设计能看出，我国的网页设计还处于发展提高阶段，与国际专业网页设计的标准仍然存在很大差距。

对于网页设计的方法和理论进行研究探索，总结出一套适合我国特色，继承中华文化和视觉审美标准，并与国际接轨的网页设计学科方法论，不仅对提高网页设计水平，同时对于提高与网络相关的设计产业同样具有相当重要的现实意义。

［1］张新红，吕文静.网页设计与制作［M］.北京:化学工业出版社，2009，(8).

［2］马月.网站界面设计［M］.北京:北京理工大学出版社，2007.

［3］张帆，罗琦，宫晓东.网页界面设计艺术教程［M］.北京:人民邮电出版社，2002.

［4］黎芳.网页设计与配色实例分析［M］.北京:北京希望电子出版社，2006，(6).