如何在网页设计中有效地使用视觉层次结构？
<p>视觉层次结构对于良好的网页设计至关重要。这是使你的网站有效实现目标的关键原则之一。视觉层次结构背后有很多理论，也是非常重要，因此需要进行大量的研究和努力来理解其工作原理和原因。了解它可以帮助你使用它。本期深圳网页设计公司Angle就带大家一起去了解一下吧。
</p>
<p style="text-align:center;">
<img alt="如何在网页设计中有效地使用视觉层次结构？" src="https://www.teamczyx.com/article/1594207364.jpg" title="?tle插图?m" />
</p>
<p>
1、设计是一种沟通形式
</p>
<p>
设计的核心是视觉传达的一种形式。这是关于通过视觉媒介与他人交流思想的方式。所有形式的设计都是如此。信息产业的设计学院网页设计尤其如此。大量的信息无法很好地交流，因为人们实际上是视觉思想家。我们不只是处理数据。人们不只是看到事物。相反人类根据“视觉关系”来组织他们所看到的东西。
</p>
<p>
2、视觉层次结构的兴起
</p>
<p>
我们为什么从关系角度看待本身是一个研究。人类学家认为，狩猎采集历史的遗迹帮助我们的远古祖先生存下来。一种实用的，学术性较低的方式是它只是我们的大脑了解信息的方式。我们将相似的元素组合在一起，并将它们组织成有意义的模式，我们可以简单地使用它们。不管你如何看待人脑使用的视觉层次结构，它都是我们组织信息并加以利用的一种非常有效的传达信息的方式。
</p>
<p>
3、视觉层次结构工具
</p>
<p>
现在，你了解了视觉层次结构是用于传达信息的有用工具，你如何以网页设计师的身份创建它？实现它的工具非常简单易学。你需要做的就是弄清楚如何使用它们。
</p>
<p>
尺寸
</p>
<p>
更大的对象本质上在大喊。他们要求人们更多地关注他们。在视觉层次上，观看者的眼睛自然会被吸引到更大的物体上。这是可用于可视化组织的最强大的工具之一。将大小与重要性相关联。通常最大的元素应该是最重要的，而最小的元素通常是最不重要的。
</p>
<p>
颜色
</p>
<p>
颜色既是一种组织工具，又是一种在网页设计中增加个性的方式。粗体和对比色需要观看者的注意力和焦点。最好用于按钮和超链接。作为增加个性的工具，可以以更复杂的方式使用颜色。有趣，明亮的色彩可以使页面令人兴奋，同时声称色彩营造出舒缓的感觉。颜色非常重要。它可以传达品牌（即百事可乐蓝色，麦当劳黄色）或可以用作象征（即热情的红色）。你甚至可以应用颜色作为在视觉层次结构中对信息进行分类的一种方式。
</p>
<p>
字型
</p>
<p>
当想要创建视觉层次时，选择适合你设计的字体至关重要。不仅字体本身很重要，而且字体的使用方式也很重要。你使用的重量和样式与放置它们的网站区域一样重要。要组织重要的内容，请尝试使用各种字体大小和粗细。斜体字在某些情况下也能达到目的。你可以使用各种大小，粗细和间距的文本在网站上创建字体层次结构。你在网站上使用单一字体都没关系。通过使用大小和重量的变化，你不仅可以吸引人们注意更重要的元素，而且还可以创建一个整体结构，以使访客易于阅读和理解。
</p>
<p>
空白空间
</p>
<p>
在仔细使用视觉层次结构的所有步骤中，请确保留有空白。你需要给自己的内容呼吸空间。负空间是视觉设计的重要组成部分，对空间的定义与对空间的积极使用一样重要。空格通常被简单定义为“页面上各个内容之间的空间”，不过，这种额外的空间并不总是白色的，这导致更多的人称其为“负空间”。空白本质上使您能够决定正在构建的网站的哪些特定功能应优于其他功能。由于采用这种欢迎的布局方式，访问者更有可能在网站上停留更长的时间。空格为你提供了令人耳目一新的感觉，同时也突出了重要元素。太多的拥挤和混乱会把观众赶走，因为他们不明白什么是真正重要的。
</p>
<p>
人眼和扫描模式
</p>
<p>
人眼以可预测的方式工作。它们会自动吸引到某些兴趣点。其中一些确实取决于个人，但是大多数人会遵循特定的，可预测的趋势，即他们如何看待包括网站在内的所有内容。
</p>
<p>
F模式
</p>
<p>
这是大多数人用于博客或Wiki之类的文本大量网站的扫描模式。阅读器首先扫描页面左侧的垂直线，在段落的前几个句子中查找关键字或其他兴趣点。一旦读者发现有趣的东西，他或她就开始以水平线正常阅读文本。整体图案类似于字母F（或E）。
</p>
<p>
Z型
</p>
<p>
此扫描模式用于不在文本中心的页面。读者首先扫描页面顶部的水平线。这通常是由于菜单栏的缘故，但这也是从左到右阅读的习惯。一旦眼睛到达水平线的末端，它就会向左和向左移动，从左到右又是另一个阅读习惯，然后重新开始。图案类似于字母Z。这是在网站的可视层次结构中利用的有用模式。它满足了许多基本的网站设计要求：号召性用语，视觉层次结构和品牌。对于那些简单性是首要任务，而号召性用语是页面主要目的的时代，这确实非常重要。它为简单的网站带来了秩序感。但是，复杂的内容在Z模式下无法很好地工作，而F模式可能是更好的选择。
</p>
<p>
以下是一些最佳做法：分开你的背景，使观众的视线保持在视觉模式框架之内。徽标在左上方，右侧的可见位置很好看。Z模式中丰富多彩的辅助号召性用语可能对用户很有帮助。页面中央的特色图像滑块可帮助区分Z模式视觉路径的顶部和底部。在页面左侧添加图标，以指导人们进行号召性用语。视觉模式应以你的主要号召性用语结尾。了解视觉模式和人眼的自然运动可以帮助你安排网站设计以发挥最大优势。当你知道人们将要寻找的内容时，你可以安排信息，从而最好地吸引他们的注意力并指导他们要他们去的地方。
</p>
<p>
视觉层次结构是网页设计的重要组成部分。了解它是如何工作的，将使你可以创建尽可能有效的网站。它提供了组织内容的准则。看一下你看到的一些好的网页设计，看看他们如何使用它来有效地传达信息。本期深圳网页设计公司Angle就为大家分享到这里。
</p>
页:
[1]