我们都经历过信息过载。幻灯片太密集了。没有明确行动号召的网页。选项太多的表单。

Figma的设计师倡导者Miguel Cardona解释道：“如果一切看起来都一样，那么你什么也看不到。”。“视觉层次结构可以改变这一点。”

什么是视觉层次？

视觉层次结构是按重要性顺序排列元素的做法，目的是将用户的注意力引导到能够满足其需求的内容和工具上。什么首先引起他们的注意？那么它们看起来在哪里呢？用户是否采取了你想要的行动，并对结果感到满意

如果做得好，视觉层次结构可以帮助人们直观地理解信息。这就是观众如何通过一眼电影海报就能快速了解电影的内容、演员和上映日期。仔细观察，你可能会发现一些不那么关键的信息，比如它的评级和工作室隶属关系。

7个基本的视觉层次原则

视觉层次结构的灵感来自格式塔心理学，该心理学探讨了大脑如何从混乱中创造秩序，形成模式，并将不同的元素组合成一个统一的整体。

设计师运用八个关键的视觉层次原则来帮助大脑快速掌握想法。

1.对齐是指一个视觉元素相对于组中其他元素的放置。当对象对齐或排列时，它们被理解为彼此相关。

2.颜色通常用色调、亮度和饱和度来描述。然而，颜色可能很棘手，因为人们对它的看法非常不同。为了建立清晰的视觉层次，卡多纳在设计中指定了亮度和亮度。

3.对比是指明显不同的元素靠近在一起。设计师经常将温暖和凉爽的元素或互补的颜色并置，以增强视觉吸引力并提高可及性的对比度。

4.接近度描述物品之间的关系。将对象分组或“分块”就是这一原则的一个例子。

5.尺寸是指物体或设计元素的尺寸。按钮或内容等UI元素的大小可能是可访问性的重要考虑因素。卡多纳说：“如果你不为低视力用户提供在文本和图像大小上拥有代理权的机会，你就会让你的内容难以阅读和理解。”。

6.纹理是表面的感觉或UI元素的感觉。Cardona说：“纹理可以让你赋予设计意义，并可能有助于清晰地视觉指示如何使用。”。当UI设计师使用纹理来模仿触觉、现实生活中的材料的外观时，这被称为skeomorphism——除非小心处理，否则它可能会给人留下过时或字面的印象。卡多纳解释道：“在数字设计中，很多设计师都避免使用纹理，但它确实很有影响力。纹理可以用来创造高光，而不是依赖颜色。”

7.时间在屏幕上的展开方式不同于在印刷页面和静态产品上。屏幕可以改变、反应和变换，打开了一个时间设计的新世界