Web设计中的视觉层次结构是什么？

什么是视觉层次结构？ 

高效，智能的网页设计需要凝聚力清晰的视觉辅助工具，以便访问者可以快速轻松地访问他们所寻找的内容。网页设计中的视觉层次结构是指元素的排列或表示方式，它暗示着重要性并影响人眼感知所见事物的顺序。其背后的理论是，人脑具有“先天组织的趋势，将单个元素，形状或形式构造成一个连贯的，有组织的整体。”

重要的是要注意，在网页设计中，视觉层次结构需要与功能结合使用。换句话说，形式和功能需要完美协调。如果网站仅具有美观的外观，但缺乏功能，则访问者将无法回答CTA或购买产品，而是会转到符合其需求的竞争对手的网站。 

1991年8月6日，第一个网页上线。该网页由英国科学家蒂姆·伯纳斯·李（Tim Berners-Lee）创建，致力于万维网项目，“旨在使人们能够广泛访问大量文档。”单个页面由文本行和蓝色超链接组成。  

在整个1990年代，许多公司开始使用各种颜色，超链接和Flash动画创建自己的手工编码HTML网站。强烈希望在页面上添加尽可能多的信息，而不会在设计布局中添加任何押韵或理由。这些早期的网站以竞争图像，不匹配的颜色，字体和内容的拼贴为背景。不连贯的设计缺乏视觉层次感，使访客不确定首先要看的地方！   

F模式 

当我们的眼睛扫描网站时，层次结构顶部的图像和内容首先引起了我们的注意。研究表明，我们在互联网上以F形扫描模式阅读。我们倾向于选择阻力最小的路径，因此我们快速查看图像和内容以获得所需的信息。执行此操作时，我们的眼睛从网页的左上方扫描，然后向右移动，然后从左侧向下搜索以寻找视觉提示，然后再次向右，但是我们在右侧看到的内容少了一点每次我们向下扫描页面时。执行良好的Web设计会将最重要的信息放在F模式中，使读者可以在几秒钟内扫描图像并捕获关键字。 

设计中包含了执行良好的F形扫描图案的示例。此主页无缝地指导观众使用层次结构顶部中的清晰沟通和关键字。

英雄形象

视觉层次结构的另一种流行而有效的用法是在折叠上方放置一个大图像，称为“英雄图像”。该名称来源于电影界中使用的“ 英雄道具 ”一词，是指打算由主要演员持有或使用的任何物体。网页设计界开始使用“英雄”这个名字，随之而来的是“英雄形象”，它的受欢迎程度和规模都在增长-它会占用很多首页房地产。这是访问者看到的第一个视觉元素，显示了网站最重要内容的清晰概述。

尽管英雄形象席卷了网站设计界，但有趣的是，它与传统报纸版式的相似之处也很有趣。想想报纸的头版。它通常具有高对比度的图像，带有引人注意的大标题，后面是故事。英雄形象设计遵循了使用了多个世纪的视觉层次。  

合并视觉层次结构的6个技巧 ，设计网站时，以下是遵循视觉层次结构时要考虑的关键元素：

（1）尺寸 –大元素吸引眼球

（2）颜色 –鲜艳的色彩吸引眼球 

（3）对比 -强烈对比的色彩很容易吸引眼球

（4）对齐 –元素之间的空间吸引了更多关注

（5）空格 -眼睛被周围具有更多空间的元素所吸引

（6）纹理和样式 –丰富的纹理比平坦的纹理吸引更多关注

由于设计趋势似乎总是在回退，我们是否会回到90年代的混乱网页设计？让我们不要希望！许多早期站点的图像或演示文稿都没有连贯，清晰的安排。观察Web设计的发展以及在创建好坏设计之间视觉层次结构的重要性。