产品经理技能学习：流程图绘制及规范

前言

在开发过程中，遇到一些复杂业务及交互时，单靠脑海里反复冥想往往容易钻很久的牛角尖出不来，这时候通常纸笔伺候画个草图梳理逻辑，而流程图也可以作业一个梳理复杂业务逻辑或者简单表明业务运行逻辑的一个表现工具。学习流程图的绘制及规范，也算是在经验上的提升或者技术上的横向拓展。

一、流程图入门

1.1 流程&流程图

流程： 指一项活动或一系列连续有规律的事项或行为进行的程序。

流程图：用来直观地让是一个个工作过程的具体步骤图，使用图形表示流程的思路。在“技术设计”，“工作步骤”，”商业简报“等领域应用较广，也可叫做输入-输出图。它通常用一些图框来表示各种类型的操作，在框内写出各个步骤，然后用带箭头的线把它们连接起来，以表示执行的先后顺序，用图形表示执行步骤，十分直观形象，易于理解。

为什么要学流程图?

• 提高效率，梳理思路逻辑，设计业务时直观的看是否形成闭环。
• 高效表达，节省沟通成本

1.2 流程图的符号要求

下图介绍了画流程图的一些特定符号。通过符号来代替文字表述。每个符号都有特定的意义。

• 上面的符号特别多，常用的如下几个：
  

1.3 流程图的三大结构

流程图可以分为三大结构：顺序结构、选择结构、循环结构

1.3.1 顺序结构

顾名思义，顺序结构即每个步骤按先后顺序执行，这是最简单的一种结构。如图，步骤1，2，3是了个连续的动作，它们是按顺序执行的。

1.3.2 选择结构

选择结构又称分支结构，选择结构用于判断给定的条件，根据判断的结果判断某些条件，根据判断的结果来控制程序的流程。在实际运用中，某一判定结果可以为空操作（如图二、图三）。

1.3.2.1 二元选择结构

定义：二元选择结构是最常见的，我们经常遇到需要处理“是”或“否”、“确定”或“取消”这样的组合式选择。最常用的元素就是”判断决策”。
适用场景：二元选择结构出现在决策选择环境下，一般都是二元组合式选项，必选其一，或者只有其一。当选择二者之一时，也对应不同的路径。

1.3.2.2 多重选择结构

定义：流程图依据条件或者类型，提供两个以上的选项或者方案，且互相之间不是组合式选项，并列存在，不冲突。
适用场景：当条件或者类型固定后，程序给出多个同层次的选择和方案，自由选择，每个方案都按照程序设定给出路径。

1.3.3 循环结构

循环结构，又叫重复结构，即流程在一定的条件下，反复执行某一操作的流程结构。循环结构下又可以分为当型结构和直型结构。

• 三个要素：循环变量、循环体、循环终止条件
  适用场景：可重复可逆的操作，先进行程序处理，再确定是否满足条件。该操作会对条件产生能动作用，并最终有可能满足条件，从而结束重复，进入出口。
  

1.3.3.1 DO-while结构

定义：该结构和多重选择结构相似，区别在于，当条件为false时，不再重复。
适用场景：先判断条件是否满足，再决定是否继续重复该操作。

1.4 绘制注意事项

1. 绘制时，应遵循从左到右、从上到下的顺序排列
2. 一个流程从开始符开始，以结束符结束。开始符只能出现一次，结束符可出现多次。
3. 菱形为判断符号，必须要有“是和否”（或Y和N）两种处理结果。即菱形判断框一定要有两条箭头流出，且判断上下端注入流出用“是”，左右端注入流出用“否”
   
4. 同一流程图内，符号大小需要保持一致，同时连接线不能交叉，无故弯曲
5. 流程处理关系为并行关系的，需要将流程放在同一高度
6. 必要时应采用标注，以此来清晰说明流程，标注也有专门的标注符号
7. 处理流程须以单一入口和单一出口绘制，同一路径的指示箭头应只有一个。
   

二、复杂流程图的处理

对于简单的流程图，通过上面的介绍可以实现基本运用了。而对于较为复杂的流程图，我们可以在熟练掌握这些基础的前提下，可以运用子流程和泳道图来表达较为复杂、涉及多个主体的流程。
什么是逻辑流程图？
要实现某个功能，需要的业务流程的实现逻辑用流程图的形式表示出来。如，某个功能，从哪儿开始，通过什么条件判断，进入下一步走向哪儿等。

三、产品经理-流程图

3.1 业务流程图

• 定义：产品业务流程图就是通过图形化的表达形式，阐述产品在业务层面控制的图表。产品业务流程图通常作为产品设计初期阶段的工具使用，通过图形化，能够更清晰、直观地传达产品在业务层面的控制（如业务动作、方向、逻辑等信息）。
• 作用：业务流程图通常用于介绍产品业务，如产品经理需要向老板介绍产品业务时，用流程图辅助讲解的效果，相较于纯语言或文字表达要好得多。
• **场景：**表达产品业务逻辑的流转路径，不涉及具体操作与执行细节。通常使用“泳道图”来呈现多角色的配合，一般产品经理使用的较多。

