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

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


图1-11 网页效果图

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


图1-12 网页的布局结构

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

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


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

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

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


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

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

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。