第 2 章 网页布局类型的确定方法

本章重点

2.1 网页布局类型的确定方法

2.2 网页布局的连贯性和多样性

2.3 网页布局结构

2.4 网页布局

在确定网页布局类型的时候，最重要的注意事项是网站的类容结构和性质。 通过网页要表达的内容确定信息类型及层次结构将直接影响网页布局和导航结构，这也是在确定网页布局类型时必须要考虑的事项。网页布局必须通过设计向使用者提供便利的使用环境和很强的实用性。 内容性质是考虑有效地表现策略和方法时要注意的事项。内容性质不会对网页布局结构和形态带来直接的影响；不过，在确立设计理念的过程中，内容性质是可以检验并判断普通、独特、实验等网页布局形态的设计是否合适网页外观风格的标准。

第 2 章 网页布局类型的确定方法

首先要检验合适内容层次而非网页布局形态的网页布局结构，构思时必须考虑适合网页布局结构的网页布局形态设计。但是，许多网页设计师并没有考虑并检验网页布局形态，而是按照网页布局结构很自然地确定网页布局形态。因此，以网页布局形态为标准，分析网站及网页的设计案例，可以扩展网页布局形态的设计思路。

• 确定网页布局类型的方法有很多种，下面介绍其中的两种方法：

• 1 ：手机自己喜欢的网站页面，把它的内容改为自己所要的内容

• 2 ：按照不同的网页布局类型，草绘出不同的模板。

2.1.1把内容放入自己喜欢的网页类型中

• 我们可以把 WebMD 网站里德内容修改成自己所需要的内容，同时观察网页的变化，参照下面的几条标准，确认是否能够修改网页内容或存在不合理的网页构成元素，检验 WebMD网站的网页布局类型是否符合目标的要求：

1 ：类似于 WebMD 网站的网页构成，导航结构是否合适？ 2 ：能否实现类似于 WebMD 网站的信息架构及多样的

内容？ 3 ：能否具有合适类似于 WebMD 网站主页的网页内容

（导航栏、广告、 新闻、热点专题、其他信息等）？

可以看出，选择网页布局类型时最重要的依据就是内容及信息构架。

也就是说，仅仅以漂亮、好看为标准是无法确定网页布局类型的。如前所述，呵呵死内容的筹备、信息构架的规划及在次基础上网页布局结构的确定，才是确定网页布局类型的重要指标。因此，把内容放入自己喜好的网站中，这是能够评测网页设计师构思的网页布局类型是否合适内容结构及数量的有效方法。

2.1.2草绘出两三个不同网页类型的模板

• 网页布局结构不同，网页内容给人的视觉效果也存在很大差别，可能让人觉得充实，也可能让人觉得空洞。因此，最好草绘出两三个不同类型的模板，然后根据不同类型网页布局的特点及视觉效果差异，检查网页内容及设计要素的表现方法是否合适，确定所需的内容和形态，最后选择最合适的网页布局类型。

2.2网页布局的连贯性和多样性

• 网上冲浪就如同在到处是方向标志的未知世界里漫游一样，用户可以选择的道路和内容是无穷无尽的，为了让用户搞清楚自己停留的地方是哪里、位置在哪里，网站的整体性就显得非常重要。

• 这种整体性的通过网页布局和视觉效果体现出来的。网页布局的连贯性要能提供网站的体验形象，也就是让使用者能够通过所有网页都适用的网站导航、公司标志、标题、子菜单、内容的排列及位置的连贯性等来进行网上冲浪；这种体验形象的提供，便于使用者浏览网站。视觉效果的连贯性是指通过造型要素的统一表现技巧构建网站的代表性图像，提供网站的视觉形象；系统的视觉形象连贯性，可以在视觉上更加清楚地传递网站的整体性，保证细分设计作业的连贯性。

2.2网页布局的连贯性和多样性

• 设计的连贯性对于对于构建网站形象非常有效，但是过分地保持连贯性可能会使得网站显得一成不变、单调乏味。因此，必须根据网站的性质适当地调整网页布局的来连贯性和多样性。

• 当然通过网页布局反映并表现多样性是比较困难的，考虑到保持的固有因素（如公司标志、网站导航）、菜单标题、子菜单、内容信息构成，以及保持网页布局的连贯性设计出的网页布局肯定非常相似，这也是网页设计师表现网页布局多样性的制约因素。因此，网页设计师在反映网页布局多样性的时候，要考虑到如何使上述制约因素的限制最小化并能够同时反映出连贯性和多样性；这也是要求网页设计师针对网页布局多样性的表现方法和效果制定出有效的计划。

