J02-那些常用的产品流程图

业务流程图，任务流程图，泳道图，用户操作流程图（操作路径），页面流程图，站点地图---我们在各种文章中都能看到他们的身影，那么他们到底是什么，怎么画出来的，什么时候画，为什么画，有什么用呢？

1.定义

• 流程：
  特定主体为了满足特定需求而进行的有特定逻辑关系的一系列操作过程。

  根据定义，我们分析一个流程时，主要需要厘清几个问题：
  ①涉及到哪些主体？简单的流程只有一个主体一种角色，复杂流程则包含多种角色。
  ②每个主体都有哪些任务？
  ③各个主体之间怎么联系的？各任务先后顺序如何？

  比如一套睡前流程，
  ①主体：睡觉的人
  ②任务：刷牙，洗脸，洗澡，换衣服
  ③先后顺序：先刷牙，再洗脸，再洗澡，换衣服

• 流程图：
  流程+图，用标准化的图形符号来表示流程。

• 业务流程图：
  用来描述业务关系，对整个业务模式进行分析。
  业务流程图可以是单主体的，比如上图的睡前流程；
  也可以是多主体，涉及多种不同角色的人，比如购物支付的流程，就包含买家，卖家，第三方担保机构，银行。通常用泳道图表示（每一个主体像一条泳道）。

• 任务流程图：
  其实和业务流程图概念一样，只不过大家提到业务流程图一般是指战略层的顶层业务，而提到任务流程图，一般是指操作层的子任务，一般是单主体的，也可以称之为子业务流程图。

  比如上图的购物支付流程中，[选购商品]这个任务又可以细分为：搜索商品、浏览搜索结果、查看商品详情、若满意则进入订单任务，这是主干任务流，若不满意则返回到搜索结果或者重新搜索。

  选购商品的流程图

  对于产品经理或交互设计师而言，任务流程的主体一般是产品的用户，任务流程图反映的则是用户的行为，所以又称之为用户操作流程图。

  对于简单流程，业务流程图与任务流程图可以合并，也就是只画一到两层。再复杂的流程，则最好分开，以免混乱，可读性也更好。

• 页面流程图：
  顾名思义是描述页面流转流程，主体是页面。用户完成一个任务要经过那些页面，各操作导向什么页面。页面流有三个要素：页面、行动点、连接线。

  页面流程图

  对于信息展示型的产品，主要操作是浏览，无太多额外操作，一般只需描述页面之间的层级关系即可，不需要描述点击操作，也称为站点地图。

站点地图 流程图分类

产品设计从需求分析——业务流程——任务流程——页面流，再到最后的原型图（线框图）是一个从抽象到具象的过程，也是从概况到细分的过程，逐步把想法变成产品。

2. 怎么画

2.1. 绘制工具

• 纸，笔：方便快捷，有助思考

• visio：符号多，专业；学习成本高，不易共享

• Axure: 上手快，易共享，界面好看；符号少

• SmartDraw：模板多

  一般的流程图用常用符号就那么几个，Axure虽然符合少，但是够用，所以我一般用纸笔思考，画出大概，再用Axure输出。

2.2. 常用图示

99%的状况这几个就够了。

2.3. 流程图的常用结构

所有流程图都是这几种结构组成。

流程图的常用结构

2.4. 流程图的基本要素

6大基本要素

• 参与者：谁在这个流程中？
  也就是我们流程定义中的主体，可以是系统，可以是个打印机，更多的指什么角色——一般是有某种工种的人。比如客服同时有小A和小B两人，但是若他们的工作性质完全一样，那么在流程图里只需要写一个客服角色就可以了。

  除了泳道图外，主体通常是产品的用户，流程图中通常是省略不表现出来的。

• 活动：做了什么事，比如点餐，结帐等活动。
  任务，操作，用矩形表述。

• 次序：这些事情发生的前后顺序如何，哪个任务是其他任务的前置条件？比如客人不结帐，就不会产生送他优惠卡的活动。
  用各种连接线，箭头体现出来。

• 输入：每项活动开始取决于什么样的输入物或数据，比如做饭的师傅开始做菜时，需要拿到具体的点菜单。

• 输出：每项活动结束后，会输入什么样的文档或数据传递给下一方，比如师傅做好菜后，如何让负责传菜的人知道菜已经做好？

一般用 注释的形式表现输入输出。

• 标准化：采用一套标准化的符号用以传递你的流程图，从而使受众更快明白。

2.5. 各种流程图要点

业务流程图
任务操作流程图
页面流程图