流程图|从0设计App（5）：2套方法绘制业务、页面流程图（下）
北京联盟_本文原题：从0设计App（5）：2套方法绘制业务、页面流程图（下）
至此 ， 我们完成了app的宏观定位、系统架构、V1.0.0的产品演进蓝图以及粗线条的产品结构图 。 接下来本文将围绕appV1.0.0的具体功能流程和页面流程展开 。
本文插图
惯例 ， 先回顾一下 。 在系统架构/产品结构（中） ， 我们探究了「职得App」的系统架构和产品演进蓝图 。 更关键的是得到了「产品信息架构图」 ， 如下图 ， 这对指导接下来做流程图有指导性作用 。 建议先看前面的文章再往下看～
本文插图
二、业务流程图 Why：为什么要业务流程图
拿注册/登陆来说 ， 随产品定位不同 ， 时代不同、需求不同 。 每款APP或者PC页面的注册登陆功能是截然不同的 ， 比如是否调用第三方登陆、是否验证码登陆、注册所需的信息、注册完后是否自动登陆等等细节 。
而业务流程图就是理清楚每个功能怎么实现和流转的 。
对产品经理来说 ， 是把需求、功能落地的思路
对技术开发来说 ， 是在敲代码时的一份设计稿
What：什么是业务流程图？
贴一个人人创始人老曹的文章：如何绘制业务流程图 。 里面提到 ， 试图回答清楚以下几个问题 ， 否则不要开始绘制流程图：
- 整个流程的起始点是什么？整个流程的终结点是什么？
- 在整个流程中 ， 涉及到的角色都是谁？
- 在整个流程中 ， 都需要做什么事情？
- 哪些事是必须的？哪些可能是偶尔出现
流程图的元素包含什么？如下图 ， 在多家公司的经验告诉我 ， 第一行的4个已经够用了 。 最多加上第2行的“子流程” 。
本文插图
How：该怎么画？
如下图 ， 总结得已经很好——泳道图 。 横向画部门、岗位、负责人 。 纵向画阶段、系统、模块 。
本文插图
业务流程图的核心是：清晰 。 因为它是交给技术开发手里的施工图 。 所以细而全是原则 。 用什么工具真的无所谓 ， 每家公司不一样 ， 团队用什么你就用什么 。 甚至我说流程图的颗粒度也是因公司而异 ， 因技术同学的水平而异 。
无论是实际工作中 ， 还是在我们从0设计app的项目中 ， 做业务流程图的前置条件一般是：
- 脑子里有大概的功能画面 ， 不一定清晰但要有；
- 熟悉产品的信息架构；
- 想清楚业务逻辑 。
要知道 ， 业务流程图的工作量是很大的 ， 而且要求很细致 ， 非常辛苦 。 如果直接凭信息结构图和脑子里的demo来画流程 ， 会比较痛苦 ， 迷失在森林中 。
我自己习惯于先画核心「业务逻辑」 ， 在之前的文章产品定位（上）中有提到职得App的产品形态 ， 如下图：
本文插图
根据上图这个产品形态 ， 其实很容易就整理出职得App的3个核心业务逻辑 ， 如下图 ， 其中阶段一涉及后台产品 ， 而阶段二、三是在前台APP上直接体现：
推荐阅读
- 钛媒体APP|B站宣布要上天！拟6月下旬发射，主要用于科普教育
- 宅客ZhaiiKer|杜比全景声音乐平台Tidal上线，暂只支持Apple TV 4K等少数产品
- 搜狐新闻|苹果专利显示肌电感应的Apple Watch手环可以更准确地检测到手势
- 吴铭园|华为概念机设计图首次曝光，居然采用屏下摄像头技术
- 雷锋网|登上 Science！电刺激控制基因表达，APP 一键释放胰岛素
- |华为P40 Pro 5G日本发售：约7200元 预装AppGallery
- 小丰自媒体|Apple与Android系统齐现漏洞？
- 直播重磅！千聊讲师APP正式发布，私域直播峰会亮点抢先看！
- APP乐橙APP5.2新版本来袭， 消息视频一触即达！
- |6月1日Apple品牌全天成交额破15亿+ 京东618成购买Apple首选平台