2.2网页布局的连贯性和多样性• 视觉效果的多样性是建立在决定网站外观风格的造型要

素的基础上的，想要调整视觉效果的多样性比较困难，这是因为视觉效果的多样性要留给使用者一种融合了不同风格网页的印象，或者摆脱网页风格呆板的痕迹。

• MTV.com 网站是融连贯性和多样性为一体的典型案例，网站所有的顶部都有 MTV.com 标志和网站导航，但是又有效地表现出了多样性，每个栏目的“MTV”Logo都根据相应网页做出了不同的变化。不同服务的主画面是统一的，趣味十足的形象内容画面极具视觉冲击力，有效地激发了使用者的兴趣。也就是说，每个网页都具有多样化的网页布局和视觉效果，体现了华丽的外观风格，激发课使用者网站冲浪的兴趣。

• 顶部的固有要素区域是浓灰色彩，不会对下方内容区域的实际带来影响。可以说 MTV.com 的多样化设计技巧充分利用了网页设计师的力量和构思，很好地实现了网页的布局。

2.3网页布局结构

• 网页布局的结构标准是信息架构，信息架构的基本目的是更加简便的、快捷地想使用者传递信息。信息架构是依照最常见、最普遍的标准对内容进行分类整理，确立标记体系和导航系统、实现网站内容结构化，以便使用者十分容易地查询到想要的信息。网页布局结构就是通过这种信息构架在使用者用以理解的用户界面里对所有内容进行视觉化处理。因此信息构架就是确立网页布局构架时最重要的参照标准。

2.3.1网页布局的标准——信息架构• 信息架构好比是水果店里的水果摆放方式。水果店按照不

同品种和价格摆放水果，也就是说，摆放水果的时候，首先按照种类将水果分为橘子、苹果、李子、西瓜等。然后以水果的大小、品种、质量为基准，依照价格对水果进行分类。这种最常见的水果摆放方式有助于顾客挑选想要的水果顾客进入水果店后，水果的品种一目了然；如果水果混杂在一起的话，顾客就要花费很多时间辨别水果的品种和质量，也不容易确认不同大小或质量的水果价格的差别。因此，常见的水果摆放方式便于顾客快捷地辨别水果的质量和价格，有助于顾客选购水果。另外，通过这种摆放方式还可以给顾客带来强烈的视觉、味觉冲击，激发顾客的购买欲。在不同的季节里，商家还把更多的当季节水果摆放在显眼的地方，这也是考虑到人们在不同的季节里有着不同的喜好而实行的销售策略。

2.3.1网页布局的标准——信息架构• 同样的道理，信息构架的重要原则和目的大致可以定义为

两类：一类是对信息进行分类，使其结构化、体系化，便于使用者简便快捷地理解各种信息，这就如同按照品种和质量区分水果一样；另一类是优先提供最重要的信息，提供不同时期可以吸引使用者注意的信息，引起网站使用者的注意，这就如同把最讨人喜欢的水果、当季节的新鲜水果摆放在显眼的地方一样。这种原则和目的非常重要，其原因就在于这样做可以保持因特网使用者在瞬间判断出网站的内容并进行快捷地选择，不必因为难以理解网站内容而苦恼。

2.3.1网页布局的标准——信息架构• 因此，必须要系统地传达内容，还要依照重要的顺序向使用者优先提供最有效的信息。信息构架的具体操作顺序和内容可以分为以下 7 点。

• 1 检验使用者的观点，整理要求。• 2 分析使用者的特点，划分使用者阶层（确定目标使用者）• 3 明确网站构建目的、策略方案及方向。• 4 规划网站内容并使其体系化，定义内容结构（层次结构、超链接结构）。

• 5 搜集内容并进行分类、整理，确立网页之间的连接性（导航系统）。

• 6 确定适合内容类型的有效标记体系。• 7 不同的网页确定不同的要素，构建的内容。• 依据内容结构和导航结构的复杂程度，可以将网页布局结构分

为单一结构和复合结构两类；依据导航排列顺序可以导航结构分为居中、顶部、左侧、右侧、底部 5 类。

2.3.2单一结构

