至此，我們完成了app的宏觀定位、系統(tǒng)架構(gòu)、V1.0.0的產(chǎn)品演進(jìn)藍(lán)圖以及粗線條的產(chǎn)品結(jié)構(gòu)圖。接下來本文將圍繞appV1.0.0的具體功能流程和頁面流程展開。

慣例，先回顧一下。在系統(tǒng)架構(gòu)/產(chǎn)品結(jié)構(gòu)（中），我們探究了「職得App」的系統(tǒng)架構(gòu)和產(chǎn)品演進(jìn)藍(lán)圖。更關(guān)鍵的是得到了「產(chǎn)品信息架構(gòu)圖」，如下圖，這對指導(dǎo)接下來做流程圖有指導(dǎo)性作用。建議先看前面的文章再往下看～

二、業(yè)務(wù)流程圖

Why：為什么要業(yè)務(wù)流程圖

拿注冊/登陸來說，隨產(chǎn)品定位不同，時(shí)代不同、需求不同。每款A(yù)PP或者PC頁面的注冊登陸功能是截然不同的，比如是否調(diào)用第三方登陸、是否驗(yàn)證碼登陸、注冊所需的信息、注冊完后是否自動(dòng)登陸等等細(xì)節(jié)。

而業(yè)務(wù)流程圖就是理清楚每個(gè)功能怎么實(shí)現(xiàn)和流轉(zhuǎn)的。

對產(chǎn)品經(jīng)理來說，是把需求、功能落地的思路

對技術(shù)開發(fā)來說，是在敲代碼時(shí)的一份設(shè)計(jì)稿

What：什么是業(yè)務(wù)流程圖？

貼一個(gè)人人創(chuàng)始人老曹的文章：如何繪制業(yè)務(wù)流程圖。里面提到，試圖回答清楚以下幾個(gè)問題，否則不要開始繪制流程圖：

• 整個(gè)流程的起始點(diǎn)是什么？整個(gè)流程的終結(jié)點(diǎn)是什么？
• 在整個(gè)流程中，涉及到的角色都是誰？
• 在整個(gè)流程中，都需要做什么事情？
• 哪些事是必須的？哪些可能是偶爾出現(xiàn)

其實(shí)流程圖沒什么神秘的，無非就是理清楚哪位A同學(xué)負(fù)責(zé)a事情，然后什么情況下，哪位B同學(xué)去做b事情的流程罷了，跟流水線道理是一樣的。

流程圖的元素包含什么？如下圖，在多家公司的經(jīng)驗(yàn)告訴我，第一行的4個(gè)已經(jīng)夠用了。最多加上第2行的“子流程”。

How：該怎么畫？

如下圖，總結(jié)得已經(jīng)很好——泳道圖。橫向畫部門、崗位、負(fù)責(zé)人?？v向畫階段、系統(tǒng)、模塊。

業(yè)務(wù)流程圖的核心是：清晰。因?yàn)樗墙唤o技術(shù)開發(fā)手里的施工圖。所以細(xì)而全是原則。用什么工具真的無所謂，每家公司不一樣，團(tuán)隊(duì)用什么你就用什么。甚至我說流程圖的顆粒度也是因公司而異，因技術(shù)同學(xué)的水平而異。

無論是實(shí)際工作中，還是在我們從0設(shè)計(jì)app的項(xiàng)目中，做業(yè)務(wù)流程圖的前置條件一般是：

1. 腦子里有大概的功能畫面，不一定清晰但要有；
2. 熟悉產(chǎn)品的信息架構(gòu)；
3. 想清楚業(yè)務(wù)邏輯。

前兩點(diǎn)在前面的文章中已經(jīng)有所提及，第3點(diǎn)是什么意思呢？

要知道，業(yè)務(wù)流程圖的工作量是很大的，而且要求很細(xì)致，非常辛苦。如果直接憑信息結(jié)構(gòu)圖和腦子里的demo來畫流程，會(huì)比較痛苦，迷失在森林中。

我自己習(xí)慣于先畫核心「業(yè)務(wù)邏輯」，在之前的文章產(chǎn)品定位（上）中有提到職得App的產(chǎn)品形態(tài)，如下圖：

根據(jù)上圖這個(gè)產(chǎn)品形態(tài)，其實(shí)很容易就整理出職得App的3個(gè)核心業(yè)務(wù)邏輯，如下圖，其中階段一涉及后臺(tái)產(chǎn)品，而階段二、三是在前臺(tái)APP上直接體現(xiàn)：

「業(yè)務(wù)邏輯」和「業(yè)務(wù)流程圖」的關(guān)系像是，前者是新菜式的做法，而后者將其變成詳細(xì)的菜譜。

現(xiàn)在流程也有了。鑒于我們只分享前臺(tái)app，現(xiàn)在我們要做的是將每個(gè)頁面的業(yè)務(wù)流程非常詳細(xì)地一個(gè)一個(gè)畫出來。

在系統(tǒng)架構(gòu)/產(chǎn)品結(jié)構(gòu)（中）分析過，如下圖，目前我們的App有三個(gè)一級(jí)頁面，分別是「挑選職圈」「職圈學(xué)習(xí)」和「個(gè)人中心」。

流程圖的的確確是工程量非常龐大的環(huán)節(jié)，也是最難的環(huán)節(jié)，尤其是B端產(chǎn)品或后臺(tái)產(chǎn)品。但也是比原型更加重要的環(huán)節(jié)。很多產(chǎn)品新人都會(huì)下意識(shí)逃避這個(gè)模塊，其實(shí)這環(huán)節(jié)才是產(chǎn)品新人最需要多加練習(xí)的。

我挑出「職得App」的一個(gè)業(yè)務(wù)流程做范例——學(xué)員看視頻流程。

