设计思维 · 30 分钟掌握

用户体验要素

用五个层级,从战略到表现,系统性地设计出让人爱不释手的产品体验

🎨 表现层 视觉设计
🖼️ 框架层 界面 · 导航 · 信息
🗺️ 结构层 交互 · 信息架构
📋 范围层 功能 · 内容
🎯 战略层 用户需求 · 产品目标
上层依赖下层
5 个设计层级 · 3 个经典案例 · 1 个金字塔
01

一句话说清什么是用户体验要素

"

把用户体验设计拆成五个层级,从底层战略到顶层视觉,每一层都是上一层的基石。下层没想清楚,上层再漂亮也没用。

—— Jesse James Garrett《用户体验要素》,产品设计必读经典

用一个比喻理解

🎂
只看表面的设计像只关注蛋糕的糖霜 —— 糖霜再漂亮,蛋糕坯是酸的,没人会吃第二口
VS
🏗️
五层模型像建房子 —— 先打地基(战略),再搭框架(结构),最后装修(表现)
02

为什么 UX 设计决定产品生死?

用户不会告诉你"你们的战略层有问题",他们只会默默离开。五层模型帮你定位问题到底出在哪。

01

用户给的耐心只有 3 秒

如果一个产品在 3 秒内没让用户明白"这是干嘛的",53% 的用户会直接离开。这不是视觉问题,是战略和框架问题。

数据 Google 研究发现:页面加载超过 3 秒,跳出率增加 32%
02

问题是"视觉丑",根因往往在底层

团队常常争论"按钮用什么颜色",但真正的痛点可能是用户根本找不到这个功能——这是信息架构的问题,不是配色问题。

教训 花 2 周调配色 → 留存不变;花 2 天优化导航 → 留存提升 20%
03

好的 UX 是系统性的,不是碰运气

凭感觉做设计,10 次有 9 次错。五层模型给了一个从抽象到具体的框架,让团队在同一套语言下协作。

对比 设计师说"这里太空",产品经理说"用户需要更多功能"——五层模型告诉你到底在争论哪一层
💡

关键洞察:五层模型的本质是"分层解耦"。当你发现产品有问题时,先问"这是哪一层的问题?"——避免在错误层级上修修补补。

03

五层详解:从抽象到具体

每一层都有明确的问题要回答。从战略层往上,问题越来越具体,设计越来越可见。

🎨 表现层 长什么样?
🖼️ 框架层 元素放哪?
🗺️ 结构层 怎么组织?
📋 范围层 做什么?
🎯 战略层 为什么做?
👆 点击金字塔层级,查看详情
01

战略层:为什么要做这个产品?

战略层回答两个核心问题:用户要什么(用户需求)和我们要什么(产品目标)。

用户需求

目标用户是谁?他们的痛点是什么?使用场景是什么?

例子:美团外卖 → 用户是"不想出门吃饭的上班族",痛点是"没时间做饭",场景是"工作日的午餐"
产品目标

我们做这个产品要达到什么商业目标?KPI 是什么?

例子:美团外卖 → 目标是"提高订单量"和"提升客单价",KPI 是"日均订单数"和"平均订单金额"
💡
检验标准:如果你不能用一句话同时说清楚"用户要什么"和"我们要什么",说明战略层还没有想清楚。往下走都是浪费时间。
02

范围层:产品到底要做什么?

战略层定好后,范围层决定做什么、不做什么。功能不是越多越好,能支撑战略目标的才做。

功能规格
• 核心功能必须做 • 锦上添花看资源 • 想清楚不做的好处
内容需求
• 需要什么类型的内容 • 内容从哪里来 • 谁来维护和更新
功能优先级矩阵
高影响 低影响
低成本 马上做 计划做
高成本 讨论后做 不做
💡
减法思维:的范围层最重要的不是"加功能",而是"敢于砍掉不支撑战略的功能"。微信张小龙说:"每天有超过 1 亿人说我们做得不好,每天有超过 1 亿人想教我做产品。"但他坚持只做核心价值。
03

