网页布局的基本类型

准备工作是网页布局的第一步。网页设计者需要确定4个方面内容，即：确定网站类型、合理规划网站目录、选择网站链接结构、确立网站CI要素。只有明确了以上内容，才能设计出符合网站要求的网页布局结构。

网页布局设计的准备工作中，第一步并不是急匆匆地着手具体的设计工作，而是要了解所要设计网站的类型。一个网站的类型，决定了其受众群的诉求和欣赏品味。要使这个网站的网页布局设计能够得到受众群的认同和信任，就要符合他们的诉求和欣赏品味。如果匆匆进行设计，不考虑以上因素，那么设计出的网页布局不会是受人喜爱的布局，而是失败的布局。

网站的类型按照网站的内容分类，可分为：企业事业单位网站、电子商务网站、娱乐网站、知识库网站、新闻网站、搜索引擎网站、资源下载网站、个人网站等，还有一部分是大型的综合类门户网站。不同类型的网站，其布局设计也是不同的，如图1.1和1.2所示。食品类企业的网站与知识库网站在布局风格上是有区别的。

图1.1某食品网站界面

从上面两种布局可以得出：食品类企业的网站在布局上活泼、生动，摆脱了传统的布局样式、而知识类网站在布局上给人以严谨、可信的感觉，以规矩的块状结构为主。总结一下，那就是内容影响着结构，结构服务于内容，不能抛弃任何一方去想问题。

应当注意的一点是，布局设计虽然是艺术设计的一个分支，但是不要过于强调艺术性，毕竟实用性是布局设计的最终属性。单纯地为艺术而艺术，为设计而设计是一种脱离实际的做法。

在建站之初，会有很多的素材和内容，而这些内容往往是杂乱无章的，这就需要建立一个网站目录，设置专门的栏目，将素材和内容分门别类，并且在各个栏目中按重要性分类，重要的栏目，要置于首页，其他的相对不是很重要的内容则置于二级链接之中。以新华网为例，如图1.3所示。

图1.2 某知识类网站界面

图1.3新华网网站界面

新华网的主栏目设置是：时政专区、地方联播、港澳台地区等栏目。在版块内又列出了相应的二级栏目，使浏览者一目了然。将栏目进行合理的规划，能够使浏览者快速地了解网站的内容结构，快速查阅到所需信息。

网页的布局设计与平面设计很类似，但也有不同之处。网页设计中不但要考虑美观，还要考虑到操作性，毕竟网页设计中很大的一部分内容是实用性。设计出的网页不但赏心悦目，还要操作简便。网站中最基本也是最简单的操作方式是单击链接，所以要实现网页的操作性，就要从链接入手。这就引出了一个非常重要的内容——网站链接结构。网站的链接结构就是该网站的网页与网页之间的链接互动关系。

链接结构的大分类为线性结构和非线性结构。线性结构是最为简单的一种链接结构。使用线性结构的网站，网页与网页间是逐层递进的关系，所有的网页均向一个方向链接。由于这种结构非常简单，所以是个人主页和内容相对较少的小型网站的最爱，如图1.4所示。

图1.4 网页线性结构图

非线性结构还可以分出3种主要的链接结构，分别为树状链接结构、星状链接结构、复合型链接结构。

     树状链接结构：树状链接结构的第一层为首页，由首页分别引出几个二级页面，以此类推，每个页面都会引出更多的页面，页面的数量随之不断增多，这种结构也可以看作是一种金字塔结构，如图1.5所示。

图1.5  网页树状链接结构图

     星状链接结构：星状结构与树状结构的不同之处在于，星状结构不像树状结构那样等级森严。星状结构非常自由，任意一个页面都可以链接到其他页面，如图1.6所示。星状结构是操作最为便捷的一种链接结构。浏览者可以在一个页面中进入到其他任意一个界面中，但是星状结构的缺陷是必须使用大量的页面面积来设置转向其他页面的链接，这样损失了很多有效的浏览面积。另外，太多的链接也会让浏览者眼花缭乱，难以选择。

图1.6  网页星状链接结构图

     复合型链接结构：复合型结构综合了星状结构和树状结构的优势，对其不足进行了互补。复合结构的基本模式是，在首页和第一、二级页面的链接中采用树状结构，在之后的各级页面中采用星状结构，如图1.7所示。

图1.7  网页树状、星状复合型链接结构图

网站是对公众的一个窗口和展示平台。对于网站所有者而言，这种宣传效应比传统媒体要大得多，所以网站的设计也要融入到整个企业或者组织的形象设计中。在上文中，曾经提及过网站的LOGO要服从网站所有者的CIS系统，那么网站的CIS也要与所有者的一致，其中包括：标准色彩、标准字体和广告宣传语、标志性图片等。百事网站集合了企业所有的CI要素，如图1.8所示。

图1.8  百事集团的网站首页

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

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

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

图2.1  左右对称结构布局的网站

图2.2 “同”字型结构布局的网站

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

图2.3“回”字型结构布局的网站

和“回”字型结构一样，“匡”字型结构其实也是“同”字型结构的一种变形，也可以认为是将“回”字型结构的右侧栏目条去掉得出的新结构，这种结构是“同”字型结构和“回”字型结构的一种折中，这种结构承载的信息量与“同”字型相同，而且改善了“回”字型的封闭型结构，如图2.4所示。

以上3种结构是传统意义上的结构布局。自由式结构布局相对而言就没有那么“安分守己”了，这种结构的随意性特别大，颠覆了从前以图文为主的表现形式，将图像、Flash动画或者视频作为主体内容，其他的文字说明及栏目条均被分布到不显眼的位子，起装饰作用，这种结构在时尚类网站中使用的非常多，尤其是在时装、化妆用品的网站中。这种结构富于美感，可以吸引大量的浏览者欣赏，但是却因为文字过少，而难以让浏览者长时间驻足，另外起指引作用的导航条不明显，而不便于操作，如图2.5所示。

图2.4 “匡”字型结构布局的网站

图2.5 自由式结构布局的网站

如果说自由式结构是现代主义的结构布局，那么“另类”结构布局就可以被称为后现代的代表了。在“另类”结构布局中，传统意义上的所有网页元素全部被颠覆，被打散后融入到一个模拟的场景中。在这个场景中，网页元素化身为某一种实物，采用这种结构布局的网站多用于设计类网站，以显示站长的前卫的设计理念，这种结构要求设计者要有非常丰富的想象力和非常强的图像处理技巧，因为这种结构稍有不慎就会因为页面内容太多而拖慢速度，如图2.6所示。

图2.6  “另类”结构布局的网站