作为产品经理绘制流程图主要有以下两种目的：
很多产品经理接到某个需求后经过简单的梳理思考就开始上手进行产品原型设计。而设计完成的产品原型往往在评审或开发阶段会出现缺少某种功能或功能之间缺乏缺乏相应的转跳（逻辑）关系。造成这种现象发生的主要原因便是在接到需求后没有仔细的梳理实现该需求的 *** 作流程以及流程间的逻辑关系。
所以在进行原型设计前，产品经理要通过绘制流程图的方式来建立自己的产品逻辑，并且可以根据流程图来校验自己梳理的产品功能点是否完整，或根据产品功能点来验证自己的流程图是否全面。
产品经理绘制流程图除了梳理自己的逻辑外，更重要的是让接收方能够清楚明白的了解到需求是通过什么样的 *** 作方式来实现的。这里的接收方主要指两种人，一种是需求的提出方或使用方，一般指系统运营人员。他们往往会参与产品的评审及验收工作，流程图可以很好的向他们展示需要要如何进行 *** 作以及 *** 作中需要注意的环节。
另一种接收方则是实现该需求的人员，即我们的技术人员。技术人员可以通过流程图很好的了解到整个需求实现的逻辑以及需要的功能，帮助技术人员可以更好的了解你的产品交互原型。
产品经理在设计产品时用到的流程图主要有三种，分别业务流程图、任务流程图、页面流程图，接下来我们分别对每种流程图进行讲解。
1、 业务流程图
顾名思义业务流程图就是对需求涉及的整个业务模式进行剖析，帮助产品经理梳理需求所涉及的人员、功能等信息。
在绘制业务流程图时首先要梳理清楚以下几点内容：
整个流程涉及的人员或平台有哪些，如果需要更加精细还要考虑好涉及的阶段有哪些；
每个人员或平台负责做的事情有哪些
这些事情直接的先后顺序是什么样子的
在梳理了这些内容后，整个业务流程图框架也大致成型了。接下来需要考虑的就是我们要以什么多大的粒度来梳理整个流程，这也是困扰很多新产品经理的问题，到底什么流程才是业务流程。其实我们不妨从业务流程图作用的角度来思考，如上文提到的，业务流程图的作用就是对整个业务模式进行剖析，搞清楚哪些人要做哪些事。所以业务流程中流程只需要考虑到不同人员要做哪些事即可，而不需要细分到在做这些事时不同场景下产生的不同流程。举个栗子，在一个网上购物的业务流程图中流程只需要显示到用户需要注册登录、支付这些事情即可，而不用细分到注册登录具体选用哪种方式对应什么 *** 作流程，支付使用哪种工具对应什么 *** 作流程。
业务流程图一般采用泳道图的方式来进行绘制，泳道图的好处在于可以明确区分出不同人员所需要做的 *** 作有哪些，适合流程中涉及多个人员的情况下使用。下面笔者以泳道图的方式来绘制一幅简单的网上购物的业务流程图。
可以看出整个业务流程非常简洁，很少有判断的情景出现（并非不能有判断），流程中的展示的 *** 作均为人员需要完成的主要事情。这也就是产品经理在接到需求并经过简单分析后根据需求涉及的业务模式生成的业务流程图，接下来产品经理就要根据业务流程图中涉及的具体功能来输出任务流程图。
任务流程图现在的叫法有很多，比如功能流程图、 *** 作流程图等等。笔者在这里不定义此种流程图应该叫做什么，但我们应该了解这类流程图的作用是什么。简单来讲，任务流程图就是用户要完成某项任务需要在系统上进行的 *** 作流程。任务流程图是产品经理最常用的流程图，也是协助产品经考虑各类异常情景最重要的工具手段之一。
在绘制任务流程图时首先要梳理清楚以下内容：
① 本次任务的范围，即任务的起点和重点
② 任务主流程，可参考业务流程判断
③ 任务中可能出现的异常情况
④ 下面以直接认购流程为例绘制任务流程图
从流程图中可以看出此任务流程图首先明确了认购流程是从浏览商品开始到支付成功为结束，并明确定义了只考虑直接立即购买这种形式的认购流程。其次流程图抓住了浏览商品-下单-支付这条业务主线进行绘制，保证任务不偏离业务形式。流程图中罗列了用户在进行认购 *** 作时可能产生的各类异常情景（网络、兼容性等异常情况不算在内）时对应的 *** 作流程，具体 *** 作流程可以用子流程表示不在流程图内做详细绘制。
3、 页面流程图
当我们梳理好任务中所涉及的功能以及 *** 作流程后，这时就要考虑各功能所在的页面以及功能在页面中的跳转关系，将这些信息梳理清楚后页面流程图也就形成了。对于产品经理来说页面流程图可以很好的帮助产品经理查看功能在具体页面间的跳转是否存在异常或违反正常交互方式。同时也可以帮助产品经理很好的评估接下来的原型设计大概有多少页面。下面还是以直接认购流程绘制一下页面流程图。
从流程图中可以看出流程是以每个页面为节点来进行的，流程中不同的 *** 作将各个页面串联起来从而形成了页面流程图，同时每个页面中涉及的功能或内容可以通过备注等形式表现出来，以便查看。（在实际中产品经理很少会真正输出一幅页面流程图来，毕竟整个需求的页面流程往往在绘制任务流程图时就已经清晰了，具体页面流程也会在产品原型图中表现出来，而那么多工作的你还有精力去画吗…）
下面我们说一下在实际画流程图中需要注意的问题以及一些小技巧
1、 流程图中的连接线不要交叉，不然看着会很乱；
2、绘制流程图前要想清楚主干是什么，尽量保证主干是竖直的，这样再看流程图时可以很清晰查看哪些是主干流程，哪些是分支流程；（一般用户常用的 *** 作是主干，不常用为分支）
3、流程开始符只有一个，结束符可以有多个。要保证流程是从开始到结束的闭环；
4、 流程中出现判断或分支时要标清楚每个分支对应的情景是什么；
5、流程中应尽量从一个连接点进入或驶出，这样流程图看上去会更清晰整洁一些；
6、 流程图不是越大、越详细才越好。在最初画流程图时我们总希望在一张流程图中把涉及到的所有流程都展示出来，但当我们费劲精力把所有流程画在图中后却往往会发现整个流程图显得很复杂庞大，影响其他人员的查看。这时不妨用“子流程”来代替一些已经耳熟能详的流程。
7、 巧用标注。当你想对某一个流程做更详细的解释时那就大胆的使用标注吧。
写在最后，上面这些关于流程图的知识和定义是笔者根据自己的实际工作而不断摸索和总结出来的。所谓的流程图不过是一个梳理产品逻辑的工具，而一个工具在千百种场景、千百种人的手上自然有千百种的使用方式。我们要做到的是明确自己绘制的流程图是否很好阐述了产品逻辑，是否易于其他相关人员的理解。笔者在这里写一篇关于流程图的文章，目的是希望各位刚接触或想接触产品工作的小白同学们能够对流程图的画法有个基本认识，希望你们可以将文章内容同自己的实际工作相结合，形成适合自己的流程图规则。
知而用其者，善；用而知其者，大善。
流程图中各种图形的含义如下：
开始与结束标志，是个椭圆形符号。用来表示一个过程的开始或结束。“开始”或“结束”写在符号内。活动标志，是个矩形符号。用来表示在过程的一个单独的步骤。活动的简要说明写在矩形内。判定标志，是个菱形符号。
用来表示过程中的一项判定或一个分岔点，判定或分岔的说明写在菱形内，常以问题的形式出现。对该问题的回答决定了判定符号之外引出的路线，每条路线标上相应的回答。流线标志。用来表示步骤在顺序中的进展。流线的箭头表示一个过程的流程方向。
流程图的功能
流程图有时也称作输入输出图。该图直观地描述一个工作过程的具体步骤。流程图对准确了解事情是如何进行的，以及决定应如何改进过程极有帮助。这一方法可以用于整个企业，以便直观地跟踪和图解企业的运作方式。
流程图使用一些标准符号代表某些类型的动作，如决策用菱形框表示，具体活动用方框表示。但比这些符号规定更重要的，是必须清楚地描述工作过程的顺序。流程图也可用于设计改进工作过程，具体做法是先画出事情应该怎么做，再将其与实际情况进行比较。
流程图 ：用图示的方式反映出特定主体为了满足特定需求而进行的有特定逻辑关系的一系列 *** 作过程。精简一下，就是流程图是用图示来表示某一系列的 *** 作过程。这个 *** 作过程有特定的主体，是为了满足特定的需求且有特定逻辑关系的。例如：京东的购物流程，特定主体是用户、特定需求是购物、特定逻辑关系是用户购物过程中的逻辑
产品设计中涉及的流程图有三种， 业务流程图 、 任务流程图 、 页面流程图 。
凡事都是有流程的，包括最简单的吃饭睡觉刷牙，刷牙时，你要先拿起牙刷牙膏、挤牙膏、刷牙、漱口、洗牙刷、放好牙膏牙刷。
你发现了用户的一个痛点，想要去解决它，进行产品定位和需求分析之后，你需要对整个业务模式进行分析，需要考虑一下几个问题①涉及到哪些主体？②每个主体都有哪些任务？③各个主体之间怎么联系的？
这是网上关于购物支付的泳道图，用来反映业务流程。上述的泳道图涉及到卖家、买家、第三方支付、银行等主体；每个主体都有其相应的任务；并用箭头来表示各个任务之间的先后次序。
泳道图从战略层分析了整个业务流程，接下来要去分解到各个任务层具体是如何 *** 作的，例如上面买家选购商品这个任务就涉及到搜索商品、浏览搜索结果、查看商品详情、若满意则进入订单任务，若不满意则返回到搜索结果或者重新搜索，这就是具体的某个任务的流程。
画具体任务流程的时候要注意从整体流程到局部流程，从主干流程到分支，从正常流程到异常流程。对于交互设计师来说，任务流程的主体一般是产品的用户，任务流程图反映的则是用户的行为。
拿滴滴和易到来说，打车就是主干流程，查看行程、查看优惠券、设置就是分支流程，做设计时应该先考虑打车流程，再去完善其它流程；用户正常打到车是正常流程，网络异常、高峰期打不到车等属于异常流程，先考虑正常流程、再考虑异常流程，而且异常流程一定要思考的全面。产品的逻辑漏洞多半是由于异常流程没有考虑清楚，所以画任务流程图能有效的减少产品原型图的逻辑漏洞。
虽然流程图简单，但也有一套规则。按照规则来画，才不会被笑话。
通过泳道图和流程图，把业务流程和各个功能的任务流程用图示的方式梳理清楚。其中任务流程图直观的告诉我们整个业务模型是怎样的、涉及到哪些主体，这些主体下面都有什么任务要完成；任务流程图展示了主干任务和分支任务，描述了一个任务的大致流程。
而页面流程图的对象是页面，页面是互联网产品设计最基本的单元，不管APP也好、H5也好、PC端也好，这些产品由一个个页面组成。页面流描述了用户完成一个任务需要经过哪些页面。也就是我在哪，经过什么 *** 作，能去哪。页面流有三个要素： 页面、行动点、连接线 。下面拿购物的页面流举例说明：
指在地球化学调查或异常查证工作基础上，对所获取的数据资料、信息的室内加工处理与分析，包括调查资料的单指标、多参数数理统计分析，背景值与异常下限的确定，异常圈定及异常图绘制，异常特征描述，异常分类，异常成因分析，异常的地质、环境及生态意义评价，等等。根据研究对象、目标任务，可以从不同的角度进行异常分类。
图4-4 异常研究与查证工作流程图
1）按异常赋存的介质类型进行分类，如岩石异常、土壤异常、水化学异常、水系沉积物/湖积物/浅海沉积物异常、植物/农产品异常、壤中气/大气异常、降尘/积尘异常，等等。
2）按指标参数类型的异常分类，包括重金属元素异常，非金属（如F、Se）元素异常，有机污染物异常，全量与分量（相态、有效态）异常等。
3）按照异常规模可分为局部异常（如矿体异常、单个工业污染源引起的异常，异常面积在0n～nkm2）、区域异常（如成矿区带、大矿田、工业区，异常面积在n×10km2至n×100km2）。根据全球、全国或大区域性资料，可识别出地球化学省（数千至数万km2）、地球化学巨省（面积可达数百万km2）。
4）按异常强度分类，即据异常衬度、浓度分带及浓集中心发育情况，可将异常分为强异常、弱异常等。
5）按异常指标的组合特征分类，可分为单指标异常，如Cu、Pb、Zn、Hg、Cd、F、Se单元素异常；多指标综合异常，如重金属多元素综合异常，持久性有机污染物类异常，石油烃类异常，等等。
6）按研究目的、应用服务对象分类，如用于矿产资源勘查的金属元素异常、油气指标异常、地热指标异常等，重金属元素或有机污染物等环境指标异常，土壤有机质、pH值以及营养元素有效量等农业指标异常，等等。
选择对矿产资源勘查、环境研究、农业生产具有重要指示意义的地球化学异常（包括负异常），研究其成因，评价其地质找矿意义及生态效应，是农业地质环境调查异常研究的重要任务。因此，农业地质环境调查原则上采取这一异常分类方案。
7）按异常成因分类，即在对异常成因进行了充分研究的基础上，结合实际异常查证结果，对各个异常进行成因归类，主要分为由地质背景、沉积环境所引起的原生异常，表生地球化学作用引起的次生异常，人为污染叠加引起的污染异常，等等。
浙江省农业地质环境调查中将地球化学异常分成以下4类。
1）环境质量或环境污染异常（代码为W）。指对人们生活、工农业生产和生态环境具直接危害或潜在影响的地球化学异常。研究的对象主要是Cd、Hg、As、Pb、Cu、Zn、Cr、Ni、S、F、U、DDT、六六六、多氯联苯等有毒有害金属、非金属元素和有机污染物异常。研究的目的主要是查明异常产生原因，了解或掌握元素的迁移活动规律、赋存状态，并对异常的生态效应及其环境影响做出初步评价。
2）农业营养及有益元素丰缺异常（代码为L）。指其含量高低会对农作物生长、农产品产量和质量产生一定影响的地球化学异常，主要包括N、P、K和有机质等农业营养元素或组分以及Fe、Mn、Mo、B、Cu、Zn、Se等营养、有益微量元素异常。本项目重点研究N、P、K、有机质总量丰缺状况和Fe、Mn、Mo、B、Cu、Zn、Se有效量含量水平。
3）矿产资源类异常（代码为K）。指示矿化作用、用于寻找金属矿产资源的地球化学异常。根据调查区成矿地质条件、矿产资源种类和分布特征，选择Au、Ag、Cu、Pb、Zn、Sn、Mo等主要成矿金属元素和As、Hg、Cd等找矿指示元素，圈定异常并研究分析。
4）其他异常（代码为J）。根据钱塘江两岸浅层天然气埋藏浅、矿点多和浙北平原地热资源潜力较大的特点，选择Hg、As、S、Br、F、I、Cl等指示元素进行异常研究，并用于浙北区浅层天然气和地热资源潜力评价。
1、各司其职的形状在我的流程图中，适用于不同目的和功能的形状都有各自确定的规范。到目前为止，我一共定义了以下一些形状：
（1）开始和结束