• 实例：
• 泳道图

这是网上关于购物支付的泳道图，用来反映业务流程。上述的泳道图涉及到卖家、买家、第三方支付、银行等主体；每个主体都有其相应的任务；并用箭头来表示各个任务之间的先后次序。

3.2 任务流程图

• **定义：**顾名思义，就是用户对产品的一个操作流程，这个流程是为了完成某个任务。比如成功下单，比如登陆注册，比如退款等等。我又很简单的画了下面的图，这就是“用户下单”的操作流程。。
• **作用：**功能流程图通常用于介绍产品功能模块的相互关系或某个功能模块的具体组成，如产品经理需要向开发人员介绍某个新增功能模块时，可以在原型图宣讲之前使用功能流程图让其对功能的轮廓和走向了然于胸。【绘制功能流程图的过程能够帮助PM确定产品的功能范围同时避免不合理的功能使用逻辑。】
• **场景：**表达产品功能逻辑的流转路径，指完成某个具体任务的操作流程。这个相比业务流程图，已经落实到界面设计的流程中了。通常产品经理和交互设计师使用的较多。
  

• 注意：
  • 他完全是以一个用户的操作角度来写，你也可以去画一下系统后台某种操作流程等等，他并不限于所谓的消费者用户。
  • 在初画操作流程的时候，不要早早的去过分在意细节与逆流程，逆流程便是那些需要判断是否的那个“否”的流程。
  • 第一次我往往都会用最理想的状态，将流程跑通，再去思考这里面会不会有那些“如果……不……”的细节。

泳道图从战略层分析了整个业务流程，接下来要去分解到各个任务层具体是如何操作的，例如上面买家选购商品这个任务就涉及到搜索商品、浏览搜索结果、查看商品详情、若满意则进入订单任务，若不满意则返回到搜索结果或者重新搜索，这就是具体的某个任务的流程。

• 画具体功能流程的时候要注意从整体流程到局部流程，从主干流程到分支，从正常流程到异常流程。
• 拿滴滴和易到来说，打车就是主干流程，查看行程、查看优惠券、设置就是分支流程，做设计时应该先考虑打车流程，再去完善其它流程；用户正常打到车是正常流程，网络异常、高峰期打不到车等属于异常流程，先考虑正常流程、再考虑异常流程，而且异常流程一定要思考的全面。
• 产品的逻辑漏洞多半是由于异常流程没有考虑清楚，所以画任务流程图能有效的减少产品原型图的逻辑漏洞。

3.3 页面流程图

页面流程图的对象是页面，页面是互联网产品设计最基本的单元，不管APP也好、H5也好、PC端也好，这些产品由一个个页面组成。页面流描述了用户完成一个任务需要经过哪些页面。
也就是我在哪，经过什么操作，能去哪。页面流有三个要素：页面、行动点、连接线。下面拿购物的页面流举例说明：

画页面流时一般只考虑用户的正常路径就行，如果需要指出异常流程，在正常流程附近画出异常流程就行。产品设计从需求分析到信息架构、再到业务流程——任务流程——页面流、再到最后的原型图（线框图）是一个从抽象到具象的过程，也是从概况到细分的过程。经过一步步的分析，逐步将想法变成实实在在的产品，这就是产品设计的魅力所在。而这其中流程设计起到举足轻重的作用，不可忽视。

四、流程图示例&注意事项

1、 在绘制流程图时，需要将业务、功能和页面三者的描述区分清楚，避免不同类型的流程图混杂在一起

2、绘制流程图一般遵循从上往下，从左往右的结构，从整体的主流程到局部的分支流程

比如画流程图时，先把正常的流程梳理清楚（主流程），再考虑判断标识中的逆流程（分支流程）。

• 下图以印象笔记的手机号注册流程举例说明：左侧为主流程，右侧为分支流程。

3、流程图的路径走向需要有始有终，形成闭环。不能存在某个步骤中断找不到解决办法的情况

下图在邮箱注册流程中，红色框选部分判断“邮箱是否有效”时，没有说明邮箱无效时该如何解决，这里的流程是缺失的。

4、灵活使用子流程

某些子流程可能被频繁复用，如果每次都把子流程展现出来，一方面增加绘制时间成本，另一方面使流程图变得冗余，降低了可阅读性。因此被频繁复用的子流程可以绘制后存入“流程图库”中，这样再次使用该子流程时，只需要用子流程标识说明即可。

• 如下图，某后台用户需要修改更换手机号，但是在修改手机号之前需要该用户输入账号的密码，出于安全性考虑需要二次确认用户身份。图中蓝色框选区域是“手机验证码校验”的子流程。

五、流程图绘制工具

1、 Visio

Visio：Microsoft Office Visio，是Office软件系列中的负责绘制流程图和示意图的软件，是一款便于IT和商务人员就复杂信息、系统和流程进行可视化处理、分析和交流的软件。使用具有专业外观的 Office Visio 图表,可以促进对系统和流程的了解，深入了解复杂信息并利用这些知识做出更好的业务决策。

2、ProcessOn

在线流程图绘制，适用于临时画图梳理业务逻辑等
官方地址