很多人拿到需求就火急火燎的开始画原型,然后画着画着觉得有些地方没有考虑到,又回头去改,如果在画原型之前,你能将自己的业务流程想好,用户的操作流程想好,页面跳转想清楚,你就能少做很多无用功,达到事半功倍的效果。

什么是流程图

流程图=流程+图

流程:Flow,流程是为了满足特定需求而进行的有特定逻辑关系的一系列操作过程,逻辑关系包含因果关系、时间先后、必要条件、输入输出等;产品经理做需求前一定要先把这些逻辑关系理清楚

图:Chart 或者 Diagram, 将你头脑中的逻辑关系以图形化的形式呈现出来,具有图形化、可视化的特点,有利于传播与沉淀、流程重组参考。可以像你的版本迭代一样,当你的逻辑需要修改的时候拿出来迭代一下,同时因为有图,你还可以更好的给项目成员进行宣讲和交流。

从定义可以看出,只要有事情和任务,就会有流程,但是并不是所有的流程都适合用流程图的方式去表现,适合用流程图去表现的流程是一定程度固定的有规律可循的,流程中的关键环节是不会轻易更改的。

为什么要画流程图

1、帮助梳理逻辑

我们每个人想一个逻辑的时候,不一定能把这个逻辑的细枝末节都想到,如果我们贸然的画原型就有可能做许多无用功,这个时候画流程图可以帮助我们梳理清楚我们的逻辑。建议刚开始梳理逻辑的时候可以在纸上画画这种流程图,因为这样的好处是你可以快速的把你脑中的逻辑呈现在纸上,修改起来也方便,当你画好以后然后再用专业的工具画出来保存。

2、便于宣讲和传播

产品经理需要开评审会和写PRD文档的,这个时候如果你有一张清晰的流程图,不仅便于你讲解,也便于技术理解,同时把你的流程图插入PRD文档中也方便传播,当技术忘记流程的时候,查看一下文档里的流程就知道流程是啥样了,不用反复来找你确认。

3、优化迭代

对于拿到一个逻辑,我们不一定能考虑的那么周全,这个时候有一个清晰的流程图也方便做记录以及修改。
同时每个版本迭代的流程图可能会有相应的变化,通过对每个版本流程图的对比分析,可以知道流程优化在什么地方,产品优化了什么地方。

流程图元素定义

流程图是符化的图形语言,有自己的规范,菱形代表判断,距形代表具体的操作行为、开始和结束用圆角表示…

遵守这些行业规范不仅让别人觉得你专业,同时也有利于看的人理解,就好像阿拉伯数字全世界都能看懂一样。

流程图的基本逻辑结构

一般流程图有三种结构:顺序结构、选择结构、循环结构

顺序结构:

处理程序按顺序依次执行。
应用场景:具有循序发生特性的处理程序,通常上下顺序更便于阅读者习惯性的理解,顺序就是处理程序进行顺序。

选择结构:

从多个程序(判断条件)中选择一个执行,流程依据某些条件,分别进行不同处理程序。
处理语法:IF 条件 THEN DO 处理程序1 ELSE DO 处理程序2
应用场景:须经选择或决策过程,再依据选择或决策结果进行不同处理程序 。

循环结构:

重复做某件事(执行处理程序)直到满足某一条件为止。
应用场景:处理程序依据条件需重复执行的情况,如登陆时至少允许用户输入密码。

产品经理要绘制的流程图

产品中设计的流程图主要有三种,业务路程图、任务流程图、页面流程图,下面我们来一一介绍。

1、业务流程图

业务流程图就是描述那些个体在什么条件下做了什么事情,他们之间有何关联。主要分三个方面:①涉及到哪些主体?②每个主体都有哪些任务?③各个主体之间怎么联系的?一般涉及到多个主体,每个主体之间有联系,比如p2p平台。

这是p2p的业务流程图、涉及到借款人、平台、投资人、第三方支付四个主体,以及每个主题需要完成的任务、任务之间的联系和先后顺序。

2、任务流程图

泳道图一般是从战略上分析整个业务流程,让你对公司所做的业务有个大概的了解,而任务流程图就是在你的产品操作上,用户通过什么样的操作来完成它的目标,比如你去银行ATM机器上取钱,你是如何一步步操作把钱取出来的,这里以p2p理财产品购买为例,来说明购买的任务流程图,大家可以暂停视频,然后看下流程。

