2.3 网页版面布局设计

网站中有很多不同的网页，如主页、栏目首页、内容网页等，不同的网页需要不同的版面布局。与报纸、杂志不同的是，网站的所有网页组成的是一个层次型结构，每一层网页里都需要建立访问下一层网页的超链接索引，所以网页所处的层次越高，网页中的内容就越丰富，网页的布局就越复杂。

2.3.1 网页版面布局原则

网页在设计上有许多共同之处，如报纸等，也要遵循一些设计的基本原则。熟悉一些设计原则，再对网页的特殊性作一些考虑，便不难设计出美观大方的页面来。网页页面设计有以下几条基本原则，熟悉这些原则将对页面的设计有所帮助。

1．主次分明，中心突出

在一个页面上，必须考虑视觉的中心，这个中心一般在屏幕的中央，或者在中间偏上的部位。因此，一些重要的文章和图像一般可以安排在这个部位，在视觉中心以外的地方就可以安排那些稍微次要的内容，这样在页面上就突出了重点，做到了主次有别。如图2-13所示网页上的内容主次分明，重点突出了酒店的会议设施、餐饮设施、康体娱乐设施和客房设施的图片。

2．简洁一致性

保持简洁的常用做法是使用醒目的标题，这个标题常常采用图形表示，但图形同样要求简洁。另一种保持简洁的做法是限制所用的字体和颜色的数目。一般每页使用的字体不超过3种，一个页面中使用的颜色少于256种。

要保持一致性，可以从页面的排版下手，各个页面使用相同的页边距，文本、图形之间保持相同的间距。主要图形、标题或符号旁边留下相同的空白。

3．大小搭配，相互呼应

较长的文章或标题，不要编辑在一起，要有一定的距离；同样，较短的文章，也不能编排在一起。对待图像的安排也是这样，要互相错开，使大小图像之间有一定的间隔，这样可以使页面错落有致，避免重心的偏离。如图2-14所示为图文搭配大小呼应的网页示例。

4．图文并茂，相得益彰

文字和图像具有一种相互补充的视觉关系，页面上文字太多，就显得沉闷，缺乏生气。页面上图像太多，缺少文字，必然会减少页面的信息容量。因此，最理想的效果是文字与图像的密切配合，互为衬托，既能活跃页面，又使主页有丰富的内容。

5．网页颜色选用

考虑到大多数人使用256色显示模式，因此一个页面显示的颜色不宜过多，应当控制在256色以内。主题颜色通常只需要2～3种，并采用一种标准色。如图2-15所示为主题颜色采用两种的网页示例。

6．网页布局时的一些元素

网页布局时的一些元素包括格式美观的正文、和谐的色彩搭配、较好的对比度、可读性较强的文字、生动的背景图案、页面元素大小适中、布局匀称、不同元素之间有足够空白、各元素之间保持平衡、文字准确无误、无错别字、无拼写错误。

2.3.2 点、线、面的构成

点、线、面是构成视觉空间的基本元素，是表现视觉形象的基本设计语言。网页设计实际上就是如何经营好三者的关系，因为不管是任何视觉形象或者版式构成，归结到底，都可以归纳为点、线和面。一个按钮、一个文字是一个点。几个按钮或者几个文字的排列形成线。而线的移动或者数行文字或者一块空白可以理解为面。点、线、面相互依存，相互作用；可以组合成各种各样的视觉形象，千变万化的视觉空间。

1．点的视觉构成

在网页中，一个单独而细小的形象可以称之为点。点是相比较而言的，比如一个汉字是由很多笔划组成的，但是在整个页面中，可以称为一个点。点也可以是网页中相对微小单纯的视觉形象，如按钮、LOGO等。如图2-16所示是网页中的按钮组成的点。

需要说明的是，并不是只有圆的才叫点，方形、三角形、自由形都可以作为视觉上的点，点是相对线和面而存在的视觉元素。

点是构成网页的最基本单位，在网页设计中，经常需要我们主观地加些点，如在新闻的标题后加个NEW，在每一小行文字的前面加个方或者圆的点。

点在页面中起到活泼生动的作用，使用得当，甚至可以是画龙点睛的效果。

一个网页往往需要有数量不等、形状各异的点来构成。点的形状、方向、大小、位置、聚集、发散，能够给人带来不同的心理感受。

2．线的视觉构成

点的延伸形成线，线在页面中的作用在于表示方向、位置、长短、宽度、形状、质量和情绪。如图2-17所示为网页中的线条。

线是分割页面的主要元素之一，是决定页面现象的基本要素。

线分为直线和曲线两种，这是线的总体形状。

线的总体形状有垂直、水平、倾斜、几何曲线自由线这几种可能。

线是具有情感的。如水平线给人开阔、安宁、平静的感觉；斜线具有动力、不安、速度和现代意识；垂直线具有庄严、挺拔、力量、向上的感觉；曲线具有柔软流畅的女性特征；自由曲线是最好的情感抒发手段。

将不同的线运用到页面设计中，会获得不同的效果。知道什么时候应该运用什么样的线条，可以充分的表达所要体现的东西。

3．面的视觉构成

面是无数点和线的组合，面具有一定的面积和质量，占据空间的位置更多，因而相比点和线来说，面的视觉冲击力更大更强烈。如图2-18所示为网页中不同背景颜色将页面分成不同的板块。

只有合理的安排好面的关系，才能设计出充满美感，艺术加实用的网页作品。在网页的视觉构成中，点、线、面既是最基本的造型元素，又是最重要的表现手段。在确定网页主体形象的位置、动态时，点、线、面将是需要最先考虑的因素。只有合理的安排好点、线、面的互相关系，才能设计出具有最佳视觉效果的页面。