通过清晰的视觉层次提升您的用户体验

已发表: 2022-03-11

自从互联网是一个遥远的幻想以来，视觉层次的概念就已应用于设计，它在现代产品设计中与平面广告的顶峰一样重要。

视觉层次决定了人们在页面上获取和处理信息的顺序，无论它是数字的还是印刷的。这是创建最佳用户体验的重要组成部分。

简而言之，清晰的视觉层次感引导人们走向重要的内容或行动。在平面广告中，这将是标语，而在数字产品中，它可能是品牌信息或主要的号召性用语。

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

以下是用户体验设计师可以采取的几个步骤，以在数字产品中实现清晰的视觉层次感，并将客户体验提升到一个新的水平。

定义用户体验和品牌目标

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

通过满足 SMART 方法的标准（特定、可衡量、可操作、相关、可移动）来塑造用户体验目标的定义是一种流行的方法。这里有一篇很好的文章。

同样重要的是品牌目标。这些从品牌和商业角度反映了企业的总体目标。汽车服务登陆页面的品牌目标示例如下：a) 将品牌打造为优质服务，b) 鼓励汽车搜索。

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

使用诸如 Milanote 甚至 Sketch 之类的大画布协作工具，按大致时间顺序布置原型屏幕。邀请关键从业者参加在线或实体会议，确保从用户体验和品牌角度都有代表。

然后，屏幕共享（或插入显示器），并开始注释！

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

现在用户体验和品牌目标已经到位，是时候为每个动作或内容定义适当的视觉层次结构，并将其记录下来以供后续设计工作参考。

首先，需要一个分类法。最好使用 1 到 3 的等级——1 是最重要的，3 是最不重要的。

使用前面介绍的广泛画布格式，开始协作注释原型布局。

在这个例子中，有一个用户体验目标“我想更多地了解这个品牌的服务，以确定它是否符合我的预算、需求和偏好。” 品牌目标是 a) 将品牌打造为优质服务，以及 b) 鼓励汽车搜索。

有鉴于此，品牌信息“从 500 多辆汽车中找到您的理想汽车”的层次结构为 1，随附的表格和 CTA 也是如此。

尽管它对总体客户体验很重要，但实际的徽标（和导航）已被指定为 2，因为它在满足用户体验和品牌目标方面发挥的作用并不大。

支持内容被标记为 3，这可能看起来违反直觉。然而，它坚持开始形成的叙述流程，以品牌信息和“开始”功能为主要重点，然后是标识和导航来建立服务的优质身份和结构，然后是支持内容让客户放心，提供背景信息并激励客户。

随着设计师习惯于考虑视觉层次，很容易开始欣赏它所揭示的叙述可能性，为用户界面和他们讲述的故事增添真正的深度。

现在目标和视觉层次排名已经确定，可以创建将它们带入生活的视觉语言。让我们假设已经有一个设计系统（如果没有，这应该首先完成！）并且已经设计了一系列 UI 元素。

首先要开始的是构图——必要模板的布局。考虑高排名元素应该出现在哪里（如前所述，它并不总是最值得期待的）。可能需要多种变化来满足一系列场景。为确保项目后期没有任何遗漏，设计师现在应该花时间创建它们。

在设计过程的后期，设计系统文档中可以包含一些示例模型，以及 UI 模式的实时符号（因此从事该项目的设计师拥有最新版本）。

一旦确定了构图的广泛概念，就可以开始创建 UI 元素的变体。

以不起眼的页眉为例。在这个来自人力资源咨询公司最近项目的示例中，设计系统中有三个变体，以适应不同等级的视觉层次。

设计人员可以使用其 UI 的构建块对此进行扩展。例如，在最近一个流行的招聘应用程序项目中，深度被用来区分内容面板——深度越大，视觉层次越高。

视觉层次几乎可以设计到品牌视觉语言的每个元素中：构图、排版、深度、图像、图像和语调。设计越深入，客户体验就越有凝聚力和重点。

将可视化层次结构工作流程融入设计过程可显着改善用户体验。它通过为设计师提供一种为不同类型的内容分配等级的方法来实现这一点，从而使用户界面不仅感觉有序和直观，而且还可以实现核心品牌目标。

清晰的视觉层次不仅可以提升您的用户体验，还可以设置可持续的工作流程，为设计过程提供战略重点——这在现代产品设计环境中是必不可少的。

• • •