清晰的视觉层次结构提升你的用户体验

本文概述

• 定义用户体验和品牌目标
• 为清晰的视觉层次排列操作和内容
• 将视觉层次结构构建到设计系统中
• 本文总结

自从互联网成为遥远的幻想以来, 视觉层次结构的概念就已应用到设计中, 它在现代产品设计中与印刷广告的顶峰一样重要。

视觉层次结构决定了人们在页面上接受和处理信息的顺序, 无论它是数字形式还是印刷形式。这是创造最佳用户体验的重要组成部分。

耐克在1970年代对今天的耐克。两者都受益于清晰的视觉层次感。

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

这是创造有序, 有目的的客户体验, 同时提高达成战略成果的机会的非常有用的方法。

UX设计人员可以采取一些步骤来实现数字产品中清晰的视觉层次感, 并将客户体验提升到一个新的水平。

定义用户体验和品牌目标

许多产品团队已经使用各种方法来为其产品的每个部分定义UX目标。

通过满足S.M.A.R.T.的标准来塑造UX目标的定义方法(特定, 可测量, 可操作, 相关, 可跟踪)是一种流行的方法。这里有一篇很好的文章。

品牌目标同样重要。这些都从品牌和商业角度反映了企业的总体目标。汽车服务登录页面的品牌目标示例包括：a)将品牌确立为优质服务, 以及b)鼓励搜索汽车。

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

使用Milanote甚至Sketch等广泛协作的工具, 以大致的时间顺序排列原型屏幕。邀请主要从业人员参加在线或物理会议, 并确保从用户体验和品牌角度都具有代表性。

然后进行屏幕共享(或插入显示器), 然后开始注释！

该项目首先概述了讲习班的目标, 然后根据实际假设直接研究了先前准备的预先填充的注释。

这将启动为客户体验的每个部分确定用户体验和品牌目标的过程, 并启动可在整个设计过程的整个过程中加以利用的战略工作流。

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

现在已经有了UX和品牌目标, 现在该定义每个动作或内容的适当视觉层次, 并记录下来以供后续设计工作参考。

首先, 需要分类法。最好使用1到3的比例尺-1是最重要的, 3是最小的。

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

在此示例中, 用户体验目标是”我想进一步了解该品牌的服务, 以确定它是否符合我的预算, 需求和偏好。”品牌目标是a)将品牌确立为优质服务, b)鼓励搜索汽车。

有鉴于此, 品牌信息”从500余辆汽车中找到你的理想汽车”已被指定为1等级, 并附带表格和CTA。

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

辅助内容标记为3, 这似乎违反直觉。但是, 它遵循着逐渐形成的叙述流程, 以品牌消息传递和”入门”功能为主要焦点, 然后是徽标和导航来建立服务的高级标识和结构, 然后是支持内容。放心, 提供背景信息并激励客户。

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

将视觉层次结构构建到设计系统中

现在已经设定了目标和视觉层次结构等级, 可以创建将其变为现实的视觉语言。假设已经有一个设计系统(如果没有, 那么应该先做！)并且已经设计了一系列UI元素。

首先要开始的是合成-必要模板的布局。考虑排名较高的元素应出现在何处(如前所述, 并非总是最期望的)。可能需要进行多种更改才能适应多种情况。为了确保以后在项目中不会忽略任何内容, 设计人员应该花点时间立即创建它们。

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

在此示例中, 核心品牌消息被认为是页面上最重要的内容, 由导航栏支持, 然后是上下文帮助和支持服务。

一旦建立了广泛的构想, 就可以开始创建UI元素的变体。

拿不起眼的页面标题。在这个来自人力资源咨询公司的最新项目的示例中, 设计系统中存在三种变体, 以适应视觉层次结构的不同等级。

页面标题的视觉设计反映了它们的层次结构, 其中最重要的是结合了摄影和图像来吸引人们的注意。

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

“钱栏”概述已设计为位于其余内容(垂直和3D方向)上方, 以使其成为用户首先要注意的元素。

视觉层次结构可以设计成品牌视觉语言的几乎每个元素：组成, 字体, 深度, 图像, 图标和语气。设计越深入, 客户体验就越具有凝聚力和针对性。

本文总结

将视觉层次结构工作流程纳入设计过程可带来更好的用户体验。它通过为设计师提供一种为不同类型的内容分配等级的方法来实现这一目标, 从而使用户界面不仅感觉井然有序, 而且直观, 而且可以满足核心品牌目标。

清晰的视觉层次结构不仅可以提高用户体验, 还可以建立可持续的工作流, 从而使设计过程具有战略重点-在现代产品设计环境中必不可少。

• • •

在srcmini设计博客上进一步阅读：

• 设计原理：层次结构简介
• UI设计最佳做法和常见错误
• 探索格式塔设计原理
• 信息架构综合指南
• 这些成功的交互设计原则可提升你的用户体验