看过很多描述用户体验五个层次的文章，但感觉很多都比较肤浅，今天我结合十余个案例，对用户体验做了一个相对全面的阐述，希望大家在阅读的时候也能有同样的发现，对比和论证相关产品，一定会收获颇丰。

1. 概述

用户体验设计就是“以用户为中心的设计”，即营造一种“一切都按正确的方式运作”的用户体验，让用户感到宾至如归，就像《别逼我》里提到的“这样才对”。会让用户感觉更聪明，更能把握全局，从而成为常客。大师围绕“以用户为中心的设计”总结出了一套产品设计思维方法：从抽象到具体分解成五个层次，包括策略层、范围层、结构层、框架层、展现层，最终达到用户体验设计的目的。

2. 五个级别

1.战略层面

战略层的制定决定了产品的基本方向，它是以企业目标为中心，根据产品目标和用户需求制定的。

（1）产品目标

产品目标是指企业希望通过产品实现什么目标，主要从三个方面来衡量：商业目标、品牌定位、成功标准。下面以支付宝蚂蚁森林为例。

（2）用户需求

用户需求是指用户希望从产品中得到什么。战略层面的一个重要任务就是确定用户需求，主要包括用户细分和用户研究两个方面。

用户细分方法：通过用户细分构建完整的用户画像

用户研究方法：通过用户研究来确认用户需求。

创建角色：也称为用户模型或用户配置文件，这些是代表真实用户需求的虚构人物。

把用户调研、用户分群得到的零散数据重新串联起来，给角色赋予一张脸、一个名字，创造出一个代表真实用户需求的虚构人物。我们依然以蚂蚁森林为例：

2. 范围层

在制定了战略层之后，我们对“企业希望从产品中得到什么”和“用户希望从产品中得到什么”有了更清晰的认识，接下来就是对已经确认的需求进行进一步的分解和细化，确定优先级，思考要为用户提供什么功能和内容。

（1）功能要求

功能方面主要考虑满足用户哪些具体的需求，需求大致可以分为三类：分散需求、基础需求、潜在需求。

比如我在之前的文章《从一个馒头的诞生谈产品工作流程》中提到过：一个北方人想装第三只手，因为他可以一手拿着馒头，一手夹菜，一手写作业。这是分散注意力。因为他的根本需求是边吃饭边写作业，而有很多更好的方式可以实现，比如把馒头和菜整合到馒头里。可以一手拿着馒头，一手写作业，而不是装第三只手。通过这个需求，我们发现潜在的需求是提高写作业的效率，而不一定占用吃饭时间。

（2）内容要求

内容类型需要与功能需求协调融合，才能有效收集和管理内容资源。内容包括但不限于音频、视频、图片和文字。你想要实现的内容特性的规模会影响你提供的用户体验。我们举个例子，下面是一个基金排行榜，先展示所有月度排行榜，展示内容的重点是各基金近一周、近一个月的涨跌数据，近一个月涨跌按降序排列。

（3）确定优先事项

范围级决策一个重要的任务就是确定优先级，调研过程中会发现大量的用户需求，有时候一个战略目标会对应多个需求，一个需求又会对应多个功能，但在快节奏的互联网环境下，留给产品上线或者迭代的时间非常有限，我们必须学会确定功能开发的优先级，快速迭代。

（4）功能规格

我喜欢一句话：文档不能解决问题，定义可以。功能规范不需要包含产品的每个细节——它们只需要包含在设计或开发过程中可能令人困惑的功能定义，主要包括以下几点：以下是一些规则：全面但不细致入微、表达积极、具体、避免主观语气。这也是 PRD 文档的一部分。我稍后会写一篇文章详细讲述 PRD 文档的内容，因此我在这里就不多说了。

3.结构层

结构层是将范围层中分散的需求/功能片段组合成一个整体。

（1）交互设计

交互设计主要考虑功能性，侧重于描述“可能的用户行为”，定义“系统如何配合和响应”这些用户行为。交互设计是一个很大的课题，可以参见我其他的专题文章。主要目的是讲解概念模型。概念模型是用户习惯性思维中“交互组件将如何工作”的思维模型。最常举的例子就是电商平台购物：选择商品-放入/移出购物车-结账-订单和发票。不仅是电商产品，大多数互联网产品的概念模型都可以映射到现实生活中，比如滴滴出现之前人们的打车行为，美团出现之前商家的促销行为。

（2）信息架构

内容方面主要考虑的是信息架构，它关注呈现给用户的信息是否合理、有意义。对于用户来说，能否快速找到自己想要的东西会极大影响用户体验，所以产品的用户友好度非常重要。而友好度的高低也很大程度上取决于信息架构的目的：设计出让用户能轻松找到信息的系统。

