編輯導(dǎo)語(yǔ)：當(dāng)你面對(duì)一張走上了“歪路”的流程圖時(shí)，你會(huì)怎么辦呢？是推翻重新來(lái)，還是找到問題所在然后去拯救它呢？本文作者當(dāng)然是選擇了第二種，并且詳細(xì)地分析了存在的問題，以及應(yīng)該如何進(jìn)行修改，雖然圖意可無(wú)窮，但是產(chǎn)品卻有邊界。

如果提前了解了你所要面對(duì)的人生，你是否還會(huì)有勇氣前來(lái)？——無(wú)問西東

最近有一個(gè)運(yùn)營(yíng)朋友在嘗試轉(zhuǎn)行產(chǎn)品經(jīng)理，滿心歡喜對(duì)未來(lái)充滿期待的同時(shí)，卻苦于產(chǎn)品崗位的朦朧認(rèn)知與專業(yè)能力的模糊不清，所以精心繪制了這幅流程圖，與同道中人的我交流切磋：

可見這是一個(gè)【游戲推薦】功能的流程圖，字意都看得懂，流程大致清楚，能夠感覺到朋友想了很多，可惜心有余而力不足，使當(dāng)前顯得雜亂不夠明了。成年人的世界里沒有對(duì)錯(cuò)，如果可以幫助，彼此能變好一點(diǎn)是一點(diǎn)。

一、看圖即對(duì)話，關(guān)于這圖的幾點(diǎn)反思

UML有兩種建模分類，一種叫結(jié)構(gòu)型的UML，用于描述某種“靜態(tài)”的結(jié)構(gòu)，比如類圖、對(duì)象圖等；一種叫行為型的UML，用于描述業(yè)務(wù)“動(dòng)態(tài)”的流程、過(guò)程，比如活動(dòng)圖、狀態(tài)圖等。

流程圖不算是UML，但也算作是活動(dòng)圖的鼻祖，畫法相對(duì)來(lái)說(shuō)沒有那么規(guī)范，語(yǔ)法重意不重形，因此深受廣大群眾喜愛。無(wú)論是通過(guò)何種方式建模，目的均為了表達(dá)準(zhǔn)確。

以我微弱的學(xué)識(shí)，目前我能看到的問題有以下幾點(diǎn)：

1. 符號(hào)用法散亂

比如“游戲推薦”使用圓角矩形，“推薦成功”使用多邊矩形。（一般圓角矩形用于表達(dá)狀態(tài)、多邊矩形不常用）

2. 部分流程不完整

比如分支的斷流，主線的斷流等，流程圖是對(duì)實(shí)際步驟的抽象，如果斷流就代表著實(shí)際操作在這里就中斷，無(wú)法形成一個(gè)操作流程的閉環(huán)。

3. 功能主線不清晰

雖然是【游戲推薦】功能的流程圖，卻摻雜了【登錄注冊(cè)】功能和一些數(shù)據(jù)交互的流程，宏觀操作與微觀世界的冗雜，導(dǎo)致四不像，意不明。

4. 顆粒度控制不足

除了功能交互，這里還有界面相關(guān)交互，將產(chǎn)品的表現(xiàn)層與結(jié)構(gòu)層進(jìn)行有機(jī)結(jié)合，導(dǎo)致意圖不夠聚焦，分不清是為了表達(dá)用戶使用該功能的流程，還是該功能的UE交互。

5. 角色行為部分表述錯(cuò)誤

按照該圖的角色劃分，有用戶、客戶端和服務(wù)器三個(gè)角色，但目前看來(lái)客戶端與服務(wù)器角色有些行為重疊，甚至越俎代庖。

千言萬(wàn)語(yǔ)匯聚成圖，如果沒有用準(zhǔn)確的表達(dá)方式，造成思考的險(xiǎn)境，會(huì)導(dǎo)致理解的誤會(huì)，交流的盲區(qū)，最后徒增溝通成本。

