网站界面的版式设计与美化

第11卷 第3期漳州职业技术学院学报Vol.11 No.3 2009年7月Journal of Zhangzhou Technical Institute July 2009

网站界面的版式设计与美化

李 艳

（漳州财贸学校，福建漳州 363000）

摘要：网站是信息内容的存储空间模式，网页设计得好坏直接关系到一个网站的成败，它的版式设计和色彩表现更是视觉传达的重要因素。所以，设计师多使用一些网站设计的美化方法和技巧是十分重要的。

关键词：网站界面，版式设计，色彩搭配，风格

中图分类号：TP399 文献标识码：B 文章编号：1673-1417（2009）03-0009-03

许多人认为网站设计的“好”或“坏”都是通过两个标准来衡量:一个是严格的可用性标准，指功能性，传递信息的效率。还有一个就是纯粹的美学标准，生动的形象、吸引人的图形，合适的色彩等等。一些设计者被美学和图像所吸引而忽略了用户，而一些设计者只强调可用性而忽略了视觉的吸引。为了更好地满足用户，留住他们的兴趣，需要将这二者更好的结合起来。设计是一种交流，这一点必须要牢牢记在脑子里。如果创建了一个信息流畅的网络，但是看起来却十分丑陋，完全不符合用户的形象和气质，那么是没有人会用它的。同样，如果你的网络非常漂亮，但是用起来却十分困难，人们可能也不会用它。网站是信息内容的存储空间模式，网页设计得好坏直接关系到一个网站的成败，它的版式设计和色彩表现更是视觉传达的重要因素。所以，设计师应了解一些网站设计的美化方法和技巧是十分重要的。事实上，美学和功能在一个网站设计中必须结合成浑然一体，笔者现就网站界面的板式设计和美化提出以下几点建议。

一、网页的板式设计方面

1、注意黄金比的搭配

古希腊哲学家毕达哥拉斯认为宇宙中充满了数的依存关系，宇宙的变化、人类的思想与艺术美法则，都是数的秩序与和谐。毕达哥拉斯及其门人发现，最美的比例是黄金比（黄金分割）－1：0.618。黄金律并不是只和长短比例有关，它具有普遍的的价值。事实上，各种形式要素和谐与对比的美感均与适度比例有着内在的联系，如黑白的深

收稿日期：2009－05－20

作者简介：李艳（1975－），女，重庆市人，讲师. 浅比例、色相的冷暖比例、纯度的纯浊比例，还有形状曲直、角度大小、虚实程度、质感等，听觉艺术的音的高低、长短、轻重、和声等……所以从理论的角度来讲，可以说黄金律体现了艺术形式的对立统一规律，体现了和谐与变化之美。虽然黄金律不能概括各种美的全部形态，却是最具有“代表性的美”的法则，并且广为大众所接受和认可，非常适合于在商业艺术中应用。这是做为一名网页设计师最基本的设计法则。

2、网页的分栏

网页的分栏在网站设计中是最直观的部分，网站的版面变化主要通过“栏”的变化来体现。受计算机显示屏和网站浏览习惯的影响，网站的宽度相对固定，但高度是不定的，因此网站“栏”的设计主要集合在竖栏的区分和版式设计上。栏的变化有两种，一种是横栏打通，一种是竖栏打通。如果是网站的重要内容，可以跨越好几个栏。在网站的版面中左上方是最受注目的地方，其次是右上方。再其次是右下与左上。重要的栏目标题尽量放在首屏。由于计算机显示屏的不一致，栏宽有定宽和随着显示屏大小相应调节两种方式。网站的版面设计要注意整体的形式美感。文章的安排要做到：主次、大小、长短、横竖的搭配，在一个版面中，或以大块文章为主，配以少量小块文章，过以小块文章为主，配以少量大一点面积的文章，如各占二分之一，也会“花”。在处理大块文章是，应注意在统一中求变化，避免版面单调。在处理小面积文章与图版时，应避免版面零乱，可用画线、分组等方法使版面在变化中求统一，井然有序。

一栏板式是指网站纵向只有一个竖栏的版面结构。这种版式最简单，用户视觉流程就是从上到下，但如果页面首

屏要同时传达两项以上内容，这种版式就很难实现了。因此，单栏版式较多使用在目的较单一的最终页面中。

二栏的板式是指网站纵向有两个竖栏的版面结构，由于其结构简单清晰，又能够决定内容并置的问题，受到许多网站的欢迎。

