网页布局基础：探索可视化设计中的页面构成要素

可视化设计中页面布局涉及哪些核心要素

1. 整体构型

何谓构型，构型即塑造出的物体形象。在此指的是页面的整体形象，这种形象应是一个整体，图形与文本的融合应层次分明。尽管，显示器和浏览器均为矩形，但在页面构型上，你可以充分运用自然界中的其他形状及其组合：矩形、圆形、三角形、菱形等。

针对不同的形状，它们所蕴含的寓意各异。例如，矩形代表着正式、规范，你注意到众多ICP和政府网站均以矩形为整体构型；圆形代表着柔和、团结、温暖、安全等，许多时尚网站偏爱以圆形为页面整体构型；三角形代表着力量、权威、坚固、侵略等，众多大型商业网站为彰显其权威性常以三角形为页面整体构型；菱形代表着平衡、协调、公平，一些交友网站常运用菱形作为页面整体构型。尽管不同形状蕴含的寓意不同，但目前的网页制作多采用多个图形结合设计，其中某种图形的构图比例可能较大。

2. 页面尺寸

由于页面尺寸与显示器大小及分辨率相关，网页的局限性在于无法突破显示器的范围，而且浏览器也将占据不少空间，留给页面的范围越来越小。一般分辨率在800x600的情况下，页面的显示尺寸为：780x428个像素；分辨率在640x480的情况下，页面的显示尺寸为：620X311个像素；分辨率在1024X768的情况下，页面的显示尺寸为：1007x600。从以上数据可以看出，分辨率越高，页面尺寸越大。

浏览器的工具栏也是影响页面尺寸的因素。一般目前的浏览器工具栏均可取消或增加，因此当你显示全部工具栏时，与关闭全部工具栏时，页面尺寸不同。

在网页设计过程中，向下拖动页面是唯一增加网页内容（尺寸）的方法。但我想提醒大家，除非你能确定网站的内容能吸引大家拖动，否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容，那么你最好能在上面做上页面内部链接，方便访问者浏览。

3. 页眉

页眉又称页头，页眉的作用是定义页面的主题。例如，一个站点的名字多数都显示在页眉里。这样，访问者能迅速了解这个网站的内容。页眉是整个页面设计的关键，它将影响到下面的更多设计和整个页面的协调性。页眉常放置站点名字的图片和公司标志以及旗帜广告。

4. 文本

文本在页面中多以行或块（段落）的形式出现，它们的摆放位置决定了整个页面布局的可视性。在过去，由于页面制作技术的限制，文本放置的位置灵活性较小，而随着DHTML的兴起，文本已经可以按照自己的要求放置到页面的任何位置。

5. 多媒体

除了文本和图片，还有声音、动画、视频等其它媒体。虽然它们并非经常被利用，但随着动态网页的兴起，它们在网页布局上的重要性也将逐渐提升。

6. 页尾

页尾与页眉相呼应。页眉是放置站点主题的地方，而页尾是放置制作者或公司信息的地方。你能看到，许多制作信息都是放置在页尾的。

7. 图片

图片和文本是网页的两大构成元素，缺一不可。如何处理好图片和文本的位置成为了整个页面布局的关键。而你的布局思维也将体现在这里。

最初，网页呈现在你面前的时，它就像一张白纸，需要你尽情挥洒你的设计灵感。在开始时，你需要明白，虽然你能控制一切你能控制的东西，但如果你知道什么是一种约定俗成的标准或者说大多数访问者的浏览习惯，那么你可以在此基础上加入自己的东西。你当然也可以创造出自己的设计方案，但如果你是初学者，那么最好了解网页布局的基本概念。

网页布局的基本类型

10.3网页布局的基本类型

网页的布局不可能像平面设计那么简单，除了上文提到过的可操作性外，技术问题也是制约网页布局的一个重要因素。虽然网页制作已经摆脱了HTML时代，但是还没有完全做到随心所欲，这就决定了网页的布局有一定的规则，这种规则使得网页布局只能在左右对称结构布局、“同”字型结构布局、“回”字型结构布局、“匡”字型结构布局、“厂”字型结构布局、自由式结构布局、“另类”结构布局等几种布局的基本结构中选择。

10.3.1左右对称结构布局

左右对称结构是网页布局中最简单的一种。“左右对称”所指的只是在视觉上的相对对称，而非几何意义上的对称，这种结构将网页分割为左右两部分。一般使用这种结构的网站均把导航区设置在左半部，而右半部用作主体内容的区域。左右对称性结构便于浏览者直观地读取主体内容，但是却不利于发布大量的信息，所以这种结构对于内容较多的大型网站来说并不合适。

10.3.2“同”字型结构布局

“同”字结构名副其实，采用这种结构的网页，往往将导航区置于页面顶端，一些如广告条、友情链接、搜索引擎、注册按钮、登录面板、栏目条等内容置于页面两侧，中间为主体内容，这种结构比左右对称结构要复杂一点，不但有条理，而且直观，有视觉上的平衡感，但是这种结构也比较僵化。在使用这种结构时，高超的用色技巧会规避“同”字结构的缺陷。

10.3.3“回”字型结构布局

“回”字型结构实际上是对“同”字型结构的一种变形，即在“同”字型结构的下面增加了一个横向通栏，这种变形将“同”字型结构不是很重视的页脚利用起来，这样增大了主体内容，合理地使用了页面有限的面积，但是这样往往使页面充斥着各种内容，拥挤不堪。

“回”字型结构实际上是对“同”字型结构的一种变体，即在“同”字型结构的底部增加了一条横向的横幅，这种变体将原本不被重视的页脚加以利用，从而扩大了主体内容，有效地运用了页面有限的面积，然而这样常常导致页面内容繁杂，显得拥挤不堪。

10.3.4“匡”字型结构布局

与“回”字型结构相似，“匡”字型结构实际上也是“同”字型结构的一种变体，也可以说是从“回”字型结构的右侧栏目条中提炼出来的一种新结构。这种结构是“同”字型结构和“回”字型结构的一种折中，这种结构所承载的信息量与“同”字型相同，并且改善了“回”字型的封闭型结构。

10.3.5自由式结构布局

上述三种结构是传统意义上的布局方式。相对而言，自由式结构布局则显得更为“不拘一格”，这种结构的随意性非常大，打破了以往以图文为主的表现形式，将图像、Flash动画或视频作为主要内容，而将其他文字说明及栏目条分散到不显眼的位置，起到装饰作用。这种结构在时尚类网站中运用得尤为广泛，特别是在时装、化妆品类的网站中。这种结构富有美感，能够吸引众多浏览者欣赏，但因其文字较少，难以让浏览者长时间停留，此外，起引导作用的导航条不够明显，使用起来不够方便。

10.3.6“另类”结构布局

如果说自由式结构是现代主义布局的典型代表，那么“另类”结构布局就可以称之为后现代主义的代表。在“另类”结构布局中，传统意义上的所有网页元素都被打破，打散后融入到一个模拟的场景中。在这个场景中，网页元素化身为某种实物，采用这种结构布局的网站多用于设计类网站，以展示站长的前卫设计理念。这种结构要求设计者具备丰富的想象力和高超的图像处理技巧，因为这种结构稍有不慎就会因为页面内容过多而降低速度。