二、畫圖即說(shuō)話，如何用圖準(zhǔn)確表達(dá)

流程圖的基本畫法其實(shí)非常簡(jiǎn)單，主線和分支，每個(gè)矩形代表一個(gè)步驟，每個(gè)菱形代表一個(gè)判斷條件：

我比較喜歡加上一個(gè)開始和結(jié)束符號(hào)，符合程序的單一出口原則，如果需要調(diào)整也只是內(nèi)部調(diào)整，不過(guò)也有流程到一半就結(jié)束的情況，總之就是根據(jù)情況因地制宜確保可讀性：

下面開始拿起手術(shù)刀解析流程圖，我的主治方案邏輯如下：

1. 找到功能實(shí)際主線

一般情況下默認(rèn)用戶登錄使用該功能，因?yàn)橛脩魶]登錄時(shí)都是統(tǒng)一提示用戶請(qǐng)先登錄。由于是朋友的圖不好隨意刪減，因此保留【登錄】這個(gè)步驟，它作為主線的一部分，且有自己的一套流程，用子程序符號(hào)意思意思即可。

找功能主線一定要先考慮正常情況下的主干流程，如果一個(gè)分支就開始同步思考兩條路線的走向，還要兼顧各種異常處理以及非正常操作，勢(shì)必心神交瘁，所以梳理出來(lái)的主線如下：

2. 理清角色之間的關(guān)系

從原圖看來(lái)，客戶端承載了部分?jǐn)?shù)據(jù)處理邏輯，服務(wù)器反而變成了數(shù)據(jù)的中轉(zhuǎn)站，顯得有些雞肋。所以按照該圖的角色劃分，用戶是負(fù)責(zé)操作動(dòng)作，客戶端負(fù)責(zé)響應(yīng)動(dòng)作，服務(wù)器負(fù)責(zé)判斷和處理動(dòng)作。

可以用兩種圖的表達(dá)方式，一種是泳道圖，一種是時(shí)序圖，前者強(qiáng)調(diào)角色的劃分和動(dòng)作，后者強(qiáng)調(diào)業(yè)務(wù)順序以及數(shù)據(jù)交互。這里可以快速用Axure的表格組件畫出泳道圖，初步效果如下：

準(zhǔn)備好后，磨刀霍霍向流程圖：

3. 調(diào)整信息顆粒度

原圖還涉及到很多信息和數(shù)據(jù)的說(shuō)明，實(shí)在不想忍痛割愛，我也只能成人之美。如果是界面相關(guān)展示信息，可以用括弧符號(hào)表示信息說(shuō)明，如果是數(shù)據(jù)交互相關(guān)，可以用文件符號(hào)表示數(shù)據(jù)說(shuō)明。

流程圖定義的是框架，是結(jié)構(gòu)，是業(yè)務(wù)抽象邏輯。所有和主干沒有強(qiáng)影響和關(guān)聯(lián)作用的信息，不應(yīng)該把顆粒度縮小到主干里。

1）不細(xì)化表現(xiàn)層展示，因?yàn)橐驎r(shí)善變

比如”賬號(hào)內(nèi)券數(shù)為0“時(shí)”提示用戶賬戶內(nèi)券數(shù)不足“，一般不會(huì)寫成“彈窗提示點(diǎn)券不足，彈窗高度為300px，固定在頁(yè)面中心，響應(yīng)速度必須不超過(guò)20ms，且字體標(biāo)紅”這么細(xì)枝末節(jié)。

2）不細(xì)化非核心主干流程，因?yàn)樾e奪主

比如用戶是否購(gòu)買點(diǎn)券的流程，否則用戶可以買也可以不買，又是一大堆分支出來(lái)了，跟當(dāng)前要表述的【游戲推薦】流程本末倒置。

3）不細(xì)化數(shù)據(jù)交互細(xì)節(jié)，因?yàn)橐月褤羰?/strong>