理解网页中的视觉层次-宝鸡网迅科技

原文来自 Webdesign Tuts+ 原创翻译 – 设计理论中文翻译作者-raiya

视觉层次是高效率网页设计的重要原则之一。这篇文章将向大家介绍为什么设计一个具有视觉层次的网页是这么重要。在了解这些原则之后，你可以在自己的基础设计练习中运用到这些知识。

设计=交流

作为核心：设计整体就是视觉交流。作为一个高效率的设计师，你必须有这个能力清楚地将你的设计思想传达出来。人是易变的，如果你给了他们巨大的信息量，这有相当高的可能性100个人中99人都会厌倦去看它。为什么呢？因为人们都是天性的视觉欣赏者，而不是数据处理者。

要了解这个，知道一些人们如何看待事物的方法是很重要的。人们并不等于所谓的“平等机会主义者”。他们不仅仅是收集视觉信息和处理数据，于此同时，大脑还会整理他们看到的这些东西的“视觉关系”。

很大可能上，你并不把它们仅当做“两个圆”看待，而是将他们看做“一个黑色的圆和一个比较小的红色的圆”。

原因是非常简单的：当呈现出某些像这两个圆一样简单的东西的时候，人们往往不仅仅看到两个普通的圆，他们将会搜寻这两个圆之间的不同点。某个圆或许更大，或者更小，或者有颜色，或者其他的不同点。这些不同点给予我们区别物体的信息并且给予图形特定的意义。

增加的这些复杂成分强迫我们去分析他们之间的关系。相同和不同点变成了我们思考这些问题的思维框架。比例向我们传递了“一个物体相对其他来说离我们更近，或者是，这个物体起到一个相对其他物体而言的支配地位”；颜色的不同告诉我们每一个物体可能有自己独特的特点，这个特点将其与其他物体区分开来。这样一个简单的图片用最基本的方法却向我们传达了如此多的信息。

让我们回过头来看网页设计；因为网页设计是有关视觉信息交流，明白“用户们将会自己组织设计内容的关系”成为我们高效设计的核心。一次丢出大量信息的方式看上去已经没意思了，作为网页设计师，我们任务是将这些没有经过处理的信息划分成一块一块切题的美味以供用户们更方便的阅读。更为重要的，我们需要明白：信息的高效交流是网页背后的关键。

初看视觉层次有成千上百的解释说明人们为什么会根据关系来看待问题；如果你要追溯到人类学上去讨论它的话，你可能做出结论：远古时代狩猎为生的人们在思维上引导现在的人类去关注这些事物之间的联系，这是一种生存技巧。

在上面的例子中，我们可以看到最基本的文本层次运用。两张图片当中用到的例子内容上没有任何区别，但是它是如何戏剧化地让人们改变了理解方式并消化这些内容的呢？当我们以文字排版为例讨论视觉层次的时，这就是我们要分析的问题。文字组织的接近性、篇幅比例和相似程度使读者将下级内容自然地归入标题和分段。层次给予标题更多的意义，不仅仅是信息，而且也使内容更容易被接受。

好，这只是一个最基本的例子对吧。让我们更深入的讨论其他的例子，让大家明白如何运用这些最基本的守则，成为一个老练的设计师。

层次构建工具箱

视觉层次非常重要，但是如何准确的创建层次效果？我们寻找的“工具”正如木匠的工具箱——锤子、钉子、锯子等等——你如何运用它们才是最重要的。

1、大小

较大的物体具有更大的吸引力。将尺寸的控制作为制造层次的工具是一个非常高效的方法去引导读者的视线。在设计中将尺寸和重要性结合起来是非常关键的。最大的元素大部分情况都具有最大的重要性，与此同时，最小的元素应该是最不重要的。

2、颜色

颜色是一个很有意思的工具，他可以在组织上和个性两方面起到作用。醒目、对比强烈的颜色在特殊的元素中将会引起更大的关注（例如按钮、错误信息或者超链接）。当作为一个体现个性的工具时，颜色可以延伸到体现更精练的层次感上；用到豪华、舒适的颜色将给页面带来感情上的吸引力。颜色可以影响网页的每一个角落，从商标到形象。色彩应用在视觉层次设计中可以做到信息分类的效果，就像下面的例子：

3、对比

对比体现出相对的重要性。字体大小上戏剧性的变化将传递出某个消息的重要性或者需要某些特别关注。从较亮的背景转换到一个较暗的背景将较快的区分核心内容与页脚内容。

