主题
01 - 信息架构（Information Architecture）
"信息架构是关于组织、标签、导航和搜索系统的设计，旨在帮助人们找到和管理信息。" —— Peter Morville
目录
什么是信息架构
定义
信息架构（Information Architecture，简称 IA）是指对信息进行组织、分类和结构化设计的过程，目的是让用户能够高效、直觉式地找到所需信息并完成任务。
简单来说，如果把一个产品比作一栋大楼：
信息架构就是大楼的"平面图"和"指示牌系统"
┌─────────────────────────────────────────┐
│ 一栋商场大楼 │
├─────────────────────────────────────────┤
│ │
│ 楼层规划 ──────> 信息分类 │
│ (哪层卖什么) (内容如何归类) │
│ │
│ 指示牌 ──────> 导航系统 │
│ (怎么找到目标) (用户如何找到内容) │
│ │
│ 电梯/楼梯 ─────> 导航模式 │
│ (移动方式) (跳转方式) │
│ │
│ 店铺门牌 ─────> 标签系统 │
│ (标识名称) (命名与分类) │
│ │
└─────────────────────────────────────────┘信息架构的四大要素
信息架构由四个核心系统组成：
┌──────────────────┐
│ 信息架构 │
│ 四大核心系统 │
└────────┬─────────┘
│
┌────────────┼────────────┐
│ │ │
┌────┴────┐ ┌───┴────┐ ┌───┴─────┐
│ 组织系统 │ │ 标签系统│ │ 导航系统 │
│ │ │ │ │ │
│ 内容如何 │ │ 内容如何│ │ 用户如何 │
│ 分类归组 │ │ 命名标识│ │ 浏览跳转 │
└─────────┘ └────────┘ └─────────┘
│
┌────┴────┐
│ 搜索系统 │
│ │
│ 用户如何 │
│ 检索查找 │
└─────────┘| 系统 | 核心问题 | 举例 |
|---|---|---|
| 组织系统 | 信息如何分类和归组？ | 电商按"服饰/数码/食品"分类 |
| 标签系统 | 信息如何命名和标识？ | "我的订单"而不是"订单管理系统" |
| 导航系统 | 用户如何浏览和跳转？ | 底部 Tab 栏、面包屑导航 |
| 搜索系统 | 用户如何检索信息？ | 搜索框、筛选器、排序功能 |
为什么 PM 要懂信息架构
作为产品经理，信息架构能力直接影响你的产品质量：
- 降低用户学习成本：合理的信息组织让用户无需培训即可上手
- 提高任务完成率：用户能快速找到目标功能，减少流失
- 奠定产品扩展基础：良好的架构便于后续功能扩展
- 提升团队沟通效率：清晰的结构图让开发、设计、测试团队达成共识
功能结构图 vs 信息架构图
很多初学者容易混淆这两个概念。下面我们详细对比：
核心区别
| 维度 | 功能结构图 | 信息架构图 |
|---|---|---|
| 关注点 | 产品"能做什么" | 用户"怎么找到" |
| 视角 | 产品/系统视角 | 用户视角 |
| 内容 | 功能模块及其层级关系 | 页面、内容的组织和导航关系 |
| 作用 | 梳理产品功能边界 | 设计用户浏览路径 |
| 产出时间 | 需求分析阶段 | 产品设计阶段 |
| 表现形式 | 树状图、模块图 | 站点地图、流程图 |
| 读者 | PM、开发团队 | PM、设计师、前端开发 |
| 粒度 | 功能点级别 | 页面/内容级别 |
图示对比
功能结构图——关注"系统有哪些功能"：
功能结构图（系统视角）
━━━━━━━━━━━━━━━━━━━━
┌──────────────┐
│ 电商 App │
└──────┬───────┘
│
┌───────────┼───────────┐
│ │ │
┌───┴───┐ ┌───┴───┐ ┌───┴───┐
│商品管理│ │订单管理│ │用户管理│ <-- 功能模块
└───┬───┘ └───┬───┘ └───┬───┘
│ │ │
·商品搜索 ·创建订单 ·注册登录
·商品详情 ·支付 ·个人信息
·商品收藏 ·退款 ·收货地址
·商品评价 ·物流查询 ·账户安全信息架构图——关注"用户怎么找到内容"：
信息架构图（用户视角）
━━━━━━━━━━━━━━━━━━━━
┌──────────────┐
│ 电商 App │
└──────┬───────┘
│
┌───────┬───┴───┬───────┐
│ │ │ │
┌───┴──┐┌──┴──┐┌───┴──┐┌──┴──┐
│ 首页 ││分类 ││购物车││ 我的│ <-- 用户看到的页面
└──┬───┘└──┬──┘└──┬───┘└──┬──┘
│ │ │ │
·轮播图 ·一级 ·商品 ·订单列表
·搜索栏 分类 列表 ·收货地址
·推荐流 ·二级 ·数量 ·优惠券
·活动入口 分类 编辑 ·设置
·商品 ·结算
列表 页面什么时候用哪个？
需求分析阶段 产品设计阶段
│ │
v v
┌──────────┐ ┌──────────┐
│ 功能结构图│ ────────────> │ 信息架构图│
│ │ 转化/细化 │ │
│ 定义功能 │ │ 组织页面 │
│ 划定边界 │ │ 设计导航 │
└──────────┘ └──────────┘实际工作建议：
- 在 MRD/BRD 阶段，先画功能结构图，梳理产品整体功能
- 在 PRD 阶段，再画信息架构图，设计用户的浏览和操作路径
- 两者可以并行迭代，相互补充
电商 App 功能结构示例
下面是一个典型电商 App（类似淘宝/京东）的完整功能结构图：
┌─────────────┐
│ 电商 App │
└──────┬──────┘
│
┌────────────┬───────────┼───────────┬────────────┐
│ │ │ │ │
┌────┴────┐ ┌─────┴────┐ ┌───┴───┐ ┌────┴────┐ ┌────┴────┐
│ 首页 │ │ 分类频道 │ │购物车 │ │ 消息中心│ │ 个人中心│
└────┬────┘ └────┬─────┘ └───┬───┘ └────┬────┘ └────┬────┘
│ │ │ │ │
│ │ │ │ │
┌──────┤ ┌─────┤ ┌────┤ ┌─────┤ ┌─────┤
│ │ │ │ │ │ │ │ │ │
│ 搜索栏 │ 一级 │ 商品 │ 系统 │ 个人信息
│ │ │ 分类 │ 列表 │ 通知 │ │
│ 轮播图 │ │ │ │ │ │ │ 订单管理
│ │ │ 二级 │ 全选/ │ 物流 │ │
│ 快捷入口 │ 分类 │ 编辑 │ 通知 │ │ ┌─全部
│ │ │ │ │ │ │ │ │ ├─待付款
│ 秒杀专区 │ 商品 │ 数量 │ 活动 │ │ ├─待发货
│ │ │ 列表 │ 调整 │ 推送 │ │ ├─待收货
│ 推荐流 │ │ │ │ │ │ │ ├─待评价
│ │ │ 筛选 │ 结算 │ 客服 │ │ └─退款
│ 品牌专区 │ 排序 │ │ │ 消息 │ │
│ │ │ │ │ │ 收货地址
│ │ │ │ │ │ │
│ │ │ 订单 │ │ 优惠券
│ │ │ 确认 │ │ │
│ │ │ │ │ │ 收藏夹
│ │ │ │ │ │ │
│ │ │ 支付 │ │ 浏览历史
│ │ │ 页面 │ │ │
│ │ │ │ │ 账户安全
│ │ │ │ │ │
│ │ │ │ │ 设置
│ │ │ │ │
│ │ │ │ │ 客服/帮助单个模块细化——商品详情页
┌──────────────┐
│ 商品详情页 │
└──────┬───────┘
│
┌──────────┬────────┼────────┬──────────┐
│ │ │ │ │
┌────┴───┐ ┌───┴────┐┌──┴───┐┌──┴───┐ ┌───┴────┐
│商品图片│ │基本信息││规格 ││评价 │ │推荐商品│
│ 轮播 │ │ ││选择 ││ │ │ │
└────────┘ └───┬────┘└──┬───┘└──┬───┘ └────────┘
│ │ │
·商品名称 ·颜色 ·评分统计
·价格 ·尺寸 ·图片评价
·促销标签 ·版本 ·文字评价
·销量 ·数量 ·追评
·发货地 │
│
┌─────┴─────┐
│ 底部操作栏 │
├───────────┤
│ 客服 | 收藏│
│ 加购 | 购买│
└───────────┘导航设计原则
导航是信息架构中最直接面向用户的部分。好的导航能让用户知道"我在哪""我能去哪""怎么回去"。
常见导航模式
1. Tab 底部导航
最常见的移动端导航模式，适合 3-5 个核心模块。
┌────────────────────────────────┐
│ │
│ 页面内容区域 │
│ │
│ │
│ │
│ │
├────────────────────────────────┤
│ 首页 │ 分类 │ 购物车 │ 我的│ <-- Tab 导航栏
│ 🏠 │ 📋 │ 🛒 │ 👤 │
└────────────────────────────────┘适用场景：
- 功能模块数量在 3-5 个
- 各模块之间相互独立
- 用户需要频繁切换模块
代表产品： 微信、淘宝、抖音、微博
2. 汉堡菜单（Hamburger Menu）
通过一个图标隐藏导航菜单，点击展开。
┌────────────────────────────────┐
│ ☰ 应用名称 搜索 🔍 │ <-- 顶部栏含汉堡图标
├────────────────────────────────┤
│ │
│ 页面内容区域 │
│ │
└────────────────────────────────┘
点击 ☰ 后展开:
┌──────────┬─────────────────────┐
│ │ │
│ 首页 │ (被遮挡的 │
│ 发现 │ 页面内容) │
│ 消息 │ │
│ 收藏 │ │
│ 设置 │ │
│ 关于 │ │
│ │ │
└──────────┴─────────────────────┘适用场景：
- 导航项较多（5 个以上）
- 辅助功能的入口
- 更注重内容展示的产品
注意事项： 汉堡菜单会降低功能的可发现性，核心功能不建议藏在汉堡菜单中。
3. 顶部 Tab 导航
常见于内容型产品，用于同一模块下的子分类切换。
┌────────────────────────────────┐
│ 推荐 │ 关注 │ 热榜 │ 视频 │>>│ <-- 顶部 Tab（可左右滑动）
│ ──── │ 下划线表示当前选中
├────────────────────────────────┤
│ │
│ 对应内容区域 │
│ （可左右滑动切换） │
│ │
└────────────────────────────────┘适用场景：
- 同一模块下的内容分类
- 子分类较多，可滑动查看
- 内容型/资讯型产品
代表产品： 今日头条、知乎、B站
4. 面包屑导航（Breadcrumb）
展示用户当前所处的层级路径，常见于 Web 端。
┌──────────────────────────────────────────┐
│ 首页 > 电子产品 > 手机 > iPhone 16 Pro │ <-- 面包屑
├──────────────────────────────────────────┤
│ │
│ 商品详情页面内容 │
│ │
└──────────────────────────────────────────┘适用场景：
- 层级结构较深的网站（如电商、文档站）
- 用户需要知道当前位置
- 需要快速回到上级页面
5. 侧边栏导航
常见于 Web 端后台管理系统。
┌──────────┬──────────────────────────────┐
│ │ 顶部栏 │
│ 仪表盘 ├──────────────────────────────┤
│ > 用户 │ │
│ 管理 │ │
│ > 商品 │ 内容区域 │
│ 管理 │ │
│ > 订单 │ │
│ 管理 │ │
│ > 数据 │ │
│ 统计 │ │
│ > 系统 │ │
│ 设置 │ │
│ │ │
└──────────┴──────────────────────────────┘适用场景：
- B端/后台管理系统
- 功能模块较多
- 需要展示多级菜单
导航模式选择指南
需要几个核心入口？
│
┌────────────┼────────────┐
│ │ │
3-5 个 5 个以上 2 个以下
│ │ │
v v v
底部 Tab 是移动端？ 考虑其他
│ ┌────┴────┐ 模式
│ 是 否
│ │ │
v v v
内容需要 汉堡菜单 侧边栏
子分类？ + 导航
│ 底部 Tab
┌──┴──┐
是 否
│ │
v v
顶部 保持
Tab 底部 Tab导航设计的核心原则
| 原则 | 说明 | 示例 |
|---|---|---|
| 可见性 | 核心导航要始终可见 | 底部 Tab 常驻显示 |
| 一致性 | 全局导航保持统一 | 所有页面底部 Tab 样式一致 |
| 可识别性 | 导航标签清晰易懂 | 用"我的"而非"个人中心" |
| 反馈性 | 当前位置有明确指示 | 选中的 Tab 高亮显示 |
| 可达性 | 任何页面都能回到首页 | 提供返回/首页按钮 |
| 扁平化 | 减少层级深度 | 控制在 3 层以内 |
卡片分类法
什么是卡片分类法
卡片分类法（Card Sorting）是一种用户参与的信息架构设计方法。将产品的功能/内容写在卡片上，让用户按照自己的理解进行分组和命名。
┌──────────────────────────────────────────────────┐
│ 卡片分类法流程 │
├──────────────────────────────────────────────────┤
│ │
│ Step 1: 准备卡片 │
│ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │
│ │修改 │ │查看 │ │退货 │ │收藏 │ │优惠 │ │
│ │密码 │ │订单 │ │申请 │ │商品 │ │券 │ │
│ └─────┘ └─────┘ └─────┘ └─────┘ └─────┘ │
│ │
│ Step 2: 用户分组 │
│ ┌──────────────┐ ┌──────────────┐ │
│ │ 账户相关 │ │ 购物相关 │ │
│ │ ┌─────┐ │ │ ┌─────┐ │ │
│ │ │修改 │ │ │ │查看 │ │ │
│ │ │密码 │ │ │ │订单 │ │ │
│ │ └─────┘ │ │ └─────┘ │ │
│ │ │ │ ┌─────┐ │ │
│ │ │ │ │退货 │ │ │
│ │ │ │ │申请 │ │ │
│ │ │ │ └─────┘ │ │
│ └──────────────┘ └──────────────┘ │
│ │
│ Step 3: 分析结果 --> 优化信息架构 │
│ │
└──────────────────────────────────────────────────┘三种卡片分类方式
| 类型 | 描述 | 适用阶段 |
|---|---|---|
| 开放式 | 用户自由分组并命名，没有预设分类 | 产品早期探索阶段，不确定分类方式时 |
| 封闭式 | 提供预设分类，用户将卡片归入已有分组 | 验证现有分类是否合理 |
| 混合式 | 提供部分预设分类，用户可修改或新增 | 已有基础架构，需要优化时 |
实施步骤
1. 确定目标 2. 准备卡片 3. 招募参与者
┌──────────┐ ┌──────────┐ ┌──────────┐
│ 明确要解决 │ ---> │ 20-60张 │ ---> │ 5-15人 │
│ 什么问题 │ │ 功能/内容 │ │ 目标用户 │
└──────────┘ │ 卡片 │ └──────────┘
└──────────┘ │
v
4. 执行分类 5. 记录数据 6. 分析结果
┌──────────┐ ┌──────────┐ ┌──────────┐
│ 用户独立 │ ---> │ 记录每位 │ ---> │ 相似性 │
│ 完成分类 │ │ 参与者的 │ │ 矩阵分析 │
└──────────┘ │ 分组情况 │ └──────────┘
└──────────┘分析方法——相似性矩阵
通过统计不同用户将哪些卡片归为同一组的比例，得出相似性矩阵：
相似性矩阵（数字代表被归为同一组的次数/总人数）
修改密码 查看订单 退货申请 收藏商品 优惠券
修改密码 - 10% 10% 5% 15%
查看订单 10% - 80% 30% 40%
退货申请 10% 80% - 10% 20%
收藏商品 5% 30% 10% - 35%
优惠券 15% 40% 20% 35% -
解读：查看订单和退货申请的相似度为 80%，说明大多数用户
认为它们应该归为同一类（都属于"订单相关"）线上卡片分类工具
| 工具 | 特点 | 价格 |
|---|---|---|
| Optimal Sort | 专业的卡片分类在线工具 | 付费（有免费试用） |
| UserZoom | 综合用研平台，包含卡片分类 | 企业级付费 |
| Miro | 在线白板，可模拟卡片分类 | 免费版可用 |
| 腾讯问卷 | 可通过问卷形式实现简单的卡片分类 | 免费 |
常用工具
产品经理在进行信息架构设计时，常用以下工具：
工具对比
| 工具 | 类型 | 平台 | 价格 | 适合场景 | 学习成本 |
|---|---|---|---|---|---|
| XMind | 思维导图 | Win/Mac/Linux | 免费版可用，Pro ¥388/年 | 快速梳理功能结构 | 低 |
| Figma | 设计工具 | Web/Win/Mac | 免费版可用 | 绘制精美的信息架构图 | 中 |
| ProcessOn | 在线绘图 | Web | 免费版可用（文件数限制） | 流程图、架构图 | 低 |
| Draw.io | 在线绘图 | Web | 完全免费 | 各类架构图、流程图 | 低 |
| Miro | 在线白板 | Web | 免费版可用 | 团队协作梳理架构 | 低 |
| 幕布 | 大纲笔记 | Web/App | 免费版可用 | 快速列出功能大纲 | 极低 |
工具选择建议
┌──────────────────────────────────────────────┐
│ 信息架构工具选择指南 │
├──────────────────────────────────────────────┤
│ │
│ 快速头脑风暴 ──────> XMind / 幕布 │
│ (个人梳理) │
│ │
│ 团队协作梳理 ──────> Miro / ProcessOn │
│ (远程讨论) │
│ │
│ 正式输出文档 ──────> Figma / Draw.io │
│ (交付设计稿) │
│ │
│ 免费优先 ──────> Draw.io / 幕布 │
│ (预算有限) │
│ │
└──────────────────────────────────────────────┘各工具简介
XMind
XMind 是最流行的思维导图工具之一，非常适合快速梳理功能结构。
优势：
- 操作简单，上手极快
- 支持多种图表类型（思维导图、鱼骨图、组织结构图等）
- 可导出为图片、PDF、Markdown
使用场景：
- 产品功能结构梳理
- 竞品功能对比
- 会议记录与头脑风暴
Figma
Figma 不仅是设计工具，也可以用来绘制精美的信息架构图。
优势：
- 在线协作，团队实时编辑
- 表达能力强，可以画出美观的架构图
- 与后续的 UI 设计工作无缝衔接
使用场景：
- 正式的信息架构图输出
- 需要与设计师共享的架构方案
- 包含视觉元素的架构展示
ProcessOn
ProcessOn 是国内常用的在线绘图工具，特别适合画流程图和架构图。
优势：
- 中文界面，国内访问速度快
- 模板丰富，上手简单
- 支持多人协作
使用场景：
- 业务流程图绘制
- 信息架构图输出
- 团队共同编辑架构方案
本节小结
┌────────────────────────────────────────────────────┐
│ 本节核心要点 │
├────────────────────────────────────────────────────┤
│ │
│ 1. 信息架构 = 组织系统 + 标签系统 │
│ + 导航系统 + 搜索系统 │
│ │
│ 2. 功能结构图关注"系统能做什么" │
│ 信息架构图关注"用户怎么找到" │
│ │
│ 3. 导航设计要遵循：可见、一致、可识别、 │
│ 反馈、可达、扁平化 │
│ │
│ 4. 卡片分类法是让用户参与 IA 设计的好方法 │
│ │
│ 5. 选择工具时，快速梳理用 XMind， │
│ 正式输出用 Figma 或 ProcessOn │
│ │
└────────────────────────────────────────────────────┘练习任务
- 选择你手机上常用的一个 App，尝试画出它的功能结构图
- 再画出它的信息架构图（从用户视角）
- 分析它的导航模式属于哪种类型，是否合理