流程图|从0设计App（5）：2套方法绘制业务、页面流程图（下）( 二 ) |页面|业务|App|

本文插图

「业务逻辑」和「业务流程图」的关系像是，前者是新菜式的做法，而后者将其变成详细的菜谱。
现在流程也有了。鉴于我们只分享前台app ，现在我们要做的是将每个页面的业务流程非常详细地一个一个画出来。
在系统架构/产品结构（中）分析过，如下图，目前我们的App有三个一级页面，分别是「挑选职圈」「职圈学习」和「个人中心」。

本文插图

本文插图

流程图的的确确是工程量非常庞大的环节，也是最难的环节，尤其是B端产品或后台产品。但也是比原型更加重要的环节。很多产品新人都会下意识逃避这个模块，其实这环节才是产品新人最需要多加练习的。
我挑出「职得App」的一个业务流程做范例——学员看视频流程。
听起来是一个非常简单的流程，甚至很多app都有看视频的功能，似乎一抄就可以了。大错特错！之前在起点学院特训营培训期间，学到了至今仍在大厂中管用的4步方法论：

明确参与的角色
明确流程进程的各模块
业务关键判定
异常处理

（1）角色：一共有圈主即创作者、运营人员、学员三个角色参与看视频这个流程。
（2）模块：从上游到下游涉及2个管理后台、1个App客户端。甚至在实际情况中，这个颗粒度更细，因为公司会将客户端拆分开多个SDK来维护，你的需求很可能涉及不同SDK之间的调用，因此在实际情况上更加复杂。
（3）判定：即菱形的部分。包括视频的上传、审核。包括看视频的前置条件，是否付费、是否完成上节课作业。也包括非wifi情况下的播放判定。对于技术开发来说，这些细节是最重要的。
（4）异常：即黄色标签部分。包括审核不通过、异常toast提示、支付引导、非Wi-Fi弹窗询问等等。

本文插图

记住，凡是涉及开发，都要有流程图，流程图一错，极可能会导致原型图、交互逻辑甚至业务数据出现问题。在实际工作中，我强烈建议和每个所涉及的角色、模块开会进行过沟通。不要盲目拍脑袋决定了之后再去通知其他部门，这样人品很差不靠谱。
如下图，一共画出职得的10个业务流程图。

本文插图

三、页面流程图 Why：为什么要页面流程图
页面流程图其实是一份指南、地图，越是大的需求，涉及多个页面的跳转，就越需要。
在技术的眼里，每个页面可能是不同SDK负责，很可能由不同的技术来维护，因此在开发时很有提要提供一份更大视野层的页面图。
What：什么是页面流程图？
顾名思义，就是本次需求涉及的所有页面之间的跳转情况。是一份指南书，有点类似于建造完一个景点之后的地图。
地图可以帮助技术同学俯瞰整个需求，页面之间的架构和流转情况，也可以帮助UI设计同学知晓一共有哪些页面。
有什么元素？同理一般来说有：页面、页面跳转按钮/链接等、页面层级。
How：该怎么画？
页面流程图比较简单，是基于业务流程来总结的图而已。硬要拆解来说也就4步，其实是不分先后顺序的。因为如果前面的流程都比较顺利做下来的话，穿针引线就能够总结出页面流程图。