UI设计中的视觉层次结构：如何有效地组织UI内容，提升用户体验？（文末领取UI版式书籍福利）
TOPIC:
UI · VISUAL
—
HIERARCHY
UI Design UX Design
Article：2022/04/23
Hi~，欢迎来到「交互设计新视觉系」技法专栏的第四期！
界面设计中的一个常见问题是过度使用分散在屏幕上的元素或组件，如果没有通过正确的层次结构放置，会导致导航混乱和更加费力。对这些元素进行优先排序对于避免这个问题很重要。
充分的视觉层次是成功数字产品的基础。它有助于以有效的方式组织UI元素，以便内容易于理解和令人愉悦。视觉元素的呈现对用户体验有很大的影响。如果组件组织得当，用户可以毫不费力地享受这个过程。
那么，是什么造就了强大的视觉层次？当然，不同类型的产品需要不同的构建方法，但仍然有一些通用的解决方案有助于UI内容的组织。本文提供了有关为网页和移动产品创建优质视觉层次结构的实用技巧：
什么是视觉层次？
视觉层次结构是应用于设计过程的核心技术之一。它最初是基于格式塔心理学理论，它检查了用户对相互关联的元素的视觉感知，并展示了人们如何倾向于将视觉元素统一到组中。
视觉层次致力于以这种方式呈现应用程序和网站的内容，以便用户能够理解每个元素的重要性级别。它组织 UI 组件，以便大脑可以根据对象的物理差异（例如大小、颜色、对比度、样式等）来区分对象。
排版层次结构
文案内容是任何UI设计的重要组成部分。这就是为什么视觉层次通常高度依赖于排版。专家们决定通过创建一个称为排版层次结构的单独视觉层次结构系统来强调文案演示的重要性。该系统旨在以用户感知的最佳方式组织文案内容。
设计师对字体进行修改和组合，以在最有意义和最突出的文案元素之间建立对比。通过调整大小、颜色和系列以及对齐方式来修改字体。
排版层次结构包括文案内容的不同元素，即标题、副标题、正文、号召性用语元素、标题和其他一些元素。为了构建有效的视觉层次结构，所有元素都需要分割成不同的层次：
主要。它是包括标题的最大的一类。旨在为用户提供核心信息，并引起人们对产品的关注。
次要。这是一种易于扫描的副本元素类型。它们通常涉及帮助用户快速浏览内容的子标题和说明文字。
第三级。正文和一些额外的数据构建了第三级。设计师经常使用相对较小的字体，但它应该保持足够的可读性。
文案内容通常是 UI 中的主要信息来源。通过将文案元素分割成不同的层次，设计师可以帮助用户轻松地从一个文案转到另一个文案，并以正确的顺序感知信息。
还要一提的是，在为移动产品创建排版时，建议设计师将层数保持在两层以内。小型移动屏幕无法为三个级别提供足够的空间。这就是为什么诸如副标题之类的二级元素要放在一边以使移动 UI 看起来干净。
视觉层次结构工具？
当设计师已经选择了所有内容组件时，让我们找出什么可以帮助设计师设置UI组件的有效视觉层次结构：
1.尺寸
视觉层级转换最强大的工具之一是尺寸。元素越大，就越会吸引注意力。人们会首先看到更大的物体，这包括文本和图像。使用尺寸层次背后的想法是为开始视觉之旅提供一个焦点。
如果从一个文本到另一个文本的跳跃较小，例如从 32pt 到 24pt，可能会使阅读顺序更加困难。这可能会创建效率较低的层次结构。
重要元素太大同样没有必要。造成不必要的不平衡最终会使设计的其余部分黯然失色，并导致其他信息在阅读中丢失。就像设计中的其他一切一样，平衡是关键。
2.颜色
在之前的推文中，我们已经介绍过颜色对用户的感知有很大的影响，这也是它作为视觉层次创建的有效工具的原因。
明亮的色彩比柔和的色彩更突出。红色、橙色和黑色等大胆的颜色容易引起注意，白色和奶油色等较弱或柔和的颜色作为背景效果更好。
设计师可以使用不同颜色支持UI元素的层次结构。例如，如果其他 UI 元素是在更柔和的调色板中创建的，那么强烈颜色的 CTA 按钮会是用户看到的第一个元素。
3.邻近
正如我们一开始所说，视觉层次是建立在格式塔原则之上的，因此设计师非常关注UI元素的邻近性。
如果某些元素被放置在一定的距离，用户会自动将它们视为一个组。设计师可以使用邻近作为一种工具，帮助划分内容类别。
4.重复
如果人们注意到某些元素看起来相似，他们可能会自动将它们统一为一组。这就是重复的工作原理。
重复的样式给人的印象是元素是相关的。这种类型的层次结构包括在界面中用相同或相似的元素。在界面设计中，重复在整个体验中创造了一种统一感和一致性。
例如，一个页面上有大量正文的网站可以用另一种颜色突出最重要的句子，看到这种颜色的句子，我们的眼睛可以从一个关键点跟踪到另一个关键点。
基于视觉模式，重复也提供了一些优势，如果某件事被重复，那是因为它很重要。
5.对齐
任何与其他元素对齐的元素都会引起注意。这是因为对齐在元素之间创建了顺序，此规则的任何更改都会引起人类视觉的兴趣，因此会显著突出。
元素的对齐对于在界面设计中创建视觉连贯性非常重要，因为它允许为屏幕上的元素分配相关性，并确定特定元素的开始和结束，无论是交互的还是信息的。
人脑喜欢模式，这就是为什么许多最好的网站都是对称的。这让我们有机会打破这个规则，从战略上将用户的注意力吸引到一个特定的点上。用户将能够根据它们的对齐或未对齐来关联这些元素。
6.负空间
负空间是创建视觉层次的有效工具。它是一种能够使所有用户界面元素在用户眼中引人注目的工具。
具有大量封闭元素的设计会导致界面饱和，并且没有层次结构来指示哪个元素更重要，从而导致用户感到困惑和不知所措。
元素周围的空间越大，它产生的注意力就越多。负空间是显示空白画布的区域，它不仅可以在同一元素周围找到，还可以在同一元素之间和内部找到。
7.质地
多变和复杂的纹理比平面纹理更受关注。这是因为复杂总是比简洁更能吸引用户的注意力。纹理的使用还融入了其他重要的设计元素，如风格和氛围。
这个资源应该以有剂量的方式使用，因为纹理的滥用最终会分散注意力。平衡是关键。
视觉层次结构是有效信息架构的基础。当 UI 元素被结构化和组织时，人们会喜欢使用产品，产品会更有效地解决用户的问题。
视觉层次是我们指导用户体验、提升设计标准和实现界面目标的直接途径的最佳武器之一。
参考来源：Leonardo Moreno / tubik
（部分图文来自网络，若有侵权，请联系删除。）
福利时刻
扫码添加小助手微信
领取 UI版式书籍 ~
帮助大家做出更好的设计~
加入社群，解锁更多惊喜！
往期推荐 | READ MORE
UI中的色彩设计（二）：正确地选择颜色和使用颜色配比！（文末领取实用色彩工具和精美色卡）
UI设计中的色彩学（一）：如何使用色彩提升用户体验？（文末领取精选配色）
技法干货：渐变这样做才更美！（文末领取绝美矢量渐变礼包~）
文字丨Jelly
编辑丨Jelly
如果觉得我们做的还不错点个赞和在看吧！：）