• 单一结构的信息构架单一的网站的网页布局结构。它是出于初创阶段、内容信息较少的网站常见的网页布局结构，也是比较简单、比较容易构思的网页布局结构。依据网站主页的图形图像和导航的构成和导航的构成方法，可以将单一结构细分为 5 类：居中、顶部导航、左侧导航、右侧导航和底部导航。

• 单一结构最大特点在于主页和子页面的网页布局结构几乎完全相同、使用者熟悉了主页的导航方式之后，能够很容易地使用其他页面。不过，主页为居中方式的网站往往会在与子页面改变位置

1.居中

• 居中的网页布局是指主页上的图像画面、导航要素、文本信息等页面组成元素以 web浏览器为中心进行排列的网页布局构成方法。

• 准确的说，居中排列方式不能成为网页布局结构，它是一种单一的构成方法，是一种单一结构的类型。

• 一般而言，主页的居中排列方式在传递内容上有一定的局限性，因此，子页面往往采用单一结构中其他 4 种包含导航的网页布局结构类型。

• 结构简洁的居中排列方式往往给人一种单一的印象，但是通过在视觉效果上的设计创意，也不会使人感到单一，反而能产生页面充实的效果。

2.顶部导航

• 顶部导航是指网站导航位于顶部的网页布局结构。在注意速度的初创阶段， web浏览器的属性一般都是从网页上部开始下载网页信息的，因此常常把重要的信息至于顶部区域。

• 现在，尽管速度已经不再是敏感因素，但是顶部导航结构在使用性商还有很多优点，因此网站地导航位于顶部的网页布局是最常用的。其中，最有代表性的优点就是醒目的效果，而且顶部导航栏占用的区域非常少，留给内容更多、更自由的表现区域。

• 对于内容丰富的网站，顶部导航是非常有用的；相反，对于内容贫乏的网站而言，如果运用顶部导航的话，可能会给人一种单调、冷清的感觉。

• 因此，顶部导航结构最好不要用于内容较少的单一结构网站，可以用于内容丰富，信息庞大的复合结构网站。

3.左侧导航

• 左侧导航是指网站导航位于页面左侧的网页布局结构，也是因特网发挥在那出气使用起来最熟练、最方便的网页布局结构。

• 网站导航的形态及色彩的强弱不同，右侧内容区域的网页布局形态也大不相同；网站导航的形态和色彩较强的话，即使不能相对地突出右侧内容也没关系。采用这种结构，就无需过多地考虑如何修饰内容或者构思新颖创意。

• 可以说，左侧导航就够能够有效地弥补内容较少网站的空洞感。

4.右侧导航

• 右侧导航是指网站导航位于网页右侧的网页布局结构，它是使用频率较低的结构。这种结构的缺点在于：人们阅读信息习惯上是从左侧或顶部开始的，采用这种右侧导航结构，蕴涵网站性质和信息的网站导航不易引起使用者注意。相比其他结构而言，使用者容易感到别扭和不方便。

• 但是采用右侧导航结构能让使用者有效地关注左侧内容区域信息。另外，在 web浏览器能够显示整个网页的情况下，右侧的网站导航将页面划分成不同的区域，使网页布局看起来更加合理。

5.底部导航

• 底部导航是指网站导航位于页面底部的网页布局结构，在合适标准显示器分辨率、无法调整网页布局上下宽度的情况下，必须使用框架结构，这是因为想要随时向使用者展现网站导航的话，就必须考虑到使用者在不使用滚动条的情况下也能利用网站导航。

• 不过，即使使用了框架，还存在一些必须解决的问题（比如，打开速度，更新无法记忆当前页面信息仍需返回上层目录），还有很多人比较忌讳使用框架，因此旨在提供信息类型的网站几乎都不采用底部导航结构。

• 但是，底部导航结构对上面区域的限制阴虚比其他网页布局都要少，网页设计师可以按照自己的意图自由发挥，设计出多样化、有创意的网页。因此，底部导航结构主要用于要求网页设计师进行感性设计的网站。

2.3.3复合结构

• 在网络发展初期，网站一般只是起宣传作用，现在发展到电子商务、网上购物、专业门户等到多样化功能。随着网站内容的增加，很多网站已具有了符合化、多样化的信息构架，网页布局也呈现复合化的趋势。内容庞大的网站需要提供能够更加有效地展现体系化、结构化的内容的用户界面，以便使用者不会对复杂多样的内容信息及性质感到困惑，于是复合结构的网页布局就应运而生。

