平面构成在网页设计中的应用与嬗变

李翠轻 郭军城 董龄烨

（石家庄铁路职业技术学院1） 河北石家庄 050041 河北交通职业技术学院2） 河北石家庄 050000）

1 网页平面设计的特点

自包豪斯起，平面设计技能训练，多用手绘的方法，在纸张上实行训练。但网页是一种新的视觉平面。如何使其视觉元素组织更趋合理，抓住访问者的注意力，需要充分的利用平面设计的思维和技术。基于网页的平面设计有着显著的独特性，传统平面构成的技术和手法在网页设计中应用时可能遭遇水土不服的情况发生，应该在教学和实践中予以重视。

从载体形态来讲，网页通过各种浏览器软件在各式电子屏幕设备中呈现，其版式布局、色彩呈现具备伸缩性和动态性。根据用户终端、交互动作的不同会发生变化、调整、适应。所以网页设计不同于静态手绘的设计领域，因为创作者是在设计一件活的东西，兼具伸缩性、扩展性、成长性。布局设计时，应该采用流体布局，使其能够在大多数机器显示。适应式网页设计由Ethan Marcotte在2010年5月份提出，其目标是要让设计的网站能够响应用户的行为，根据不同终端设备自动调整尺寸。

从功能要求来讲，网页设计强调以信息传递为主、以交互为主而衍生的功能性。信息通过视觉元素传达。网页中的点线面等设计元素与纸本相比有不同的意义。网页应给用户提供良好的可操作性和用户体验。在网页设计领域，可用性和视觉性的争议一直存在,好似鱼与熊掌的取舍。一方面，为保证用户粘性，统一、简练的风格使网页的用户操作经验得以延续，不至于为更多新鲜的视点干扰；另一方面，为避免审美疲劳，设计师还要兼顾艺术性视觉考量，设计劳动中所迸发的创造力超出任何人的想象与预期，总有不落窠臼的网页作品涌现，让人感到眼前一亮。

从技术手法来讲，网页设计遵循HTML标准规范。其标记式代码构成正是针对网页视觉元素组织编排的描述语言。如规定文字、图片的位置、大小、透明度、色彩等。通过这种标记语言，清楚的表达了设计者的创作意图，使人能够一目了然。这是一种易于借鉴、重用、修订的设计手法。

从观者体验来讲，网页相对与其他媒体更能吸引人的眼球。人们每日频繁打开网站，浏览大量网页，将其作为获取信息的主要渠道。报纸、广播、电视只是单向的提供信息内容给受众，而网络却提供了对信息进行筛选、拓展、深化的手段。网页必将远超报纸、广播、电视在社交媒体中的作用。优秀的网页设计应该能以简洁的布局、明确的导航、统一的风格、便捷的交互带给人们流畅的浏览体验。网页文件大小、分辨率、浏览器等因素都可能影响人们的浏览体验，而传统的平面设计却无需考虑媒介载体问题。

2 平面构成在网页设计中的应用

平面构成用于网页设计应为信息内容的流畅传递服务。“不要把信息随意的摆放在屏幕上。要把信息放在由窗口和面板构成的背景中，窗口、面板和基本的网格应有一致、清晰的联系”。遵循传统平面构成的认知，网页中的信息仍可归结为点线面的视觉元素。诸如重复、对比、渐变等构成形式，是将视觉信息元素有序化、艺术化的必要手段。

2.1 网页设计中的点线面应用

点是网页设计的基本构件，是不可分割的信息元素和视觉元素，即人们浏览网页的着眼点所在。譬如超链接、按钮、logo、表单输入项、标题、列表项。依笔者所见，网页中的点可以是图片，也可以是文字；可以体现内容，也可以提供交互功能。

线是点的移动轨迹，是面的边际，是不同信息内容的板块划分。在网页中，线具有分割、联结、牵引、装饰、组织等作用。在网页设计中，线的作用弱于传统媒介。因为网页处理的多是有规则轮廓的线，有虚实之分。实线如：图片、表格的边框，网页中专门有一个标记

---

用来画出横线，以示区域间隔。虚线如：无边框网页元素的内外间距（magin和 padding），将为信息视觉元素绘制无形的边线，将其与内外层的元素区分开来。

网页并不支持无规则的线独立完整的存在。网页的结构布局本质上是由矩形容器，按从上到下的瀑布式排列、嵌套组合而成。横线、竖线之外的斜线、不规则线条最终都是切割、分解到不同行列的矩形容器中拼接而成的。从浏览器看到的完整效果只是假象。即使通过

