1、产品经理如何绘制流程图流程图绘制入门技巧及实战案流程图绘制入门技巧及实战案例例2022-11-16产品经理如何绘制流程图流程图绘制入门技巧及实战案例2 0 2 2/2目录理论篇规范篇技巧篇实战篇2022-11-162 目录理论篇规范篇技巧篇实战篇2 0 2 2/1 0/1 1谈概念：什么是流程图谈概念：什么是流程图从定义可以看出几点：只要有事情和任务，流程就自然会有 并不是所有的流程都适合 用流程图的方式去表现 适合用流程图去表现的流 程是一定程度固定的，有 规律可循 流程中的关键环节不会朝 令夕改2022-11-16谈概念：什么是流程图从定义可以看出几点：2 0 2 2/1 0/1 1谈分类
2、：流程图有哪些类型谈分类：流程图有哪些类型2022-11-16谈分类：流程图有哪些类型2 0 2 2/1 0/1 1谈用途：为什么要绘制流程图谈用途：为什么要绘制流程图帮助产品经理梳 理、完成用户操 作流程，在早期 发现、解决问题对产品经理而言流程图相较于文 字说明更加简洁 明了，可降低与 开发、测试团队 的沟通成本对开发测试而言流程图反映了产 品的主体业务逻 辑，可为管理高 层提供一定程度 上的决策支持对管理高层而言2022-11-16谈用途：为什么要绘制流程图帮助产品经理梳 理、完成用户操 谈工具：有哪些常用工具可以绘制流程图谈工具：有哪些常用工具可以绘制流程图2022-11-16谈工具：
3、有哪些常用工具可以绘制流程图2 0 2 2/1 0/1 1谈要求：流程图有哪些基本要求谈要求：流程图有哪些基本要求使用的元素尽可能少表达的信息尽可能清晰直观易懂从上至下，从左至右绘图脉络清晰，避免流线交叉布局清晰重要的流程不遗漏有描述的流程必须完整逻辑完整反映用户真实 需求符合用户操作习惯用户视角2022-11-16谈要求：流程图有哪些基本要求 使用的元素尽可能少直观易懂 从目录理论篇规范篇技巧篇实战篇82022-11-16目录理论篇规范篇技巧篇实战篇8 2 0 2 2/1 0/1 1统一约定的符号及定义统一约定的符号及定义92022-11-16统一约定的符号及定义9 2 0 2 2/1 0/
4、1 1从上至下，从左至右的流向顺序从上至下，从左至右的流向顺序流程开始动作1动作2流程结束流程开始动作1动作2流程结束流程开始动作1动作2流程结束102022-11-16从上至下，从左至右的流向顺序流程开始动作1 动作2 流程结束流程进程符号进程符号不不做校做校验验逻辑逻辑航班降落城市 匹配提示：您的接 机地点目前不支持用车服务匹配失败匹配成功获取到达机场提示：您的接机 地点目前不支持用车服务获取到达机场匹配失败匹配成功航班降落城市 匹配2022-11-16进程符号不做校验逻辑航班降落城市 匹配提示：您的接 机地相同流程图，符号大小应为一致相同流程图，符号大小应为一致获取航班动态航班降落城市匹
5、配 一号专车支持城市获取到达机场匹配机场获取航班动态航班降落城市匹配 一号专车支持城市获取到达机场匹配机场2022-11-16相同流程图，符号大小应为一致获取航班动态获取到达机场获取航班引用流程，引用流程，而而不不是是重复重复绘绘制制觅优平台出票觅优平台出票1000供应商TMC自动通知 觅优扣款觅优TMC资金池1000否订单是否 仍有效是1000供应商TMC自动通知 觅优扣款觅优TMC资金池1000重新下单觅优平台出票1000供应商TMC自动通知 觅优扣款觅优TMC资金池1000订单是否 仍有效是否重新下单觅优平台出票2022-11-16引用流程，而不是重复绘制觅优平台出票觅优平台出票1 0
6、0 0 供应路径符号应路径符号应避免避免相相互交叉互交叉动作1校验1是否通过是动作2否校验2是否通过是动作3否动作1校验1是否通过是动作2否校验2是否通过是动作3否2022-11-16路径符号应避免相互交叉校验1 是否通过是动作2 否校验2 是否通过同一路径，箭头只能有一个同一路径，箭头只能有一个校验用户 是否成功进入主页是提示错误原因是否失败 超过3次显示 验证码录入框否是否校验用户 是否成功进入主页是提示错误原因是否失败 超过3次显示 验证码录入框否是否2022-11-16同一路径，箭头只能有一个校验用户 是否成功是提示错误原因是校验说明写在流线上校验说明写在流线上校验用户 是否成功进入主
7、页是提示错误原因是否失败 超过3次显示 验证码录入框否是否校验用户 是否成功进入主页是提示错误原因是否失败 超过3次否显示 验证码录入框是否2022-11-16校验说明写在流线上校验用户 是否成功是提示错误原因是否失败目录理论篇规范篇技巧篇实战篇172022-11-16目录理论篇规范篇技巧篇实战篇1 7 2 0 2 2/1 0/1 1用户的视角用户的视角让流程图为用户体验服务让流程图为用户体验服务产品流程是为了帮助用户更好地完成任务时刻保持以用户的视角去设计流程更容易提前发现用户可能会遇到的问题2022-11-16用户的视角让流程图为用户体验服务产品流程是为了帮助用户更明晰的主线明晰的主线让流
8、程图脉络更加清晰让流程图脉络更加清晰国内机票预订流程预订开始预订结束选择预订类型及出 行人是否继续是 进入填写订单页面返回查询结果页面 并定位到之前所选 航班位置重新选择航班否展示查询结果、全不显示任何差旅政策标准等 天最低价航班信息根据鼠标滚动确认 参考出发时间航 班，提示前后1小 时内最低价航班预订航班是否违规是提示违规项目提示预定完全合规否主流程开始任务执行任务完成任务关键校验自动匹配、选择政 策执行标准通过失败提示不通过结束 流程图以开始任务为起点，完成任务为 终点 按照常规情况顺利完成任务的动作序列 构成主流程 非顺利流转或用于处理异常情况的动作 序列构成辅助流程2022-11-16
9、明晰的主线让流程图脉络更加清晰国内机票预订流程预订开始预合并同类项合并同类项让流程图更加简约让流程图更加简约执行任务关键校验1通过失败提示不通过结束关键校验2通过失败提示不通过结束执行任务关键校验1通过不通过关键校验2通过失败提示不通过结束优化前202022-11-16优化后合并同类项让流程图更加简约执行任务关键校验1 通过失败提示巧用容器巧用容器分封复杂流程分封复杂流程Online机票查询预订流程查 询 开 始录 入 查 询 条 件，查 询选 择 航 班 舱 位 预 订载 入 填 单 页 面 填 写 订 单 信 息是提 交 订 单是是否是生 成 订 单 并 保 存 乘 机 人、联 系 人 等
10、 信 息立 即 支 付是 否 VIBE舱 位是是给 联 系 人、乘 机 人 发 送 确 认 短 信、邮 件预 定 完 成是提 示：该 特 价 舱 位 是 否 能 P到 价 格 否 暂 时 无 法 预 订，原因：配 置 P价 失 败是用 所 属 代 理 人 配 置 自 动 刷 新 航 班 结 果尝试P价 列 表，并 且 当 天 过 滤 该 舱 位选 择 出 行 人 及 政 策 选 择 出 行 人 执 行 标 准是 否 因 公 出 行 否是 否 单 程 否 选 择 返 程/联 程 航 班 舱 位是否VIBE舱位 否所 属 代 理 人 配 向 报 价 供 应 商 创 建订 单创 建 订 单 是 否提
11、 示：提 交 订 单 失 败，建 议 选 择 其 他成 功因：上 游 供 应 商 创单 失 败是是 否 VIBE中 的NFD舱位否是是 否 需 要 审 批 是 选 择 审 批 人 提 交 审 批审 批 是 否 通 过进 入 支 付 页 面，根 短 信 通 知 预 订 人 据 用 户 支 付权 限 返回 并 显 示 支 付 方 式 审 批 已 通 过是取 消 订 单，短 信 通 知 预 订 人 审 批 被 驳 回否否 PNR是否擦 除 无 效 PNR依 然 有 效 否 重 新 P（原 订 单 票 面）价是能 否 获 取 到 不 高 于 票 面 价 的 票 价能结 束重 新 生 成 PNR用 PN
12、R去供应商获 取 政 策结 束提 示：由于 长 时 间 未 支 付 或 航 空 公 司 政 策 调P 价 是 否 成 功 否 整，该 舱 位 已 经 不能 支 付，订 单 将 自 动 取 消是取 消 订 单否是提 示：提 交 订 单 失败，建 议 选 择 其 他 生成PNR航 班 重 试，失 败 原 是 否 成 功 因：PNR生成失败结 束生成PNR否 航 班 重 试，失 败 原提 示：提 交 订 单 失 败，建 议 选 择 其 他 航 班 重 试，失 败 原 因：配 置 P价 失 败否 置 是 否 能 够 P到 价格结 束提 示：支 付 失 败 否 是 否 支 付 成 功是更 新 订 单 支
13、 付 状 态 为“已 支 付”，并 提 示：支 付 成 功通 知 预 订 人 出 票 失提 示：出 票 失 败，败，已 支 付 钱 款 将是 否 出 票 成 功 否 失 败 原 因：xxx在 3个 工 作 日 内 原 路 退 回触 发 退 款 流 程根 据 查 询 条 件 返 回 航 班 结 果，按 照 用 户 报 价 方 式 报 价触 发 出 票 流 程是 否 公 司 账 户 载 入 第 三 方 支 付 页 统一支付给觅优，并实时分账支 付 否 面优化前：优化后：方法：选中符号，添加到新容器标题支付流程校验PNR是否有效查询预订流程下单流程查 询 开 始录 入 查 询 条 件，查 询选 择
14、航 班 舱 位 预 订载 入 填 单 页 面 填 写 订 单 信 息是提 交 订 单是是否是生 成 订 单 并 保 存 乘 机 人、联 系 人 等 信 息立 即 支 付是 否 VIBE舱 位是是是给 联 系 人、乘 机 人 发 送 确 认 短 信、邮 件预 定 完 成是提 示：该 特 价 舱 位 是 否 能 P到 价 格 否 暂 时 无 法 预 订，原因：配 置 P价 失 败是用 所 属 代 理 人 配 置 自 动 刷 新 航 班 结 果尝 试 P价 列 表，并 且 当 天 过 滤 该 舱 位选 择 出 行 人 及 政 策 选 择 出 行 人 执 行 标 准是 否 因 公 出 行 否是 否 单
15、 程 否 选 择 返 程/联 程 航 班 舱 位是否VIBE舱位 否所 属 代 理 人 配 向 报 价 供 应 商 创 建订 单创 建 订 单 是 否提 示：提 交 订 单 失 败，建 议 选 择 其 他成 功因：上 游 供 应 商 创单 失 败是是 否 VIBE中 的NFD舱位否是是 否 需 要 审 批 是 选 择 审 批 人 提 交 审 批审 批 是 否 通 过进 入 支 付 页 面，根 短 信 通 知 预 订 人 据 用 户 支 付权 限 返回 并 显 示 支 付 方 式 审 批 已 通 过是取 消 订 单，短 信 通 知 预 订 人 审 批 被 驳 回否否 PNR是否擦 除 无 效 P
16、NR面）价依 然 有 效 否 重 新 P（原 订 单 票能 否 获 取 到 不 高 于 票 面 价 的 票 价能结 束重 新 生 成 PNR用 PNR去 供 应 商 获 取 政 策结 束提 示：由于 长 时 间 未 支 付 或 航 空 公 司 政 策 调P 价 是 否 成 功 否 整，该 舱 位 已 经 不能 支 付，订 单 将 自 动 取 消是取 消 订 单否是提 示：提 交 订 单 失败，建 议 选 择 其 他 生成PNR航 班 重 试，失 败 原 是 否 成 功 因：PNR生 成失 败结 束生成PNR否 航 班 重 试，失 败 原提 示：提 交 订 单 失 败，建 议 选 择 其 他 航
17、 班 重 试，失 败 原 因：配 置 P价 失 败否 置 是 否 能 够 P到 价格提 示：支 付 失 败 否 是 否 支 付 成 功结 束是更 新 订 单 支 付 状 态 为“已 支 付”，并 提 示：支 付 成 功通 知 预 订 人 出 票 失提 示：出 票 失 败，败，已 支 付 钱 款 将是 否 出 票 成 功 否 失 败 原 因：xxx在 3个 工 作 日 内 原 路 退 回触 发 退 款 流 程根 据 查 询 条 件 返 回 航 班 结 果，按 照 用 户 报 价 方 式 报 价触 发 出 票 流 程是 否 公 司 账 户 载 入 第 三 方 支 付 页 统一支付给觅优，并实时分账
18、支 付 否 面2022-11-16巧用容器分封复杂流程O n l i n e 机票查询预订流程查询开始提交订单生单是否成功进入支付页面是页面提示生单失败否提示话术：抱歉，由于价格舱位或 供应商发生变动，订单提交失败提交订单生单是否成功进入支付页面是页面提示生单失 败，提示话术：抱 歉，由于价格舱位 或供应商发生变 动，订单提交失败否巧用标注巧用标注减少流程中的冗余细节减少流程中的冗余细节优化前优化后方法：选中形状，插入标注2022-11-16提交订单生单是否成功进入支付页面是页面提示生单失败否提示话术用户场景说明用户场景说明让读者更加容易理解让读者更加容易理解提交并生成订单审批完成是否审批通过
19、是反馈申请人审批未 通过Offline推送待审批 消息给TMC否短信或邮件 提请审批人审批是结束否自动取消订单触发出票流程选择审批人是否支付成功是结束否选择公司账户支付订单是否需要 审批用户场景：行政助理小兰帮销售部同事 小明提交了一张机票订单：1、该张订单是否需要审 批？需要的话由谁审批？2、审批通过如何处理？审 批不通过如何处理？用描绘开启流程的情景户 场简述可能的后续场景景要 点避免仅描述一种用户场景2022-11-16用户场景说明让读者更加容易理解提交并生成订单审批完成是否标题及样式标题及样式有效提升流程图的有效提升流程图的“逼格逼格”主题背景标题三大法宝2022-11-16标题及样式
20、有效提升流程图的“逼格”主题背景标题三大法宝2目录理论篇规范篇技巧篇实战篇252022-11-16目录理论篇规范篇技巧篇实战篇2 5 2 0 2 2/1 0/1 1实战案例：某网站offline系统登录流程独家揭秘基于信息安全设计的offline系统登录流程设计的涅槃之路2022-11-16实战案例：某网站o f f l i n e 系统登录流程独家揭秘基于信息安用户场景用户场景2022-11-16小明是某网站offline系统当中的一名用户，主要负责做企业客户的服务工作，现在，他进入登录页，需要输入账户名密码进行登录，以下是可能出现的一些场景：1、手快，有些信息忘记输入就点击了“登录”怎么反
21、馈？2、客户编号、用户名或密码输入错误时怎么反馈？3、小明忘记密码，反复尝试几个可能密码输入会否有所限制？4、小明的账户密码都没错，但其账号处于被冻结的状态，怎么反馈？5、小明的密码已经超过120天未更改，安全隐患怎么解决？6、小明能否知道自己的账号密码是否已经泄露？用户场景2 0 2 2/1 0/1 1 小明是某网站o f f l i n e 系统当第一阶：账第一阶：账户密码户密码登录开始用户输入账 户名密码用户点击“登录”是否全部填写载入登录后首页是用户名密码是 否匹配是控件冒泡提示不能 为空否页面提示：账户名 或密码错误否结束登录完成备注：原始状态流程图2022-11-16第一阶：账户密
22、码登录开始用户输入账 户名密码用户点击“登录第二阶：客第二阶：客户编号户编号备注：新增客户编号，希望实现同一个手机号可以 注册到不同的客户名的效果流程图登录开始用户输入账 户名密码用户点击“登录”是否全部填写载入登录后首页是用户名密码是 否匹配是登录完成控件冒泡提示不能 为空否页面提示：账户名 或密码错误否结束客户编号是否 存在是提示：客户编号不 存在否2022-11-16第二阶：客户编号备注：新增客户编号，希望实现同一个手机号可以第三阶：验第三阶：验证码证码备注：反复尝试登录操作时，可能是用户忘记密码，也有可能是恶意攻击，增加验证码以提升账户安全性。流程图登录开始用户输入账 户名密码用户点击
23、“登录”是否全部填写载入登录后首页是用户名密码是 否匹配是登录完成控件冒泡提示不能 为空否页面提示：账户名 或密码错误否结束客户编号是否 存在是提示：客户编号不 存在否否密码是否连续 输错2次以上否弹出验证码输入框是302022-11-16第三阶：验证码备注：反复尝试登录操作时，可能是用户忘记密码，第四阶：冻结账户提示第四阶：冻结账户提示登录开始用户输入账 户名密码用户点击“登录”载入登录后首页是 用户名密码是 否匹配是登录完成控件冒泡提示不能 为空是否全部填写 否 页面提示：账户名 或密码错误否 结束客户编号是否 存在是页面提示：客户编 号不存在否否密码是否连续 输错2次否是 弹出验证码输入
24、框账户知否处于 冻结状态否页面提示：账户已 被冻结，无法登录结束备注：账户密码无误，但账户处于冻结状态时，无 法完成登录，但需要给用户明确的反馈，流程图2022-11-16第四阶：冻结账户提示登录开始用户输入账 户名密码用户点击“第五阶：强制修改密码第五阶：强制修改密码登录开始用户输入账 户名密码用户点击“登录”载入登录后首页是用户名密码是 否匹配是登录完成控件冒泡提示不能 为空是否全部填写 否 页面提示：账户名 或密码错误否 结束客户编号是否 存在是页面提示：客户编 号不存在否 否密码是否连续 输错2次否是 弹出验证码输入框账户知否处于 冻结状态否页面提示：账户已 被冻结，无法登录结束密码是
25、否超过120天未修改否强制修改密码是 备注：为保证账户安全，产品设计时，设定了超过120天未 更改密码账户，登录时须强制更换密码的规则流程图2022-11-16第五阶：强制修改密码登录开始用户输入账 户名密码用户点击“第六阶：在第六阶：在线唯线唯一一性限制性限制登录开始用户输入账 户名密码用户点击“登录”是否全部填写载入登录后首页是用户名密码是 否匹配是登录完成控件冒泡提示不能 为空否页面提示：账户名 或密码错误否结束客户编号是否 存在是页面提示：客户编 号不存在否否密码是否连续 输错2次否弹出验证码输入框是账户知否处于 冻结状态否页面提示：账户已 被冻结，无法登录结束密码是否超过120天未修
26、改否强制修改密码是当前账户是否 在其他电脑已 登录否其他电脑已登录账 户强制下线是备注：为保证账户安全，若检测到登录用户账号在其他电脑 登录，则自动将已登录账号踢下线，并提示用户账号密码可 能已经泄露，需及时更换密码流程图2022-11-16第六阶：在线唯一性限制登录开始用户输入账 户名密码用户点击第七阶：加入容器，分封流程第七阶：加入容器，分封流程登录前登录中登录后登录开始用户输入账 户名密码用户点击“登录”载入登录后首页是用户名密码是 否匹配是登录完成控件冒泡提示不能 为空是否全部填写 否 页面提示：账户名 或密码错误否结束客户编号是否 存在是页面提示：客户编 号不存在 否 否密码是否连续
27、 输错2次否弹出验证码输入框是否账户知否处于 页面提示：账户已 冻结状态被冻结，无法登录结束密码是否超过否强制修改密码120天未修改 是 当前账户是否登录否其他电脑已登录账 户强制下线 是 在其他电脑已登录前登录中登录后将长而复杂的流 程图按照时间顺 序分封到几个容 器当中，让流程 图逻辑看起来更 加清晰明了2022-11-16第七阶：加入容器，分封流程登录前登录中登录后登录开始用户输入第八阶：流第八阶：流程图程图润润色加工色加工 为流程图选定一个棕色 系主题主题 选定一张系统自带的世 界地图作为流程图背景背景 给流程图定义一个标题标题 将用户场景描述添加到 流程图左上角用户场景2022-11-16第八阶：流程图润色加工为流程图选定一个棕色 系主题主题Q&A 流程图在需求设计中的意义？2022-11-16 绘制流程图之前需要做哪些准备工作？Q&A 流程图在需求设计中的意义？2 0 2 2/1 0/1 1 谢谢观赏！372022-11-16谢谢观赏！3 7 2 0 2 2/1 0/1 1
