自从互联网还是一个遥远的幻想以来，视觉层次的概念就一直应用于设计中, 它在现代产品设计中的重要性不亚于印刷广告的鼎盛时期.

视觉层次结构决定了人们在页面上接收和处理信息的顺序, 不管是电子的还是印刷的. 这是创造最佳用户体验的关键部分.

简单地说，清晰的视觉层次感引导人们走向重要的内容或行动. 在平面广告中, 这就是带子, 而在数字产品中, 它可以是品牌信息或主要的行动呼吁.

这是一种非常有用的方式，可以创造有序和有目的的客户体验，同时提高实现战略成果的机会.

这里有几个步骤 用户体验设计师 如何在数字产品中实现清晰的视觉层次，并将客户体验提升到一个新的水平.

定义用户体验和品牌目标

使用多种方法, 许多产品团队已经为他们产品的每个部分定义了用户体验目标.

塑造的定义 用户体验目标 满足S的条件.M.A.R.T. 方法(S具体, Measurable, Actionable, R《, TRackable)是一种流行的方法. 有一篇关于它的好文章 在这里.

品牌目标同样重要. 从品牌和商业的角度来看，这些都反映了企业的总体目标. 汽车服务登陆页的品牌目标的一个例子是:a)将品牌建立为优质服务, b)鼓励汽车搜索.

记录客户旅程各个阶段的用户体验和品牌目标的最简单和最有效的方法是运行一个协作的视觉层次研讨会.

使用广泛的协作工具，例如 Milanote，甚至是Sketch，按照大致的时间顺序排列原型屏幕. 邀请关键从业者参加在线或实体会议, 确保从用户体验和品牌的角度呈现.

然后，共享屏幕(或插入监视器)，并开始注释!

这开启了为客户体验的每个部分确定用户体验和品牌目标的过程，并启动了一个可以在其余设计过程中利用的战略工作流程.

为清晰的视觉层次排列动作和内容

现在，用户体验和品牌目标已经到位, 现在是时候为每个动作或内容和文档定义适当的视觉层次结构，以便在随后的设计工作中参考.

首先，需要一个分类法. 最好使用1到3的量表——1是最重要的，3是最不重要的.

使用前面介绍的宽画布格式, 开始协作地注释原型布局.

在这个例子中，用户体验目标是“我想多了解一下这个品牌的服务，看看是否符合我的预算, 需要, 和偏好.“品牌的目标是:a)将品牌建立为一种优质服务, b)鼓励汽车搜索.

鉴于此，品牌信息 从500多辆车中找到你的理想车 已被指定为1级，随附的表格和CTA也是如此.

尽管它对总体客户体验很重要, 实际的标志(和导航)被分配为2, 因为它在满足用户体验和品牌目标方面没有发挥太大的作用.

支持内容被标记为3，这似乎违反直觉. 然而, 它遵循着开始成形的叙述流程, 以品牌信息和“入门”功能为主要焦点, 然后通过logo和导航来建立优质的服务标识和结构, 然后对配套内容进行安抚, 提供上下文, 激励顾客.

As 设计师 习惯于考虑视觉层次, 我们很容易开始欣赏它所揭示的叙事可能性, 为用户界面和故事添加真正的深度.

在设计系统中建立视觉层次结构

现在目标和视觉层次排名已经设置好了, 将他们带入生活的视觉语言是可以创造出来的. 假设已经有一个 设计系统 在适当的地方(如果没有，应该首先这样做)!)，并且已经设计了一系列UI元素.

首先要做的是组合——必要模板的布局. 考虑高排名元素应该出现在哪里(如前所述), 这并不总是最令人期待的). 可能需要多种变体来满足各种场景. 确保在以后的项目中没有任何遗漏, 设计师现在就应该花时间去创造它们.

在后来的设计过程中, 设计系统文档中可以包含许多示例模型, 带有UI模式的实时符号(因此从事该项目的设计师拥有最新版本).

一旦对作文有了一个大致的认识, 可以开始创建UI元素的变体.

以不起眼的页眉为例. 下面这个例子来自最近一个人力资源咨询公司的项目, 在设计系统中有三种变体，以满足不同等级的视觉层次.

设计师可以在此基础上扩展UI的构建模块. 例如, 在最近一个热门招聘应用的项目中, 深度是用来区分内容面板的——深度越大, 视觉层次越高.

视觉层次可以被设计成品牌视觉语言的每一个元素:构图, 排版, 深度, 图像, 图解, 还有说话的语气. 设计越深入，用户体验就越有凝聚力，越集中.

总结

在设计过程中结合视觉层次工作流程可以带来更好的用户体验. 它通过为设计师提供一种为不同类型的内容分配等级的方法来做到这一点, 因此，用户界面不仅感觉有序和直观，而且可以实现核心品牌目标.

清晰的视觉层次不仅能提升你的用户体验, 它还设置了一个可持续的工作流程，使设计过程具有战略重点，这在现代产品设计环境中是必不可少的.