如何制作网页设计师想要了解的视觉层次规则

视觉层次结构（英文：Visual Hierarchy）对于良好的网页设计至关重要。它可以说是能有效实现网站目标的主要规则之一。





视觉层次结构背后有许多设计规则。这一次，我们将介绍网站所需的视觉层次设计规则。


设计是沟通手段之一。


设计的核心是视觉沟通。通过有吸引力的视觉效果，它将想法传达给其他人。而且，网页设计尤其适用。




因为看东西和思考的视觉沉思者（英语：Visual Thinker），人们无法很好地处理很多信息。这不仅仅是处理数据，只是看事情。我们正在组织从“视觉关系（英文：Visual Hierarchy）”的角度来看待我们所看到的。



关于视觉层次的思想












为什么我们看到的关系的东西被当作一个研究主题，继续生存是我们的远古祖先，但一些人类学家认为，狩猎采集民族的历史。




更实际的想法而不是学术的是大脑理解信息的机制。您可以将相似的元素分组并将其组织为简单用法的有意义的模式。如何组织信息并使用它是传达信息的一种非常有效的方式。



用于视觉层次结构的工具


我认为，据了解，视觉层次是传达信息的有用工具。那么你怎么真的把它表达为一个网页设计？




实际上，它是一个非常简单的工具，您可以通过学习如何正确使用它来轻松使用。


大小












较大的元素可以吸引最多的关注。考虑视觉层次结构时，情况也是如此，用户的注意力集中在一个更大的病人身上。




大小是构建视觉元素的最强大的工具之一。最大的元素总是一个重要的元素，而小元素通常是低优先级的元素。








视觉层次结构规则为组织内容提供了指导。让我们看看通过打开一个你认识的漂亮网站来传递信息的有效方式。

配色方案的颜色

 

颜色不仅可以用于组织，还可以用作为网页设计添加个性的工具。鲜明而强烈的对比色方案自然收集用户的关注和关注。

 

这种技术非常适用于按钮，超链接等。也可以享受更复杂的配色方案作为在设计中添加个性的工具。

 

有趣的，鲜艳的色彩，虽然声称颜色是令人兴奋的整个设计，沉稳的颜色被带到一个温柔的心情。颜色是一个非常重要的工具。或传达品牌形象（可口可乐红色或麦当劳黄色），也可以用作气氛（激情红）或符号。作为视觉层次的信息进行分类的方法，你可能要使用的颜色。

 

字形

 

创建视觉层次结构时，选择适合您设计的字体非常重要。除了字体本身之外，如何使用字体在这里很重要。您可以认为您使用的重量和样式与网站布局一样重要。

 

在组织信息时，重要的是让我们尝试各种字体的大小和厚度。斜体在某些情况下显示其力量。

 

通过使用各种尺寸，重量和字符空间，您可以在网站上创建字体层次结构。即使你只使用一种字体，也完全没有问题。

 

 

通过利用各种大小，权重和权重，我们不仅将注意力集中在更重要的元素上，而且还有助于创建更易于用户阅读和理解的更全面的网站结构。

 

保证金空间

在创建视觉层次结构规则时，让我们确保边缘空间是稳固的。这个被称为负空间（英国：负空间）的边缘区域对设计非常重要。

 

空白空间往往被认为是设计元素排列整齐的简单空间，但它并不总是白色的，因此调用负空间的人正在增加。

 

空白空间基本上可以使构建网站的特定功能比其他功能更加突出。你也可以强调重要的元素，并保持你的眼睛。如果你搞砸了，用户无法理解什么是重要的，并可能会混淆它。

 

人眼和扫描，扫描模式

 

由于人眼以可预测的方式移动，我们会自动注视特定的兴趣点。这取决于特定的模式，但它遵循许多人可以预测如何查看网站的特定模式。

 

F模式类型

这是一个包含许多文本文本的网站，例如博客和维基百科，大多数人使用的扫描和扫描模式。

 

首先，当您仔细查看页面左侧的垂直线时，用户会从第一段开始的几行搜索感兴趣的单词或关键字。

 

 

当用户找到有趣的内容时，开始水平读取文本文本。这个凝视运动和模式被命名，因为它类似于字母表的F（或E）。

 

 

Z模式类型

此扫描模式用于文本文本未居中的页面。用户首先在页面顶部水平扫描。这是因为导航菜单通常是安排好的，但从左到右阅读注视的习惯也是相关的。

 

当视线到达页面边缘时，移动到左下角，然后再次从左到右重复扫描。就像字母Z.

 

 

此模式对于利用网站的视觉层次规则也很有用，并且还支持基本的网站设计要求，例如“呼叫至动作”按钮的放置和品牌。

 

简单性是当务之急，它是鼓励用户采取行动的网页上非常有效的技术。但是，在复杂的内容中，这种Z模式类型不能很好地工作，因此可能需要采用F模式类型。

 

一些实践最佳实践总结

• 让我们通过削减背景来保持用户的视线范围内的视线。

• 通过在左上方放置一个徽标，它立即停在用户的眼睛中。

• 通过使用Z图案型彩色CTA按钮，收集用户的注视更加容易。

• 放置在页面中心的图像滑块可以在滑块前后分开Z图案类型的注视。

• 让我们在页面的左侧添加一个图标，并显示消息和单词以促使用户采取行动。

• 视觉模式应该以最重要的CTA按钮或消息终止。

 

通过了解人眼的视觉模式和自然运动，可以最大限度地利用网站设计。当你知道用户在寻找什么时，你可以通过组织信息来收集用户的注意力，并引导你看到你想看的内容。

 

 

到最后一刻。

 

视觉层次规则是网页设计的重要因素。通过了解你如何使用它，你将能够创建一个更有效的网站。

 

视觉层次结构规则为组织内容提供了指导。让我们看看通过打开一个你认识的漂亮网站来传递信息的有效方式。