三栏的版式是指网站纵向有三个竖栏的版面结构，其结构相对复杂一些，但由于能够同时呈现较多的内容，因此是最常用的版式结构。

在版面中文字的面积与版面总面积之比，称为版面率，版面率主要受文字、图片和留白之间关系的影响。版面率低的给人高雅感，版面率高的新闻性、通俗性强。网络有这样两点特征：首先上网是付费的，其次网页每屏的显示范围受浏览器的限制，如果版面率较低的话，页面会拉得很长，看一点内容得换好几屏，而每屏的内容又很少，不方便使用；但是版面率过高又会使得页面杂乱拥挤，既不好看，也不好用。所以，要根据网页的功能、内容和性质确定适当的版面率。有时版面中实形的分量很满，以至于无法感受到线形存在的时候，却仍能感受到一种空气的流动，他们时而舒婉流畅，时而欢快雀跃，或汇拢成静静的一片，或分散成涓涓细流从字里行间穿行而过，这就是版面中的空白。版面中的空白与建筑中的虚空间相似，在一个版面中，不能只看到图形文字，而不注重空白；就好像不能只看到字体的笔画，而忽略笔画之间的空当。正是由于空白的衬托才使视觉得以集中，从而提高了图文的价值。

二、网页的美化方面

1、图片的使用技巧

在网站上，反复使用一张图片是不会增加下载速度的，所以可以利用这一点，用尽量少的图片达到更好的效果。可以在不同页面上反复调用一张图片，比如标志，也可以在一个页面的不同栏目上反复应用一种共同的细节处理方法，或在不同页面上呼应使用，增强页面的精致感和统一性。这样做一来可以减少文件大小，二来可以增强设计的统一感，只是要处理得当，不要太重复。对于反复使用的图片，可以设计得更精美些，成为设计的点睛之笔，多占些字节也值得。为了给页面增加氛围或装饰，可以给整体页面加入背景。这时的背景图案和背景色一样，一定要考虑能够衬托其他图片和文字，以及在大面积使用时不宜产生视觉疲劳，所以色彩不宜过多过艳。

在图片处理上常用的有四种方式，第一种是给页面增加某种肌理，这时可以尽量将背景元素的面积缩小以减少字节，同时要注意图案相接时边界的自然过渡；第二种是增加某种明确的底纹图案，比如公司的标志或其他表达页面特点的图形等，这时要注意适宜的排列密度和方式，不要太拘板；第三种是实现区分版面的色块或线，这时要注意以最大显示分辨率的宽度来制作背景元素，反则有可能会出现不想要的重复。同在整体页面中使用背景一样，也可以在整个表格、表格中的一行或一个单元中使用背景，除了可以在上面放置文字或其他图片这个优点以外，如果图案的重复性较强，用背景可能会比用图片还要节省字节。

2、色彩的搭配和技巧

在网页设计过程中，最难处理的问题就是色彩搭配。如果进行色彩搭配，如何运用最简单的色彩来表达、体现网站形象和风格是网页设计人员在设计中不断学习、探索和解决的一个课题。

在设计网页时采用彩色还是非彩色好呢？根据专业的研究机构研究表明，彩色的记忆效果是黑白的3.5倍。一般情况下，彩色页面要比完全黑白页面更加吸引人，因此在设计网页时通常的做法是：页面中的主要文字内容采用非彩色（白底黑字），而其他元素则使用彩色。例如：图片、线条、动画都使用彩色，这样能够让页面从整体上不会显得单调乏味，访问者在阅读文本信息时也不会感到吃力，设计者在网页色彩搭配中应加强以下几点：

（1）色彩的鲜明性

网页的色彩要鲜艳醒目，这样更容易引起访问者的注意。例如：红色的背景，黄颜色的文字或图案，会让传达的信息更加醒目。

（2）色彩的独特性

在网页中使用与众不同的色彩，会给访问者留下深刻的印象。例如：不同的信息栏使用不同的主色彩。

（3）色彩的适合性

在网页中，色彩的选择和使用要与所表达的信息、气氛和风格相适合。例如：粉色可以体现出女性站点的柔媚；蓝色可以给人以冷静、理智的印象，因此多用于IT行业的网站。

（4）色彩的联想性

因为不同的色彩会让人产生不同的联想，例如：蓝色让人联想到天空，黑色让人联想到黑夜，红色让人联想到喜庆等。在网页设计时选择色彩要与网站的定位和网站的风格紧密联系，使设计出的网页与色彩上保持风格的统一。

（5）选用一种主色彩

10