理解网页中的视觉层次.pdf

理解网页中的视觉层次 原文来自 Webdesign T ut s+ 原创翻译 – 设计理论 视觉层次是高效率网页设计的重要原则之一。这 文章将向大家介绍为什么设计一个具有视觉层次 的网页是这么重要。在了解这些原则之后 ，你可以在自己的基础设计练习中运用到这些知识。 作为核心 ：设计整体就是视觉交流。作为一个高效率的设计师 ，你必须有这个能力清楚地将你的设 计思想传达出来。人是易变的 ，如果你给了他们巨大的信息量 ，这有相当高的可能性100个人中99 人都会厌倦去看它。为什么呢 ？因为人们都是天性的视觉欣赏者 ，而不是数据处理者。 要了解这个 ，知道一些人们如何看待事物的方法是很重要的。人们并不等于所谓的“平等机会主 义者”。他们不仅仅是收集视觉信息和处理数据 ，于此同时 ，大脑还会整理他们看到的这些东西的“ 视觉关系”。 让我们看看下面两个普通的圆 ： 很大可能上 ，你并不把它们仅当做“两个圆”看待 ，而是将他们看做“一个黑色的圆和一个比较小的红 色的圆”。 原因是非常简单的 ：当呈现出某些像这两个圆一样简单的东西的时候 ，人们往往不仅仅看到两个普 通的圆 ，他们将会搜寻这两个圆之间的不同点。某个圆或许更大 ，或者更小 ，或者有颜色 ，或者其 他的不同点。这些不同点给予我们区别物体的信息并且给予图形特定的意义。 让我们来看一张更为复杂的图片 ： 增加的这些复杂成分强迫我们去分析他们之间的关系。相同和不同点变成了我们思考这些问题的思 维框架。比例向我们传递了“一个物体相对其他来说离我们更近 ，或者是 ，这个物体起到一个相对其 他物体而言的支配地位” ；颜色的不同告诉我们每一个物体可能有自己独特的特点 ，这个特点将其与 其他物体区分开来。这样一个简单的图片用最基本的方法却向我们传达了如此多的信息。 …Underst anding t hat peo ple w ill see o ur designs in t erms of relat io nships is crucial t o beco ming a mo re ef f ect i e designer. 让我们回过头来看网页设计 ；因为网页设计是有关视觉信息交流 ，明白“用户们将会自己组织设计内 容的关系”成为我们高效设计的核心。一次丢出大量信息的方式看上去已经没意思了 ，作为网页设 计师 ，我们任务是将这些没有经过处理的信息划分成一块一块切题的美味以供用户们更方便的阅读 。更为重要的 ，我们需要明白 ：信息的高效交流是网页背后的关键。 初看视觉层次有成千上百的解释说明人们为什么会根据关系来看待问题 ；如果你要追溯到人类学上 去讨论它的话 ，你可能做出结论 ：远古时代狩猎为生的人们在思维上引导现在的人类去关注这些事 物之间的联系 ，这是一种生存技巧。 可能一个更便于理解的解释 ，这就是我们大脑整理信息的方式 ：将相似的可视元素整理成一个组 ， 将他们放进具有一定意义的类型当中就像人类固有的吃喝等习性一样。换句话说 ，事实上大脑里的 信息都是按照某种层次整理出来的 ，这样交流起来比没有整理信息要有效率的多。 看看下面的两张图片 ： 在上面的例子中 ，我们可以看到最基本的文本层次运用。两张图片当中用到的例子内容上没有任何 区别 ，但是它是如何戏剧化地让人们改变了理解方式并消化这些内容的呢 ？当我们以文字排版为例 讨论视觉层次的时 ，这就是我们要分析的问题。文字组织的接近性、 幅比例和相似程度使读者将 下级内容自然地归入标题和分段。层次给予标题更多的意义 ，不仅仅是信息 ，而且也使内容更容易 被接受。 好 ，这只是一个最基本的例子对吧。让我们更深入的讨论其他的例子 ，让大家明白如何运用这些最 基本的守则 ，成为一个老练的设计师。 视觉层次非常重要 ，但是如何准确的创建层次效果 ？我们寻找的“工具”正如木匠的工具箱——锤子 、钉子、锯子等等——你如何运用它们才是最重要的。 1、大小 较大的物体具有更大的吸引力。将尺寸的控制作为制造层次的工具是一个非常高效的方法去引导读 者的视线。在设计中将尺寸和重要性结合起来是非常关键的。最大的元素大部分情况都具有最大的 重要性 ，与此同时 ，最小的元素应该是最不重要的。 2、颜色 颜色是一个很有意思的工具 ，他可以在组织上和个性两方面起到作用。醒目、对比强烈的颜色在特 殊的元素中将会引起更大的关注 （例如按钮、错误信息或者超链接 ）。当作为一个体现个性的工 具时 ，颜色可以延伸到体现更精练的层次感上 ；用到豪华、舒适的颜色将给页面带来感情上的吸 引力。颜