• 对于这种表现导航结构的方式而言，网页布局大致可以分为三种：顶部导航和页面分割、左侧导航和页面分割、运用固定区域的设计，其中前两种是与复合结构相关的网页风格，最后一种是限定网页布局范围并在固定区域进行设计的类型。

• 按照第二层、第三层菜单的站内导航的排列位置，复合结构类型可以进行再分类。

1.顶部导航和页面分割• 单一结构的顶部导航发展为复合结构的网页布局，网站导航设置于顶部，第二层、第三层菜单的站内导航位于下方的网页布局结构，就是复合结构的顶部导航和网页分割类型。风和结构的有点在于使内容信息量大、菜单结构复杂的网站结构变得更加合理，也是比较常用的网页布局类型。另外，如前文所述，位于顶部的网站导航对下方内容区域造成的影响是最小的，便于调整网站导航和内容区域的比重。复合结构的另一个有点就是：顶部的网站导航设计得非常简洁，下方的内容区域也显得丰富、精彩。

• 内容性质和功能复杂多样的网站的网页布局大部分都采用了易于区分网站内容性质、表现网页多样性的顶部导航和网页分割结构。

• 按照内容区域的分割方式，顶部导航和页面分割的结构可以分为以下 6种：左侧框架、右侧框架、左右两侧框架、水平分割、垂直分割和其他。

• （ 1 ）左侧框架，即采用顶部导航和左侧公共菜单。• （ 2 ）右侧框架，即采用顶部导航和右侧公共菜单。• （ 3 ）左右两侧框架，即采用顶部导航和左右两侧的公共菜单。• （ 4 ）水平分割，即顶部导航和内容区域进行水平分割。• （ 5 ）垂直分割，即顶部导航和内容区域进行垂直分割。• （ 6 ）其他，是指包含了采用顶部导航和页面分割结构，却难以确定内容区域分割方式为哪种类型的网站。

2.左侧导航和页面分割• 这是单一结构的左侧导航网页布局复合化发展的类型，

根据右侧区域的分割方式，这种网站位于左侧的基本结构可以分为两种：顶部框架和底部框架。

• 在这种左侧导航和页面分割的复合结构中，网站导航运用色彩及功能框架占据了一定的区域，第二、三层站内导航往往从属于左侧的网站导航，第一层菜单则位于中心的显眼位置。在内容量不太多的情况下，这种结构能是网页更加丰富、充实。另外，导航结构的层次非常清晰，使用很方便。但是，在内容量很多的情况下，相比网站导航和页面分割结构的网站，大部分网站的网页布局在突出区域或站内导航方面就会受到很多限制。

• 不妨查找一下网站实例，很难找到符合左侧导航和页面分割结构的网站，大部分网站的网页布局结构都是顶部导航和网页分割的复合结构。因此可以看出，多数人都比较喜欢浏览顶部导航的网页，偏爱具有层次体系的导航结构。

3.运用固定区域的设计

• 固定在某个特定大小区域展现所有内容的形式可以让使用者一眼看出网页布局。按照是否独立使用某个固定区域，是否运用整个网页，可以把运用固定区域的设计分为两类：只运用固定区域和运用整个网络搭配的固定区域。

• 其实，很难界定运用固定区域的设计属于网页布局结构或形态之中的哪一类。不过，由于需要从固定区域大小、页面比例、排列方式等结构方面规划网页布局，因此将其归入网页布局结构的复合结构类型。另外，虽然乐意在固定区域内表现网页布局结构中的单一结构和复合结构，但是“固定区域”本身比其在结构上给人留下的印象更加深刻，因此将其划分为独立的网页布局结构中的一个类型。运用固定区域设计的网站最具代表性的特点就是视线集中效果，通过固定区域向使用者展现左右的网站信息，就像进行解说一样。

3.运用固定区域的设计

• 只运用固定区域。• 运用独立固定区域的结构是一种特殊的网页布局类型。固定区域的大小和界限非常明确，当 web浏览器扩大到整个网页的时候，特殊形态的固定区域就给人一种独立小岛的感觉。

• 运用整个网页搭配的固定区域。• 没有确定特别的形态，只是策划、设计、运用 web浏览器的整个网页的结构类型。它的特点就是充分运用了整个网页，并固定的使用页面的某个区域传达内容，吸引使用者的视线。

2.4网页布局形态

