视觉层次结构对于良好的网站设计至关重要。这是使你的作品有效地实现你的目标的关键原则之一。

视觉层次结构背后有很多理论。这是非常重要的，很多的研究和努力都被投入到理解它的运作方式和原因。有效地理解它可以帮助你更好地使用它。

设计是一种交流方式

设计是视觉传达的一种形式。它是通过视觉媒介将想法传达给他人。这适用于所有形式的设计。尤其对于像网页设计，以及信息产业的设计学院来说更是如此。

巨大的信息块不能很好地交流，因为人们实际上是视觉思考者。我们不只是处理数据。人们不只是看到事物。相反，人类根据“视觉关系”来组织他们所看到的事物。

视觉层级结构的上升

为什么我们在关系上看到的是一项研究。人类学家认为，这是狩猎-采集历史的遗迹，帮助我们的远古祖先生存下来。

一种实用的，不那么学术性的方法是，它只是我们大脑理解信息的方式。我们将类似的元素组合在一起，并将它们组织成我们可以简单使用的有意义的模式。

不管你如何看待人类大脑所使用的视觉层次结构，它是我们如何组织信息和利用它传达信息的一种非常有效的方式。

视觉层次的工具

现在你明白了视觉层次结构是一个有用的信息交流工具，作为网页设计师，你如何创建它？

关于视觉层次的工具很简单，也很容易学。你所需要做的就是弄清楚如何使用它们。

大小

更大的物体本质存在的意义是希望得到更多的注意。他们要求人们更多地关注他们。在视觉层次上，观众的眼睛自然会被吸引到更大的物体上。

这是你可以用于视觉组织的最强大的工具之一。关联大小与重要性。你最大的元素通常是你最重要的，而最小的元素通常是最不重要的。

颜色

颜色既是一种组织工具，也是一种为你的网页设计增添个性的方法。大胆和对比色需要吸引受众的注意力以及焦点。

这是用于按钮和超链接的最好方法。作为一种增加个性的工具，颜色可以用更复杂的方式使用。

有趣的是，鲜艳的颜色可以使页面变得令人兴奋，而偏冷色系的颜色能创造一种舒缓的感觉。因此，颜色是非常重要的。它可以传达一个品牌（如百事可乐的蓝色、麦当劳的黄色），或者可以作为象征意义（比如，红色给人的感觉是充满激情）。你甚至可以将颜色作为一种方法，来对视觉层次中的信息进行分类。

字体

在创建视觉层次结构时，选择合适的字体是非常重要的。不仅仅是字体本身重要，而是你如何使用它。你使用的字重、风格以及你放置的地点一样重要。

要组织重要的事情，尝试使用各种字体的大小和字重。斜体字在某些情况下也能起到一定的作用。

你可以在你的站点上创建一个字体层次结构，它有各种大小、权重和间距的文本。你在网站上使用单一字体并不重要。

通过使用它的大小和字重的变化，你不仅要把注意力吸引到更重要的元素上，而且要创造出一种整体的构图，以便于访问者阅读和理解。

留白

在所有这些仔细使用视觉层次结构的过程中，确保有留白。你需要给你的内容空间“呼吸”。

负空间是视觉设计的一个重要组成部分，它的定义和对空间的积极利用一样重要。

留白空间通常被定义为“页面之间的空间”，尽管如此，这个额外的空间并不总是白色的，这导致了更多的人把它称为“负空间”。

留白空间本质上让你决定了你正在构建的网站的哪些特定功能应该脱颖而出。由于这种欢迎类型的布局，访客将更有可能在网站上停留更长的时间。

留白同时也为眼睛提供了休息，突出了重要的元素。太多的拥挤和杂乱会让访客离开，因为他们无法理解什么是真正重要的。

人类的眼睛及扫描模式

人类的眼睛以可预测的方式工作。他们会自动被吸引到特定的兴趣点。其中一些依赖于个人，但大多数人都遵循特定的、可预测的趋势看待所有事物，包括网站。

“F”模式

这是大多数人在像博客这样的重文本网站上使用的扫描模式。

读者首先扫描页面左侧的竖线，在段落的前几句中寻找关键词或其他兴趣点。

一旦读者发现了有趣的东西，他或她就会开始在水平线上阅读文本。整体模式类似于字母“F”（或“E”）。

“Z”模式

这种扫描模式用于不以文本为中心的页面。读者首先在页面顶部扫描一条水平线。这通常是因为菜单栏，但它也是从左到右阅读的习惯。

一旦眼睛到达水平线的末端，它就会向下移动，向左移动，另一个从左到右阅读习惯，然后重新开始。图案类似于字母“Z”。

这是利用站点的可视化层次结构的一个有用的模式。它解决了许多基本的站点设计要求：行为召唤，视觉层次以及品牌。

在这种情况下，简单是一个主要的优先级，而行为召唤是页面的主要目的。它给更简单的网站带来了一种秩序感。然而，复杂的内容并不能很好地处理“Z”模式，而“F”模式可能是更好的选择。

总结

视觉层次结构是网页设计的重要组成部分。了解它是如何工作的，可以让你尽可能有效地创建一个站点。

它提供了组织内容的指导方针。回忆下你看过的一些好的网站设计，看看他们是如何用视觉层次结构来有效地传达他们的信息的。原

原作者：Bogdan Sandu