4、对齐

对齐体现出元素们的组织。甚至可以简单到仅仅用“主栏”和“侧栏”区分。但对齐也能够在视觉层次上起到更多更复杂的作用。考虑，举个例子，放在页面左上角的内容的力量。因为用户多半将那个地方的信息与简介、账号、购物车等等相联系。放在那个地方的东西被赋予了某种“官方”性。对齐如果用特定的方式也会激起用户的兴趣，例如下面的例子：

5、反复

重复体现了元素之间的关联性；如果所有段落的文字都是灰色的，当一个用户看到一块新的灰色文字时，他也许认为这是其中的另一段；当同一个用户遇到一个蓝色的链接或者一个黑色的标题时，他可以放心的将它理解成段落以外的东西。

6、亲密性

亲密性将元素彼此分开并且创建下级的层次。在一个页面中可能会看到很多被空白分隔开的小部件；在这些部件中又会有新的层次，标题、副标题和内容。亲密性是最快的方式将关系紧密的内容组织起来。在下面的例子中，很容易通过亲密性将主要内容与其他内容区分开来。

7、紧密与留白

密集的元素给人一种“重”和杂乱的感觉；元素之间距离太大，他们将会失去彼此之间的联系。当一个网页被设计的恰到好处时，眼睛将会准确的将各个元素组织好。

8、风格与质感

可能视觉层次设计工具箱中最具有可扩充功能的就是风格了，他可以运用于传递层次关系，可以包含在其他的特性中，也超越了其他的工具。例如：一个平淡的灰色背景的感觉会与泊油路质感的背景有很大不同。这种设计师创造的风格或者说个性在视觉关系上扮演着一个重要的角色。

很必要说，“风格”也是设计师设计上最为危险的工具。正如一个木匠锯掉自己的手指一样，设计师用他的“风格”也可以很简单的误导用户，或许是因为过分强调主内容这样的错误。想象一个质感很重，设计感很强烈的网页元素，将会把用户的吸引力牵引到那上面去，而忽略去获取网页信息了。同样的事情会发生在字体、按钮、标签或者其他元素上。在润饰网页元素，添加更多样式和整体设计上必须慎重考虑这一点。

失败的视觉层次设计

就像我在上一节中提到的，视觉层次设计可以把你带入天堂或者是地狱。现象那些讨人厌的Flash广告，弹出窗口，闪烁的Banner等等，这些网站已经被人讨厌了多少年了！虽然这些网站成功在抓住了读者的注意力，不过他们完全输在了打破了网页视觉层次感上。相同的，如果设计师设计了一个这样的视觉层次——关键的内容难以被找到，这样的设计当然也是失败的。好的网页设计不应是有巨大的、疯狂的图像或者是应用了最新的Photoshop滤镜，而是利用了可用性、易获得性和逻辑性很好的组织了网页信息。

为何层次与网页设计关系密切

Jeffrey Veen在2001年写下了这些话，但它们在“信息超载”如此泛滥的今天仍然起到了很关键的作用。正如人们认为的一样，我们总是对视觉组织非常敏感。相对于前些年来说，我们现在一直都在被视觉信息的海啸冲击着；结果造成，人们现在对视觉层次越来越敏感。特别体现在网络，更多的研究证明一般浏览者都是随性“扫读”网页的内容了。无意识地去寻找自己感兴趣的内容，而对其他的内容完全不在意。

正因为这个，成为视觉层次设计师并不是一个选择，而是必须。随着网页浏览平台从传统的显示屏延伸到电话、平板电脑，甚至电视上，用强烈、清晰的视觉系统与网页浏览者交流变得越来越重要。

一个测试视觉层次的练习

最后，我想要以一个简单的练习结束。我们将用你常用的网站或者最近正参与的项目为例：

2、对大部分用户而言，按照重要性赋予这些信息1~10的评级；

4、以实际的设计为依据，给设计上的信息予以重要性1~10的评级；

5、思考：对于用户的信息层次与设计上的信息层次展现一致吗？

大多数案例里，答案总包含着“NO”。这有很多原因——用户需求、设计师经验不足、设计师、会议确定的设计——或者其他各种原因你可能接触到的。甚至有些案例里，设计师就是愿意误导你（比如一个“免费”网站尝试着将用户引诱到收费的内容当中）。无论是什么理由，理解视觉层次并且用看待网页设计的眼光阐释视觉层次将会给你带来全新的启发。希望这篇文章将会给你的工作带来帮助。