• 网页设计师经常容易忽略网页布局形态要素，这是因为他们只重视给予网页布局结构的使用性，没有过多地考虑网页布局形态要素。但是，在构思网站时，网页布局形态也是一个非常有效的设计要素，它有助于网页设计师扩展思路、激发创意，因此完全有必要兼顾网页布局结构和网页布局形态为一体。

2.4.1功能优先还是形态优先

功能优于形态？还是形态优于功能？• 不管是免贵什么领域的网站，网页设计师都会受到两种

表现方式的困扰，必须考虑两个条件的比重和协调。与注重使用性、实用性及目的性的设计相比，仅仅重视形态的设计称做技术加的创作作品更为合适；当然，仅仅重视功能的设计容易缺乏审美上的创意。因此，形态和功能的协调时网页设计师必须解决的重大课题。当然，形态和功能的优先顺序是由设计课题决定的，但设计也是“从造型上将所赋予的目的的实体化”。也就是说，网页设计师的最终任务也就是满足所赋予的目的，因此，对于功能的理解要处于优先位置，然后才是形态。

•

• 对于网页设计师而言，网页布局形态是指容纳网页布局结构的框架形态。也就是说：网页布局形态取决于网页布局结构。如果说网页布局结构作为一种功能研究，是指向使用者提供便利的用户界面、提高使用者的逻辑思维表现，那么网页布局形态作为一种视觉语言，就是让使用者认识网站外观风格时的感性表现。

2.4.1功能优先还是形态优先

• 企业者经常会有这样的苦恼，网页设计师是按照自己给他们绘制的信息构架故事版面来设计网页的。这个例子就反映了“功能优于形态”的情况，网页设计师对网页布局结构和构成已经是先入为主，很难再构思出故事版框架之外的其他设计创意。网页布局形态作业的最终结果就是能够设计出满足信息构架的网页布局结构，也就是功能优于形态；但是，在设计网页布局形态的过程中，也必须通过多样化、有创意的思路来检讨是不是符合“功能优于形态”，也就是说需要注重形态。

• 按照网页布局形态对网站进行分类可能有些不太合适，这是因为从形态上很难明确分类标准，形态也是千差万别的。但是，对网页布局形态进行分类评析本身就是一种非常有益的经验，可以以整体形象为标准对网页布局形态分成 3 类：普通形态、独特形态和实验形态。

2.4.2网页布局形态表达的含义及传递的感情

• 设计中最先向使用者传递感情的是形态。使用者通过表现网页设计师理念和意图的形态（圆、三角形、四边形、直线、曲线、抽象形态）可以对网页有一个主观感受（死板、柔和、有趣、别扭、特别、参差不齐）。也就是说，形态就是向使用者传达网页设计师意图和感情的微观要素，可以称之为视觉语言。

• 因个人的环境、性质、情况不同，人们对同一种形态的感受也有很大差别。因此，这里所讲的内容不是形态传达的绝对意义，读者可以将其理解为普通感受，网页设计师可以从客观角度去想象形态传达的意义。

• 韩国某设计机构选取了网页企划者，网页开发者、网页设计师等 100人进行了问卷调查，调查内容为他们对点、圆、（包括椭圆）、三角形、四边形、菱形、直线、斜线、自由曲线、曲线 9 中形态的感受，结果如下。

• 其中，调查结果的整理标准如下：• 联想到的感受中的第一位： 10 人 以上的共同感受。• 联想到的感受中的第二位： 10 人一下的共同感受。• 联想到的对象：通过形态联想到的实物。

• 点既是线的开始，也是代表结束的几何学符号。调查结果显示，看到点的形态后联想到的感受既多样又相似。“结束 / 结尾 / 结果”、“开始和结束”及“存在 / 有”的感受是相似的；“集中 / 入迷”、“重点 /核心”、“明确 /清楚”、“孔 /黑洞”的联想图像也是类似的。如表所示的调查结果可以看出，点含蓄地传达了“开始和结束”、“空间的距离感”及“时间无穷尽”，点相对于人是很小的，但是调查者对点的回答很踊跃，感受也是非常多样化。

1.点

联想到的感受的第一位

联想到的感受的第二位

联想的对象

其他回答

结束 / 结尾 / 结果、小 /细小 /微小、集中 / 入迷、远、孤单 /孤独、污点 /瑕疵、重点 /核心、存在 / 有、开始和结束、凝聚 /凝结

寂寞 /寂静 /空虚、无穷尽、节制 /简洁 /简单、明确 /清楚、休息

