用户体验要素
用户体验要素
一句话：把「用户体验」拆成五层楼，从此大家有共同语言。
行业通识 · 概念源头 · 面试高频
作者与背景：一套被行业「用烂了」的语言
Garrett 是最早把「用户体验」从玄学变成工程学的人。2000 年他画出这张著名的五层图，之后二十年，全球产品团队都用它对齐「这个产品到底要做到什么程度」。
- 核心主张：用户体验不是「好看」，而是从战略到表现一整条链路的综合结果。
- 为什么必读：面试聊产品必被问「五要素」；工作里和设计、开发对齐也靠这套词。
- 学习价值：它是「分层思考」的启蒙——把复杂问题拆成层次，每层只回答一个问题。
核心思想：五层模型
做产品像盖楼：从下往上，一层层搭。每一层回答一个问题，上一层建立在下一层之上——底层没想清楚，上层盖得再漂亮也是危房。
每层具体管什么：
- 战略层（最底层）：产品图什么、用户要什么。决定「为什么做」。这一层错了，全楼白盖。
- 范围层：做哪些功能、不做什么。是战略层落到功能列表上的第一笔。
- 结构层：信息怎么组织、用户怎么一步步操作。决定「流程」和「信息架构」。
- 框架层：按钮、输入框、导航放在哪。是页面级的布局设计。
- 表现层（最顶层）：颜色、字体、视觉风格。用户最先看到的，却是最后才定的。
怎么用：把五层当「体检表」
五层模型不只是面试答案，更是日常诊断工具。产品出问题时，按层排查：
- 用户不用了 → 先查战略层：是不是一开始就做错了东西？
- 功能没人点 → 查范围层：是不是塞了不该有的功能？
- 用户走不通 → 查结构层：流程和信息架构有没有绕路？
- 页面难用 → 查框架层：布局、入口、可见性有没有问题？
- 看着丑 → 才轮到表现层：视觉是最后一层，别一上来就改颜色。
用户看到的是最上面那层，但决定产品生死的，是最下面那层。
面试考点：五要素怎么答不丢分
面试被问「用户体验五要素是什么」，别只背五个词——用「问答式」答法：
- 先给总框架：「自下而上五层，从抽象到具体」。
- 再逐层带问题：战略层（为什么做）→ 范围层（做什么）→ 结构层（怎么走）→ 框架层（怎么摆）→ 表现层（长什么样）。
- 最后补一句用途：「它让我在动手前先想清楚底层，避免顶层白做」。
- 加分项：结合你拆过的产品，指出它的某一层出了什么问题——比背定义强十倍。
章节内容展开：这本书是怎么组织的
《用户体验要素》的目录就是那栋「五层楼」——每章讲一层，从下往上盖。读的时候跟着楼层走，每读完一章就在纸上盖一层，读完正好盖完一栋楼。
开篇 · 用户体验为什么重要 引言
- 用户体验的代价：不好用 = 用户流失 = 真金白银的损失。
- 「体验」不只在屏幕上：从广告、到购买、到客服，都是体验的一部分。
- 双重视角：产品视角（What/How）与用户视角（Why/Who）的区别。
战略层 → 范围层 第 1~2 章
- 战略层：产品目标（图什么）与用户需求（用户要什么）——一切的地基。
- 范围层：从「目标」到「功能规格」与「内容需求」——做哪些、不做什么。
- 两个难点：① 老板要的 vs 用户要的冲突；② 功能范围无限膨胀（范围蔓延）。
结构层 → 框架层 第 3~4 章
- 结构层：交互设计（用户怎么操作）+ 信息架构（信息怎么组织）——把范围层落成「流程」。
- 框架层：界面设计（按钮摆哪）、导航设计（怎么走）、信息设计（信息怎么呈现）——把结构层落成「页面」。
- 关键工具：线框图（wireframe）就是框架层的产物——别和视觉稿混为一谈。
表现层 + 应用 第 5~6 章
- 表现层：感知设计——颜色、字体、排版，让用户「感受」到产品气质。
- 要素的应用：自上而下 vs 自下而上两种工作方式；文档与流程。
- 全书收尾：每一层都要「自洽」，且上下层之间要对齐——这就是「体验」的全部秘密。
阅读顺序建议：这本书每章独立，可以按需读——想懂「功能取舍」读范围层，想懂「流程」读结构层，想懂「页面」读框架层。但至少通读一遍战略层，那是根。
怎么读这本书
1
先看图再读书
把五层图画出来贴墙上，看书时每章往对应楼层里填。
2
挑一个 App 拆一遍
从战略层到表现层，逐层写它做了什么、做得怎么样——这是最好的复习。
3
和概念图解区的金字塔对照
本专题概念区的「金字塔图」就是这本书的浓缩，先看金字塔，再读原书，吸收更快。
4
记住结论一句话
「底层想清楚为什么做，才轮到上面做成什么样」——面试和日常工作都靠它。