结构层:功能和内容怎么组织?

结构层是从抽象到具体的关键转折。它决定用户如何在产品中移动、如何找到需要的东西。

交互设计 🖱️

用户和产品如何互动?点击后会发生什么?流程怎么设计?

例子:电商结账流程 → 加购物车 → 填写地址 → 选择支付 → 确认订单。每一步都要想清楚用户可能的岔路。
信息架构 🗂️

内容怎么分类、怎么命名、怎么关联?用户能不能快速找到?

例子:电商分类 → "数码""家居""美妆"是按品类分,还是按场景("送礼""租房必备")分?不同用户群适合不同分类。
信息架构示意
首页
商品分类
数码
家居
美妆
搜索
热门
历史
个人中心
订单
收藏
💡
检验标准:让用户画你的产品信息架构图。如果 5 个人画出 5 种完全不同的结构,说明你的信息架构有问题。
04

框架层:界面元素放在哪?

框架层是结构的具体化。到了这一层,你看到的是线框图(Wireframe),而不是最终视觉。

界面设计 🖼️

按钮放哪?表单怎么排?哪些元素需要突出?

✅ 让用户一眼看到最重要的操作
❌ 把重要按钮藏在二级菜单里
导航设计 🧭

用户在哪?能去哪?怎么回去?

✅ 面包屑导航让用户知道自己在哪
❌ 深层页面没有返回入口
信息设计 📊

信息怎么呈现最有效?文字、图表、进度条?

