一张图看懂产品设计 —— 五层模型总览

本课导读

欢迎来到产品设计。这个单元只讲透一张图——Jesse James Garrett 的"用户体验要素"五层模型。它可能是产品设计领域被引用最多的一张图：你在工作里见过的产品讨论会、需求文档、改版方案，背后都能用它对上号。本课先把整张图看懂：五层是什么、两条竖线（任务流/信息流）是什么、以及最重要的一条法则——下层决定上层。学完这课，你再参加产品讨论时，就能一耳朵听出"这个争论其实吵错了楼层"。预计 30 分钟。

这张图从哪来

2002 年，信息架构师 Jesse James Garrett 出版了《用户体验要素》（The Elements of User Experience）。书不厚，核心就是一张图：一个产品从"一个想法"到"用户看到的界面"，中间要经过五个层面的决策。原书讲的是网站，但这套框架对 App、小程序、后台系统甚至一个功能模块都同样适用——因为它描述的不是技术，而是决策的先后顺序。

把图变成表格是这样的（从下往上读，越往上越具体、越接近成品）：

层	回答的问题	任务流视角（产品当工具用）	信息流视角（产品当内容看）
⑤ 表现层	长什么样？	视觉设计	视觉设计
④ 框架层	页面怎么摆？	界面设计	导航设计（+ 两侧共享的信息设计）
③ 结构层	流程和内容怎么组织？	交互设计	信息架构
② 范围层	具体做什么？	功能规格	内容需要
① 战略层	为什么做？	产品目标 + 用户需求	产品目标 + 用户需求

三个读图要点：

1. 纵轴：从抽象到具体。战略层最抽象（"我们要帮转行者省时间"），表现层最具体（"这个按钮是青色的、圆角 12px"）。原图左侧标着"抽象 → 具体"，右侧标着"概念 → 完成"，说的是同一件事：做产品是把一句模糊的话逐层翻译成一个能点的界面。
2. 横向：两条支线。从范围层开始，每一层都劈成两半——左边把产品看作工具（用户来完成任务：下单、打卡、发消息），右边把产品看作信息载体（用户来获取内容：看课程、读文章、查数据）。绝大多数真实产品两者兼有，所以两条线要并行推进，最后在表现层重新汇合。
3. 时间：从下往上推进。原图右侧的"时间"箭头指向上方——现实中的项目也大致按这个顺序展开：先想清楚为什么，再定做什么，再定怎么组织，再画页面，最后上视觉。

最重要的一条法则：下层决定上层

Garrett 给这五层立了一条铁律：每一层的工作，都建立在它下面那层的决策之上。往上翻译一下就是三句实用的话：

• 下层没定，上层白干。战略层没想清楚给谁用，范围层的功能清单就会来回摇摆；信息架构混乱，界面画得再精致也救不回来——用户找不到东西，不会因为按钮好看而原谅你。
• 上层出问题，先往下查一层。用户抱怨"界面乱"（表现层），病根常在框架层（布局逻辑不清）甚至结构层（分类本身就不合理）。症状在楼上，病灶在楼下，是产品诊断的第一直觉。
• 允许重叠，不允许倒挂。Garrett 的原话很精确：不必等下层 100% 完工才开始上层（现实项目总是有重叠的），但上层工作的"收尾"不能早于下层——范围还没冻结就把视觉稿定死，等范围一变，视觉稿全部返工。

这条法则也解释了为什么产品会议经常吵不出结果：一个人在谈战略层（"这功能到底解决谁的什么问题"），另一个人在谈表现层（"这个红色不好看"）——两人不在同一层，吵到天亮也不会有交集。五层模型给了你一个开会神器：先对齐"我们现在讨论的是哪一层"。

两条支线为什么重要

"任务流 / 信息流"这个二分法，值多花两分钟。

想象两个极端产品：计算器是纯工具——没人来"阅读"计算器，用户只想完成计算任务；新闻网站是纯信息——用户不操作什么复杂流程，就是来看内容的。计算器的设计难点在交互（按键反馈、运算顺序），新闻网站的难点在信息架构（栏目怎么分、头条怎么排）。

而你日常用的产品几乎都是混血儿。拿你正在用的 LearnPath 举例：

• 任务流：登录、标记课程完成、写笔记、复习到期卡片——这些是"功能"，走左边那条线（功能规格 → 交互设计 → 界面设计）
• 信息流：课程正文、目录树、术语表——这些是"内容"，走右边那条线（内容需要 → 信息架构 → 导航设计）