面在网页中的表征，即大大小小的矩形容器。和不存在不规则的线条一样，网页结构中也不存在不规则的面。这似乎是一个束缚平面设计师手脚的枷锁。实际上，网页设计并不排斥任何的线面形式呈现。瀑布式排列、嵌套组成网页的虚拟矩形容器，可视为组成报纸、电子屏幕的点阵系统。包括线、面，甚至色彩等视觉元素都可以无碍的呈现在人们面前，只是其实质的结构受到了精密的分解和组织而已。这种组织本身就是平面构成设计最基础的重复构成的应用。对此，火狐浏览器提供了三维视图的查看工具，可以让人更加形象的了解网页中各视觉元素的层次关系。

2.2 网页设计中的平面构成基本形式应用

2.2.1 重复构成

网页中同质内容的视觉表达，一般通过重复构成来实现。如搜索引擎的检索结果、导航、菜单、背景图片、表格内容等。重复是规律性、整齐性、秩序性的体现。重复出现的视觉元素，能够形成一种趋势引导，使得信息点的集合延展成面。不同的面便具备了不同的功能效用。如搜索引擎的检索结果列表，它引导人们的视线从上到下的移动，进而对检索结果的实用价值进行迅速的判断；视线行至底部，分页链接按钮又是从左到右排列，提示人们还有更多的检索结果，也许所寻找的信息内容正在其中。这是绝对重复的应用，且符合视觉流动习惯。而同一个新闻文章列表各个链接，在点击进入后，显示布局排版重复而信息内容迥异的新闻文章页面，又是相对重复的效用。

在网页设计中使用重复，能够减少视觉混乱带来的视觉疲劳，增添网页的宁静感，给人简单整洁、一致有序、愉悦和谐的感觉。越是复杂、庞大的网站越需要用重复的手法来组织其网页内容的排版布局，不让海量的信息内容成为负担。

2.2.2 渐变构成

渐变能够体现基本形的有规律变动，具有韵律感、节奏感。在网页设计中，渐变的应用也很普遍，如很多网站的背景色采用从上到下的渐变过程。渐变不能过快，否则缺少连贯性，也不能过慢，重复累赘，应以能够体现空间透视的韵律感为准。除了背景色，网页中的渐变还可用来表现视觉元素如图片、文字的大小、位置、疏密、方向等。

与静态媒介的渐变不同，网页可以通过编程的方式动态的呈现渐变过程。如在某种情境触发下，使网页视觉元素位置、透明度、色彩、大小、粗细等属性发生变化。此时的网页鲜活生动，运动感十足又兼具灵性的。人们的操作体验也会增分不少。

2.2.3 对比构成

对比作为一种自由的构成方式，利用特定的参照体系，突出显示视觉对象之间或模糊或明确、或简单或复杂的差异性。利用对比，形成层次感和视觉冲击力。通常，网站logo的用色与整体页面的用色产生强烈的对比，才能够使其不至于迷失在网页的具体内容中。又如在网上购物网站中，正在低价热销的产品会突出显示，和普通产品会形成鲜明对比，紧紧抓住顾客的眼球，充分吸引了人们注意力的焦点。以google首页为例，大量的留白使得处于中央区域的检索词输入框和Logo等主要信息异常突出。且搜索按钮是页面中最大的可点击元素，正说明了用户对它的使用率远远超出了其他链接或按钮。

3 结语

网页设计是一种受限的艺术形式，平面构成的知识技能更显重要。对于高职艺术设计类专业教学而言，如何在网页设计中自觉贯彻传统的平面构成，尤其是针对网页平面视觉设计的特点，灵活运用诸如点线面、对比渐变等手法，使学生迅速的在网页上实现自己的创意设想，将美学与科学，艺术与技术进行完美的糅合，最终设计出叫好又叫座的作品，是一个不断深入探讨的课题。

[1]设计之家.25个漂亮的响应式网站设计(Responsive Website).[DB/CD]. [2012-8-5]/[ 2012-9-15]http://www.sj33.cn/digital/wysj /201208/31694.html

[2]Penny Mcintire著,叶永彬译.Web视觉设计[M].北京:机械工业出版社,2008：161

[3]王月.论网络媒体的艺术设计[J].新西部(下旬刊),2011,(5):125,129.

[4]徐希景,陈笋.网页平面构成的创意手法分析[J].福建商业高等专科学校学报,2003,(6):47～50

[5]葛小华.平面设计语言在网页视觉平面的应用[J].大舞台,2011,(2):100～101