作为整张流程图的头和尾，必须标清楚到底具体指哪个页面，以免日后出现歧义。
（2）网页

如你所见，网页的形状是一个带有漂亮的淡蓝色过渡效果的长方形，它的边框为深蓝色，中间写明了这个网页的用途，括号中的数字代表这个形状所对应的demo文件的名称（比如这里是2html），我有时会把流程图输出为网页的形式，并把每个网页形状和它所对应的demo文件链接起来，这样查看起来非常方便。对OmniGraffle来说这是小菜一碟，如果你被迫用Visio，嗯……
另外，所有从形状出来的线条，都具有和此形状边框一样的颜色。这样的做法不仅看起来漂亮，在复杂的流程图中还能轻易地标明各形状的关系。我没有见过类似的做法，所以这是由我首创也说不定，呵。
（3）后台判断

很常见的一个形状。我在用法上有一点和其他人的不同在于，我几乎总是让‘是’的分支往下流动，让‘否’的分支向右流动。因为流程图一般都是从上向下、从左到右绘制的，遵循上述规则一方面可以让绘制者不用为选择方向 *** 心，另一方面也方便了读者阅读。
（4）表单错误页

既然有表单，当然会有错误信息。其实这个信息很重要，用户出错时惶恐不安，就靠着错误提示来解决问题了。你不在流程图里说什么时候显示错误页、不在demo里提供错误页，有些程序员会直接在网页上写个“错误，请检查”，所以UI设计师一定要对这个东西重视起来。
但一般来说也没必要把每种错误都在流程图中表示出来，因为含有两个文本框的表单就有三种出错情况了，多了就更不用说了。所以我都是把错误页变为表单的附属页，比如表单页的编号为2，那么此表单错误页的编号就从21开始排下去，每种错误放到一个附属页中，这样程序员在拿到demo时也能搞清楚什么意思。
结合网页和表单的形状，一个表单验证的流程图就是这样的：

