主题
第四章：产品设计
"设计不仅仅是外观和感觉，设计是它如何工作的。" —— 史蒂夫·乔布斯
模块概览
在前面的章节中，我们学习了产品经理的角色定义、核心概念以及用户研究方法。现在，我们进入产品经理日常工作中最具创造性的环节——产品设计。
产品设计是将用户需求和业务目标转化为可视化方案的过程。它不是"画图"那么简单，而是一套系统化的思维方法，涵盖信息组织、交互逻辑、视觉表达等多个维度。
用户需求 可交付的设计方案
┌──────┐ ┌──────────┐
│ 痛点 │ │ 信息架构 │
│ 场景 │ ──── 产品设计 ───> │ 线框图 │
│ 目标 │ (本章内容) │ 原型 │
└──────┘ │ 交互规范 │
└──────────┘本章学习路线
┌─────────────────────────────────────────────────────────────────┐
│ 第四章：产品设计 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 01 信息架构 02 线框图与原型 03 交互设计原则 │
│ ┌───────────┐ ┌───────────┐ ┌───────────┐ │
│ │ 功能结构 │ │ 低保真 │ │ 尼尔森 │ │
│ │ 导航设计 │ --> │ 高保真 │ --> │ 十大原则 │ │
│ │ 卡片分类 │ │ 原型工具 │ │ 交互模式 │ │
│ └───────────┘ └───────────┘ └───────────┘ │
│ │ │
│ v │
│ 04 Figma 实操 │
│ ┌───────────┐ │
│ │ 界面认识 │ │
│ │ 核心概念 │ │
│ │ 动手实践 │ │
│ └───────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘学习目标
完成本章学习后，你将能够：
| 编号 | 学习目标 | 对应小节 |
|---|---|---|
| 1 | 理解信息架构的概念，能独立绘制功能结构图 | 01-信息架构 |
| 2 | 掌握导航设计的基本原则，知道何时使用何种导航模式 | 01-信息架构 |
| 3 | 区分低保真和高保真原型的使用场景 | 02-线框图与原型 |
| 4 | 熟悉主流原型工具并能选择适合自己的工具 | 02-线框图与原型 |
| 5 | 掌握从需求文档到原型设计的转化流程 | 02-线框图与原型 |
| 6 | 理解并能应用尼尔森十大可用性原则 | 03-交互设计原则 |
| 7 | 了解费茨定律、席克定律等经典交互理论 | 03-交互设计原则 |
| 8 | 能使用 Figma 完成基础的页面设计 | 04-Figma 实操 |
| 9 | 掌握 Figma 的协作功能，能与团队高效配合 | 04-Figma 实操 |
章节内容一览
01 - 信息架构（Information Architecture）
信息架构是产品设计的"骨架"。在这一节中，你将学习如何组织和结构化产品的功能与信息，让用户能够直觉式地找到他们需要的内容。
核心内容：
- 功能结构图与信息架构图的区别
- 电商 App 的信息架构实例
- 导航设计原则
- 卡片分类法
02 - 线框图与原型设计（Wireframe & Prototype）
线框图和原型是产品经理最重要的"沟通语言"之一。这一节将教你如何将抽象的需求转化为具体可见的界面方案。
核心内容：
- 低保真 vs 高保真原型对比
- 主流原型工具深度对比
- 原型设计全流程
- 原型评审的最佳实践
03 - 交互设计原则（Interaction Design Principles）
好的交互设计让产品"用起来舒服"。这一节将系统介绍经典的交互设计理论和常见的交互模式。
核心内容：
- 尼尔森十大可用性原则
- 费茨定律与席克定律
- 格式塔原则在 UI 中的应用
- 移动端与 Web 端的交互差异
04 - Figma 实操入门（Figma Hands-on）
Figma 已经成为产品经理的必备工具。这一节将从零开始，手把手教你上手 Figma。
核心内容：
- Figma 界面与核心概念
- 创建移动端页面实操
- 团队协作功能
- 快捷键与学习资源
学习建议
┌────────────────────────────────────────────────────────┐
│ 学习建议 │
├────────────────────────────────────────────────────────┤
│ │
│ 1. 按顺序学习：01 -> 02 -> 03 -> 04 │
│ 信息架构是基础，原型设计是实践，交互原则是提升， │
│ Figma 实操是工具落地 │
│ │
│ 2. 边学边练：每学完一节，用工具动手实践 │
│ │
│ 3. 找真实产品分析：打开你手机里的 App， │
│ 试着分析它的信息架构、导航设计、交互模式 │
│ │
│ 4. 预计学习时间：8-12 小时 │
│ - 01 信息架构：2 小时 │
│ - 02 线框图与原型：2-3 小时 │
│ - 03 交互设计原则：2-3 小时 │
│ - 04 Figma 实操：2-4 小时 │
│ │
└────────────────────────────────────────────────────────┘前置知识
在学习本章之前，建议你已经完成：
- 第一章：了解产品经理的角色与职责
- 第二章：掌握产品核心概念（用户画像、需求分析等）
- 第三章：熟悉用户研究方法（访谈、问卷、可用性测试等）
如果你还没有完成前面的章节，建议先回去补充基础知识，这样学习本章时会更加顺畅。
产品设计在 PM 工作中的位置
产品设计不是孤立的环节，它是整个产品开发流程中承上启下的关键步骤。理解它在全局中的位置，有助于你更好地学习本章内容。
┌─────────────────────────────────────────────────────────────────────┐
│ 产品经理工作全流程 │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ 市场调研 需求分析 产品设计 开发跟进 上线运营 │
│ ┌──────┐ ┌──────┐ ┌──────────┐ ┌──────┐ ┌──────┐ │
│ │ 行业 │ │ 用户 │ │ 信息架构 │ │ 项目 │ │ 数据 │ │
│ │ 分析 │-->│ 研究 │-->│ 原型设计 │-->│ 管理 │--> │ 分析 │ │
│ │ 竞品 │ │ 需求 │ │ 交互设计 │ │ 开发 │ │ 迭代 │ │
│ │ 分析 │ │ 排序 │ │ 设计评审 │ │ 测试 │ │ 优化 │ │
│ └──────┘ └──────┘ └──────────┘ └──────┘ └──────┘ │
│ ^ │
│ │ │
│ 你在这里！ │
│ (本章内容) │
│ │
└─────────────────────────────────────────────────────────────────────┘产品设计的输入与输出
| 输入（从上游接收） | 产品设计阶段处理 | 输出（交付下游） |
|---|---|---|
| 用户画像 | 基于用户特征设计信息架构 | 信息架构图 |
| 需求文档 | 将需求转化为可视化方案 | 线框图/原型 |
| 用户故事 | 设计符合用户预期的交互 | 交互说明文档 |
| 竞品分析 | 参考优秀设计并创新 | 设计方案对比 |
| 业务规则 | 将规则融入界面逻辑 | 标注完整的设计稿 |
常见误区
初学者在学习产品设计时，容易陷入以下误区：
┌────────────────────────────────────────────────────────────┐
│ 常见误区与纠正 │
├──────────────────────┬─────────────────────────────────────┤
│ 误区 │ 正确认知 │
├──────────────────────┼─────────────────────────────────────┤
│ │ │
│ "PM 不需要会设计" │ PM 不需要精通视觉设计，但必须 │
│ │ 掌握信息架构和交互设计的基础 │
│ │ │
│ "原型越精美越好" │ 原型的核心是表达逻辑和交互， │
│ │ 不是视觉美感 │
│ │ │
│ "直接画原型就行" │ 信息架构 -> 线框图 -> 原型， │
│ │ 跳过思考直接画图会事倍功半 │
│ │ │
│ "用什么工具不重要" │ 工具不决定设计质量，但好工具 │
│ │ 能显著提升效率和协作体验 │
│ │ │
│ "抄竞品就够了" │ 参考竞品有必要，但照搬不可取， │
│ │ 要理解设计背后的逻辑 │
│ │ │
│ "设计是设计师的事" │ PM 主导产品设计方向和逻辑， │
│ │ 设计师负责视觉细节和体验打磨 │
│ │ │
└──────────────────────┴─────────────────────────────────────┘本章知识体系脑图
产品设计
│
┌─────────┬───────┴───────┬─────────┐
│ │ │ │
信息架构 线框图/原型 交互设计 工具实操
│ │ │ │
┌───┤ ┌───┤ ┌────┤ ┌───┤
│ │ │ │ │ │ │ │
功能 导航 低保真 工具 尼尔森 交互 Figma 协作
结构 设计 高保真 选择 十大 模式 基础 功能
图 原则 对比 对比 原则 操作
│ │ │
卡片 原型评审 费茨定律
分类法 席克定律
格式塔推荐阅读
| 书籍/资源 | 作者 | 推荐理由 |
|---|---|---|
| 《Web 信息架构》 | Peter Morville | 信息架构领域的经典著作 |
| 《Don't Make Me Think》 | Steve Krug | 可用性设计入门必读 |
| 《交互设计精髓》 | Alan Cooper | 交互设计领域的"圣经" |
| 《设计心理学》 | Donald Norman | 理解用户心理与设计的关系 |
| 《简约至上》 | Giles Colborne | 学习如何做减法设计 |
| 《用户体验要素》 | Jesse James Garrett | 理解产品设计的五层模型 |
| 《Lean UX》 | Jeff Gothelf | 精益用户体验设计方法 |
学习效果自测
在学完本章所有内容后，尝试回答以下问题检验学习效果：
┌─────────────────────────────────────────────────────────────┐
│ 学习效果自测题 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 基础题： │
│ 1. 功能结构图和信息架构图有什么区别？ │
│ 2. 低保真原型和高保真原型各适合什么阶段？ │
│ 3. 请列举尼尔森十大可用性原则中的任意 5 条 │
│ 4. 什么是费茨定律？它如何影响按钮设计？ │
│ │
│ 进阶题： │
│ 5. 为一个外卖 App 设计信息架构（画出功能结构图） │
│ 6. 用 Figma 制作一个 3 页以上的可交互原型 │
│ 7. 找出你手机中某个 App 违反尼尔森原则的 3 个例子 │
│ 8. 对比分析淘宝 App 和淘宝网页版的导航设计差异 │
│ │
│ 实战题： │
│ 9. 假设你要设计一个"校园二手交易"小程序， │
│ 请完成：信息架构 -> 核心页面线框图 -> Figma 原型 │
│ │
└─────────────────────────────────────────────────────────────┘准备好了吗？让我们从信息架构开始，搭建产品设计的第一块基石。