全面解读流程图｜附摩拜ofo案例分析（附内推）

梗概

对于任何产品设计来说，构建流程都是一个绕不开的环节。其奠定了后续的产品框架，是用户体验的基石。本文将从定义和分类出发，结合实际案例，深入浅出地阐述流程图的作用以及画法。

定义

流程——顾名思义：水流的路程；事物进行中的次序或顺序的布置和安排。流程是自然而然就存在的，它可以不规范，可以不固定，可以充满问题。

由两个及以上的步骤，完成一个完整的行为的过程，可称之为流程；注意是两个及以上的步骤。

流程图的核心就在于如何排布事物进行的次序，不同的顺序可能造成截然不同的结果。

目的

产品经理画流程图的目的不外乎几点：

流程图为产品设计基石，可以保证产品的使用逻辑合理顺畅

传达需求，用流程图来更好地表达产品逻辑

查漏补缺，检验是否有遗漏的分支流程

分类

流程图以描述对象分类，包括：业务流程图、页面流程图、功能流程图、数据流程图等。

业务流程图（Transaction Flow Diagram, TFD）

先以宋丹丹小品中的一个脑筋急转弯为例：把大象装冰箱，总共分几步？

三步：

第一步，把冰箱门打开；

第二步，把大象装进去；

第三步，把冰箱门关上。

这看似是一个笑话，但其实蕴含着很强的逻辑思维。首先这里忽略了很多现实中的限制条件。比如，以大多数冰箱的容积都不可能将大象塞进去；比如是否能把大象切成块放进去？如果把大象塞进去，它会不会又跑出来？但抛开这些限制条件，那把大象塞冰箱的极简流程就是三步。打开冰箱门，把大象装进去，最后把门关上。

我们做业务流程图，其实很多时候都需要具有把“大象塞进冰箱”的思维方式，抛开很多现有的认知局限，将具象的行为一个个抽象出来。

结合上面的例子，再来细细品味“业务流程图”的定义：

抽象地描述事物进行的次序和顺序，不涉及具体操作与执行细节。在互联网软件行业通常指脱离产品设计的用户行为流程。业务流程图是一种系统分析人员都懂的共同语言, 用来描述系统组织结构、业务流程。

不管是否理解上述定义，下面带着抽象思维去思考购物行为的业务流程图应该是什么样的？

以上的三步组成了一个最简的一个流程，其完全涵盖了任何购物行为的核心。无论是网购还是在实体超市，都是以这三个行为为主体，然后进行扩展的。相对于大家平时看到的复杂的网购流程图，以上的三步流程简直简单的令人发指，而这恰恰是印证了大道至简的原理。我始终坚信无论再复杂的事情都能简化为极其简单的事情，如果你无法将其简化，说明只是你没有理解其核心。

依据上面的最小流程单元，我们下面尝试能不能将其扩展，尝试套用在更细节的流程图上面。

页面流程图（Page Flow Diagram）

定义：指电子产品具体所呈现的页面跳转流程图。其承载了业务流程图所包含的业务流转信息。

下图以淘宝为例，展示出了网购的页面流程。

由上图红框中的三个节点我们可以看出，页面流程图依然是包含在业务流程图的。这恰恰符合定义中的要求，同时也印证了页面流程图的正确性。相较于一开始的极简流程图，现在的流程图已经渐渐变得复杂了一些。我们将抽象的业务，映射在了具象的页面上，用软件的页面承载起了业务需求。而以上就是由业务流程图到页面流程图的转化过程。

功能流程图（Function Flow Diagram）

定义：指单页面内或多页面之间的功能操作流程，其包含在页面流程中。

任何功能都是被包含在页面内的，但一个页面内往往不止一个功能，所以单单页面流程图可能无法完整表达所有流程，而这时就需要用功能流程图来更加具体表达每个页面内所包含的功能。

由上图红框中的四个节点我们可以看出，功能流程图同样也是由页面流程图拓展而来的。功能流程图是在页面流程图的基础上继续深化，变得更加复杂。同时也渐渐变得像大家日常看到的流程图一样。

粉丝福利：

程序员/产品/运营/测试等互联网专业资料、笔面试题获取：

1.微信扫码关注公众号【非典型互联网】，转发文章至朋友圈，保留10分钟以上，截图发至本公众号，即可获取干货资源链接；

2.各大互联网公司简历内推：关注公众号【非典型互联网】，在后台回复“内推”；

3.入群：关注公众号【非典型互联网】，在后台回复“入群”，人脉共享，一起交流；

数据流程图（