靶子、孔 /黑洞、蚂蚁、脸上的斑点、星星 /行星、宇宙 / 点的集合、灰尘

耳洞眼珠、电脑开关、地球、雨点、符号

2.圆（包括椭圆）

• 如下表所示的调查结果可以看出，被调查者通过远远地模样联想到的感受大多与柔和、舒适、温和、安定有关。另外，圆形就像是一个无限延伸的轨道、周期反复，没有尽头

联想到的感受的第一位

联想到的感受的第二位

联想到的对象

其他回答

柔和、舒适、温和、完成、包容、丰满、普通、流动

力量的范围、心情好、圆圆的、顺利、正确答案、温和、柔软、膨胀、扩展、持续性、旋转、可爱、稳定、均衡、调皮、甜美、死板、枯燥

地球、太阳、月亮、孔、车轮、风扇、馒头、湖水、瞳孔、眼镜、镜子、女人

西瓜、糖块、鸡蛋、脸庞、纽扣、按钮、自由、软绵绵

3.三角形

• 如表所示的调查结果可以看出，人们很容易从三角形中感到锋利、锐利。倾斜的斜线与斜线的对立形态使人联想到竞争、粗暴、不安、危险、冲击等紧张感，在斜线的交叉点才能认识到指示的方向。另外，人们还能够从三角形的鲜明、锋利形态及平滑的感受中联想到现在的、都市的氛围。

联想到的感受的第一位

联想到的感受的第二位

联想到的对象

其他回答

锋利、方向、指示、尖尖的、尖锐的对立、竞争、锐利、粗暴、安定感、不安、危险

精炼、都市的、现代的、崭新、逻辑的、均衡、个性强、疼痛、痛苦、不安、强烈、冲击、冰冷

金字塔、山、箭头、三角铁、数字、三棱镜、刺儿、交通标识板

比例，位置、能动的、意志、压缩、眩晕、不足、狭窄的感受、强烈的邀请

4.四边形• 如表所示的调查结果可以看出，四边形给人一种非常实实在在的安定感，虽然也有着直线形态的死板感，但同时传达了完整的安定感和舒适感。另外，两组平行的直线相交的形态显得秩序井然，也给人一种逻辑性的感觉。但然，也有的人联想到的四面是墙壁的狭窄空间，由此产生犹如被关在方框里的烦躁感；联想到门窗的人有着豁然开朗的清爽的感觉。

• 联想到的对象不同，给人的感受也不同，因此，网页设计师必须认真细致地设定自己所制作的形态的联想的对象。

联想到的感受的第一位

联想到的感受的第二位

联想到的对象

其他回答

死板、安定、舒适、限定的范围、秩序井然、逻辑

嵌框、简单、笨拙、忠实、愚钝、端正、充实、普通、清爽、广阔

计算机、书、封闭空间、墙壁、记事本、饭盒、面包、 TV 、广场、运动场

没有窗的小房子、房间、公司职员、部分、完全、定型化、僵化、结实、紫菜

5.菱形• 如表所示的调查结果可以看出，斜线的直线形态感很强的菱形很像是用脚尖站着的

样子，给人的第一印象就是不安稳的感觉，以及冒险、危险、惊讶等刺激的感觉。但是，斜线的对称结构也有着稳定的比例感，因此菱形是一种能够同时传达不安感和安定感的形态。联想到的实物对象中，钻石位居第一，钻石自然会引发出一种闪耀的图像和高档的感受。尖锐的直线形态就好像三角形一样，给人一种锐利和精炼的感觉。单个菱形容易给人造成不安的感觉，不过几个菱形组合在一起的话，就会有一种牢靠的安定感。

联想到的感受的第一位

联想到的感受的第二位

联想到的对象

其他回答

不安感、闪耀、精炼、高档的、锐利的、死板的、崭新、创造

实验、冒险、危险、惊讶、新奇、漂亮、华丽、奇妙、奇怪、未知世界、个性、均衡、条件语句、工学的感觉

钻石、军队户章、宝石、卡片、包袱皮、宗亲、纹路、皇族、玻璃

棒球场垒线、陀螺、艺术家、强调、独特、人工的、立体的、陌生、对称结构

6.直线• 如表所示的调查结果可以看出，壁纸端正的直线传达着一种正直又倔强的片面性感

