[网页设计] 网页版面设计

一、　网页版面设计的含义
  
网页的版面设计同报纸杂志等平面媒体的版面设计有很多相通之处。所谓网页的版面设计，是在有限的屏幕空间上将多媒体元素进行有机组合，将传达内容所必要的各种构成要素的均衡、调和、律动的视觉导向以及空白等，根据主题的要求予以必要的关系设计，进行一种视觉的关联和合理配置。                                                                                   一个成功的网页版面设计不仅能提高版面的注意价值，而且有利于该网页主题的信息传达并加强对浏览者的视觉留存。

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

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

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

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

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

   一般的印刷品都有固定的规格尺寸，而网页的尺寸则是由浏览者来控制的。网页版面指的是在浏览器上看到的完整的一个页面（可以包含框架和层）。网页页面会根据当前浏览窗口的大小自动格式化输出；不同种类、版本的浏览器观察同一个网页页面时，其效果会有所不同；而且用户浏览器的工作环境不同，显示效果也不一样。这就使网页设计者不能精确控制页面的每个元素的尺寸和位置，一般折中为６００×８００像素。网页的构成要素主要有：网络标志、色彩、字体、图片、宣传标语、导航条等。１．　网络的标志应是该网络的特色和内涵的集中体现。２．网络页面的色彩包括网站的标准色彩、文字链接的色彩、图片的主色彩、页面的背景色和边框色彩等。色彩的适当选用能体现网站的外观形象，延伸网站的内涵形象。但是网站色彩的设计，种类不能过多、纯度也不宜过高，以避免引起浏览者的视觉疲劳。同时也要巧妙运用其他色彩作为点缀，使画面活跃又不喧宾夺主。３．网络页面的字体主要包括网站的标志、标题、及主菜单的主要字体以及字体的可阅读*，如字体的粗细、颜色等。在此基础上发挥字体的图形性、装饰功能，对字体的自身趣味适当表现，以提高浏览者的阅读兴趣。４．网络页面中图片的运用可以增加页面内容的形象*，更直观地表现或渲染主题，因此它在页面元素的编排中也是一个重要部分。大面积的图版易表现感性诉求，有朝气和真实感；小面积的图版给人精致的感觉，使人视线集中；大小图片的搭配使用，可以产生视觉上的节奏变化和画面空间的变化。图片少则页面显得平稳，图片多则页面显得活泼。５．　网络页面的宣传标语往往体现一个网站的特色、精神和目标。清晰直白地表明该网站的形象，增加页面与页面之间的统一感，从而加深浏览者的印象。６．　网络页面的导航条是浏览者在一个网站的多个内容之间，即页面与页面之间跳转连接的枢纽，它外观形态的醒目和链接的条理性设计将直接影响网站的浏览率。

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

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

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

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

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

五、网页版面的空间设计

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

  网络上的三维空间是一个假想空间，它是由无数个具体的二维平面空间组成的虚拟世界。这些二维的平面空间就是网页。二维平面的空间是借助各个构成元素的比例关系、位置关系以及动静变化等空间因素表现出来的。各个元素的形象的弯曲变化、大小变化、色彩变化、位置的前后叠压、纹理的渐变、元素之间清晰与模糊的对照以及**法的应用、疏密的变化、矛盾空间等所产生的视觉效果都不相同，都能丰富平面的视觉深度，使之产生富有弹性层次的空间效果。空间设计在作用于浏览者的视觉感受的同时，也产生不同的心理感受，增加画面的注目率。一般ZF类和商业类的网站的空间安排往往注重条理化，分层分级的简洁明快；媒体类以及个人类网站则追求时尚的或出人意料的、或神秘的、或非常态的个性化空间效果。

六、网页版面的动感设计

  从网页版面单个页面的动感表现来说，和传统报刊等的动感表现方法是一致的。画面的动静效果是相对的，是相互依存的，无动就无静。“动”在画面上表现为构成元素轮廓的不规则、张扬，或是构成元素有动态动势，或是画面色彩的鲜明跳跃；“静”则是构成元素的形体轮廓的规则、平稳以及色彩的单纯简洁。

而从网页版面整体的动感效果来说则是有网页自身的独特性。


１．从单个页面谈多媒体功能的利用


  网络资源的优势之一就是多媒体功能。用三维动画、ＦＬＡＳＨ、动画ＧＩＦ、滚动字幕、背景音乐、特殊音效等多媒体手段来表现一些页面内容。意境优美的或是风趣幽默的多种动画、符号、音乐片段的搭配使页面显得活泼、有生气，无疑对提高页面注目率大有好处。但是对这些元素的运用也要紧扣主题的需要，协调整个版面的色彩气氛、视觉流程，把“动”的元素和其他“静”的元素融为一体，使二者相得益彰，而不能无节制地滥用各种动态效果，使人眼花缭乱。



２．从页面与页面之间的关系谈超链接的跳跃动感

网页的超链接，打破了以前人们接受信息的线性方式，形成网页的多屏、多页、嵌套的特征，浏览者可以在各种主题之间**跳转。这时，设计者必须考虑建立快捷而完善的导航系统，从而使主题思想更加有条理地呈现出来。网站的服务对象是人，那么用户体验就是导航设计的核心。导航设计的目的是如何组构所有你期望传达的信息以便浏览者可以最准确地获取这些信息，使浏览者在阅读中感觉一切都非常流畅——简单、清晰、快捷。在满足了导航条功能性的基础上，我们也要考虑导航条的装饰*，诸如它的形态、色彩、位置、大小等和页面其他元素的协调，以丰富整个网页的效果。


３．从网页的长期效应谈交互性和持续性的动感

网页不同于传统媒体之处在于它的信息更新和交互的及时*，它可以使受众随时登陆并长期关注。因此，设计者的工作不是一次作品发表后就结束的，必须根据网站各个阶段的运作目标配合网站不同时期的经营策略和用户的反馈信息，经常对网页进行调整和修改。这样，从设计者而言网页版面的设计是一个动态持续过程，而用户的体验自然也随之不断变化。

七、结束语

在网页的版面编排中，视觉流程和空间分割是支撑网页平面视觉元素组构的骨架，是互为一体的，视觉流程即是一种空间运动。再加上网页的存在方式的特殊性——动感*，构成了网页编排的三大要素，把握三者的关系无疑是网页版面编排的关键。