（5）后台动作

并非所有后台动作都绘入流程图中（否则流程图就会变成庞然大物了），只有需要特别强调的后台动作（和用户体验直接相关的）才使用此形状。
（6）多重分支

多重分支指的是几种并列的情况，每种情况都有发生的可能，发生哪种取决于分支起始处的判断结果。
（7）对话框

有时候一些 *** 作可以利用对话框来完成， 这些对话框由js生成，显示在父界面之上。
（8）注释

这个形状（比如页面）详细的内容，或者需要解释的业务逻辑，甚至用户此处的情况等，我都会放到注释中，这样既降低沟通成本，又可作为备忘。
（9）跳转点

在一个复杂的流程图中，往往出现跳转到另外一个远处结点的情况，此时如果直接用线连过去，未免使得流程图显得凌乱，用一个跳转点就解决问题了。在点内标明跳转到的形状的编号，画起来容易，看起来也清楚。
此外，也可以利用跳转点来分割篇幅巨大的流程图，Yahoo!就这么用。
（10）子流程

分割篇幅巨大的流程图，更好的办法是用子流程。
要注意的是，如果你在流程图中使用了子流程这一形状，一定记得同时附上子流程图，以消除影响项目质量的不确定性因素。另外，在子流程图中也可以标明其所属关系。
（11）流程块