聽起來是一個(gè)非常簡單的流程，甚至很多app都有看視頻的功能，似乎一抄就可以了。大錯(cuò)特錯(cuò)！之前在起點(diǎn)學(xué)院特訓(xùn)營培訓(xùn)期間，學(xué)到了至今仍在大廠中管用的4步方法論：

1. 明確參與的角色
2. 明確流程進(jìn)程的各模塊
3. 業(yè)務(wù)關(guān)鍵判定
4. 異常處理

（1）角色：一共有圈主即創(chuàng)作者、運(yùn)營人員、學(xué)員三個(gè)角色參與看視頻這個(gè)流程。

（2）模塊：從上游到下游涉及2個(gè)管理后臺(tái)、1個(gè)App客戶端。甚至在實(shí)際情況中，這個(gè)顆粒度更細(xì)，因?yàn)楣緯?huì)將客戶端拆分開多個(gè)SDK來維護(hù)，你的需求很可能涉及不同SDK之間的調(diào)用，因此在實(shí)際情況上更加復(fù)雜。

（3）判定：即菱形的部分。包括視頻的上傳、審核。包括看視頻的前置條件，是否付費(fèi)、是否完成上節(jié)課作業(yè)。也包括非wifi情況下的播放判定。對于技術(shù)開發(fā)來說，這些細(xì)節(jié)是最重要的。

（4）異常：即黃色標(biāo)簽部分。包括審核不通過、異常toast提示、支付引導(dǎo)、非Wi-Fi彈窗詢問等等。

記住，凡是涉及開發(fā)，都要有流程圖，流程圖一錯(cuò)，極可能會(huì)導(dǎo)致原型圖、交互邏輯甚至業(yè)務(wù)數(shù)據(jù)出現(xiàn)問題。在實(shí)際工作中，我強(qiáng)烈建議和每個(gè)所涉及的角色、模塊開會(huì)進(jìn)行過溝通。不要盲目拍腦袋決定了之后再去通知其他部門，這樣人品很差不靠譜。

如下圖，一共畫出職得的10個(gè)業(yè)務(wù)流程圖。

三、頁面流程圖

Why：為什么要頁面流程圖

頁面流程圖其實(shí)是一份指南、地圖，越是大的需求，涉及多個(gè)頁面的跳轉(zhuǎn)，就越需要。

在技術(shù)的眼里，每個(gè)頁面可能是不同SDK負(fù)責(zé)，很可能由不同的技術(shù)來維護(hù)，因此在開發(fā)時(shí)很有提要提供一份更大視野層的頁面圖。

What：什么是頁面流程圖？

顧名思義，就是本次需求涉及的所有頁面之間的跳轉(zhuǎn)情況。是一份指南書，有點(diǎn)類似于建造完一個(gè)景點(diǎn)之后的地圖。

地圖可以幫助技術(shù)同學(xué)俯瞰整個(gè)需求，頁面之間的架構(gòu)和流轉(zhuǎn)情況，也可以幫助UI設(shè)計(jì)同學(xué)知曉一共有哪些頁面。

有什么元素？同理一般來說有：頁面、頁面跳轉(zhuǎn)按鈕/鏈接等、頁面層級(jí)。

How：該怎么畫？

頁面流程圖比較簡單，是基于業(yè)務(wù)流程來總結(jié)的圖而已。硬要拆解來說也就4步，其實(shí)是不分先后順序的。因?yàn)槿绻懊娴牧鞒潭急容^順利做下來的話，穿針引線就能夠總結(jié)出頁面流程圖。

1. 明確頁面數(shù)量、頁面層級(jí)；
2. 確定各頁面的關(guān)鍵功能和跳轉(zhuǎn)按鈕；
3. 根據(jù)業(yè)務(wù)流程，連線；
4. 判定處理。

我們直接回到職得APP來，其實(shí)我畫完業(yè)務(wù)流程圖之后，腦子里就蠻清晰得知道該怎么畫頁面流程圖，是水到渠成的，直接給答案吧。

1. 層級(jí)：一共是3個(gè)層級(jí)，也就是說最深的頁面也只用點(diǎn)3次就能抵達(dá)。一級(jí)頁面代表了3個(gè)Tab。
2. 元素：每個(gè)頁面有序號(hào)、頁面名稱、頁面關(guān)鍵功能、跳轉(zhuǎn)按鈕（灰底）。
3. 指向：用箭頭線段鏈接跳轉(zhuǎn)按鈕和所指向的頁面
4. 判定：有時(shí)候根據(jù)不同情況同一個(gè)按鈕跳轉(zhuǎn)到不同頁面，如未支付等情況。

說明下：在這張圖里可能比較復(fù)雜，實(shí)際情況中基本沒有一個(gè)需求是一口氣設(shè)計(jì)15個(gè)頁面的。除非和職得一樣也是從0設(shè)計(jì)的v1.0.0版本。因此如果學(xué)會(huì)了多頁面，少頁面也會(huì)輕松掌握。

四、總結(jié)

OK，至此，我們已經(jīng)得到了職得APP的10個(gè)頁面流程圖和一張頁面流程“地圖”。從一個(gè)理念到調(diào)研再到定位和演進(jìn)藍(lán)圖，這次，我們終于有了施工圖。

參考學(xué)習(xí)內(nèi)容：

• http://www.codemsi.com/zhichang/2329530.html
• http://www.codemsi.com/pd/3795.html
• 起點(diǎn)學(xué)院特訓(xùn)營、公開課課程知識(shí)體系

作者：朱魯斌，公眾號(hào)：字字朱心。每周深度思考一個(gè)問題，不穩(wěn)定的世界里找到一份篤定。

本文由@朱魯斌? 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash， 基于CC0協(xié)議。