进入21世纪，随着国际互联网络的不断普及与发展，网络正在成为信息传播的重要渠道和交流方式，它越来越成为人们日常生活不可缺少的一部分。

网页界面设计作为一门全新的设计领域，既是平面设计在信息时代的延续，又是平面设计新的发展方向[1]。

网页界面作为视觉传达的载体，从产生阶段就继承了传统平面设计的优势，从而为这种全新的大众媒体奠定了坚实的发展基础。

平面视觉元素是二维空间的平面视觉构成元素，它包括文字、字体、图形、图像、色彩、版式等。

网页界面作为人与信息交流的媒介，通过对这些构成元素的设计布局以及自身特有的界面视觉元素和构成方式的运用，来达到信息传达和审美的目的。

1网页界面设计中平面视觉元素的特性随着网络时代的发展，网页的应用已深入到人们生活的各个领域，同时它也通过其时效、精炼、速达的视觉语言达到信息交流和传递的目的。

在网页界面设计中恰当地使用平面视觉元素语言，能收到更好的效果。

作为一门全新设计领域的平面视觉语言它需要满足以下几个特性。

1.1注目性注目性是指页面形象要能引起浏览者视觉的注意。

这种注意同视觉形象的结构、大小、方位、环境、色彩因素有关。

现代社会环境，变化万千，信息流动性强，使浏览者的注意力不易集中，如果没有引起浏览者足够注意的因素，那么信息的传达就很难进行，因此加强注目性和视认度便成了网页界面设计师必须追求和注意的事项，于是在设计时往往采用概括简洁、生动鲜明的视觉语言，通过对图形或色彩的创意变化，将用文字或听觉语言都难以表达清楚的含义展现出来，这种表达方式利于吸引视线和注意力，可以产生事半功倍的效果。

网页界面设计中的平面视觉元素董海斌1，王丽梅2，孙浩章1（1.西安理工大学，西安710054；2.西京大学，西安710123）摘要：分析了网页界面设计中平面视觉元素的6个特性。

结合传统平面构成方式在网页界面设计中的运用情况，阐述了文字与字体、图形图像、色彩、版面等平面视觉元素适应网页界面设计发展的新特点。

针对网页界面设计中的交互元素和动态元素，提出了与平面视觉元素相结合的设计方法。

关键词：网页界面；平面视觉元素；信息中图分类号：J525.9文献标识码：A文章编号：1001-3563（2010）04-0089-03Plane Visual Elements in the Web Interface DesignDONG Hai-bin1，WANG Li-mei2，SUN Hao-zhang1（1.Xi’an University of Technology，Xi’an710054，China；2.Xijing University，Xi’an710123，China）Abstract：Analyze six characteristics of plane visual elements in the web bined with application of traditional plane structure form in the web interface design，the new characteristics of plane visual elements such as character，font，image，color,layout are illustrated.Aiming at interaction and dynamic elements in the web interface design，the design methods combined with plane visual elements are put forward.Key words：web interface；plane visual elements；information收稿日期：2009-09-04作者简介：董海斌（1979-），男，陕西人，硕士，西安理工大学助教，主要从事动画教学和研究。

董海斌等网页界面设计中的平面视觉元素89包装工程PACKAGING ENGINEERING Vol.31No.42010.021.2适应性作为信息社会中的视觉语言，要想达到信息传播的目的，就必须具有适应性特征。

作为界面设计中的视觉语言，要非常重视现代社会的特点以及受传者的文化层次、生理、心理因素，从尊重浏览者的习惯心理和公认原则出发，体现出适应性特征，如果视觉语言运用中没有体现这一特征，就会出现页面形象和色彩设计的随意性，影响到信息浏览。

1.3记忆性记忆性是指形象能长期地记忆于脑中，并能形成一定的条件反射。

它充分利用各种构成因素，通过均衡、调和、动静对比、视觉诱导、结构比例等关系进行设计，使其成为强有力的图形构成。

简洁、概括、通俗的视觉语言给受传者提供正确而印象深刻的视觉信号，并赋予网页界面作品新颖、醒目的艺术魅力，引起公众对视觉形象的注意和长久的记忆。

1.4确定性人的视觉、听觉等感官，都是人们心理活动的触发点。

浏览者随着视觉信息的接受，总会产生一系列的心理活动，完成从兴趣到联想再到行动这一心理活动过程。

视觉元素语言发挥作用也是按照这一心理活动的规律，借助简洁的页面形象和色彩引导浏览者向一定的方向集中注意力从而产生正确的认识。

所以，视觉元素语言立意都应明确、简洁、可靠，注意防止信息误导，图形构成也要力求删繁就简、以少胜多，一切分散浏览者注意的图形、线条，可有可无的装饰都应该被摒弃，使参与构成的诸元素均与传达信息的主要内容有关。

诸造型元素的编排应该简明、清晰，如果页面形象繁杂、构成紊乱，只会导致浏览者放弃对该网页的阅读，从而使信息得不到应有的传达。

1.5选择性网页界面中的信息往往丰富而繁杂，浏览者不一定会对网页中的所有信息都感兴趣，这就涉及到对信息的选择性问题。

由于视觉对点、线等元素的敏感程度较高，因此在安排引导不同信息的标题和图形时可以将之点化或线化，从而形成视觉注意的中心，便于选择性浏览。

1.6连续性视觉系统传播信息的方式是层层累加的传递方式，称之为阶序运作。