可以用流程块将整张流程图分隔为几个部分，并为每个部分单独命名（比如“流程块1”等）。这样做的目的在于从视觉上使复杂的流程图变得更为清晰，在沟通时也方便。
2、图例和流程图信息

在团队合作中，图例是必须的，否则没人知道你画出来的东西到底是什么。即使流程图只给自己看，也最好养成标注图例的好习惯。其实这道理有点类似程序中的注释。
流程图信息也是必备的。其内容至少应包括作者、时间、流程图名称和版本（如下图）。这一方面可以让读者（其他同事）在有问题时能够方便地找到作者你，也起到了meta的作用。
3、绘制流程图的工具
Mac下首选OmniGraffle，Windows下除了Visio，似乎没有更好的选择（虽然Visio已经很难用了）。
4、评价流程图的好坏
我觉得一个好的流程图至少应做到以下几点：
密切地迎合了用户的心理状态、如实的反映了用户的 *** 作习惯。流程图是要指导UI设计的，是UI设计的参照物，如果流程图本身无法正确描绘出用户的情况的话，UI十有八九会出问题；
覆盖了各种可能的情况和细节。这非常重要。任何在先期不确定的因素，都会在项目中成为随时引爆的地雷，都会直接降低最终上线的UI质量。此种情况真是屡见不鲜。但同时这条又很难做到，因为它不仅要求设计师熟悉用户，也要设计师充分知晓产品的商业逻辑，还要了解系统的运作机制，落下以上任何一个方面，都会在流程图中留下死角。这个问题我不知道有没有更好的解决方案，不过与PD和系分反复沟通是个行之有效的方法；
考虑到系统的设计和承受能力。系统的运作机制和承受能力必须在绘制流程图过程中考虑进去，以免出现流程图被开发人员q毙的情况。我的习惯是，在绘制流程图时和系统分析师频繁沟通和交流，确保每一个环节都是可行的；
确保别人看得懂你的流程图。别人现在看不懂，你自己以后也一样看不懂。为了降低沟通成本，把流程图画清楚吧。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）