什么叫产品的流程图

作者: Carson带你学安卓 | 来源:发表于2015-12-06 21:42 被阅读3210次





    流程图定义

    流程图是表示流经一个系统的信息流的图形代表。
    说白了就是表示先做什么后做什么,实际上就是“开始,结束,行动,状态与判断”的组合。


    产品流程图

    产品流程图包括业务流程、操作流程和页面跳转流程。

    业务流程图

    作用:描述系统内各角色之间的业务关系和作业顺序,包括使用产品各种角色中的操作,是描述整个系统的业务走向和业务流程,以业务处理过程为中心。
    通常会由几个「角色」来组成,他会有一种流水线般的工作线,A搞定了,传给了B,B搞定他的部分,传给了C,C搞定后又要将结果传给A做。

    操作流程图

    作用:描述用户为完成某个任务而对产品的一个操作流程

    比如成功下单,比如登陆注册,比如退款等等。

    页面跳转流程图

    作用:描述页面之间的跳转逻辑,主要面向表现层。

    这里面会设计到一些逻辑上的问题,比如一个提示弹框出现后,如果点击确定,下一步页面去哪里?点击取消呢?


    例子

    拿外卖点餐产品当例子:“我要订餐”

    业务流程图

    设计产品的时候常常从业务流程开始。

    假象一下我们的产品是个第三方订餐平台,平台上有很多餐馆,用户通过我们的平台点餐付款,我们通知餐馆做饭,送餐等等。我们首先要做的就是理清产品中有多少种角色,在脑子里想象下如果一个用户下单,需要穿梭过多少种角色才能完成它的下单流程,然后将流程画出。

    画业务流程通常会用到“泳道图”这个是专门来表示多角色配合的一种流程。如下图

    角色有三,用户,系统(后台),厨房(第三方商家)。

    跑一下这个短短的流程,如果「用户」选好了今天的饭菜,提交订单了,这时就将订单信息推送给了「系统」,「系统」在后台生成订单,用户的订单状态变为「等待付款」。(其实系统这部分用户是看不到的,但是产品经理需要想清楚。)用户会来到支付页面,这时候做一个判断,用户是否为这个订单支付了费用呢?如果是,那么「系统」就会受理这个订单,将信息推送给第三方「厨房」,如果不是,那么用户就是取消了订单,订单状态变为「订单失败」。
    流程中总是由一个动作展开,那么思考时,我们要对每一步都带着一个“如果……不……”会怎么样的心态,就会发现很多可以做判断的地方。如果支付不成功呢?如果厨房不接单呢?如果退款不成功呢?这样想下去你的流程细节就会越来越完善。

    总结

    业务流程着眼于整个系统的,注重主要环节。

    你不只是一个用户,因为用户是不必知道后台的一些判断细节或是操作过程的,但如果你是产品经理的话是一定要清楚的。

    业务流程设计流程

    设定角色→跑通流程→用“如果……不……”穷尽判断,思考产品背后的判断逻辑。


    操作流程

    以下是是“用户下单”的操作流程。

    总结

    相对于业务流程图,操作流程图更专注于某一个任务或目标,注重细节;

    操作流程图是以一个用户的操作角度来写,并不限于所谓的消费者用户(后台的操作流程也可以);

    在初画操作流程的时候,不要早早的去过分在意细节与逆流程。(逆流程便是那些需要判断是否的那个“否”的流程),第一次用最理想的状态,将流程跑通,再去思考这里面会不会有那些“如果……不……”的细节。


    页面流程图

    从图中可以看出构成:

    界面。

    一个矩形代表一个界面,这个流程中用户走过两个界面(登录页和首页),因为表达的是界面的跳转,界面是用户实实在在接触到的媒介,非界面的内容,不要出现。

    动作。

    矩形之间也就是界面之间加上一个触发动作,比如从界面A点击下一步按钮,到达界面B,“点击下一步”就是连接这两个界面的关键动作,需要标示出来,上图例子就是“单击提交按钮”。

    条件。

    一个动作之后可能有多种“是/否”的结果,则在矩形之间、动作之后加上一个或多个判断菱形。如上图的检验账号密码是否输入正确。

    总结

    业务流程与操作流程都在他之上完成,当建立起来操作流程,页面跳转的流程也就跃然纸上了。只是在做某些交互行为时要多加注意页面之间的逻辑、层级关系,做到跳转不歧义。


    欢迎关注Carson_Ho简书!

    不定期分享关于**产品策划**、**产品运营**干货,追求**短、平、快**,但**却不缺深度**。

    相关文章

      网友评论

      本文标题:什么叫产品的流程图

      本文链接:https://www.haomeiwen.com/subject/gfcehttx.html