画流程图的时候注意主要流程和异常流程,在这个例子中,主要流程就是购买流程、异常流程就是没有设置交易密码、用户忘记交易密码、以及超过重试次数这些流程,画流程图的时候先画主要的流程,然后再把异常额流程考虑上,查漏补缺,保证不遗漏,产品的逻辑漏洞多半是由于异常情况没有考虑清楚,画流程图可以有效的帮助你梳理逻辑。

3、页面流程图

如果说业务流程图帮助你梳理战略,任务流程图帮助你梳理用户操作行为(主要给程序员看)、页面跳转流程在帮助你梳理各个页面之间的跳转关系(主要给UI和前端程序员看)这是一个逐步从整体到局部,从后端到前端的过程。

所有的产品都是由页面组成的,不论是APP、PC、H5都是由一个个页面组成的,页面流程图描述完成一个任务需要经过哪些步骤,你在画图的时候只需要清晰的表现出用户点击页面的什么地方,然后跳转到那个页面。主要由页面、行动点、连接线组成,下面以用户购买理财产品举例。

页面流程一般只考虑正常的操作流程就行,对于异常的操作流程在正常流程的旁边画出,例如:上面的正常页面跳转是用户购买这个流程,异常页面跳转流程是在购买界面金额不足的时候点击去充值流程,这个在正常流程的旁边标示出来就好。

如何绘制流程图

上面说了需要绘制流程图,这里说说绘制流程图的思路。
首先绘制业务流程图本身有没有流程?一定是有的。在软件工程学里听说一句话叫:万物皆对象。那么在流程学里,万事皆流程。吃饭难道没流程吗?就吃饭的动作而言,就有流程:拿筷子——夹菜——入口——咀嚼——吞咽。
那么,绘制业务流程图有没有可遵循的流程呢?我建议可以从下面4步着手。

1、调查研究

对于业务流程图,如果你不懂业务,可以让业务人员给你讲解,嘴甜一点;对于操作流程图你可以实地观察用户的操作,或者自己走一下业务流程以及使用竞品;至于页面流程图,只要你元素出来了,怎么跳转,这个难度应该不大。关键点就是:理清核心业务逻辑,明确用户和任务、开始与结束

2、梳理提炼

业务人员给我们讲解的流程,我们要梳理提炼出来,可以把主要的流程画出来,我们可以先在纸上画画,这样速度比较快,根据业务员的讲解,然后再用专业的工具展现出来。

梳理业务需要明确角色,这里的角色指的是用户、工作人员(比如举报业务流程中有人审核、订餐业务流程有人送餐等等)、服务端、数据库等等;角色过多时,把角色分出泳道,可以让流程图更加清晰。另外就算只有两个角色,如果重点在于表达角色之间的分工关系,那么还是泳道流程图更加合适。

梳理流程时需要考虑到异常流程,异常流程光靠产品经理自己想,很难把异常情况都考虑清楚,尤其是一些复杂的业务,最好和技术、测试多沟通,提早发现在完成这一系列操作时可能出现的问题,并且解决它。然后再向流程里面补进异常流程,异常流程可能会有很多。这时候要注意的是,保证主线流程清晰,避免绘制完流程搞不清楚走到哪是结束;

作为产品,我们需要制定一些规则,同时在交互设计时通过一些手段来避免异常的出现;(例如:输入密码时,弹出英文软键盘,为空时禁用下一步,输入到最大值时禁止输入等等。) 还需要考虑异常情况下的反馈;(例如:陌陌密码规则是6位,那么小于6位怎么提示用户,用toast、还是弹窗、还是页面内提示?)。

3、评估确认

我们可以让精通业务和涉及到流程图的角色都参与到评估流程图里来,众人拾柴火焰高,其他人员说不定能把我们没有想到的流程提出来,产品经理要多和别人交流。

