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

课外学习：网页版式构成的类型与导航结构 6．关键知识点六：网页版式构成的类型 根据视觉流程的类型及网页版式，总结出以下版式构成的类型：水平分割、垂直分割、水平-垂直交叉分割等。其中，水平分割、垂直分割、水平-垂直交叉分割常用到水平线、垂直线、矩形等，这些形式在网页制作时容易实现，且页面能容纳较多的信息含量，因而是网页界面中使用相当广泛的构成类型下面简单介绍一下这几种分割形势。 1）水平分割 页面中的水平分割与排列，强调了水平线的作用，使页面具有安定、平静的感觉，观众的视线在左右移动中捕捉视觉信息，符合人们的视觉习惯。 （1）水平均匀分割 将页面分割成上下相等的两部分。图4-11，图4-12，上半部用作视觉表现，引发情感，下半部用来解释说明，上半部多为主体形象。 图 4-11 水平均匀分割（一） 图 4-12 水平均匀分割（二） （2）水平不均匀分割 将页面分割成上下不相等的两部分。一般地说，如果在上半部安置标题或导航，则面积较小（图4-13），如果在上半部安置图片或主体形象，则面积适当加大（图4-14）。 图 4-13 水平不均匀分割（一） 图4-14 水平不均匀分割（二） （3）水平多次分割 页面沿水平分割成大小不等的几个部分。图4-15，多层分割有助于不同信息的归类。 （4）水平变化分割 在水平分割的基础上进行变化。如图4-16，水平分割与斜线、弧线相结合，打破了页面的安定，产生运动和速度感。 图 4-15 水平多次分割1 图4-16 水平变化分割2 2）垂直分割 页面中的垂直分割与排列，则强调垂直线的作用，具有坚硬、理智、冷静和秩序的感觉。 （1）垂直均匀分割 把页面分割为左右相等的两部分，在视觉习惯上，当左右两部分形成强弱对比时，会造成视觉心理的不平衡。这时，可将分割线作部分或全部的弱化处理，或在分割处加入其它元素，使左右部分的过渡自然而和谐。如图4-17所示，左右两部分在色彩上的对比由于视觉中心的图文而减弱，左上角的标志减轻左半部的重量感，使页面更为融合。 （2）垂直不均匀分割 把页面分割为左右不相等的两部分。左边的视觉注意度较高，因而放置标志、导航信息、主体形象等，如图4-18所示。 图4-17 垂直均匀分割 图4-18 垂直不均匀分割 （3）垂直多次分割 页面沿垂直方向分割成大小不等的几部分。图4-19所示，页面具有很强的层次性，左边为主栏目导航，右边为次级栏目导航，中间为相应的内容，中间和右边由色彩来统一，而左边用形态的渗入来加强它与中间部分的衔接。 （4）垂直变化分割 将垂直分割进行特异性处理，容易取得耳目一新的效果。如图4-20所示，将垂直分割应用于音乐网站的设计，分割手法灵活多变，营造出音乐的律动感。 图 4-19 垂直多次分割 图4-20 垂直变化分割 3）水平----垂直分割 将水平与垂直分割交叉使用，它们之间容易形成对比关系，较之单向分割更为丰富、实用而灵活多变。下面举例说明： 如图4-21所示，采用典型的“”型构图，艳丽的嫩绿色和略带变化的分割方式，打破了构成方式的呆板，使页面更具个性化和青春气息。 如图4-22所示，采用“”型构图，顶部为主栏目导航，左侧为次级栏目导航。 图4-21 水平----垂直分割 图 4-22 水平----垂直分割 至于其它几种版式构成的类型，与前面介绍的视觉流程类型几乎完全相同，这里不再重复。网页界面的版式设计实际上没有固定的格式可循，以上列举的版式类型是对现有版式的人为归纳和总结，并不是设计的“模式”。在实际的设计中，大家应根据网页界面的具体内容和要求，勇于突破传统和形式框架的束缚，创新贵在突破。 7．关键知识点七：网页布局的内容结构与导航结构 网页布局的结构标准是信息架构，信息架构的基本目的是更加简便地、快捷地向使用者传递信息。信息架构是依然最常见、最普遍的标准对内容进行分类整理，确立标记体系和导航系统，实现网站内容结构化，以便使用者十分容易地查询到想要得信息。网页布局结构就是通过这种信息信息架构在使用者容易理解的用户界面对所有内容进行视觉化处理。因此信息架构就是确立网页布局结构是最重要的参照标准。 信息架构好比是水果店里的水果摆放方式，可以按照不同品种、价格摆放，也就是说先按照苹果、橘子、西瓜、荔枝等摆放，然后按照水果的大小、品种、质量为基准，依照价格对水果进行分类。这种常见的水果摆放方式便于顾客快捷地分辩水果的质量和价格，有助于顾客的选购。另外，通过这种摆放方式还可以给顾客带来强烈的购物欲，摆放