课外补充资料：网页版式构成的类型与导航结构

1、课外学习：网页版式构成的类型与导航结构6关键知识点六：网页版式构成的类型根据视觉流程的类型及网页版式，总结出以下版式构成的类型：水平分割、垂直分割、水平-垂直交叉分割等。其中，水平分割、垂直分割、水平-垂直交叉分割常用到水平线、垂直线、矩形等，这些形式在网页制作时容易实现，且页面能容纳较多的信息含量，因而是网页界面中使用相当广泛的构成类型下面简单介绍一下这几种分割形势。1）水平分割页面中的水平分割与排列，强调了水平线的作用，使页面具有安定、平静的感觉，观众的视线在左右移动中捕捉视觉信息，符合人们的视觉习惯。（1）水平均匀分割将页面分割成上下相等的两部分。图4-11，图4-12，上半部用作视觉表

2、现，引发情感，下半部用来解释说明，上半部多为主体形象。 图 4-11 水平均匀分割（一） 图 4-12 水平均匀分割（二）（2）水平不均匀分割将页面分割成上下不相等的两部分。一般地说，如果在上半部安置标题或导航，则面积较小（图4-13），如果在上半部安置图片或主体形象，则面积适当加大（图4-14）。 图 4-13 水平不均匀分割（一） 图4-14 水平不均匀分割（二）（3）水平多次分割页面沿水平分割成大小不等的几个部分。图4-15，多层分割有助于不同信息的归类。（4）水平变化分割在水平分割的基础上进行变化。如图4-16，水平分割与斜线、弧线相结合，打破了页面的安定，产生运动和速度感。 图 4-

3、15 水平多次分割1 图4-16 水平变化分割22）垂直分割页面中的垂直分割与排列，则强调垂直线的作用，具有坚硬、理智、冷静和秩序的感觉。（1）垂直均匀分割把页面分割为左右相等的两部分，在视觉习惯上，当左右两部分形成强弱对比时，会造成视觉心理的不平衡。这时，可将分割线作部分或全部的弱化处理，或在分割处加入其它元素，使左右部分的过渡自然而和谐。如图4-17所示，左右两部分在色彩上的对比由于视觉中心的图文而减弱，左上角的标志减轻左半部的重量感，使页面更为融合。（2）垂直不均匀分割把页面分割为左右不相等的两部分。左边的视觉注意度较高，因而放置标志、导航信息、主体形象等，如图4-18所示。 图4-17

4、 垂直均匀分割 图4-18 垂直不均匀分割（3）垂直多次分割页面沿垂直方向分割成大小不等的几部分。图4-19所示，页面具有很强的层次性，左边为主栏目导航，右边为次级栏目导航，中间为相应的内容，中间和右边由色彩来统一，而左边用形态的渗入来加强它与中间部分的衔接。（4）垂直变化分割将垂直分割进行特异性处理，容易取得耳目一新的效果。如图4-20所示，将垂直分割应用于音乐网站的设计，分割手法灵活多变，营造出音乐的律动感。 图 4-19 垂直多次分割 图4-20 垂直变化分割3）水平-垂直分割将水平与垂直分割交叉使用，它们之间容易形成对比关系，较之单向分割更为丰富、实用而灵活多变。下面举例说明：如图4-

5、21所示，采用典型的“”型构图，艳丽的嫩绿色和略带变化的分割方式，打破了构成方式的呆板，使页面更具个性化和青春气息。如图4-22所示，采用“”型构图，顶部为主栏目导航，左侧为次级栏目导航。 图4-21 水平-垂直分割 图 4-22 水平-垂直分割至于其它几种版式构成的类型，与前面介绍的视觉流程类型几乎完全相同，这里不再重复。网页界面的版式设计实际上没有固定的格式可循，以上列举的版式类型是对现有版式的人为归纳和总结，并不是设计的“模式”。在实际的设计中，大家应根据网页界面的具体内容和要求，勇于突破传统和形式框架的束缚，创新贵在突破。7关键知识点七：网页布局的内容结构与导航结构网页布局的结构标准是

6、信息架构，信息架构的基本目的是更加简便地、快捷地向使用者传递信息。信息架构是依然最常见、最普遍的标准对内容进行分类整理，确立标记体系和导航系统，实现网站内容结构化，以便使用者十分容易地查询到想要得信息。网页布局结构就是通过这种信息信息架构在使用者容易理解的用户界面对所有内容进行视觉化处理。因此信息架构就是确立网页布局结构是最重要的参照标准。信息架构好比是水果店里的水果摆放方式，可以按照不同品种、价格摆放，也就是说先按照苹果、橘子、西瓜、荔枝等摆放，然后按照水果的大小、品种、质量为基准，依照价格对水果进行分类。这种常见的水果摆放方式便于顾客快捷地分辩水果的质量和价格，有助于顾客的选购。另外，通过

