通过本章学习，你将能够：
产品设计是将抽象的需求转化为具体解决方案的关键环节。一个优秀的产品经理不仅要理解用户需求，更要懂得如何将这些需求转化为直观、易用、美观的产品设计。本章将带你系统掌握产品设计的核心方法论，从信息架构到交互设计，从原型制作到可用性测试，帮助你成为能够独立完成产品设计的全能型产品经理。
信息架构（Information Architecture, IA）是产品的骨架，决定了内容的组织方式、导航结构和用户寻找信息的路径。好的信息架构让用户”不思考”就能找到想要的内容。
信息架构的本质是在用户的心智模型和产品的内容结构之间建立桥梁。用户带着特定的目标和期望来到产品中，而信息架构的任务就是确保他们能够：
信息架构师的工作类似于建筑师设计大楼：不仅要考虑每个房间的功能，还要规划走廊、楼梯、电梯的位置，确保人们能够高效地在建筑内移动。在数字产品中，这意味着要考虑：
好的信息架构是隐形的。当用户能够轻松找到想要的内容时，他们甚至不会意识到信息架构的存在。相反，糟糕的信息架构会让用户感到迷茫、沮丧，最终放弃使用产品。研究表明，50% 的用户会因为找不到想要的信息而离开网站。
┌─────────────────────────────────────────────┐
│ 信息架构系统 │
├─────────────────────────────────────────────┤
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │组织系统 │ │标签系统 │ │导航系统 │ │
│ │ │ │ │ │ │ │
│ │·层级结构 │ │·类别标签 │ │·全局导航 │ │
│ │·数据库 │ │·情境标签 │ │·局部导航 │ │
│ │·超文本 │ │·索引标签 │ │·面包屑 │ │
│ └──────────┘ └──────────┘ └──────────┘ │
│ │
│ ┌──────────┐ │
│ │搜索系统 │ │
│ │ │ │
│ │·搜索接口 │ │
│ │·搜索算法 │ │
│ │·搜索结果 │ │
│ └──────────┘ │
└─────────────────────────────────────────────┘
最常见的组织方式，适合内容类别清晰的产品。这种模式模仿了现实世界的分类方式，如图书馆的分类系统、超市的货架布局。
优点：
应用场景：
设计要点：
实战案例 - 京东商城的层级优化： 早期京东的家电分类过于技术化（如”制冷设备”、”清洁电器”），用户难以理解。后来改为场景化分类（”厨房电器”、”生活电器”），转化率提升了 23%。这说明层级设计必须基于用户的认知，而非产品的技术属性。
通过多维度标签和属性组织内容，让同一内容可以通过不同路径被发现。这种方式打破了传统的树状结构，创建了一个多维的内容空间。
优点：
应用场景：
设计要点：
实战案例 - 网易云音乐的多维组织： 网易云音乐不仅按传统的歌手、专辑组织，还创新性地引入了”歌单”概念，用户可以按心情（如”深夜emo”）、场景（如”通勤路上”）、活动（如”健身房”）等维度发现音乐。这种多维组织方式让用户的音乐发现率提升了 40%，成为其核心竞争力之一。
通过链接关系构建非线性的内容网络，让用户可以自由地在相关内容间跳转，形成个性化的浏览路径。
优点：
应用场景：
设计要点：
实战案例 - Notion 的双向链接： Notion 引入了双向链接（Backlinks）功能，当你在一个页面提到另一个页面时，被提到的页面会自动显示所有引用它的页面。这种设计让知识管理从传统的文件夹模式升级为网状结构，极大提升了知识的连接性和可发现性。
卡片分类是一种用户研究方法，通过观察用户如何组织信息来理解他们的心智模型。这个方法源于认知心理学，被广泛应用于信息架构设计中。
为什么要做卡片分类：
让用户完全自主地组织信息，不给任何分类提示。
执行步骤：
实战技巧：
提供预设的类别，让用户将内容分配到这些类别中。
适用场景：
执行要点：
成功指标：
结合开放式和封闭式的优点，既有预设类别，也允许用户创建新类别。
最佳实践：
案例研究 - Airbnb 的信息架构优化： Airbnb 早期将房源按”房型”分类（整套房子、独立房间、合住房间），但通过卡片分类发现，用户更关心”体验类型”（商务出行、家庭度假、浪漫之旅）。基于这个洞察重新设计信息架构后，预订转化率提升了 15%。
导航是用户与产品交互的核心界面，好的导航设计能让用户轻松定位、快速到达目标。导航设计不仅是功能性的，更是战略性的——它直接影响用户对产品结构的理解和使用效率。
一致性原则：
可见性原则：
清晰性原则：
适度性原则：
标签栏导航 汉堡菜单 轮播导航
┌─────────┐ ┌─────────┐ ┌─────────┐
│ │ │ ≡ │ │ ← ● → │
│ │ │ │ │ │
│ 内容区 │ │ 内容区 │ │ 内容区 │
│ │ │ │ │ │
│ │ │ │ │ │
├─────────┤ │ │ │ │
│● ● ● ● ●│ └─────────┘ └─────────┘
└─────────┘
1. 标签栏导航（Tab Bar）
2. 汉堡菜单（Hamburger Menu）
3. 轮播/滑动导航
4. 混合导航模式 现代应用越来越多采用混合导航，结合多种模式的优点：
评估信息架构的质量需要定量和定性相结合的方法：
定义：用户能否快速找到目标信息
评估方法：
优化目标：
定义：分类逻辑是否符合用户认知
评估方法：
优化指标：
定义：是否覆盖所有内容类型和用户需求
评估方法：
检查要点：
定义：能否支持未来内容增长
评估维度：
设计策略：
系统应该通过适当的反馈，让用户了解当前发生了什么。
实践要点：
使用用户熟悉的语言和概念，遵循真实世界的惯例。
实践要点：
用户经常会误操作，需要提供”紧急出口”。
实践要点：
同样的词汇、情境、操作应该产生同样的结果。
实践要点：
比好的错误提示更好的是预防错误发生。
实践要点：
减少用户记忆负担，让选项和操作可见。
实践要点：
为新手和专家用户都提供合适的操作方式。
实践要点：
界面不应包含无关或很少使用的信息。
实践要点：
错误信息应该用简单的语言表达，指出问题并提供解决方案。
实践要点：
最好不需要文档，但必要时应该易于搜索和理解。
实践要点：
费茨定律：到达目标的时间与目标大小成反比，与距离成正比。
时间 = a + b × log₂(距离/目标大小 + 1)
设计启示：
距离相近的元素被视为一组。
应用：
外观相似的元素被视为相关。
应用：
视觉倾向于感知连续的形式。
应用：
倾向于将不完整的形状补全。
应用：
┌─────────────┐
│ 困难区域 │ <- 难以触及
│ │
│ 舒适区域 │ <- 单手可及
│ │
│ 自然区域 │ <- 拇指自然覆盖
│ │
└─────────────┘
特点：
适用场景：
工具推荐：
特点：
适用场景：
工具推荐：
特点：
适用场景：
工具推荐：
需求分析 -> 信息架构 -> 页面流程 -> 线框图 -> 交互原型 -> 视觉设计
↑ ↓
└──────────────── 迭代优化 ←───────────────────────────┘
设计系统是一套完整的标准，包含可重用的组件、规范和指导原则，确保产品在不同平台和场景下保持一致的用户体验。
设计系统架构
┌──────────────────────────────────────┐
│ 设计原则与价值观 │
├──────────────────────────────────────┤
│ │
│ ┌──────────┐ ┌──────────┐ │
│ │ 设计令牌 │ │ 品牌规范 │ │
│ │ │ │ │ │
│ │·颜色 │ │·Logo │ │
│ │·字体 │ │·调性 │ │
│ │·间距 │ │·语言 │ │
│ │·阴影 │ │·插画 │ │
│ └──────────┘ └──────────┘ │
│ │
│ ┌──────────────────────────────┐ │
│ │ 组件库 │ │
│ │ │ │
│ │ 基础组件 业务组件 模板 │ │
│ │ ·按钮 ·卡片 ·页面 │ │
│ │ ·输入框 ·列表 ·流程 │ │
│ │ ·选择器 ·导航 ·布局 │ │
│ └──────────────────────────────┐ │
│ │
│ ┌──────────────────────────────┐ │
│ │ 使用指南与文档 │ │
│ └──────────────────────────────┘ │
└──────────────────────────────────────┘
设计令牌是设计系统的原子级变量，定义了视觉设计的基础属性。
主色系统：
Primary-100: #E3F2FD (最浅)
Primary-200: #BBDEFB
Primary-300: #90CAF9
Primary-400: #64B5F6
Primary-500: #2196F3 (主色)
Primary-600: #1E88E5
Primary-700: #1976D2
Primary-800: #1565C0
Primary-900: #0D47A1 (最深)
语义化颜色：
Success: #4CAF50 (成功/正确)
Warning: #FF9800 (警告/注意)
Error: #F44336 (错误/危险)
Info: #2196F3 (信息/提示)
字体层级：
H1: 32px / 1.2 / Bold
H2: 28px / 1.3 / Bold
H3: 24px / 1.4 / SemiBold
H4: 20px / 1.4 / SemiBold
Body: 16px / 1.5 / Regular
Small: 14px / 1.4 / Regular
Caption: 12px / 1.4 / Regular
spacing-xs: 4px (0.5x)
spacing-sm: 8px (1x)
spacing-md: 16px (2x)
spacing-lg: 24px (3x)
spacing-xl: 32px (4x)
spacing-xxl: 48px (6x)
Brad Frost 提出的原子设计将界面分解为五个层次：
最小的不可分割的元素：
原子组合成的简单组件：
分子组合成的复杂组件：
页面的布局结构：
填充真实内容的模板实例
每个组件只负责一个功能，便于维护和复用。
通过 props 控制组件的表现：
<Button
size="large|medium|small"
type="primary|secondary|text"
disabled={true|false}
loading={true|false}
>
移动端优先的断点设置：
XS: 0-575px (手机竖屏)
SM: 576-767px (手机横屏)
MD: 768-991px (平板竖屏)
LG: 992-1199px (平板横屏/小屏电脑)
XL: 1200px+ (桌面电脑)
12 列栅格提供灵活的布局：
桌面端（1200px）：
┌─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┐
│1│2│3│4│5│6│7│8│9│10│11│12│
└─┴─┴─┴─┴─┴─┴─┴─┴─┴─┴─┴─┘
平板端（768px）：
┌───┬───┬───┬───┬───┬───┐
│ 1-2 │ 3-4 │ 5-6 │ 7-8 │9-10│11-12│
└───┴───┴───┴───┴───┴───┘
移动端（375px）：
┌─────────────────────────┐
│ 1-12 │
└─────────────────────────┘
可用性测试是验证产品设计是否满足用户需求的关键方法。通过观察真实用户使用产品，我们可以发现设计中的问题并及时改进。
投入产出比（ROI）曲线：
效果 ↑
│ ╱─────── 可用性测试
│ ╱
│ ╱ ╱────── A/B测试
│╱ ╱
├─╱────────── 专家评审
│╱
└──────────────→ 成本
低 高
形成性测试：
总结性测试：
调节性测试：
非调节性测试：
目标设定 -> 用户招募 -> 任务设计 -> 环境准备
用户招募原则：
任务设计要点：
开场介绍：
观察记录：
适时探询：
定量指标：
定性分析：
级别 0：不是可用性问题
级别 1：化妆品问题，不影响使用
级别 2：轻微问题，造成小困扰
级别 3：主要问题，显著影响效率
级别 4：灾难性问题，阻碍任务完成
在办公室走廊随机找同事测试，快速获得反馈。
展示界面 5 秒，测试第一印象和信息传达效果。
对比两个版本的设计，用数据驱动决策。
邀请 UX 专家根据启发式原则评估设计。
需求理解 → 信息架构 → 交互设计 → 视觉设计 → 原型制作 → 可用性测试 → 迭代优化
❌ 深层嵌套：超过 4 层的导航结构会让用户迷失 ✅ 扁平化设计：通过良好的分类和搜索减少层级
❌ 分类模糊：类别之间界限不清，用户不知道去哪找 ✅ 卡片分类：通过用户研究确定清晰的分类边界
❌ 忽视搜索：认为好的导航可以替代搜索功能 ✅ 搜索优先：为重要内容提供多种访问路径
❌ 过度创新：为了与众不同而违背用户习惯 ✅ 遵循惯例：在细节处创新，在模式上遵循标准
❌ 忽视反馈：用户操作后没有及时的状态反馈 ✅ 即时响应：每个操作都应有视觉、听觉或触觉反馈
❌ 复杂手势：需要用户学习的自定义手势 ✅ 标准手势：使用平台标准手势，提供可见的替代方案
❌ 过早追求完美：在概念阶段就纠结视觉细节 ✅ 快速迭代：用低保真原型快速验证核心概念
❌ 原型即产品：把原型当作最终产品来设计 ✅ 明确目的：原型是沟通和验证工具，不是最终交付物
❌ 忽视边界情况：只设计理想路径 ✅ 完整场景：考虑空状态、错误状态、极限情况
❌ 过度抽象：组件过于通用，失去特色 ✅ 平衡复用：在一致性和灵活性之间找到平衡
❌ 缺乏维护：设计系统建立后无人更新 ✅ 持续演进：指定负责人，建立更新机制
❌ 强制统一：所有场景都套用同一模式 ✅ 场景适配：允许特殊场景的定制化设计
❌ 晚期测试：等到开发完成才测试 ✅ 尽早测试：从纸面原型就开始测试
❌ 选择性倾听：只听取支持自己观点的反馈 ✅ 客观记录：记录所有问题，用数据说话
❌ 样本同质：测试用户都是相似背景 ✅ 多样化样本：覆盖不同用户群体
为一个在线教育平台设计信息架构，该平台提供编程、设计、商业三大类课程，每类有初级、中级、高级三个级别。
要求：
提示（Hint）：考虑用户的不同入口需求：按学科浏览、按级别选择、按目标（如找工作、提升技能）筛选。
分析微信的”发红包”功能，识别其中体现的尼尔森可用性原则。
要求：
提示（Hint）：从整个发红包流程思考，包括金额输入、发送确认、领取反馈等环节。
你负责一个 B2B SaaS 产品的新功能设计，需要在不同阶段选择合适的原型保真度。请为以下场景选择原型类型并说明理由。
场景：
提示（Hint）：考虑每个场景的目标、时间成本和沟通对象。
为一家金融科技创业公司建立基础设计系统。公司有 Web 端、iOS 和 Android 三个平台的产品。
要求：
提示（Hint）：金融产品需要传达信任和专业，色彩选择要考虑这一点。考虑跨平台的一致性。
为一个外卖 APP 的”预订功能”设计可用性测试方案。该功能允许用户提前预订餐厅的外卖，指定送达时间。
要求：
提示（Hint）：考虑新功能的核心价值和用户的关键路径。任务要具体且贴近真实场景。
设计一个新闻资讯类产品的文章详情页，要求适配手机、平板、桌面三种设备。
要求：
提示（Hint）：考虑不同设备的使用场景和阅读习惯，如手机的单手操作、平板的横竖屏切换。
你是设计评审的负责人，需要制定一份全面的设计评审检查清单，确保设计质量。
要求：
提示（Hint）：从用户体验、品牌一致性、技术可行性、商业目标等多个维度思考。
针对”是否在移动端使用底部导航”这个设计决策，从不同角度进行分析。
要求：
提示（Hint）：考虑用户习惯、屏幕空间、可达性、平台规范等因素。
下一章预告：在第 6 章中，我们将学习如何制定产品规划与路线图，包括产品愿景、OKR 管理、MVP 策略等内容，帮助你掌握产品战略规划的核心方法。
| ← 第 4 章：需求分析与优先级管理 | 第 6 章：产品规划与路线图 → |