谈谈网页艺术设计中的版式设计

[摘要]网页艺术设计已越来越引起网站创编人员的重视。从网页艺术设计的概念入手分析网页艺术设计的特殊性，重点说明网页艺术设计中的版式设计。列出几种常见的版式布局，比较了它们的优缺点并提出应用建议。

[关键词]网页艺术设计 版式设计 平面设计

中图分类号：TP3文献标识码：A文章编号：1671－7597（2009）0310121－01

网页设计是一门新兴的技术，是介于平面设计、编程技术两者之间的“边缘学科”，不仅涉及到HTML、JAVASCRIPT、CSS、ASP、JSP等编语言技术方面的知识，还涉及到美学、版式构成、色彩搭配等平面设计方面的知识。

由此我们可把网页设计分为：网页技术设计和网页艺术设计。只有将两种设计综合运用，才能设计出视听特效、动静结合、人机交互的WEB页面，才能全面展现万维网这一新型媒体的独特魅力和多维空间的超强功能。

一、网页艺术设计与网页版式设计的概念

网页艺术设计是以美学为基础的，以网页技术设计作为技术参考的网页版式设计和网页视听元素设计，是艺术与技术的高度统一。也就是说网页艺术设计包括两大部分，即网页版式设计和网页视听元素设计。这里我们主要讨论网页版式设计。

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

二、网页的版式设计与网页空间尺寸的关系

网页的版式设计与平面媒体的版式设计又有很多差异。平面媒体的版式设计都有固定的规格尺寸，网页则不然，它的尺寸是相对的。不同的网页浏览者使用的设备与习惯不同，这使网页设计者不能精确控制页面上每个元素的尺寸和位置。而且，网页的组织结构不像报纸、杂志那样为线性组合，这给网页的版式设计带来了一定的难度。因此，在网页的版式设计之前应先了解网页空间与页面尺寸。

在浏览网页时，人们所能直接看到的页面只是15英寸或17英寸显示器屏幕的一部分。因浏览器的工具条要占部分屏幕空间，所以所显示的网页屏幕尺寸也不相同。目前，大多数人的显示器分辨率设置为800×600或1024×768。其它分辨率设置（如640×480、1280×768）只是少数。所以我们在进行网页设计时，多数以分辨率800×600为标准。为了让访问者舒适地浏览页面，可在页面的页眉或页脚处标注“建议分辨率为800×600”字样。

（一）页面的安全宽度

当显示器分辨率设置为800×600时，即浏览器的屏幕最宽度为800像素，因垂直方向的滚动条占去20像素，所以网页的安全宽度应为780像素。所以，页面设计宽度只有限制在780像素以内，在用分辨率的显示器浏览时，水平方向才能够全部在视屏范围内。页面宽度超过780像素，则就会产生水平方向的滚动条。如果需要访问者拖动水平滚动条才能浏览到网页的全部内容，那么这张网页就不能算是很成功。

（二）页面的最佳长度

当我们对页面的宽度作了限制后，页面长度的定义相对宽松多了，它可以是1-3屏不等。但是考虑到整个网页的下载速度，访问者的浏览的方便以及信息含量、网站的类型等因素，页面的长度也不相同。一般说，中小型网站的主页面的最佳长度应在1-2屏之间。大型网站为了在主页面内增加信息量，使内容更能直观地面对访问者，可把主页页的尺寸设置为3屏幕左右或更长。

三、网页中常见的几种版式设计

网页版式设计和平面版式设计有着很大相似之处。但因技术设计的限制，网页版式设计远不如平面版式设计那样自由。我们这里把常见的版式设计分为以下几种：左右结构版式，“同”字型结构版式、“回”字型结构版式、“匡”字型结构版式、自由式结构版式等。

（一）左右结构版式

这种版式将主页分成左右两部分，可以是左小右大，也可以左右相等。左半部分设置为栏目导航，右半部分列出多篇重要内容的概要或一整篇头条详细内容。这种版式有利于访问者直接浏览网页内容。还可以采用动态链接技术或文字层交替显示技术。点击左边的链接标题，右边则即时显示相关内容。这类版式灵活、简洁，内容明了。但页面的信息含量低，适合小型网站的版式设计。

（二）“同”字型结构版式

这种版式一般以顶部为主导菜单，页面的左右两侧分别列出二级栏目或综合性热区（如广告条、搜索引擎、友情链接、登录面板、注册按钮等）。这种版式是网上常用的版式，其优点是直观、均衡，富有条理。但这种版式有时也过于呆板、过于程式化。采用这种版式时要注意色彩的和谐搭配，可以通过色彩的处理调节页面的整体韵律。

（三）“回”字型结构版式

这种版式以“同”字型结构版式为基础，又在页面底部增加了一条横向菜单（本站点的一个超链接区或广告条等）。这样可以充分利用有限的页面空间，增大主页面的信息含量，缩短了和正文链接路径。使访问者直观、快捷地浏览所需要信息。缺点是页面由于封闭，因而较拥挤。

（四）“匡”字型结构版式

“匡”字型结构版式其实是“同”字型结构版式的变形，将“同”字型结构版式逆时针旋转90度，就是这种版式。或者认为是“回”字型结构版式的页面上的右边的栏目条删除后所得到的一种版式。这种版式克服了“回”字型结构版式过于封闭的缺陷。

（五）自由个性结构版式

这种版式打破了“同”字型、“回”字型、“匡”字型版的菜单框架模式，大胆地发挥空间想象，把页面设计成一张极具创意的作品。自由个性版式通常用精美图片、网站标识性图案（Logo）或变形的艺术化文字作为设计中心进行主体构图。菜单栏目条则当作次要元素处理，自由地安排在页面上，起到点缀、修饰、均衡页面的效果。这类版式一般用在时尚类站点上，如时装、化妆品等以崇尚现代、美感为主题的站点。这种版式的优点是靓丽、现代、轻松、节奏明快，很容易让浏览者驻足欣赏。缺点是下载速度较慢，文字信息量少，浏览者不能直奔主题，需要费些周折才能找到所需要的信息。因此专业性的商务站点不宜采用此版式。

参考文献：

[1]张晓清，网页构图与设计，人民邮电出版，2001年4月.

[2]孙振业，网页设计与制作，高等教育出版社，2007年5月.

作者简介：

李英俊，男，辽宁建筑职业技术学院，副教授。