产品经理课程 · 第二阶段：产品设计
🎨 08 - 原型设计
低保真→高保真→交互原型+Figma实操
📋 本章导读
原型是把想法变成可体验的东西——从纸面草图到可点击的交互原型，每一步都在降低沟通成本、验证假设。本章将带你从低保真到高保真，最终掌握Figma实操技能，让原型成为你与团队最有效的沟通语言。
🎯 学习目标
- 理解低保真/中保真/高保真原型的适用场景
- 掌握纸质原型快速验证方法
- 学会Figma组件化设计实操
- 能制作可点击的交互原型并组织验证
一、原型保真度光谱：不同阶段用不同工具
| 保真度 | 适用阶段 | 制作时间 | 反馈价值 | 工具 |
|---|
| 低保真 | 概念验证、快速探索 | 1-2小时 | 验证方向和结构 | 纸笔/Balsamiq/Whimsical |
| 中保真 | 需求对齐、开发评估 | 1-3天 | 验证布局和交互 | Figma/Sketch/Axure |
| 高保真 | 设计评审、用户测试 | 3-7天 | 验证视觉和体验 | Figma/Protopie/Framer |
🔑 保真度选择原则
- 越早越好，越糙越好：早期用低保真原型验证，避免过早陷入视觉细节
- 保真度=确定性：越确定的方向，投入越高的保真度
- 一次一个变量：每次只调整一个维度的保真度，否则反馈会混在一起
- 抛弃的勇气：如果验证发现方向错了，立刻抛弃。越低保真越容易抛弃
二、纸质原型：最快的验证方法
别小看纸和笔。Google Ventures的设计冲刺中，纸质原型是标准工具——因为它最快、最灵活、最容易修改。
📋 纸质原型工作坊
准备（15分钟）：
- A4纸/方格纸若干
- 粗细不同的马克笔（粗的画框架，细的写文字）
- 便利贴（代表可交互元素）
- 剪刀和胶棒
绘制（30分钟）：
- 每人独立画出3-5个核心页面
- 用粗笔先画框架（导航、内容区、操作区）
- 用细笔补充文字和图标
- 便利贴做弹窗、下拉等覆盖层
测试（30分钟）：
- 一个人扮演"电脑"：根据用户操作切换页面
- 用户用手指"点击"纸质界面
- 观察者记录用户的困惑和预期
- 每轮5-10分钟，连续测3-5个用户
迭代（15分钟）：
- 根据反馈直接在纸上修改
- 重新测试验证改进效果
三、Figma实操：从组件到交互原型
Figma已成为产品经理的必备技能。不是要你替代设计师，而是要你能独立制作中保真原型，加速沟通和验证。
🎨 Figma核心能力清单
- Auto Layout：自动布局，组件自适应内容——这是Figma最核心的能力，不会Auto Layout等于不会Figma
- Components：创建可复用的组件库（按钮、输入框、卡片），一处修改全局更新
- Variants：组件变体（按钮的不同状态：默认/hover/active/disabled），一个组件管理所有状态
- Prototyping：添加交互链接和转场动画，制作可点击原型
- Design Tokens：定义颜色、字体、间距等设计变量，保持一致性
📋 Figma组件化设计流程
Step 1：建立设计系统
├─ Colors: primary/purple(#a78bfa), success/green, error/red...
├─ Typography: H1(1.8em)/H2(1.4em)/Body(1em)/Caption(0.85em)
├─ Spacing: 4px网格 → 8/12/16/20/24/32px
└─ Radius: 4/8/12/16px
Step 2：创建基础组件(Atoms)
├─ Button: primary/secondary/ghost × large/medium/small
├─ Input: default/focus/error/disabled
├─ Tag/Chip: default/selected/deletable
└─ Avatar: small/medium/large
Step 3：组合复合组件(Molecules)
├─ SearchBar = Input + Button
├─ ListItem = Avatar + Text + Action
└─ Card = Image + Title + Description + Button
Step 4：搭建页面模板(Templates)
├─ List Page: Header + Search + List + FAB
├─ Detail Page: Header + Content + Actions
└─ Form Page: Header + Form + Submit
Step 5：添加交互(Prototyping)
├─ 页面间跳转链接
├─ 点击/悬停触发器
├─ 转场动画(Smart Animate)
└─ 条件分支(根据用户选择展示不同流程)
四、交互原型的三种层次
🔗 线框链接
页面间简单跳转
验证：信息架构和导航
时间：2-4小时
适合：内部对齐
🎬 动效原型
加入转场动画和微交互
验证：交互节奏和反馈感
时间：1-2天
适合：设计评审
🧪 可测试原型
完整交互逻辑+条件分支
验证：用户体验和可用性
时间：2-5天
适合：用户测试
五、案例深度拆解：Airbnb设计系统
🏠 Airbnb Design Language System (DLS)
Airbnb是最早系统化使用设计系统的公司之一，他们的DLS让全球数十位设计师产出的界面如同一人所绘。
- 核心理念：Unified（统一）、Universal（通用）、Iconic（标志性）、Conversational（对话感）
- 组件数量：200+基础组件，覆盖所有场景
- 设计原则：每个组件都有"为什么这样设计"的文档说明，不只是规范
- 迭代机制：组件每季度审查，删除使用率<5%的组件，新增高频需求的组件
- Figma协作：多设计师同时编辑，分支合并工作流
💡 Airbnb的启示：设计系统的价值不是让所有人画得一样，而是让设计师把时间花在"设计"而非"重复劳动"上。产品经理也可以用组件库快速出原型，把精力放在验证逻辑而非调整样式。
🧪 练习1：纸质原型验证
用纸笔画一个"活动发布"流程的5个核心页面（选择模板→填写信息→预览→发布→分享），邀请2位同事进行纸质原型测试，记录他们遇到的困惑。
🧪 练习2：Figma组件库搭建
在Figma中创建一个包含20个基础组件的小型组件库：按钮3种状态、输入框4种状态、卡片组件、列表项、导航栏、标签栏。使用Auto Layout和Variants。
🧪 练习3：可点击交互原型
基于练习2的组件库，搭建一个"待办事项App"的可点击原型：包含列表页、新建页、详情页、编辑页，用Prototyping功能连接页面跳转，加入空状态和异常状态。
🏆 本章成就
- ✅ 纸上魔法师 — 用纸质原型快速验证概念方向
- ✅ Figma实战者 — 掌握Auto Layout/Components/Prototyping
- ✅ 组件化思维者 — 从原子到模板的系统性设计思维
- ✅ 交互验证者 — 用可点击原型验证真实用户体验
六、原型验证的最佳实践
🧪 原型验证三层次
| 验证层次 | 问题 | 方法 | 保真度 | 参与者 |
|---|
| 概念验证 | "这个方向对吗？" | 纸质原型/草图 | 低 | 3-5内部人 |
| 流程验证 | "用户能走通吗？" | 线框+点击链接 | 中 | 5外部用户 |
| 体验验证 | "用户愿意用吗？" | 高保真交互原型 | 高 | 8-10外部用户 |
📚 原型设计推荐阅读
- 《Sprint》Jake Knapp — Google Ventures设计冲刺方法
- 《The Design of Everyday Things》Don Norman — 设计的底层逻辑
- Figma官方教程 — 免费且系统的Figma学习资源
💡 原型设计的核心心法：原型的目的不是"做得像真的"，而是"验证得够准确"。投入过多精力让原型看起来完美是浪费——因为如果验证发现方向错了，你所有的精美设计都要推翻。保真度要匹配确定性。
七、设计系统的PM视角
🏗️ PM为什么需要关心设计系统？
- 一致性：没有设计系统=10个PM画10种按钮=用户困惑。设计系统保证同一个产品里相同的交互用相同的组件
- 效率：用现有组件搭原型比从头画快5倍。PM用组件库出原型，设计师用组件库出高保真，开发用组件库实现——一脉相承
- 协作语言：设计系统是PM/设计/开发的共享词汇——说"用PrimaryButton"比说"那个紫色的按钮"准确100倍
- 质量底线：组件本身经过可用性测试和开发验证，用组件就自带质量保障
- PM的职责：不是PM去建设计系统，而是PM要确保设计系统被团队采纳和使用，并在PRD中引用组件名
八、原型的文档化
📋 原型交付文档清单
- 交互说明文档：每个页面的交互行为——点击什么、跳转哪里、动画是什么、异常怎么处理
- 设计规范标注：字体、颜色、间距、圆角——不是所有标注都要PM做，但PM要确保关键元素有标注
- 状态说明：默认态/空态/加载态/错误态/禁用态——5种状态缺一不可
- 数据说明：列表多少条？超长文本怎么截断？空数据怎么展示？数字格式化规则？
- 响应式说明：手机/平板/桌面三种布局的适配规则
🔑 PM与设计师的协作边界
| PM负责 | 设计师负责 | 共同决定 |
|---|
| 功能范围和优先级 | 视觉风格和品牌 | 交互方式 |
| 用户流程和逻辑 | 布局和视觉层次 | 信息密度 |
| 验收标准 | 动画和微交互 | 操作反馈 |
| 数据展示规则 | 图标和插画 | 空状态设计 |