优化首先要先复杂后简单,先加法后减法。先说加法,首先要把流程考虑全,考虑完整,比如异常流程、角色。然后再说减法,为什么要做减法?因为流程图的本质是沟通工具,为了让沟通更高效,作为产品要考虑用户的感受,看你流程图的研发、测试等等,都是这个流程图的用户。如果这个流程图又全又细、密密麻麻,看起来让用户感到很有压力,不能清楚的沟通,那反而偏离了它的本质。如果你在这个业务流程中,重点表达异常情况和异常流程, 那需要异常流程细化,但如果你业务流程的顺序流向,那异常流程就不用太过详细,那些详细的描述可以放在PRD中来说清楚。

4、维护更新

我们的流程图需要不断的维护和更新,因为我们的流程有可能变更或者优化,流程图也需要定期维护和更新。比如以前你是绑卡和充值两个流程,你现在为了用户体验把他们整合到一起,直接绑卡充值,这个时候你的流程图就需要变更。

绘制流程图的工具有哪些

“工欲善其事,必先利其器”,下面就为大家介绍几款常用流程图绘制工具。

1、Visio

Visio是微软推出的一款流程图绘制工具,它有很多组件库,可以方便快捷的完成流程图、泳道图、结构图的绘制,但是不支持mac电脑(苦恼),其实我一直觉得它挺好用的,虽然画出来可能没有mac上用Omnigraffle画出来的美。

2、Omnigraffle(Mac)

Mac下没有Visio很多人就用这个,这个一般流程图都能绘制,但是效率感觉没有Visio高,优点就是画出来的图形比较美,同时支持外部插件,缺点就是没有比较好的泳道流程图插件,画起泳道图来不是你太方便,需要下载的画可以去马云家买一个,省时省力,还可更新。

3、ProcessOn

是一款网页版的在线作图工具,优点是无需下载安装、破解这些破事,同时支持在线协作,可以多人同时对一个文件协作编辑,而且上手比较容易,它提供很多流程图模版,可以方便的画出流程图、思维导图、原型图、UML图,缺点就是在绘制泳道图需要增加泳道的时候,只能在最后一列加入,不能在中间加入这一点有点麻烦,还有要吐槽的就是由于是在线的,有时候导出图片,导出来的并不太好,流程图画的大的时候也无法截图。

4、Axure

axure画原型挺好用的,画人物流程图的时候也可以用,但是要画泳道图、UML图的时候,没有对应的模版,需要自己画,效率不高,如果你觉得画原型,制作文档都在Axure里,不想来回切换软件的画,可以在里面自己制作一个组件,下次直接调用。

总结:在用xmind梳理完成你的产品架构和功能列表,然后用流程图梳理一下你头脑中的逻辑,最后才是画产品的原型,这是一个从整体到局部,从具体到抽象的过程,只有这样才能达到事半功倍的效果。

画流程图的注意事项

让涉众参与,不要闭门造车:业务流程图包含了你图上的各个参与角色代表,与他们适时确认事情的原本流程
恰当的层次分解,不要将所有都铺到一张图上
逐渐深入,先抓枝干:切忌胡子眉毛一把抓。
流程一定有开始和结束(切忌交付出来的流程图,让读者还来问你:流程的开始点是什么?用清晰的代表开始和结束的符号来完成第一步和最后一步。)
版本编号:这是让沟通效率更高的优化措施。当你有了编号系统,相当于对你的流程图都赋予了唯一识别身份证号。这比中文名称更有效。比如当我们完成了业务流程图后,负责业务流程规则审核和优化的部门能够清楚在邮件里传达:H5.1流程优化,大家就更明确指的是什么。

总结:

  • 流程图=流程+图
  • 流程图的作用:帮助梳理逻辑、便于宣讲和传播、优化迭代
  • 产品经理要用到的9个流程图元素(开始/结束、操作处理、判断决策、路径、文件、已定义流程、归档、备注、连接)
  • 一般流程图有三种结构:顺序结构、选择结构、循环结构
  • 产品中设计的流程图主要有三种,业务路程图、任务流程图、页面流程图
  • 绘制流程图的步骤:调查研究、梳理提炼、评估确认、维护更新
  • 绘制流程图的工具:Visio、Omnigraffle(Mac)、ProcessOn、Axure
  • 画流程图的注意事项:不要闭门造车、分解层次、切忌胡子眉毛一把抓、明确开始和结束、版本编号命名流程图