有关网页的布局设计的讲解

有关网页的布局设计的讲解

网页的布局设计，就是指网页中图像和文字之间的位置关系，简单来说也可以称之为网页排版。网页布局设计最重要的目的就是传达信息。一个并不能阅读的网页只能变成一个无用的链接。分割、组织和传达信息并且使网页易于阅读、界面具有亲和力和可用性是网页设计师应有的职责，只有这样，浏览者才有更好的机会找出吸引他的东西。

简单来说，可以把网页中的内容看成是一个一个的“矩形块”，把多个“矩形块”按照行和列的方式组织起来，就构成了一个网页。下面举例来进行说，如图1-11所示，为某俱乐部官方网页效果图。

001.JPG (86 KB)

2008-1-5 02:49

图1-11 网页效果图

当把网页效果图中的各个内容区域看成为一个个的“矩形块”后，按照从上到下，从左到右的顺序对网页的布局结构进行分析，最终得到的效果如图1-12所示。

image004.jpg (3.78 KB)

2008-1-5 02:49

图1-12 网页的布局结构

从上图中可以看出，网页的整体布局结构划分为四行（从上到下），第一行来制作Logo，第二行制作导航，第三行制作内容，第四行制作版权信息。然后在第三行又拆分为两列（从左到右），分别在左右两列中制作不同的内容。

在这个基础上，可以对网页布局进行更细致的拆分，如果说前面的拆分是用来制作网页的大框架，那么接下来拆分的就是内容区域了，这里分析的方法和前面是完全一样的，拆分后的效果如图1-13所示，其中的文本表示在当前“矩形块”中放置的内容。

image006.jpg (13.12 KB)

2008-1-5 02:49

图1-13 进行更加细致的拆分

这样，一个网页的布局就初步形成了，至于把什么内容放置到什么位置，这个可以按照网页内容的重要程度，结合人的视觉流程来确定。因为中国人在阅读的时候总是按照从上到下，从左到右的顺序，所以对于网页而言最重要的位置应当是网页的左上角，这也就是为什么所有网页的左上角都是标志的原因。而最次要的位置应当的网页的右下角，所以在网页的最下方一般都是版权信息。把最重要的信息放置在网页左上的位置，而相对次要的信息则可以放置到网页右下的位置。

最后，所有的网页布局都可以在如图1-14所示的布局原型上变形而来，读者可以多找一些现成的网页效果图，按照这里所介绍的方法进行分析对照，从而掌握网页布局的方法。

image008.jpg (8.18 KB)

2008-1-5 02:49

1-14 网页布局的基础原型

网页布局设计在整个网页设计的流程中都会发挥其重要的作用，网页效果图设计、网页效果图切片、网页布局都会按照最先的布局设计来实现。相关的具体内容，将在后面的章节进行详细的介绍。