信息架构的设计原则：在战略层面对应产品目标和用户需求；识别并呈现用户心目中最重要的信息。我们以某基金产品中单个基金的展示界面为例：该基金产品目标是为广大投资者提供专业、及时、全面的基金信息。用户在点击某只基金时，希望看到的是该基金的收益情况，因此界面重点展示的是该基金的最新净值和每日涨跌情况，其次是近期的收益情况。

信息架构设计的结构方法：层级结构、矩阵结构、自然结构、线性结构；从上到下 & 从下到上，要具备“容纳增长、适应变化”的能力。架构是一个例子：

在结构层设计的讲解中，有一点让我印象很深，就是结构好坏最重要的标准不是“整个流程需要多少个步骤，尽量少”，而是“用户觉得每个步骤是否合理”以及“当前步骤是否合理延续上一步的任务”。这种思维最直接的例子就是移动端产品的注册、登录要分步进行，而不是挤在同一个页面。

4.框架层

经过结构设计之后，我们的产品就有了整体的形象，就像人有骨架一样，接下来我们要做的就是在适当的地方填充血肉，并确定详细的界面外观、导航和信息设计。

（1）界面设计

（2）导航设计

（3）信息设计

5.表示层

框架层主要要解决的问题是布局问题。界面设计考虑交互元素的布局，导航设计考虑引导用户在产品内走动的元素的排布，信息设计考虑传达给用户的信息元素的排布。展现层主要解决和弥补“产品框架层的逻辑排布”的感知和展现问题。就像一个人虽然已经将骨架填满了血肉，但看上去还是有些模糊不清，不方便发布，还是需要用精细的细节去雕琢。五官、柔嫩的皮肤、修长的手脚等等。

（1）嗅觉/味觉/触觉设计

这些方面在互联网产品中很少用到，但在AI产品中可能比较常见，这里就不细说了。

（2）听觉设计

听觉设计在游戏产品中比较常见，在非游戏产品中多作为通知提醒使用，这里就不再详细阐述了。

（3）视觉设计

表现层最常见的设计就是可视化设计，所以我们重点讲解一下表现层。

① 让产品“说话”

好的视觉设计能够正确延续上层确立的产品思路并提供相应的视觉效果支撑，比如传达品牌形象、提高付费转化率等，例如下图是一款职场社交软件，选择了蓝色作为主色调，无论是加载页面还是图标，都偏向商务风格，很好地支撑了职场社交的品牌形象。

② 视觉对比与引导

在不破坏网站结构的前提下，加强模块之间的区分，将用户的注意力引到界面的重点部分，用户的浏览轨迹是一条流畅的路径，各种设计元素不会分散用户的注意力，视觉上的引导支持用户完成目标。

我们以基金界面为例：关键信息以绿色块显示，一目了然；不太重要的信息以白色块显示，中间以灰色块分隔，模块清晰而不突兀；涨跌幅分别以红绿字体显示，用绿色看到跌幅可以一定程度上减少心理抵触情绪；用户想要点击的“买入/定投”则以诱人的橙色显示；整个用户浏览轨迹也非常顺畅，能够快速聚焦到关键内容上。

③ 内部视觉设计的一致性

视觉设计的一致性可以让产品设计有效传达信息，而不会给用户造成困惑或焦虑。这里举个反例，作为一家大公司，这种设计实在不敢恭维，我第一次用的时候感觉有点晕，跳到每个页面之后感觉好像在不同的产品里。我猜一个因素是各个部分的产品经理和设计团队都不一样，没有统一的设计规范，还有一个因素是公司诞生于PC时代，很多地方把网页样式带进了移动产品。

③ 设计综合与风格指南

设计合成图也可以称为视觉模型，确切的说是由选定的单个组件构建而成的最终视觉产品，从框架层的线框图到表现层的设计合成图，是一个由单个苍白的组件过渡到有机整体的过程。

样式指南之所以被创建，是因为：随着时间的推移，我们做出决定的理由会被淡忘；当人们离开工作岗位时，新来的人可以很好地继承这些标准。所以我们需要样式指南来承载这些设计。这份文档决定了视觉设计的每一个方面，从最大的元素到最小的元素以及某个模块或功能的具体标准。其实从上面的例子就可以看出样式指南有多么重要。

结论

体验要素的五个层级是紧密相连的，既有自上而下，也有自下而上的。如果某个较高层级，比如表现层，设计得乱七八糟，用户可能很快就离开了，根本没注意到你的作用域层的决策是怎样的。英明，你的交互设计得真好。如果较低层级，比如结构层，设计错了，那么更高层的决策和设计就失去了意义，只会成为摆设。所以，我们需要根据实际情况来设计用户体验，在自上而下和自下而上之间取得平衡，真正做到以用户为中心的产品设计。

作者：顾道乾，前创业者，现居上海，有意深耕在线教育领域，喜欢读书、旅游、摄影