什么是视觉层次

我们都经历过信息过载。幻灯片太密集。没有明确号召性用语的网页。选项太多的表格。

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

figma-7d7l42" style="box-sizing: inherit; cursor: var(--cursorText); margin: 32px 0px 16px; font-weight: 500; font-size: var(--h2-fs); line-height: var(--h2-lh); letter-spacing: var(--h2-ls); position: relative; font-family: Whyte, sans-serif; text-wrap: wrap; background-color: rgb(255, 255, 255);">什么是视觉层次？

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

如果做得好，视觉层次结构可以帮助人们直观地理解信息。这样观众只需看一眼电影海报就能快速了解电影的内容、主演以及上映日期。仔细观察，您可能会发现不太重要的信息，例如其评级和工作室隶属关系。

figma-7d7l42" style="box-sizing: inherit; cursor: var(--cursorText); margin: 32px 0px 16px; font-weight: 500; font-size: var(--h2-fs); line-height: var(--h2-lh); letter-spacing: var(--h2-ls); position: relative; font-family: Whyte, sans-serif; text-wrap: wrap; background-color: rgb(255, 255, 255);">7 个基本的视觉层次原则

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

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

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

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

3.对比是指明显不同的元素靠得很近。设计师经常并置暖色和冷色元素或互补色，以增强视觉吸引力并提高对比度以实现可访问性。

4.接近度描述了项目彼此之间的距离有多近或多远。对对象进行分组或“分块”是这一原则的实际应用的一个例子。

5.尺寸是指物体或设计元素的尺寸。按钮或内容等 UI 元素的大小可能是可访问性的重要考虑因素。“如果您不为弱视用户提供决定文本和图像大小的机会，您的内容就会变得难以阅读和理解，”卡多纳说。

6.纹理是表面的感觉或 UI 元素被感知的方式。“纹理可以让你赋予设计意义，并且可以帮助提供清晰的视觉指示，说明如何使用某物，”卡多纳说。当 UI 设计师使用纹理来模仿现实生活中触觉材料的外观时，这被称为拟物化，除非小心处理，否则它可能会显得过时或字面意思。“在数字设计中，许多设计师都避免使用纹理，但它确实具有影响力，”卡多纳解释道。“纹理可以用来创建亮点，而不是依赖颜色。”

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

figma-7d7l42" style="box-sizing: inherit; cursor: var(--cursorText); margin: 32px 0px 16px; font-weight: 500; font-size: var(--h2-fs); line-height: var(--h2-lh); letter-spacing: var(--h2-ls); position: relative; font-family: Whyte, sans-serif; text-wrap: wrap; background-color: rgb(255, 255, 255);">受启发的视觉层次结构示例

Cardona 最喜欢的视觉层次结构例子是Massimo和Lella Vignelli的作品。

“维涅利夫妇及其作品的特点在于他们运用规模和等级制度的方式。他们的工作是独一无二的，”卡多纳说。

“维格内利斯夫妇设计了书籍、印刷海报、空间、家具——所有这些都具有这种规模的相互作用，根据你与该物体的关系，了解有适合你的东西。对于与设计的每一个距离，都有一个接合点。”

您可以在这里浏览 Vignelli 档案。在 Figma 上，社区还通过Figma 设计资源向 Vignelli 的遗产致敬。

figma-7d7l42" style="box-sizing: inherit; cursor: var(--cursorText); margin: 32px 0px 16px; font-weight: 500; font-size: var(--h2-fs); line-height: var(--h2-lh); letter-spacing: var(--h2-ls); position: relative; font-family: Whyte, sans-serif; text-wrap: wrap; background-color: rgb(255, 255, 255);">5 个视觉层次专业技巧

根据他教学设计和创建 Figma 设计资源的经验，Cardona 分享了关于视觉层次结构的五个要点。

1. 了解您的最终用户及其背景。您可能正在为移动设备设计视觉层次结构，但该设备在特定的空间和时间位于某人的手中。“他们的用户是匆忙的，还是能够在闲暇时仔细阅读内容？他们的左手拿着一个孩子，右手拿着一袋杂货吗？”卡多纳问道。“设计师可能会忘记个人试图理解他们的等级制度的背景。我们假设每个人与手机的距离相同，但是当其他因素在起作用时会发生什么？”

2. 媒介很重要。卡多纳说，在创建视觉层次结构时，媒介决定了哪些原则在实际实践中最有用。例如，当涉及广告牌或移动应用程序时，规模将是设计中最重要的因素之一。

3. 提出问题、实验、测试和迭代。不要害怕大胆尝试新事物，因为当一切看起来都一样时，就没有什么引人注目的了。卡多纳表示，数字设计在创意迭代和 Beta 测试中蓬勃发展。一旦您的作品被发布，您将开始看到人们如何与其交互，创建一个反馈循环，激发进一步的优化。

4. 一点点就大有帮助。“通常，人们试图做得太多，”卡多纳观察到。“了解必要的内容可能会发现更好的解决方案。” 他说，有效地使用空白或负空间是苹果和谷歌长期使用的策略，值得重新审视。

5. 考虑渐进式披露。渐进式披露是用户体验设计师用来将信息或步骤分解为更容易理解的块的技术。通过对多个屏幕上的内容进行排序，该方法降低了人们对眼前的内容感到不知所措的可能性。“这是所有设计师都需要努力的事情，”卡多纳说。

figma" class="figma-7d7l42" style="box-sizing: inherit; cursor: var(--cursorText); margin: 32px 0px 16px; font-weight: 500; font-size: var(--h2-fs); line-height: var(--h2-lh); letter-spacing: var(--h2-ls); position: relative; font-family: Whyte, sans-serif; text-wrap: wrap; background-color: rgb(255, 255, 255);">使用 Figma 抢占视觉层次结构

当您从事下一个设计项目时，Figma 的视觉层次提示和技巧将帮助您更有效地沟通。

Figma 的一体化设计平台简化了与在线白板的协作，该白板专为研究、集思广益、设计、测试和轻松切换而构建。小部件、便签和模板让您的设计一步步变得栩栩如生。

使用 Figma 探索视觉层次结构。