区分的实际价值：两条线的生产方式完全不同。功能做完一次就能反复用，内容却要持续生产和维护（这也是为什么"内容领先原则"会成为一条运行守则）。评审一个产品方案时，把功能和内容拆开看，很多含糊的地方立刻清晰。

✍️ 练习

练习 1：给糟糕体验定层

回想一次你被某个 App 气到的经历（找不到退款入口、注册流程反人类、首页乱得像菜市场……）。用一段话描述这次体验，然后判断：问题主要出在哪一层？再往下追一层问：它的病根会不会在更低的层？

✅ 参考思路

示范："找不到退款入口"。表面看是框架层问题（导航设计——入口藏太深）。往下追：为什么藏那么深？很可能是战略层故意的——平台的商业目标（少退款）压过了用户需求（顺利退款）。这就是一个"症状在框架层、病灶在战略层"的典型案例：产品目标和用户需求冲突时，所有上层都会长出别扭的设计。

自查你的分析：有没有只停在"界面难看/难用"（表现/框架层），而没往下问一层"为什么它被设计成这样"？

练习 2：拆一个你最熟的产品

选一个你每天都用的 App，用五层表格各写一句话：它的战略（给谁解决什么问题）、范围（核心功能 3 个 + 核心内容 1 类）、结构（内容怎么分类的）、框架（首页布局的主次）、表现（视觉给你的一个词的感受）。

✅ 参考答案（以微信为例）

• 战略：给所有人提供最低门槛的即时通讯（用户需求：随时联系到人；产品目标：成为社交基础设施）
• 范围：功能——聊天、朋友圈、支付；内容——公众号文章
• 结构：四个底部标签就是四大类——消息按时间排、通讯录按人排、发现按功能排、我按账户排
• 框架：打开直接是消息列表（最高频任务放第一屏），"发现"里的入口可以自定义收起
• 表现：克制（多年不变的绿、几乎没有装饰性元素）

注意五层的一致性：正因为战略是"基础设施"，表现层才敢这么克制——楼下的决定解释了楼上的样子。

📝 随堂测验

随堂测验0 / 5 题正确

1. 五层模型从最抽象到最具体的正确顺序是？

A表现 → 框架 → 结构 → 范围 → 战略B战略 → 范围 → 结构 → 框架 → 表现C战略 → 结构 → 范围 → 表现 → 框架D范围 → 战略 → 结构 → 框架 → 表现

2. “下层决定上层”法则的正确理解是？

A必须等下层 100% 完工才能开始上层B上层可以与下层重叠推进，但上层的收尾不能早于下层——否则下层一变上层全返工C五层可以任意顺序进行D只有战略层重要，其他层无所谓

3. 用户抱怨“这个 App 界面好乱”，按五层模型的诊断直觉，你应该？

A立刻换配色和字体B先往下查一层：布局逻辑（框架层）乃至内容分类（结构层）是否就有问题——症状在楼上，病灶常在楼下C增加新手引导弹窗D认定用户不会用

4. “任务流”和“信息流”的区分指的是？

A前端和后端B把产品分别看作“完成任务的工具”和“获取内容的载体”两个视角，各自有一条设计支线C开发流程和测试流程D线上功能和线下运营

5. 产品会上一人说“这功能没解决用户问题”，另一人回“可是这个页面配色很高级”，他们吵不出结果的根本原因是？

A两人性格不合B一个在谈战略层、一个在谈表现层——不在同一层的争论没有交集，应先对齐讨论的层C配色确实更重要D功能确实更重要

本课小结

• 五层模型出自 Garrett《用户体验要素》：战略 → 范围 → 结构 → 框架 → 表现，从抽象到具体、从概念到完成
• 从范围层起每层分两条支线：任务流（产品当工具）与信息流（产品当内容），大多数产品是混血儿，两线并行
• 铁律：下层决定上层——允许重叠、不允许倒挂；诊断口诀：症状在楼上，病灶在楼下
• 它不是瀑布流程表，是决策依赖图；开会先对齐"我们在讨论哪一层"
• 接下来五课自下而上逐层深入，最后一课用完整的五层文档做一次实战

下一课进入地基——战略层：产品目标和用户需求这两件事，比你想象的难对齐得多。