一个超简洁非常方便适合国人使用的敏捷用户故事地图创建工具，1个html文件组成，支持持久化json文件。
| 项目 | 内容 |
|---|---|
| 文档版本 | v1.0 |
| 创建日期 | 2026-02-10 |
| 工具名称 | StoryMap v1.69 |
| 适用人群 | 产品经理、项目经理、Scrum Master |
- 使用浏览器打开
user-story.html文件 - 系统自动加载默认数据，包括：
- 10个活动维度
- 72个用户故事卡片
- 4个发布版本
- 4个用户画像
┌─────────────────────────────────────────────────────────┐
│ StoryMap v1.69 │
│ 72项PRD补全 | 105项语义图标库 | 错误修正 │
└─────────────────────────────────────────────────────────┘
| 操作 | 方式 | 说明 |
|---|---|---|
| 撤销 | 点击顶部撤销按钮 | 恢复上一步操作 |
| 重做 | 点击顶部重做按钮 | 恢复下一步操作 |
| 导出 | 点击导出按钮 | 导出为JSON文件 |
| 导入 | 点击导入按钮 | 从JSON文件导入 |
┌──────────────────────────────────────────────────────────────────┐
│ StoryMap v1.69 [撤销] [重做] [导出] [导入] │
│ │
│ [+ 发布版本] [+ 活动列] [故事地图] [用户画像] │
└──────────────────────────────────────────────────────────────────┘
功能说明：
| 图标 | 功能 | 使用场景 |
|---|---|---|
| ↩️ | 撤销 | 回退到上一个状态 |
| ↪️ | 重做 | 恢复被撤销的状态 |
| 导出 | 备份数据 | 定期备份当前工作 |
| 导入 | 恢复数据 | 从备份文件恢复 |
| + 发布版本 | 添加新版本 | 规划新的发布阶段 |
| + 活动列 | 添加活动维度 | 新增业务活动类型 |
| 故事地图 | 切换视图 | 查看用户故事地图 |
| 用户画像 | 切换视图 | 查看用户角色画像 |
┌──────────────────────────────────────────────────────────────────┐
│ Development Roadmap │
│ ┌──────────┬──────────┬──────────┬──────────┐ │
│ │ MVP (1) │ V1.0 (2) │ V1.5 (3) │ V2.0 │ │
│ ├──────────┼──────────┼──────────┼──────────┤ │
│ │ 卡片卡片 │ 卡片卡片 │ 卡片卡片 │ 卡片卡片 │ │
│ │ 卡片卡片 │ 卡片卡片 │ 卡片卡片 │ │ │
│ └──────────┴──────────┴──────────┴──────────┘ │
└──────────────────────────────────────────────────────────────────┘
视图说明：
- 左侧列：活动维度（如用户管理、会话管理等）
- 顶部行：发布版本（MVP、V1.0、V1.5、V2.0）
- 交叉单元格：用户故事卡片
┌──────────────────────────────────────────────────────────────────┐
│ 用户角色深度画像分析 │
│ │
│ ┌─────────────┐ ┌─────────────┐ │
│ │ 客户 │ │ 客服人员 │ │
│ │ [角色详情] │ │ [角色详情] │ │
│ │ [编辑][删除]│ │ [编辑][删除]│ │
│ └─────────────┘ └─────────────┘ │
│ │
│ ┌─────────────┐ ┌─────────────┐ │
│ │ 客服主管 │ │ 管理员 │ │
│ │ [角色详情] │ │ [角色详情] │ │
│ │ [编辑][删除]│ │ [编辑][删除]│ │
│ └─────────────┘ └─────────────┘ │
└──────────────────────────────────────────────────────────────────┘
步骤说明：
- 点击顶部 + 发布版本 按钮
- 弹出版本配置对话框
┌─────────────────────────────────┐
│ 发布版本配置 │
├─────────────────────────────────┤
│ 版本名称: [V1.0 ] │
│ 阶段目标: [业务协同全面覆盖 ] │
│ 开始日期: [2026-03-11 ] │
│ 结束日期: [2026-04-11 ] │
│ │
│ 颜色选择: ⚪ ⚪ ⚪ ⚪ │
│ (蓝) (绿) (黄) (红) │
│ │
│ [取消] [应用] │
└─────────────────────────────────┘
-
填写版本信息：
- 版本名称：如 "V1.0"、"Sprint 3"
- 阶段目标：简要描述本阶段目标
- 开始/结束日期：版本周期
- 颜色标识：选择版本标签颜色
-
点击 应用 按钮保存
- 双击版本标签 或
- 点击版本标签后在菜单中选择 编辑
- 修改版本信息
- 点击 应用 保存
| 颜色 | 用途 | 示例 |
|---|---|---|
| 🔵 蓝色 | 核心基础功能 | MVP |
| 🟢 绿色 | 正式发布版本 | V1.0 |
| 🟡 黄色 | 增强版本 | V1.5 |
| 🔴 红色 | 重要里程碑 | V2.0 |
活动维度位于故事地图的最左侧列，表示用户故事的分类：
┌──────────────────────────────┐
│ Development Roadmap │
│ ┌──────────────┐ │
│ │ 🔑 用户管理 │ │
│ ├──────────────┤ │
│ │ 👥 客户管理 │ │
│ ├──────────────┤ │
│ │ 🎯 会话管理 │ │
│ └──────────────┘ │
└──────────────────────────────┘
步骤说明：
- 点击顶部 + 活动列 按钮
- 弹出活动维度管理对话框：
┌─────────────────────────────────────────┐
│ 维度管理及图标库 │
├─────────────────────────────────────────┤
│ 活动维度名称: │
│ [ ] │
│ │
│ 业务图标库 (105项 语义化且去重): │
│ ┌─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┐ │
│ │👤│📝│⚙️│🔔│📊│ ... │ │
│ ├─┼─┼─┼─┼─┼─┼─┼─┼─┼─┤ │
│ │👤│📝│⚙️│🔔│📊│ ... │ │
│ └─┴─┴─┴─┴─┴─┴─┴─┴─┴─┴─┘ │
│ │
│ [删除] [取消] [确定保存] │
└─────────────────────────────────────────┘
- 输入活动维度名称（如"数据治理"、"运营管理"）
- 从图标库中选择合适的图标：
- 图标会根据输入内容智能推荐
- 推荐图标会有黄色高亮提示
- 点击 确定保存
- 鼠标悬停在活动维度标题上
- 点击出现的 编辑 图标
- 修改名称或更换图标
- 点击 确定保存
- 鼠标悬停在活动维度标题上
- 点击出现的 编辑 图标
- 点击 删除 按钮
- 确认删除
用户故事以卡片形式显示在活动与版本的交叉单元格中：
┌─────────────────────────────────────┐
│ MVP (核心IM闭环) │
├──────────────┬───────────────────┤
│ 用户管理 │ │
│ ┌──────────┐ │ │
│ │ 用户注册 │ │ │
│ │ SP:3 高 │ │ │
│ │ [待处理] │ │ │
│ └──────────┘ │ │
│ │ │
│ ┌──────────┐ │ │
│ │ 账号登录 │ │ │
│ │ SP:2 高 │ │ │
│ │ [进行中] │ │ │
│ └──────────┘ │ │
└──────────────┴───────────────────┘
卡片说明：
| 卡片元素 | 说明 |
|---|---|
| 标题 | 用户故事名称 |
| SP | 故事点数（Story Points） |
| 优先级 | 高/中/低 |
| 状态 | 待处理/进行中/已完成 |
| 边框颜色 | 进行中有蓝色左边框，已完成绿色左边框 |
方法一：直接添加
- 点击活动维度对应的空白单元格
- 弹出任务详情编辑器：
┌────────────────────────────────────┐
│ 任务详情编辑器 │
├────────────────────────────────────┤
│ 标题: │
│ [ ] │
│ │
│ ┌────────┬──────────┬──────────┐ │
│ │ SP │ 优先级 │ 状态 │ │
│ │ [ 3 ] │ [高▼] │ [待处理▼]│ │
│ └────────┴──────────┴──────────┘ │
│ │
│ 描述 (MD内容填充): │
│ ┌────────────────────────────────┐ │
│ │ 作为客户，我希望通过手机... │ │
│ │ │ │
│ │ │ │
│ └────────────────────────────────┘ │
│ │
│ [删除] [取消] [同步保存] │
└────────────────────────────────────┘
-
填写故事信息：
- 标题：简洁描述用户故事
- SP：故事点数（1-13）
- 优先级：高/中/低
- 状态：待处理/进行中/已完成
- 描述：详细的故事描述
-
点击 同步保存
方法二：拖放创建
- 按住活动维度标题
- 拖拽到目标版本列上方
- 自动创建新故事卡片
- 在弹出的编辑器中完善信息
步骤说明：
- 双击用户故事卡片
- 或鼠标悬停在卡片上，点击 编辑 按钮
- 修改卡片信息
- 点击 同步保存
拖拽移动：
- 按住用户故事卡片
- 拖拽到目标位置：
- 同活动不同版本：调整发布计划
- 不同活动：重新分类
- 版本与活动同时改变：完全重新规划
拖拽效果示意：
原位置 拖拽过程 目标位置
┌────────┐ ┌────────┐ ┌────────┐
│ 用户注册│ ───► │ ───────│ ────► │ 用户注册│
│ MVP │ │ 🖱️ │ │ V1.0 │
└────────┘ └────────┘ └────────┘
- 双击用户故事卡片打开编辑器
- 点击 删除 按钮
- 确认删除
快速更新状态而不打开编辑器：
- 鼠标悬停在故事卡片上
- 点击状态标签（待处理/进行中/已完成）
- 状态立即更新
┌──────────┐
│ 用户注册 │
│ SP:3 高 │
│ [🔄待处理]│ ← 点击切换
└──────────┘
| 状态 | 样式 | 含义 |
|---|---|---|
| 待处理 | 白色背景 | 尚未开始 |
| 进行中 | 浅蓝色背景+蓝左边框 | 正在开发 |
| 已完成 | 浅绿色背景+绿左边框 | 已完成上线 |
已完成状态效果：
┌────────────────────────────┐
│ ~~工单管理~~ │ ← 标题删除线
│ SP:3 高 │
│ ✅ 已完成 │ ← 绿色背景
└────────────────────────────┘
- 点击顶部 用户画像 标签
- 切换到用户角色画像界面
┌─────────────────────────────────────────┐
│ [故事地图] [🔵用户画像] │
└─────────────────────────────────────────┘
每个用户画像以卡片形式展示：
┌──────────────────────────────────┐
│ 👤 客户 │
├──────────────────────────────────┤
│ 职位: 公共卫生用户 │
│ │
│ 核心诉求: │
│ 遇到问题能快速找到并联系上 │
│ 人工客服并得到响应。 │
│ │
│ [编辑] [删除] │
└──────────────────────────────────┘
步骤说明：
- 点击 + 添加角色画像 按钮
- 弹出画像属性配置对话框：
┌──────────────────────────────────┐
│ 画像属性配置 │
├──────────────────────────────────┤
│ ┌────────────┬────────────┐ │
│ │ 名称 │ 配色 │ │
│ │ [测试 ] │ ⚪ ⚪ ⚪ ⚪│ │
│ └────────────┴────────────┘ │
│ │
│ 职位: │
│ [ ] │
│ │
│ 核心诉求描述: │
│ ┌────────────────────────────┐│
│ │ ││
│ │ ││
│ │ ││
│ └────────────────────────────┘│
│ │
│ [删除角色] [取消] [同步画像] │
└──────────────────────────────────┘
-
填写画像信息：
- 名称：角色名称（如"客户"、"客服"）
- 配色：选择角色卡片颜色
- 职位：角色的职位/职责
- 核心诉求：角色的核心需求描述
-
点击 同步画像 保存
- 鼠标悬停在画像卡片上
- 点击 编辑 按钮
- 修改画像信息
- 点击 同步画像 保存
- 鼠标悬停在画像卡片上
- 点击 编辑 按钮
- 点击 删除角色 按钮
- 确认删除
使用场景：
- 定期备份工作成果
- 迁移到其他电脑
- 与团队共享数据
步骤说明：
- 点击顶部 导出 按钮
- 浏览器自动下载文件：
- 文件名：
StoryMap_PRD_Strict_v1.69.json - 文件格式：JSON
- 文件名：
- 文件保存到下载目录
导出内容：
{
"v": "1.69",
"activities": [...], // 活动维度
"stories": [...], // 用户故事
"releases": [...], // 版本信息
"personas": [...] // 用户画像
}使用场景：
- 从备份恢复数据
- 从团队获取最新数据
步骤说明：
- 点击顶部 导入 按钮
- 选择要导入的JSON文件
- 系统自动验证文件格式
- 数据加载成功后显示提示：
✅ 地图数据已从文件还原 - 地图内容更新为导入的数据
注意事项：
- 导入会完全覆盖当前数据
- 建议导入前先导出备份
- 只能导入v1.69版本生成的JSON文件
系统具有自动保存功能：
| 触发条件 | 保存内容 |
|---|---|
| 添加/修改/删除活动维度 | 活动维度 |
| 添加/修改/删除用户故事 | 用户故事 |
| 添加/修改/删除版本 | 版本信息 |
| 添加/修改/删除用户画像 | 用户画像 |
保存位置：浏览器本地存储（LocalStorage）
数据持久性：
- 关闭浏览器后数据仍然保留
- 清除浏览器缓存会丢失数据
- 建议定期导出备份
问题：刷新页面后数据不见了
解决：
- 检查是否清除了浏览器缓存
- 检查是否使用了隐私/无痕模式
- 从最近的导出备份文件导入数据
预防措施：
- 定期导出备份（建议每周一次）
- 使用正常浏览器模式（非无痕模式）
问题：点击删除按钮提示"列中尚存卡片"
原因：该活动维度下还有用户故事卡片
解决：
- 将该活动下的所有用户故事卡片移动到其他活动
- 再尝试删除活动维度
问题：撤销和重做按钮无法点击
原因：
- 撤销按钮：没有可撤销的历史记录
- 重做按钮：没有可重做的操作
解决：正常现象，执行新操作后按钮会恢复可用
可能原因：
- 浏览器版本过低
- 使用了移动设备
解决：
- 使用Chrome/Firefox/Edge最新版浏览器
- 使用电脑操作而非手机
- 尝试双击卡片打开编辑器进行移动
快捷方法：
- 在"活动维度名称"输入框中输入关键词
- 系统会智能推荐相关图标
- 推荐的图标会有黄色脉冲动画
输入: "用户"
系统推荐: 👤 (有脉冲动画)
方法：无需打开编辑器
- 鼠标悬停在故事卡片上
- 直接点击状态标签：
[待处理] → [进行中] → [已完成] - 状态立即更新
步骤：
- 点击 导出 按钮，导出JSON文件
- 将JSON文件发送给团队成员
- 团队成员：
- 打开 user-story.html
- 点击 导入 按钮
- 选择JSON文件导入
建议顺序：
MVP (蓝色)
↓
V1.0 (绿色)
↓
V1.5 (黄色)
↓
V2.0 (红色)
操作方法：
- 将高优先级卡片拖到 MVP 列
- 将中优先级卡片拖到 V1.0 列
- 将低优先级卡片拖到 V1.5 列
- 根据SP值调整每版本容量
方法：
- 视觉上：查看该列下所有单元格的卡片
- 导出后搜索：导出JSON文件，用编辑器搜索"relId": "V1.0"
拖拽规则：
| 拖拽类型 | 允许 | 说明 |
|---|---|---|
| 同活动内移动 | ✅ | 调整版本计划 |
| 跨活动移动 | ✅ | 重新分类 |
| 跨版本移动 | ✅ | 调整优先级 |
禁止操作：
- 无法拖到活动维度标题行
- 无法拖到版本标签行
- 无法拖到界面外
目前系统暂未定义快捷键，所有操作均通过鼠标点击完成。
| 浏览器 | 版本要求 | 支持程度 |
|---|---|---|
| Chrome | 90+ | ✅ 完全支持 |
| Firefox | 88+ | ✅ 完全支持 |
| Safari | 14+ | ✅ 完全支持 |
| Edge | 90+ | ✅ 完全支持 |
| IE | 任意 | ❌ 不支持 |
| 项目 | 规格 |
|---|---|
| 文件格式 | HTML单文件 |
| 数据存储 | LocalStorage |
| 最大历史记录 | 60步 |
| 图标数量 | 105个 |
| 预设故事数 | 72个 |
| 版本 | 更新内容 |
|---|---|
| v1.69 | 72项PRD补全、105项语义图标库、错误修正 |