人类视觉系统对一定范围内信息的侦测，通常是按点到线，再到面的顺序进行的。

而人的阅读习惯容易对版面中点、直线、环形、轮廓以及边迹产生敏感，因此，在界面设计时应控制视觉信息出现的次序，即常说的视觉流程设计。

视觉流程中最基本的也是最有效的方式就是信息的连续出现。

网页界面中的信息连续而有序地出现，造成认知的累积，从而有效地解读信息的内容，使浏览者自然顺畅地接受并理解。

2网页界面设计中平面视觉元素的运用2.1网页界面设计对传统平面构成方式的运用在暂不考虑网页中互动和多媒体元素的情况下，网页的用户界面展现在浏览者眼前的实际上就是物化界面（纸张和图文信息）的数字化（电脑屏幕显示）表现，用户看到的是和传统物化界面相同的图文信息、版面、色彩等布局，网页界面设计直接运用平面设计的诸多视觉元素，任意元素都可以和其他元素进行合理的组合构成，以符合版面设计的要求。

例如，文字既可以传递文本内容的信息，还可以和字体结合，成为单独的艺术形式，同色彩、图形、图像一起建构版面空间；图像既可以辅助传递文本所包含的图像信息，又可以单独或重复地运用于版面之中，增加版面构成的形式感；色彩可以表达页面的整体风格和情绪氛围，还可以和图形一起分割版面，起到丰富版面的效果。

在坚持形式服务于内容原则的同时，网页界面设计还普遍遵循了平面设计的视觉传达方式，如借鉴报纸版式、书刊封面等传统平面设计样式；遵循传统的形式规律，如对比协调、和谐统一、节奏韵律、均衡对称、比例尺度、虚实、疏密等；对传统的画面构成地运用，营造良好的空间布局和视觉效果，以达到传达信息的准确性和有效性目的。

2.2平面视觉元素适应网页界面设计发展的新特点2.2.1文字与字体文字在平面设计中是一种感性直观的行为，设计者可根据版面需要来设计以表达情感。

在网页界面设计中，文字是最重要的构成元素之一，具有比其他视觉元素更加易于辨识的信息传达的明确性[2]。

因此，在网页界面设计中，字体的设计不仅要考虑到界面的总体设想，更要考虑到浏览者的情况。

文本字体一般使用默认字体，因为浏览器是用本地系统字库显示页面内容的，大多数浏览者的系统里只装有几种常90董海斌等网页界面设计中的平面视觉元素用的字体类型，因此设计的特殊字体在浏览者的系统里并不一定能看到预期设计效果。

这种特点给界面设计带来很大的局限，但默认字体却能保证快速准确的下载网页文本。

2.2.2图形图像图片是文字以外最早引入到网络中的多媒体对象，它传达信息的直观性与寓意性远远超过文字，而且图片的引入也大大美化了网络页面。

传统的平面设计对原图的图像尺寸、分辨率和色彩影调质量都要求很高，尤其是在进行四色印刷时；而网络图片却有新的特点:一个特点是，图片分辨率要求低。

因为网络图片一般只显示于计算机的显示器上，受显示器分辨率的限制，即使图片的精度很高，颜色深度很大，人们的肉眼也通常无法把它和一幅处理过的低精度图片区分开来。

一般来说，分辨率为72dpi是大多数图片的最佳选择；另一个特点是，图片文件要尽量小。

网页图片经过网络传输，受到带宽的限制，其文件尺寸在一定范围内越小越好。

这也是适应信息高速公路的要求。

2.2.3色彩色彩是网页界面设计中不可缺少的视觉元素。

在网页界面设计中，色彩总的应用原则是“总体协调，局部对比”。

将不同的色彩进行组合，可搭配构成美观的页面。

同时网页设计是建立在国际互联网平台之上，色彩的运用必须符合国际色彩的标准，即网页安全色。

按照色彩的记忆性原则，一般认为暖色较冷色的记忆性强。

“颜色的感觉依靠眼的功能，是生理现象，同时通过感觉的冲击对心理起作用。

”每一种颜色都代表不同的含义[3]。

网页设计中色彩同样具有联想与象征的物质，如红色象征热情、太阳;蓝色象征理智、大海、天空等。

恰当的运用色彩可以调动浏览者心理上的感受[4]。

网页的颜色应用没有固定的模式，但不能毫无节制地运用多种颜色，一般情况下，先根据总体风格的要求定出主色调和辅助色。

有CIS（企业形象识别系统）的更应该按照其中的VI进行色彩运用。

2.2.4版面网页版面设计，是在有限的屏幕空间将多媒体元素进行有机组合，将各种构成元素的均衡、调和、律动的视觉导向以及留白等，根据主题的要求予以必要的关系设计，进行各种视觉的关联和合理配置[5]。

由于受到界面信息量或者设计者意图的影响，网页的版面很少像印刷品那样一览无余。

因此有时需要拖动页面滚动条来浏览整个页面的内容。

考虑到浏览者的阅读习惯，在目前通用显示器分辨率下，一般都是运用纵向滚动条。

从内容的易读性出发，网页的版面设计常常进行功能分区并采取分栏布局，从而达到以实用性功能为主，设计时要注意视觉要素的均衡排布，尽量做到简洁、清晰[6]。

特别是综合性的网站，版面栏目设计是否条理清晰将直接影响到用户能否轻松阅读和快速查找到所需信息。