7、这种摆放方式还可以给顾客带来强烈的购物欲，摆放整齐、色彩鲜艳、散发着浓浓香气的新鲜水果，绝对给顾客带来强烈的视觉、味觉冲击，激发顾客的购买欲。在不同的季节里，商家还把最多的当季水果摆放在显眼的地方，这也是考虑到人们在不同季节有着不同的喜好而实行的销售策略。同样道理，信息架构的重要原则和目的大致可以定义为两类：一类是信息进行分类，使其结构化、体系化，便于使用者简单快捷地理解各种信息，这就如何按照品种和质量区分水果一样；另一类是优先提供最重要的信息，提供不同时期可以吸引使用者注意的信息，引起网站使用者的关注，这就如同把最讨人喜欢的水果、当季的新鲜水果摆放在显眼的地方一样。这种原则和目的非常重要，其

8、原因就在于这样做可以保证因特网使用者在瞬间判断出网站的内容并进行快捷的选择，不必因为难以理解网站内容而苦恼。因此，必须要系统地传达内容，还要依照重要的顺序向使用者优先提供最有效的信息。信息架构的具体操作顺序内容可以分为以下几个方面：检验使用者的观点，整理要求；分析使用者的特点，划分使用者阶层（确定目标使用者）；明确网站构建的目的、策略及方向；规划网站内容并使其体系化，定义内容结构；搜集内容并进行分类、整理，确立网页之间的连接性；确定和内容类型的有效标记体系；不同的页面确定不同的要素，构建不同的内容。依据内容结构和导航结构的复杂程度，可以将网页结构分为单一结构和符合结构两类：依据导航的排列顺序可

9、以将导航结构分为居中、顶部、左侧、右侧、底部5类。1）居中居中的网页布局是指主页上的图像画面、导航要素、文本信息等页面组成元素为Web浏览器为中心进行排列的网页布局构成方法。结构简洁的居中排列方式往往给人一种单一的印象，但是通过视觉效果上的设计创意，也不会使人感到单一，反而能产生页面的充实的效果，如图4-23所示。2）顶部导航顶部导航是指网站导航位于顶部的网页结构。在注重速度的初创阶段，Web浏览器的属性一般都是从页面上部开始下载网页信息的，因此常常把重要的信息置于顶部区域。现在，尽管速度已经不再是敏感因素，但是顶部导航结构在使用性上还是有很多优点，因此网站导航位于顶部的网页布局也是最常用的。

10、其中最有代表性的优点就是醒目的效果，而且顶部导航栏占用的区域非常少，留给内容更多、更自由的表现区域。对于内容丰富的网站，顶部导航是非常有用的；相反，对于内容贫乏的网站而言，如果运用顶部导航的话，可能会给人一种单调、冷清的感觉。因此顶部导航最好不要用于内容较少的单一结构网站，可以用于内容丰富，信息庞大的复合机构网站，如图4-24所示。3）左侧导航左侧导航是指网站导航位于页面左侧的网页布局结构，也是因特网发展初期使用起来最熟练、最方便的网页布局结构。 图 4-23 网页居中布局 图 4-24 网页顶部导航布局页面网站导航的形态及色彩的强弱不同，右侧内容区域的网页布局形态也大不相同；网站导航的形态和

11、色彩较强的话，即使不能相对地突出右侧内容区域也没有关系。此阿用这种结构可以说，左侧导航结构能够有效地弥补内容较少的网站的空洞感，如图4-25所示。4）右侧导航右侧导航是指网站导航位于页面右侧的网页布局结构，它是使用频繁率最低的结构。这种结构的缺点是：人们阅读习惯上是从左侧或者顶部开始的，采用这种右侧导航结构，蕴含网站性质和信息的网站导航不易引起使用者注意。相比其他结构而言，使用者容易感到别扭和不方便。但是采用右侧导航结构能让使用者有效地关注左侧内容区域信息。另外，在Web浏览器中能够显示整个页面的情况下，右侧的网站导航将页面划分成不同的区域，使网页布局看起来更加合理，如图4-26所示。 图 4-25 网页左侧导航布局页面 图 4-26 网页右侧导航布局页面5）底部导航底部导航是指网站导航位于页面底部的网页布局结构，在适合标准显示器分辩率、无法调整网页布局上下宽的情况下，必须使用框架结构，这是因为想要随时向使用者展现网站导航的话，就必须考虑到使用者在不使用滚动条的情况下也能利用网站导航。不过，即使使用框架，还存在一些必