觉，容易使人联想到远方的水平线地平线，由此缠身一种广阔、舒适的感觉，也常使人联想到区分天空和大地、天空和大海的界限的图像。由始至终没有变化的模样给人一种坚持不懈的感觉，但是也容易使人觉得单调乏味；平行的直线比直的直线更能传达出永久的延续性；直线常用于区分界线的图形元素。另外，几条平行的直线也是爽快淋漓的速度感的有效表现技巧。

联想到的感受的第一位

联想到的感受的第二位

联想到的对象

其他回答

笔直 /端正 /正面、永久性 / 无限 /永远、区分 /界线、舒适、安定、死板、乏味、平坦 /平整整洁 /干练

僵化、基本、片刻性、终结、无聊、现代、强烈、简单、整齐、延续性、和平、绷直、宁静、普通、坚持

水平线、地平线、道路 /小路 /高速公路、电线、晾衣绳、棍子、管道、拔河、平行线

绘画的开始、无意识、固执、单方的、速度感、哪里是终点

7.斜线• 斜线就是倾斜了的水平或垂直直线，它传达着比直线更加强烈的印象。如表所示的调查结果可以看出，人脑对斜线的意识首先是冲击的、新鲜的刺激感，人们看到斜线的形态往往会产生逃脱、反抗、冰冷、动感、困难、锋利、失败、危险等非常强烈的否定、消极感觉。另外，斜线还传达着上升 / 下降、下坡 / 上坡等方向性和急速感，会使人联想到陡峭的坡路。从调查的结果可以看出，被调查者从几条斜线上依次联想到了上升的发展和成长、下降的失败和没落等两种不同的感受

联想到的感受的第一位

联想到的感受的第二位

联想到的对象

其他回答

不安定、方向性、倾斜、陡峭、逃脱、反抗、强烈、进取的、冰冷、移动 /速度感、动感、歪 /斜

锋利、上升 / 下降、下坡 / 上坡、高低、发展、成长、光滑、错位、困难、苦难、分离、分割

检查错误问题 / 检查错误答案、下插的箭头、坡路、撬棍、雨、滑梯、指挥棒、跷跷板、滑雪场、阵雨

台球杆、一次方程式、空间、小路、台阶、移动、流动、分裂、偏爱

8.自由曲线• 条理清晰的语言不太适合描写不受框架限制的自由曲线，使用弯弯曲曲、滑溜溜、东摇西晃等自由的、滑稽的拟态词更适合描写自由曲线。如表所示的调查结果可以看出，被调查者由自由曲线联想到的实物太多表现为河水、乡村小路 /羊肠小道、山脊等具有曲线柔和性的自然风景。但是，不受框架限制的自由曲线也具有不知延伸到何处的突发性，给人一种散漫的、刺激的、危险地感觉，使人联想到赛车、酒后驾驶等危险地情景。另外，自由曲线前进方向的变化也容易让人感受到弹性和柔韧性。

联想到的感受的第一位

联想到的感受的第二位

联想到的对象

其他回答

自由 / 自由奔放、柔和、舒适、复杂 /杂乱 /散漫、弹力 /柔韧、苗条、活泼、圆滑、流动性

逃脱、危险、有趣、流动、彷徨、帅气、自然、精炼、有感觉的、遥远

流动的河水 /溪水、乡村小路 /羊肠小道、驾照考试的 S曲线、弯曲的山谷、波浪、体操运动员的技术体操、山脊 /山路、迷失方向、赛车、酒后驾驶、肇事出租车

弯弯曲曲、滑溜溜、东摇西晃、哗啦哗啦、减肥食品、女人的身材、迷路拜访、飞虫的动作

9.曲线• 平缓的曲线有着丰满的形态，给人以包容感；曲线可以唤起一种温和的情感，使人感受到舒适和关爱。另外，曲线也是圆的一部分，这也很容易使人联想到地球的切面、太阳的一部分等有着圆形形态的事物。如表所示的调查结果可以看出，曲线给人的感觉更多是柔和包容。

联想到的感受的第一位

联想到的感受的第二位

联想到的对象

其他回答

柔和、丰满、没有棱角圆滑、宽容、包容关怀

女性的、自然地、安定的、宽广的、温和的、舒适的、柔软的、满满充足、可爱的

山坡、母亲的爱、彩虹、弯弓、海岸线海边、滑梯

方程式、修饰的、数学的、一部分、地球的切面太阳的一部分、乌龟背、光头、椅子扶手

2.4.3普通形态•

