论网页的版式设计

论网页的版式设计

吴娇娇／彭纲

我们都知道，浏览者进行网页浏览时的时间顺序通常是：由版式——艺术性，至导航——技术性，至网页内容——信息性或有用性，直至浏览过程的结束，产生评价结果。可以看出，网页设计的三个关键就是：版面设计、导航设计、网页内容。

版面的设计至关重要。在互联网上大量的产品和服务网页中，怎样才能使自己的网页从其他同类产品或服务中脱颖而出，成为浏览者的首选呢？仅仅有好的内容是远远不够的，网站的外观同样重要。内容再好，没有一个赏心悦目并具一定视觉冲击力的外观，必定会影响浏览者的阅读兴趣。人们称互联网经济为注意力经济，如何吸引大众的注意力、增强画面的视觉效果则成为设计的首要工作。

一、网页版面设计的含义

网页的版面设计同报纸杂志等平面媒体的版面设计有很多相通之处。所谓网页的版面设计，是在有限的屏幕空间上将多媒体元素进行有机组合，将传达内容所必要的各种构成要素的均衡、调和、律动的视觉导向以及空白等，根据主题的要求予以必要的关系设计，进行一种视觉的关联和合理配置。

一个成功的网页版面设计不仅能提高版面的注意价值，而且有利于该网页主题的信息传达并加强对浏览者的视觉留存。

二、网页版面的形式与内容的统一

网页的版式和传统印刷品的版式编排一样多种多样。

采用哪种版式并不是设计者的想当然，不同的网站主题（个人宣传、产品销售、提供服务等）对网页构成元素编排方式的要求是不同的，要依据受众的需求、市场的状况、版主的自身情况进行综合分析，还要明确建立该网站的目的、为谁提供产品或服务、能提供什么样的产品或服务、该网站的目标受众以及受众的特点等一系列定位之后才能决定的。如商务类版式的平易近人、娱乐类版式的生动活泼、科技类版式的严谨周密都是根据网站的个性特点来确定的。那些只讲花哨的表现形式或者过于强调独特的设计形式而脱离内容，只重视网页形式上的美感而淡化了主题思想的逻辑，将削弱网页主题的诉求效果，是不足取的。版式始终应为内容服务，设计者只有深入领会主题内容的精神，再融汇自己的思想，找到一个较完美的表现方式，才能真正体现出网站独具的分量和特有价值。

从视觉符号方面来看，视觉符号是相对于语言符号的点、线、面、色彩等视觉性记号。形式法则和构成规律是视觉语言的语法和句法，要将丰富的意义和多样的形式组织成统一的页面结构，形式语言必须符合页面的内容，体现内容的丰富含义。可以运用对比与调和、对称与平衡、节奏以及留白等手段，通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感以及新鲜的个性。

三、网页版面的尺寸和构成要素

一般的印刷品都有固定的规格尺寸，而网页的尺寸则是由浏览者来控制的。网页版面指的是在浏览器上看到的完整的一个页面（可以包含框架和层）。网页页面会根据当前浏览窗口的大小自动格式化输出；不同种类、版本的浏览器观察同一个网页页面时，其效果会有所不同；而且用户浏览器的工作环境不同，显示效果也不一样。这就使网页设计者不能精确控制页面的每个元素的尺寸和位置，一般折中为６００×８００像素。网页的构成要素主要有：

网络标志、色彩、字体、图片、宣传标语、导航条等。１．网络的标志应是该网络的特色和内涵的集中体现。２．网络页面的色彩包括网站的标准色彩、文字链接的色彩、图片的主色彩、页面的背景色和边框色彩等。色彩的适当选用能体现网站的外观形象，延伸网站的内涵形象。但是网站色彩的设计，种类不能过多、纯度也不宜过高，以避免引起浏览者的视觉疲劳。同时也要巧妙运用其他色彩作为点缀，使画面活跃又不喧宾夺主。３．网络页面的字体主要包括网站的标志、标题、及主菜单的主要字体以及字体的可阅读性，如字体的粗细、颜色等。在此基础上发挥字体的图形性、装饰功能，对字体的自身趣味适当表现，以提高浏览者的阅读兴趣。４．网络页面中图片的运用可以增加页面内容的形象性，更直观地表现或渲染主题，因此它在页面元素的编排中也是一个重要部分。大面积的图版易表现感性诉求，有朝气和真实感；小面积的图版给人精致的感觉，使人视线集中；大小图片的搭配使用，可以产生视觉上的节奏变化和画面空间的变化。图片少则页面显得平稳，图片多则页面显得活泼。５．网络页面的宣传标语往往体现一个网站的特色、精神和目标。清晰直白地表明该网站的形象，增加页面与页面之间的统一感，从而加深浏览者的印象。６．网络页面的导航条是浏览者在一个网站的多个内容之间，即页面与页面之间跳转连接的枢纽，它外观形态的醒目和链接的条理性设计将直接影响网站的浏览率。

四、网站版面的视觉流程设计

所谓的视觉流程，是页面内容的一种视觉传达过程，是以人的生理和心理习惯的认知模式来进行的，是将各种构成要素在视觉运动的规定下进行空间定位，即从注意力的捕捉起，通过视觉流向的诱导，直至最后的印象留存，体现出这一程序的规划和诱导性。合理的视觉流程应在与人们的认识过程的心理顺序和思维发展的逻辑一致的基础上，根据信息的主次（即传达重点）来确定各元素的顺序，并通过精心安排从而影响、引导浏览者的视线移动。

１．常见的几种视觉流程形式。我们知道，画面中任何视觉形象都有其力动性和诱导性。垂直线引导人的视线作上下移动；水平线引导人的视线作左右移动；斜线更有张力，使视线斜方向移动；折线和正方形使视线作四个方向的辐射；圆形则是一种均衡的辐射状的扩散；三角形使视线沿三个方向运动。此外，构成元素的位置、走向也会影响页面力的方向，构成元素的自身的方向、色彩的深浅则影响到力的强弱。

２．考虑页面上的每个元素所产生的力并结合主题内容的主次，来安排各个元素的位置。人们在阅读时视线通常是：从左到右，从上到下，从左上到右下。因此在构图中，一般注意力最大的位置依次是版面的上部、左部、中上，它们即是画面的最佳视域。主题不同，则各个构成元素的重要性也不同，把它们放在不同的视觉领域，则会产生不同的注意力价值。

３．此外，网页版面的视觉流程设计因网页的多维性和超链接性、视觉在空间上无限延展的连贯性而同样很重要。网站内容一次性全部呈现，浏览者的阅读顺序也不是单线性的。很多层次中隐藏的信息会被不同的浏览者发现或忽略，导致同一网站对不同的浏览者会有不同的呈现面貌。浏览者的阅读自由性，对设计者而言则是不确定性。因此，除了要考虑单个页面的视觉流程外，更要注意各种可能发生链接的页面与页面之间视觉流程的巧妙安排和诱导。

五、网页版面的空间设计

网页往往包含的信息量很大，但由于网页的超链接特征，使它的空间可以无限扩展。设计者通常把产品或服务的不同卖点分别集中在不同的路径之中，在细化的分页中可以根据次主题的不同，对各个构成元素的空间进行多样化安排。

网络上的三维空间是一个假想空间，它是由无数个具体的二维平面空间组成的虚拟世界。这些二维的平面空间就是网页。二维平面的空间是借助各个构成元素的比例关系、位置关系以及动静变化等空间因素表现出来的。各个元素的形象的弯曲变化、大小变化、色彩变化、