[img=800,600]http://photoshopvip.net/wp-content/uploads/2017/11/visual-hierarchy-technique.jpg" border="0" alt="" />
视觉层次结构（英文：Visual Hierarchy）对于良好的网页设计至关重要。它可以说是能有效实现网站目标的主要规则之一。
视觉层次结构背后有许多设计规则。这一次，我们将介绍网站所需的视觉层次设计规则。
设计是沟通手段之一。
设计的核心是视觉沟通。通过有吸引力的视觉效果，它将想法传达给其他人。而且，网页设计尤其适用。
因为看东西和思考的视觉沉思者（英语：Visual Thinker），人们无法很好地处理很多信息。这不仅仅是处理数据，只是看事情。我们正在组织从“视觉关系（英文：Visual Hierarchy）”的角度来看待我们所看到的。
关于视觉层次的思想[img=850,437]http://photoshopvip.net/wp-content/uploads/2017/11/visual-hierarchy-01-1.jpg" border="0" alt="" />
为什么我们看到的关系的东西被当作一个研究主题，继续生存是我们的远古祖先，但一些人类学家认为，狩猎采集民族的历史。
更实际的想法而不是学术的是大脑理解信息的机制。您可以将相似的元素分组并将其组织为简单用法的有意义的模式。如何组织信息并使用它是传达信息的一种非常有效的方式。
用于视觉层次结构的工具
我认为，据了解，视觉层次是传达信息的有用工具。那么你怎么真的把它表达为一个网页设计？
实际上，它是一个非常简单的工具，您可以通过学习如何正确使用它来轻松使用。
大小[img=850,456]http://photoshopvip.net/wp-content/uploads/2017/11/visual-hierarchy-02-1.jpg" border="0" alt="" />
较大的元素可以吸引最多的关注。考虑视觉层次结构时，情况也是如此，用户的注意力集中在一个更大的病人身上。
大小是构建视觉元素的最强大的工具之一。最大的元素总是一个重要的元素，而小元素通常是低优先级的元素。
配色方案的颜色[img=850,10]http://photoshopvip.net/wp-content/uploads/2017/11/visual-hierarchy-03-1.jpg" border="0" alt="" />
颜色不仅可以用于组织，还可以用作为网页设计添加个性的工具。鲜明而强烈的对比色方案自然收集用户的关注和关注。
这种技术非常适用于按钮，超链接等。也可以享受更复杂的配色方案作为在设计中添加个性的工具。
有趣的，鲜艳的色彩，虽然声称颜色是令人兴奋的整个设计，沉稳的颜色被带到一个温柔的心情。颜色是一个非常重要的工具。或传达品牌形象（可口可乐红色或麦当劳黄色），也可以用作气氛（激情红）或符号。作为视觉层次的信息进行分类的方法，你可能要使用的颜色。
字形[img=850,10]http://photoshopvip.net/wp-content/uploads/2017/11/visual-hierarchy-04-1.jpg" border="0" alt="" />
创建视觉层次结构时，选择适合您设计的字体非常重要。除了字体本身之外，如何使用字体在这里很重要。您可以认为您使用的重量和样式与网站布局一样重要。
在组织信息时，重要的是让我们尝试各种字体的大小和厚度。斜体在某些情况下显示其力量。
通过使用各种尺寸，重量和字符空间，您可以在网站上创建字体层次结构。即使你只使用一种字体，也完全没有问题。
[img=850,10]http://photoshopvip.net/wp-content/uploads/2017/11/visual-hierarchy-05-1.jpg" border="0" alt="" />
通过利用各种大小，权重和权重，我们不仅将注意力集中在更重要的元素上，而且还有助于创建更易于用户阅读和理解的更全面的网站结构。
保证金空间在创建视觉层次结构规则时，让我们确保边缘空间是稳固的。这个被称为负空间（英国：负空间）的边缘区域对设计非常重要。
[img=850,10]http://photoshopvip.net/wp-content/uploads/2017/11/visual-hierarchy-06-1.jpg" border="0" alt="" />
空白空间往往被认为是设计元素排列整齐的简单空间，但它并不总是白色的，因此调用负空间的人正在增加。
空白空间基本上可以使构建网站的特定功能比其他功能更加突出。你也可以强调重要的元素，并保持你的眼睛。如果你搞砸了，用户无法理解什么是重要的，并可能会混淆它。
人眼和扫描，扫描模式
由于人眼以可预测的方式移动，我们会自动注视特定的兴趣点。这取决于特定的模式，但它遵循许多人可以预测如何查看网站的特定模式。
F模式类型这是一个包含许多文本文本的网站，例如博客和维基百科，大多数人使用的扫描和扫描模式。
首先，当您仔细查看页面左侧的垂直线时，用户会从第一段开始的几行搜索感兴趣的单词或关键字。
[img=850,10]http://photoshopvip.net/wp-content/uploads/2017/11/visual-hierarchy-07-1.jpg" border="0" alt="" />
当用户找到有趣的内容时，开始水平读取文本文本。这个凝视运动和模式被命名，因为它类似于字母表的F（或E）。
Z模式类型此扫描模式用于文本文本未居中的页面。用户首先在页面顶部水平扫描。这是因为导航菜单通常是安排好的，但从左到右阅读注视的习惯也是相关的。
当视线到达页面边缘时，移动到左下角，然后再次从左到右重复扫描。就像字母Z.
[img=850,10]http://photoshopvip.net/wp-content/uploads/2017/11/visual-hierarchy-08-1.jpg" border="0" alt="" />
此模式对于利用网站的视觉层次规则也很有用，并且还支持基本的网站设计要求，例如“呼叫至动作”按钮的放置和品牌。
简单性是当务之急，它是鼓励用户采取行动的网页上非常有效的技术。但是，在复杂的内容中，这种Z模式类型不能很好地工作，因此可能需要采用F模式类型。
一些实践最佳实践总结
- 让我们通过削减背景来保持用户的视线范围内的视线。
- 通过在左上方放置一个徽标，它立即停在用户的眼睛中。
- 通过使用Z图案型彩色CTA按钮，收集用户的注视更加容易。
- 放置在页面中心的图像滑块可以在滑块前后分开Z图案类型的注视。
- 让我们在页面的左侧添加一个图标，并显示消息和单词以促使用户采取行动。
- 视觉模式应该以最重要的CTA按钮或消息终止。
通过了解人眼的视觉模式和自然运动，可以最大限度地利用网站设计。当你知道用户在寻找什么时，你可以通过组织信息来收集用户的注意力，并引导你看到你想看的内容。
到最后一刻。
视觉层次规则是网页设计的重要因素。通过了解你如何使用它，你将能够创建一个更有效的网站。
视觉层次结构规则为组织内容提供了指导。让我们看看通过打开一个你认识的漂亮网站来传递信息的有效方式。
粤公网安备 44030902001796号 粤ICP备19041343号-3
签到成功
全部评论()