“普通形态”就好比是过去的瓦房。瓦房的规模差别很大，但是外形基本上都是相似的。同样道理，网站的规模可能有很大差异，但是它们的外观非常相似，这些网站可以称为“普通形态”。

• 搜索购物专业门户等内容量大的功能型网站中，基于文本信息传达功能优先的网站往往会采用普通形态。也就是说，普通形态是旨在忠实于快速传达信息的信息构架类型的网页布局。普通形态主要是通过相似的网页布局结构和形态留给使用者一种熟悉的印象，它的优点在于让使用者更加简便地使用网站。同时，在表现创造性和新创意方面，普通形态缺少自己特色的差别化策略。

• 但是，有创意的、独特的含义不仅仅是表现华丽感觉，无创意的、普通的含义也不仅仅是只有单调感觉。普通的网页布局类型同样可以体现出华丽、细致地感觉，在保持连贯性上具有很高的完成度，给人一种成就感。并不是说普通形态都是外观上很普通、有着相同设计标准的网页布局类型，根据设计要素的策划和表现，普通形态都是外观上很普通、有着相同设计标准的网页布局类型，根据设计要素的策划和表现，普通形态的网站可以表现出低档、高档、幼稚、成熟等多样的设计品质和风格。因此，采用普通形态策划网页设计的时候，为了提高网站整体的水平和质量，必须进行细致的设计策划。

1.符合导航结构扩展为普通形态的代表者

• 把重点放在公司产品、问题解答、服务等信息提供功能上的 Microsoft 网站，该网站是典型的“顶部导航和左侧框架”分割模式，长期以来网站一直以这种结构为基本框架，通过系统的信息构架来提供庞大的信息量。网页布局表现为顶部导航和左侧框架分割结构，提供了便利的一 / 二 /三层符合导航结构，采用的是可以控制庞大规模的导航方式（第一 /二层导航位于顶部、第三层导航位于左侧框架的方式），堪称是复合导航结构扩展为最普通形态的代表者，成为注重使用性的信息构架和表现方式的典范。

2.TAB形态网站导航方式的曲型模式

依靠网上书店发展起来的大型购物中心Amazon 网站旗下的卓越网（ joyo.com ），体现的是最普通的网页布局形态。即顶部导航和左右侧框架分割结构，热卖商品、最新商品等辅助内容位于右侧。另外，利用 TAB 形态（即可以通过 TAB键进行选择）的网站导航可以明确显示当前所选的菜单，所选菜单的第二层菜单（即站内导航与网站导航）采用的是同一种色彩，使用者可以非常简便地掌握和使用菜单结构。

2.4.4独特形态 网页布局外观和结构的形态能够表现出独特风格的网站就是独特形

态网站，通过这种网站可以很容易地了解网页设计师的设计意图。 网页设计师一般是从企业的 CI 、网站的 BI 、隐喻锁确定的象征

形态开始类推出几何学的线条和形态，然后设计出差别化的网页布局形态。但是，一句网页设计师的意图和表现策略，独特的网页布局形态可以有多样化的表现或进行各种尝试。当然，在进行多样化的尝试和表现之前，重要的是检查这种独特的网页布局形态是否适合网站的性质。另外，如果这种独特形态适合网站性质的网页布局结构的话，还要进一步的在审美上进行协调。

下面就通过“独特形态”的网站案例介绍一下网页布局设计中“形态”要素的比重和效果。

1. 让声音波长视觉化的形态 英国的音乐专业门户网站 Music3W.com ，运用斜线和直线的搭配让声音波长视觉化，看起来个性十足。基于背景色的垂直分割结构便于内容的分类和编排，提高了浏览的便利性。其他网站案例如图。。。。

2.4.5实验形态

没有定型的框架，通过实验性的、尝试性的形态大胆地表现网页布局结构的网站可以称为实验形态的网站。这种类型常见于旨在传达个性十足的艺术家、网页设计师、设计公司、网络杂志等独特感强烈的网站。实验形态的网站没有把功能性放在首位，而是注重概念性的、创造性的设计；其外型及诱导使用者互动的交互方式往往非常新颖独特，有的更是前卫时尚，给人一种另类的感觉。

这里需要指出的是，实验形态并不是代表着杂乱无章。通过实验形态设计网页布局的时候，必须依靠实验性的、尝试性的思路来表现非定型的自由奔放式网页布局结构和形态，并大胆地尝试图形表现效果，同时也要注意网页构成元素之间的均衡和协调。