✅ 用进度条显示订单状态
❌ 用一大段文字描述订单到哪了
💡
黄金法则:框架层的核心原则是"别让我思考"(Don't Make Me Think)。用户应该本能地知道怎么做,不需要说明书。
05

表现层:最终长什么样?

表现层是用户唯一能看到的。但它是最表层的一层,完全依赖下面四层的基础。

🎨
视觉设计 配色、字体、图标、图片风格。传递品牌个性,引导用户注意力。
动效设计 过渡动画、加载状态、微交互。让体验更流畅、更有情感。
📐
布局与排版 信息层级通过视觉权重(大小、颜色、间距)来体现。
⚠️

警告:如果下层有问题,表现层做得再漂亮也只是" lipstick on a pig "(给猪涂口红)。很多产品花大钱请设计师调 UI,但底层的信息架构一团糟,治标不治本。

04

三个五层模型的真实案例

案例一

Apple:战略层定生死

背景:Apple 的产品设计被公认为顶级。但很多人只看到表现层(漂亮的 UI),忽略了 Apple 真正厉害的是战略层。
战略层

目标用户:追求高品质、愿意为体验付费的人。产品目标:让科技变得简单优雅。

范围层

做少不做多。iPhone 刚发布时没有 App Store、没有复制粘贴——只保留最核心的功能。

结构层

交互极简:一个 Home 键完成所有。信息架构扁平:App 直接放在桌面,没有复杂层级。

表现层

视觉极简:大量留白、精致图标、流畅动效。一切都是"战略层"的延伸。

结果

Apple 的成功不是"设计好看",而是"从战略到表现的一致性"。每一层都在说同一件事:简单、优雅、高品质。

案例二

Airbnb:结构层拯救信任危机

背景:早期的 Airbnb 遇到最大问题:用户不敢住陌生人的房子。这不是视觉问题,是信任问题——属于结构层
结构层

重新设计信息架构:房东资料页必须有照片、验证、评价。建立"社会证明"机制。

框架层

在房源列表页就展示评分和评论数。把"信任信号"放在用户决策的关键路径上。

表现层

高质量照片、专业的房东介绍页面、清晰的退订政策。视觉上传递"安全、可靠"。

结果

Airbnb 通过结构层和框架层的重新设计,解决了信任问题,从一个" couch-surfing 网站"成长为百亿级平台。

案例三

微信:框架层的极致克制

背景:微信有 10 亿+ 用户,功能极其复杂(聊天、支付、小程序、视频号……),但界面始终简洁。秘密在框架层
框架层

底部永远只有 4 个 Tab(微信、通讯录、发现、我)。再多功能也被收进"发现"里,不打扰核心体验。

导航设计

聊天列表 = 默认首页。用户打开微信就知道去哪。不需要学习,不需要思考。

表现层

绿色主题色、极简图标、几乎不变的主界面。10 年来视觉风格高度一致,用户零迁移成本。

结果

微信证明:框架层的克制比表现层的华丽更重要。用户每天打开 30+ 次,从不迷路。

05

练一练:诊断产品问题属于哪一层

三个真实场景,测试你能不能定位问题到底出在哪个层级。

场景一

用户抱怨"找不到退款入口"

你的电商平台收到大量客服反馈:用户买完东西想退款,在 App 里找了 10 分钟都找不到退款入口。

这个问题属于五层模型中的哪一层?

场景二

App 很漂亮,但用户用完一次就不回来了

你的产品上线后,用户反馈"界面很精美",但次日留存率不到 5%。设计团队花了 3 个月调视觉,情况没有改善。

最可能的问题在哪一层?

场景三

团队争论:首页该放推荐还是放搜索?

产品团队内部激烈争论:有人说"首页应该放个性化推荐",有人说"首页应该放大搜索框"。双方各执一词,讨论了 2 周没有结论。

用五层模型,这个争论属于哪一层?该怎么解决?

06

五个常见误区

很多人学了五层模型,但在实践中还是犯了这些错误:

01

误区:直接从表现层开始设计

设计师打开 Figma 就开始画 UI,产品经理打开文档就开始写 PRD。但没有战略层的指导,这些输出都是空中楼阁。

❌ 还没想清楚用户是谁,就开始设计界面 ✅ 先回答"用户要什么"和"我们要什么",再往下走
02

误区:五层是瀑布流程,不是迭代

五层模型不是让你"花 3 个月做战略,再花 3 个月做范围",而是快速跑完五层,验证后再回来调整

❌ "战略层没定好,谁也别开始设计"——陷入分析瘫痪 ✅ 用最小成本跑完五层原型,用真实用户反馈来调整
03

误区:认为五层之间是严格分离的

实际上五层之间有很多重叠。框架层的设计会影响结构层,表现层的限制也会倒推范围层。

❌ "我是设计师,我只管表现层,战略层我不管" ✅ 五层需要跨职能协作,设计师也要理解战略
04

误区:在错误层级修修补补

产品留存差,团队花了 3 个月调 UI 配色。但根因可能是信息架构混乱,调颜色于事无补。

❌ "用户找不到功能" → 把按钮做得更大更红 ✅ "用户找不到功能" → 先检查信息架构和导航设计
05

误区:忽视战略层的动态变化

战略不是写一次就永远不变的。市场变了、竞品变了、用户变了,战略也要跟着调整。

❌ "去年定的战略,今年继续执行"——不管市场已经变了 ✅ 定期回顾战略层:目标用户还是那些人吗?他们的需求变化了吗?
07

快速自检:你的设计在五层上都过关了吗?

遇到产品设计问题时,用这 5 个问题帮你定位层级:

勾选以上问题,测试你的 UX 设计完整度 👆

08

一张图记住五层模型

🎨
表现层 视觉设计 · 动效 · 排版
🖼️
框架层 界面设计 · 导航设计 · 信息设计
🗺️
结构层 交互设计 · 信息架构
📋
范围层 功能规格 · 内容需求
🎯
战略层 用户需求 · 产品目标
头痛医头 → 看到问题就改 UI vs 系统思考 → 先定位层级,再对症下药

"好的用户体验不是一层的设计,
而是五层的和谐统一
从战略到表现,每一层都在说同一个故事。"