流程圖是產(chǎn)品經(jīng)理傳達(dá)需求的常用做法兆衅，按照我的經(jīng)驗(yàn)來(lái)看三大類：業(yè)務(wù)流程、頁(yè)面流程嗜浮、功能流程羡亩。分別對(duì)應(yīng)著戰(zhàn)略、戰(zhàn)術(shù)危融、執(zhí)行三大層次畏铆。
記得剛開(kāi)始做PD的時(shí)候，沒(méi)有意識(shí)去畫流程圖來(lái)梳理整個(gè)產(chǎn)品的脈絡(luò)吉殃。經(jīng)常需要修改原型辞居。后來(lái)慢慢被迫培養(yǎng)了先畫整體的業(yè)務(wù)流程，然后將具體的業(yè)務(wù)抽象成一個(gè)個(gè)功能模塊蛋勺，最后用形象化的頁(yè)面承載功能的工作方式瓦灶。
下面來(lái)講講我使用流程的實(shí)際案例，希望能夠給大家一些啟發(fā)抱完，無(wú)需深究其中的業(yè)務(wù)贼陶，主要看其中的思路。
業(yè)務(wù)流程
體現(xiàn)Boss對(duì)整個(gè)產(chǎn)品的戰(zhàn)略思想巧娱。產(chǎn)品經(jīng)理根據(jù)老板的傳達(dá)以及自身對(duì)產(chǎn)品的理解碉怔，梳理出整個(gè)產(chǎn)品核心業(yè)務(wù)的走向，生成業(yè)務(wù)流程圖禁添。
頁(yè)面流程
體現(xiàn)PD對(duì)核心業(yè)務(wù)的高度理解撮胧。把核心業(yè)務(wù)的每一個(gè)節(jié)點(diǎn)抽象成一張張頁(yè)面圖，用頁(yè)面跳轉(zhuǎn)體現(xiàn)節(jié)點(diǎn)關(guān)系老翘，生成頁(yè)面流程圖芹啥。
功能流程
體現(xiàn)每個(gè)功能模塊的操作路徑锻离。每個(gè)核心功能都應(yīng)該獨(dú)立化。先用解耦的思想來(lái)最小化每個(gè)核心功能叁征，然后用流程梳理清楚每一個(gè)操作纳账。額，大部分功能模塊都是和商城購(gòu)物相關(guān)的捺疼。具體如下：
1.訂單狀態(tài)流轉(zhuǎn)
2.優(yōu)惠券領(lǐng)取
3. h5活動(dòng)制作
4. 項(xiàng)目開(kāi)發(fā)
5. PD到UI配合
總結(jié)
按照這樣的思路來(lái)梳理產(chǎn)品的整體脈絡(luò)疏虫，會(huì)慢慢從表象的視覺(jué)層到抽象的結(jié)構(gòu)層，不僅PD自己對(duì)產(chǎn)品越來(lái)越理解深刻啤呼，同時(shí)研發(fā)RD也會(huì)更容易理解需求卧秘。
一、如何正確畫出功能結(jié)構(gòu)圖官扣？
對(duì)于PM來(lái)說(shuō)翅敌，梳理完產(chǎn)品的整體架構(gòu)，簡(jiǎn)單的功能用線框圖即可惕蹄，復(fù)雜的功能應(yīng)該怎么辦呢蚯涮？
這時(shí)候，初級(jí)PM的做法是一個(gè)頁(yè)面一個(gè)頁(yè)面往下畫卖陵，一個(gè)控件一個(gè)控件的摳細(xì)節(jié)遭顶。然后畫到一半有問(wèn)題，再一個(gè)頁(yè)面一個(gè)頁(yè)面往回修改泪蔫。
（以前趟過(guò)的坑）
從時(shí)間來(lái)看棒旗，反復(fù)修改十幾遍，浪費(fèi)時(shí)間和精力撩荣。
從溝通來(lái)看铣揉，技術(shù)會(huì)因?yàn)橐淮涡宰鲞@么復(fù)雜的功能，懟你們餐曹。
從結(jié)果來(lái)看逛拱，大家看到的是一個(gè)細(xì)節(jié)很完美整體復(fù)雜混亂的功能。
為什么需要功能結(jié)構(gòu)圖
碰到上述情況的時(shí)候台猴，首先你應(yīng)該整體分析一下這個(gè)功能橘券，畫出詳情的內(nèi)部結(jié)構(gòu)，然后和前端工程師過(guò)一遍需求卿吐。讓大家清楚這個(gè)功能由及部分組成。每部分是什么锋华，以及各有什么作用嗡官。
最后根據(jù)公司的需求，是做完這些功能重要毯焕，還是某個(gè)時(shí)間點(diǎn)上線重要衍腥。來(lái)綜合考慮是做完整個(gè)功能還是只做這個(gè)功能的子功能磺樱。
這就是功能結(jié)構(gòu)圖的由來(lái)。
功能結(jié)構(gòu)圖是什么
功能結(jié)構(gòu)圖是用來(lái)表示復(fù)雜功能的內(nèi)部結(jié)構(gòu)婆咸，包含了哪些子功能竹捉。
設(shè)計(jì)特性
最好設(shè)計(jì)成獨(dú)立的模塊，和其他功能盡量不存在關(guān)聯(lián)尚骄。
注意是功能內(nèi)部結(jié)構(gòu)块差，不要誤認(rèn)為是功能間的關(guān)系。（功能間的關(guān)系是功能流程圖）
如何畫功能結(jié)構(gòu)圖
以電商app的下單功能為例倔丈，來(lái)講一下如何畫功能結(jié)構(gòu)圖憨闰。
1. 分析功能結(jié)構(gòu)
當(dāng)我們接到這樣一個(gè)需求的時(shí)候，腦子中想到的是我們?cè)诰〇|淘寶等電商平臺(tái)的下單步驟需五，很容易就想到至少要這樣做鹉动。
然后這時(shí)候就直接去畫頁(yè)面，或者去抄襲競(jìng)品來(lái)設(shè)計(jì)原型宏邮。
2. 避免步驟頁(yè)面化
有3個(gè)步驟泽示，那就畫3個(gè)頁(yè)面好了。
簡(jiǎn)單的“步驟=頁(yè)面”蜜氨，只是偷懶的做法械筛。
比如提交訂單可以只是一個(gè)提交按鈕，選擇商品可以有多種方式记劝，可能會(huì)涉及到多個(gè)頁(yè)面变姨。
3. 避免功能競(jìng)品化
貌似競(jìng)品淘寶有現(xiàn)成的，全部照抄一遍就好了厌丑。
事實(shí)上你們可能不是電商平臺(tái)定欧，商品也沒(méi)有不同的sku。
細(xì)化功能粒度
根據(jù)自身業(yè)務(wù)怒竿，將下單功能拆分到更細(xì)的粒度砍鸠。
詳見(jiàn)訂單結(jié)構(gòu)，可以結(jié)合訂單物理結(jié)構(gòu)耕驰、訂單邏輯結(jié)構(gòu)爷辱、訂單金額結(jié)構(gòu)一起閱讀。
如果你愿意按照這種思路去拆分朦肘，可以避免把步驟當(dāng)作頁(yè)面去畫了饭弓。
再對(duì)照自己的業(yè)務(wù)是不是也需要用購(gòu)物車，是否也需要有優(yōu)惠券媒抠。如果是剛剛上線的弟断，這兩個(gè)功能完全沒(méi)有必要設(shè)計(jì)。
4. 控制細(xì)分粒度
沒(méi)必要無(wú)限制地區(qū)細(xì)分粒度趴生，一般2到3層就夠了阀趴。比如一般的下單功能架構(gòu)圖昏翰。
不是不可以，而是一般的情況下沒(méi)必要耗費(fèi)太多的精力刘急。但如果需要拆分最底交易系統(tǒng)架構(gòu)的時(shí)候棚菊，是有必要的。有興趣的朋友可以看看淘寶產(chǎn)品十年事或者有贊訂單系統(tǒng)的拆分叔汁。
使用axure畫
建議使用axure的流程圖功能來(lái)畫统求，因?yàn)檫€支持跳轉(zhuǎn)到對(duì)應(yīng)的前端線框圖，方便閱讀攻柠。
矩形框
表示子功能球订，子子功能。
有向箭頭
表示子功能間的關(guān)系
虛線框
用來(lái)表示這部分屬于哪個(gè)子功能
二瑰钮、如何正確的畫出功能流程圖冒滩？
這就是我理解的產(chǎn)品架構(gòu)三部曲：
常見(jiàn)的錯(cuò)誤畫法
先梳理一下大部分PM畫功能流程的常見(jiàn)錯(cuò)誤，方便理解其邊界浪谴。
1.混入業(yè)務(wù)維度
特別容易把業(yè)務(wù)模塊也畫到功能流程圖里面开睡。
區(qū)分你的功能流程圖里面有木有業(yè)務(wù)模塊并不難。唯一的判斷標(biāo)準(zhǔn)是該圖中的每個(gè)節(jié)點(diǎn)都應(yīng)該是這個(gè)產(chǎn)品中真實(shí)存在的功能名稱苟耻，否則應(yīng)該是混入了其他東西篇恒。
真正的難點(diǎn)在于如何將業(yè)務(wù)流程映射成合理的功能流程，以及功能流程如何映射成恰當(dāng)?shù)臉I(yè)務(wù)
流程凶杖。
2.混入頁(yè)面維度
其次容易將頁(yè)面寫到功能流程圖里面胁艰。你如某個(gè)頁(yè)面只是某個(gè)功能的子集，你非要把它寫到功能流程圖里面智蝠，是不合適的腾么。
比如微信里面，發(fā)送照片給好友是一個(gè)功能杈湾，但是涉及到的頁(yè)面“照片"解虱、“選擇相冊(cè)”、“某一相冊(cè)詳情”以及操作“選中某一照片”漆撞，他們都不是功能殴泰，完全不應(yīng)該顯示在功能流程圖里。
當(dāng)然有些功能的命名浮驳，有可能和頁(yè)面是一樣的悍汛。
3.混入操作維度
每個(gè)功能可能包含很多操作，比如微信中發(fā)送照片給好友至会，包含了“點(diǎn)擊相冊(cè)”员凝、“滾動(dòng)照片列表”、“選擇照片并發(fā)送”等操作奋献。需要正確區(qū)分操作不是功能健霹。
功能流程是什么？
講了一些常見(jiàn)的錯(cuò)誤畫法之后瓶蚂，再次定義一下功能流程的概念糖埋。
功能流程是指產(chǎn)品的所有功能以及相互關(guān)系。
1.功能間關(guān)系
注意功能間是相互獨(dú)立的窃这，但是通過(guò)合理組合瞳别，可形成新功能。不太建議用一級(jí)功能杭攻、二級(jí)
功能祟敛，父功能子功能的叫法。
2.包含哪些元素
功能兆解，使用矩形表示馆铁。
功能流向，使用有向箭頭表示锅睛。
條件埠巨，使用有向箭頭上的文字表示。
已定義流程现拒，使用組合矩形表示辣垒。不是必須的，如果整個(gè)產(chǎn)品的功能太復(fù)雜印蔬，可能需要勋桶。
3.功能命名
要么是名詞，比如購(gòu)物車侥猬±裕可加定語(yǔ)，比如：我的紅包陵究。
要么是動(dòng)賓短語(yǔ)眠饮，比如確認(rèn)訂單。
要么是通用叫法铜邮，比如：我的仪召。
可以參考同行業(yè)的TOP5 競(jìng)品。
如果功能簡(jiǎn)單松蒜，產(chǎn)品層面的1個(gè)功能盡量對(duì)應(yīng)著Axure的1個(gè)page頁(yè)扔茅。如果很復(fù)雜，請(qǐng)拆分到多個(gè)頁(yè)面秸苗。
4.功能定位
功能是邏輯意義上的概念召娜，用戶是感知到該產(chǎn)品具備哪些功能。一個(gè)功能可能是跨越多個(gè)頁(yè)面惊楼，也可能存在于某個(gè)頁(yè)面里玖瘸。而頁(yè)面是物理意義上的概念秸讹。用戶可以在產(chǎn)品里看到包含哪些頁(yè)面。
另外功能本身是相互獨(dú)立的雅倒。但是通過(guò)合理組合璃诀，可形成新的功能。不太建議用一級(jí)功能蔑匣、二級(jí)功能劣欢，父功能和子功能的說(shuō)法。
如何畫功能流程圖
1.羅列所有功能
按照PM設(shè)定的用戶使用產(chǎn)品流程裁良，來(lái)畫出每個(gè)節(jié)點(diǎn)的功能凿将。從首次打開(kāi)app開(kāi)始算起，進(jìn)入首頁(yè)會(huì)有多種走向价脾，均需分別畫出來(lái)牧抵。
請(qǐng)注意不要隨便把頁(yè)面名稱畫出來(lái)，除非你確定含有一個(gè)同名的功能彼棍。
比如上圖乍一看灭忠，好像這幾個(gè)都是功能，畫的好像并沒(méi)有錯(cuò)座硕。
可事實(shí)上弛作，首頁(yè)只是頁(yè)面的叫法，而不是功能华匾。另外它至少包含了發(fā)布邀請(qǐng)映琳、查看邀約列表、頻道列表三個(gè)功能蜘拉。
2.用有向箭頭關(guān)聯(lián)
使用有向箭頭將功能之間聯(lián)系起來(lái)萨西。注意箭頭方向代表用戶的使用步驟。
如果你是使用axure旭旭，請(qǐng)不要傻乎乎的使用默認(rèn)模式拖一根線到功能矩形框上谎脯，而是切換到連接線模式然后鼠標(biāo)移動(dòng)到矩形框連接紅點(diǎn)并關(guān)聯(lián)到另外一個(gè)。
3.增加條件判斷
很多功能是有前置條件的持寄，請(qǐng)使用有向箭頭并輔以文字表示源梭。
所謂的條件就是前后端需要判斷的邏輯。常見(jiàn)的條件有3種邏輯結(jié)構(gòu)稍味。
4. 檢查是否犯錯(cuò)
上面說(shuō)的幾個(gè)常見(jiàn)錯(cuò)誤废麻，最好檢查一下有沒(méi)有犯。
5.得到功能流程圖
根據(jù)上面的步驟模庐，我大概畫了一下微信客戶端主要的功能流程圖烛愧。
總結(jié)
如果你們的產(chǎn)品比較復(fù)雜的話，可能需要根據(jù)用戶角色、前后端不同來(lái)分別畫出對(duì)應(yīng)的功能
流程圖怜姿。
比如微信的功能流程圖慎冤，至少用戶使用微信，用戶使用小程序沧卢，自媒體使用公眾號(hào)粪薛，開(kāi)發(fā)者開(kāi)發(fā)公眾號(hào)，開(kāi)發(fā)者開(kāi)發(fā)小程序等很多個(gè)搏恤。
簡(jiǎn)單來(lái)說(shuō)，你得清楚你們的業(yè)務(wù)需要多少個(gè)產(chǎn)品來(lái)支持湃交，產(chǎn)品間的關(guān)系是什么熟空，每種產(chǎn)品需要多少種用戶角色，相互間的關(guān)系搞莺，有多少個(gè)端息罗。
三、如何正確的畫出功能邏輯圖
當(dāng)我們需要設(shè)計(jì)任務(wù)型功能時(shí)才沧，除了基礎(chǔ)的線框圖和交互迈喉，更需要提前搞清楚整個(gè)功能的內(nèi)部邏輯流程，簡(jiǎn)稱功能邏輯圖温圆。
舉幾個(gè)大家熟悉的任務(wù)型功能作為例子挨摸，方便大家理解概念。
比如電商的下單岁歉，大概包含查看商品→選擇數(shù)量→填寫收貨地址→添加留言→付款得运。
其中的退貨也是，選擇商品→申請(qǐng)退貨→填寫退貨信息→賣家審批→寄送商品→賣家確認(rèn)物品無(wú)誤→退款到賬锅移。
包括優(yōu)惠券的使用熔掺，是生成訂單前還是訂單后都是有講究的。
為什么需要功能邏輯圖
當(dāng)需要設(shè)計(jì)這樣復(fù)雜步驟的功能非剃，一定要學(xué)會(huì)畫出內(nèi)部的邏輯流程置逻。
當(dāng)然有時(shí)候也需要結(jié)合功能結(jié)構(gòu)的思想，先拆分功能盡量少耦合备绽，再畫出內(nèi)部邏輯券坞。
然后和后端工程師過(guò)一遍邏輯，如果沒(méi)有問(wèn)題疯坤。再去設(shè)計(jì)具體的前端頁(yè)面报慕，最后才是專注于視覺(jué)細(xì)節(jié)。
如果沒(méi)有先產(chǎn)出功能邏輯圖压怠，而是只畫線框圖和交互眠冈，那修改迭代的次數(shù)至少是上百次。
功能邏輯圖是什么
表現(xiàn)功能內(nèi)部的邏輯走向∥贤纾可指導(dǎo)設(shè)計(jì)具體的頁(yè)面和交互布卡。
1. 功能邏輯圖和功能結(jié)構(gòu)圖的區(qū)別
注意是功能內(nèi)部的邏輯流程，不是誤認(rèn)為是拆分功能雇盖。
兩種圖形的使用場(chǎng)景是不一樣的忿等，分析功能的維度是不一樣的。
一般來(lái)說(shuō)先從業(yè)務(wù)上拆分功能到最細(xì)的粒度崔挖，然后再去畫功能邏輯圖贸街。有時(shí)候最細(xì)粒度的功能很簡(jiǎn)單，邏輯圖可不畫狸相。
多啰嗦一句薛匪，區(qū)分這2者也可以使用UML的用例思想來(lái)區(qū)分。
2.功能邏輯圖和狀態(tài)機(jī)的區(qū)別
通俗意義上的功能邏輯圖表現(xiàn)是行為這個(gè)維度以及變化脓鹃，而狀態(tài)機(jī)是狀態(tài)間的變化逸尖，維度是狀態(tài)。
3. 功能邏輯圖和UML時(shí)序圖的區(qū)別
算是時(shí)序圖的簡(jiǎn)易版吧瘸右，UML學(xué)起來(lái)有一定門檻娇跟。但是功能邏輯圖很容易上手，只是欠缺一些uml的特性太颤。
如何畫功能邏輯圖
繼續(xù)以電商APP的下單功能為例來(lái)講一下如何畫下單這個(gè)功能的邏輯圖苞俘。
因?yàn)檫@個(gè)功能實(shí)在是太復(fù)雜，不建議一次性畫出邏輯流程栋齿。
然后按照子功能分別畫出對(duì)應(yīng)的功能邏輯圖苗胀。注意這里只畫了立即購(gòu)買的下單功能，購(gòu)物車結(jié)算的可以查看加入購(gòu)物車瓦堵，加載購(gòu)物車基协，展示購(gòu)物車，操作購(gòu)物車菇用。
1. 選擇商品
2. 確認(rèn)訂單
3. 提交訂單
功能邏輯圖的元素
建議使用Axure來(lái)畫澜驮，因?yàn)檫€支持跳轉(zhuǎn)到對(duì)應(yīng)的前端線框圖，方便閱讀惋鸥。
1. 行為
使用矩形框表示杂穷，沒(méi)可以區(qū)分用戶行為和系統(tǒng)行為，uml時(shí)序圖中有區(qū)分卦绣。
2.流程
使用有頭表示行為的流程耐量。
3.判斷條件
使用菱形表示邏輯的多種路線。如果不復(fù)雜滤港，可不用廊蜒。
4.其他文字
用來(lái)輔助理解趴拧，可忽略。
總結(jié)
強(qiáng)調(diào)一下不要搞混功能邏輯圖和功能結(jié)構(gòu)圖的運(yùn)用場(chǎng)景山叮。
我的建議是能拆分就拆分成功能結(jié)構(gòu)著榴，不能拆分就畫功能邏輯。
四屁倔、如何正確的畫出頁(yè)面流程圖
說(shuō)到也main流程圖脑又，看似很簡(jiǎn)單。但是其實(shí)很多人畫的不規(guī)范锐借，不能清晰表達(dá)產(chǎn)品整體的頁(yè)面架構(gòu)问麸。
頁(yè)面流程圖是什么？
頁(yè)面流程圖是指產(chǎn)品的所有頁(yè)面以及相互間流向關(guān)系钞翔。
1.包含元素
頁(yè)面口叙，有向線條嗅战。
可能包含判斷條件。
不包含具體內(nèi)容俺亮。
不包含彈層驮捍、元件等視覺(jué)組件。
2. 頁(yè)面命名
要么是名詞脚曾，比如購(gòu)物車东且。可加定語(yǔ)本讥，比如我的紅包珊泳。
要么是動(dòng)賓短語(yǔ)，比如確認(rèn)訂單拷沸。
要么是通用叫法色查，比如我的。
可以參考同行業(yè)的top5競(jìng)品撞芍。
盡量保持和原型軟件中頁(yè)面結(jié)構(gòu)的命名一致。
3.頁(yè)面定位
每個(gè)頁(yè)面盡量是一個(gè)完整獨(dú)立的小功能。
除非功能太復(fù)雜琐簇，需要多個(gè)頁(yè)面兔跌。此時(shí)頁(yè)面的作用是功能的某一操作。
請(qǐng)結(jié)合上述的頁(yè)面命名來(lái)考慮每一個(gè)頁(yè)面該如何定位帝嗡。
4. 維度只有一種
既然是頁(yè)面流程圖晶通，那么研究維度只應(yīng)該有頁(yè)面。尤其不應(yīng)該看到功能和業(yè)務(wù)哟玷。這個(gè)錯(cuò)誤
很多PM都會(huì)犯狮辽。
延伸一點(diǎn)，每個(gè)產(chǎn)品至少有3大架構(gòu)：業(yè)務(wù)流程、功能流程隘竭、頁(yè)面流程塘秦。
頁(yè)面流程的作用
之所以頁(yè)面流程這個(gè)東西出現(xiàn)在產(chǎn)品經(jīng)理的設(shè)計(jì)工作中，主要有以下原因动看。
1.了解全局
對(duì)于團(tuán)隊(duì)所有人來(lái)說(shuō)尊剔，通過(guò)頁(yè)面流程圖可以大概了解整個(gè)app的情況，偏視覺(jué)層菱皆。
2.傳達(dá)需求
對(duì)視覺(jué)設(shè)計(jì)師须误，知道要做多少視覺(jué)稿，具體每個(gè)頁(yè)面都有哪些視覺(jué)元素仇轻。
對(duì)前端工程師京痢，知道自己該寫多少頁(yè)面，搭建頁(yè)面代碼結(jié)構(gòu)篷店。
3.評(píng)估工作量
用頁(yè)面數(shù)量來(lái)評(píng)估各自的工作量祭椰，可以大概估算出工期。
4. 梳理業(yè)務(wù)
頁(yè)面流程是業(yè)務(wù)的直接體現(xiàn)疲陕，根據(jù)業(yè)務(wù)區(qū)反復(fù)研究它方淤，可以讓產(chǎn)品整體變得更簡(jiǎn)潔，結(jié)構(gòu)變得更優(yōu)美蹄殃。
頁(yè)面流程不能這樣畫
大部分初級(jí)PM畫頁(yè)面流程基本會(huì)犯兩個(gè)錯(cuò)誤携茂。
1. 只能有頁(yè)面這一維度
上面已經(jīng)說(shuō)了，再重申一下只應(yīng)該出現(xiàn)頁(yè)面這個(gè)維度诅岩，不應(yīng)該有什么亂七八糟的業(yè)務(wù)讳苦、功能、甚至是組件吩谦、元件什么的鸳谜。
2.不應(yīng)展示具體內(nèi)容
有些PM把頁(yè)面的具體內(nèi)容表示出來(lái)，其實(shí)很不對(duì)的式廷。
? ? ? 抽象維度不一致卿堂，頁(yè)面和頁(yè)面內(nèi)容是兩個(gè)概念。
? ? ? 畫頁(yè)面內(nèi)容需要耗費(fèi)很長(zhǎng)世間懒棉。
? ? ? 頁(yè)面內(nèi)容改動(dòng)頻率大草描，需要經(jīng)常復(fù)查并修改。
? ? ? 具體內(nèi)容有功能策严、有控件穗慕、有圖標(biāo)、有文字妻导，很難抽象表述逛绵，以及表述完全怀各。如果你這樣畫過(guò)，你就會(huì)理解這里的苦處术浪。
以閃電約app來(lái)畫一個(gè)錯(cuò)誤的頁(yè)面流程圖瓢对，只畫了幾個(gè)頁(yè)面。供大家參考胰苏。至少犯了以上1硕蛹、
2、4錯(cuò)誤硕并。
頁(yè)面流程圖應(yīng)該這樣畫
1.找出所有頁(yè)面
不管你使用哪款原型軟件法焰，總有他的頁(yè)面結(jié)構(gòu)。據(jù)此畫出所有的頁(yè)面不難倔毙。
需要注意的是頁(yè)面是物理層面的埃仪，真實(shí)存在。而不像業(yè)務(wù)流程圖中的業(yè)務(wù)模塊陕赃，只是邏輯層面
的卵蛉，并不需要真實(shí)體現(xiàn)。
如果你是使用axure,可以直接拖動(dòng)左方頁(yè)面結(jié)構(gòu)中的頁(yè)面標(biāo)題到右邊的畫布中即可么库。
2. 用有向線條關(guān)聯(lián)
使用線條將2個(gè)頁(yè)面聯(lián)系起來(lái)毙玻，直到把所有的頁(yè)面跳轉(zhuǎn)加上為止。
如果你是使用axure廊散，請(qǐng)不要傻乎乎的連接，而是使用連接線模式梧疲。
3. 增加條件判斷
這一步不是必須的允睹，但是稍微復(fù)雜一些的產(chǎn)品建議使用。
拿上面的錯(cuò)誤圖來(lái)說(shuō)幌氮，首頁(yè)和3個(gè)頁(yè)面有關(guān)聯(lián)缭受，那什么情況下跳轉(zhuǎn)到第一個(gè)頁(yè)面呢。這個(gè)就是需要條件判斷來(lái)說(shuō)明该互。這一點(diǎn)平鋪的UI視覺(jué)稿并不能體現(xiàn)這一點(diǎn)PM的價(jià)值米者。
其實(shí)，UI視覺(jué)稿的平鋪圖可以作為前端工程師定義代碼層面的頁(yè)面結(jié)構(gòu)宇智，屬于物理結(jié)構(gòu)蔓搞。但是邏輯層面的頁(yè)面結(jié)構(gòu)必須輔以條件判斷。
重新畫一下上面的頁(yè)面流程圖随橘，正確應(yīng)該如下：
4.檢查是否犯錯(cuò)
上面說(shuō)的幾個(gè)常見(jiàn)的錯(cuò)誤，最好檢查一下有沒(méi)有犯机蔗。
總結(jié)
如果是使用axure來(lái)畫頁(yè)面流程的話蒲祈，可以全選所有頁(yè)面甘萧，然后右鍵一鍵生成流程圖。
其實(shí)頁(yè)面流程圖還需要按照角色（用戶梆掸、商家）扬卷，端（客戶端，服務(wù)端）酸钦，有時(shí)候還需要按照版本來(lái)畫怪得，根據(jù)自身產(chǎn)品的復(fù)雜程度，按照此文方法畫出即可钝鸽。
五汇恤、如何正確的畫出業(yè)務(wù)流程圖
在實(shí)際生活中，我們會(huì)碰到各種各樣的流程拔恰。比如你去醫(yī)院看病因谎，你需要先去服務(wù)臺(tái)領(lǐng)個(gè)具體要去看病的某個(gè)科室的小票，再前往掛號(hào)窗口將小票遞給工作人員颜懊，繳完掛號(hào)費(fèi)之后拿到掛號(hào)單财岔，再前往具體科室去看病。各處都會(huì)有自己的流程河爹，按照流程來(lái)走可以快速達(dá)到目的匠璧，減少不必要的麻煩，當(dāng)然你也可以獨(dú)辟蹊徑咸这，這就屬于流程的優(yōu)化夷恍。
流程是為了達(dá)到特定的目標(biāo)而進(jìn)行的一系列有邏輯性的操作過(guò)程，它可以不規(guī)范媳维、可以充滿問(wèn)題酿雪，但它確確實(shí)實(shí)存在著。只要有事情或任務(wù)侄刽，就會(huì)有流程的存在指黎，將有一定規(guī)律的流程用圖表表示出來(lái)可以讓流程可視化，從而有利于流程的重組優(yōu)化州丹。
在工作中醋安，我們常用到的流程圖有：業(yè)務(wù)流程圖、頁(yè)面流程圖和數(shù)據(jù)流程圖墓毒。作為產(chǎn)品吓揪，經(jīng)常談的是業(yè)務(wù)流程圖；作為交互設(shè)計(jì)師所计，則比較關(guān)心頁(yè)面流程圖磺芭；而作為系統(tǒng)分析師，數(shù)據(jù)流程圖最關(guān)鍵醉箕。
PART1 業(yè)務(wù)流程圖
圍繞著以下幾個(gè)問(wèn)題來(lái)講述業(yè)務(wù)流程圖
什么是業(yè)務(wù)流程圖钾腺？
為什么需要業(yè)務(wù)流程圖徙垫？
業(yè)務(wù)流程圖的兩種圖表類型
兩種流程圖圖例和結(jié)構(gòu)
如何繪制業(yè)務(wù)流程圖？
常見(jiàn)的繪制流程圖的工具
1.業(yè)務(wù)流程圖是什么放棒？
業(yè)務(wù)流程圖姻报，顧名思義，用來(lái)描述業(yè)務(wù)流程的一種圖间螟，通過(guò)一些特定的符號(hào)和連線來(lái)表示具體某個(gè)業(yè)務(wù)的實(shí)際處理步驟和過(guò)程吴旋，詳細(xì)地描述任務(wù)的流程走向，一般沒(méi)有數(shù)據(jù)的概念厢破。
業(yè)務(wù)流程圖是最常見(jiàn)的圖表之一荣瑟，能看懂讀懂是必修課，能繪制便是非常重要的選修課摩泪。
2.為什么需要業(yè)務(wù)流程圖笆焰？
分析業(yè)務(wù)流程，并將業(yè)務(wù)流程圖表化可以幫助分析者了解業(yè)務(wù)如何運(yùn)轉(zhuǎn)见坑，幫助分析者找到業(yè)務(wù)流程中不合理的流向∪侣樱現(xiàn)有產(chǎn)品存在的業(yè)務(wù)流程未必是合理的，通過(guò)業(yè)務(wù)流程圖荞驴，鉆研關(guān)鍵事件的流程不皆，分析為什么要這么做，探索出更深層次的問(wèn)題熊楼，從而對(duì)現(xiàn)有不合理的業(yè)務(wù)流程進(jìn)行重組優(yōu)化霹娄，進(jìn)而制定優(yōu)化方案，改進(jìn)現(xiàn)有流程鲫骗。
產(chǎn)品在寫需求文檔時(shí)主要是對(duì)業(yè)務(wù)規(guī)則的描述犬耻，而配合以業(yè)務(wù)流程圖可以讓業(yè)務(wù)邏輯更清晰；日常梳理關(guān)鍵事件業(yè)務(wù)流程時(shí)挎峦，畫出業(yè)務(wù)流程圖可以幫助發(fā)現(xiàn)不合理流程，從而對(duì)關(guān)鍵事件進(jìn)行優(yōu)化合瓢。
3.業(yè)務(wù)流程圖的兩種圖表類型
（1）管理業(yè)務(wù)流程圖
我們現(xiàn)在所說(shuō)的流程圖其實(shí)是傳統(tǒng)的管理業(yè)務(wù)流程圖坦胶，包含基本流程圖和跨職能流程圖（泳道圖）兩種。以醫(yī)院掛號(hào)流程為例晴楔。
基本流程圖雖然明確地說(shuō)明了整個(gè)流程顿苇，但卻無(wú)法清楚地說(shuō)明每步流程是由哪個(gè)角色負(fù)責(zé)的。為了有效表示各個(gè)流程是由誰(shuí)來(lái)負(fù)責(zé)的税弃，可以通過(guò)泳道流程圖來(lái)實(shí)現(xiàn)纪岁，這樣不僅體現(xiàn)了整個(gè)活動(dòng)控制流，還能清楚知道各個(gè)角色在流程中所承擔(dān)的責(zé)任则果。
管理業(yè)務(wù)流程圖已基本能滿足業(yè)務(wù)流程走向的表達(dá)幔翰，但在復(fù)雜的系統(tǒng)交互中漩氨，表達(dá)并發(fā)概念時(shí)，傳統(tǒng)的管理業(yè)務(wù)流程圖已無(wú)法表達(dá)遗增，這就需要用到UML建模叫惊。
（2）UML活動(dòng)圖
UML中共定義了13種圖，如下做修，其中用例圖霍狰、活動(dòng)圖和順序圖用的比較多。
UML細(xì)分了各種圖饰及，分別在不同的角度來(lái)描述系統(tǒng)流程蔗坯，在本質(zhì)上，UML各種圖均屬于流程圖燎含。
其中UML中活動(dòng)圖同管理業(yè)務(wù)流程圖類似可用于表示業(yè)務(wù)過(guò)程宾濒，唯一的區(qū)別是活動(dòng)圖支持并行行為。傳統(tǒng)的流程圖著重描述處理過(guò)程瘫镇，它的主要控制結(jié)構(gòu)是順序鼎兽、分支和循環(huán)，各個(gè)處理過(guò)程之間有嚴(yán)格的順序和時(shí)間關(guān)系铣除；而UML活動(dòng)圖描述的是對(duì)象活動(dòng)的順序關(guān)系所遵循的規(guī)則谚咬，它著重表現(xiàn)的是系統(tǒng)的行為，而非系統(tǒng)的處理過(guò)程尚粘。
那UML活動(dòng)圖是如何來(lái)表示并發(fā)業(yè)務(wù)流程的呢择卦？
UML活動(dòng)圖也可包含為基本活動(dòng)圖和泳道活動(dòng)圖，表達(dá)的方式與管理業(yè)務(wù)流程圖差不多郎嫁，但圖例上稍有不同（圖例區(qū)別可參考下方）秉继。
同管理業(yè)務(wù)流程圖一樣，泳道讓流程中個(gè)角色的分工一目了然泽铛。一個(gè)泳道表示流程內(nèi)的一個(gè)角色尚辑，泳道內(nèi)僅僅畫出該泳道所表示角色完成的活動(dòng)（判斷，并行等可以畫在任意泳道）盔腔。
總結(jié)：管理業(yè)務(wù)流程圖或UML活動(dòng)圖均可以用來(lái)表達(dá)業(yè)務(wù)流程杠茬，具體使用哪種圖來(lái)表達(dá)業(yè)務(wù)流程可以憑君喜好，但要遵循一定的符號(hào)結(jié)構(gòu)弛随，不要混搭瓢喉。不過(guò)要表達(dá)并行行為的還是使用UML活動(dòng)圖吧。
4.兩種流程圖圖例和結(jié)構(gòu)
（1）管理業(yè)務(wù)流程圖
管理業(yè)務(wù)流程圖的常用符號(hào)如下舀透，其基本結(jié)構(gòu)包含：順序結(jié)構(gòu)栓票、選擇（分支）結(jié)構(gòu)、循環(huán)結(jié)構(gòu)愕够。
（2）UML活動(dòng)圖
UML活動(dòng)圖的常用符號(hào)如下走贪，其基本結(jié)構(gòu)除了順序結(jié)構(gòu)佛猛、選擇（分支）結(jié)構(gòu)和循環(huán)結(jié)構(gòu)外，還可能存在并發(fā)的事件流厉斟。在UML中挚躯，可以采用一個(gè)同步線來(lái)說(shuō)明這些并行控制流的分岔和匯合。
同步線：分岔是有一個(gè)進(jìn)入轉(zhuǎn)換擦秽，兩個(gè)或多個(gè)離開(kāi)轉(zhuǎn)換码荔；而匯合則是兩個(gè)或多個(gè)進(jìn)入轉(zhuǎn)換，一個(gè)離開(kāi)轉(zhuǎn)換感挥。
5.如何繪制流程圖缩搅？
（1）在開(kāi)始繪制業(yè)務(wù)流程圖之前需要先想清楚的2個(gè)問(wèn)題：
1）所要描述的是哪一段業(yè)務(wù)流程？
在畫流程圖之前先確定業(yè)務(wù)流程起終點(diǎn)触幼，是截取某一段業(yè)務(wù)進(jìn)行詳細(xì)描述硼瓣，還是整體業(yè)務(wù)模塊進(jìn)行描述。不可能將所有的流程都放到一個(gè)圖里展示置谦，也不可能大而籠統(tǒng)不畫出關(guān)鍵事件堂鲤，要學(xué)會(huì)劃分業(yè)務(wù)流程范圍，把握粒度媒峡。
舉例
還是以醫(yī)院掛號(hào)看病為例瘟栖，先掛號(hào)再看病。整個(gè)流程下來(lái)其實(shí)可以細(xì)分為兩個(gè)流程谅阿，分別為掛號(hào)流程和看病流程半哟；甚至粒度可以再細(xì)點(diǎn)，分為取小票流程签餐、掛號(hào)流程寓涨、繳掛號(hào)費(fèi)流程、排隊(duì)看病流程等氯檐，但很明顯戒良，單獨(dú)分析取小票流程和繳掛號(hào)費(fèi)流程粒度過(guò)小，沒(méi)有實(shí)際意義冠摄。
總結(jié)：可采用自頂向下糯崎，逐層分解的繪制方法。明確你要梳理的業(yè)務(wù)流程范圍耗拓，首先列出流程中的關(guān)鍵事件拇颅，如醫(yī)院掛號(hào)看病奏司，掛號(hào)流程和看病流程便算是整個(gè)流程中的關(guān)鍵事件流程乔询；再結(jié)合你分析的目的來(lái)判斷是否需要再往下層進(jìn)行分解，如取小票流程韵洋、掛號(hào)流程竿刁、繳掛號(hào)費(fèi)流程黄锤、排隊(duì)看病流程。如此例食拜，層層向下分解鸵熟，直到符合你要分析的目的，當(dāng)目的是為了對(duì)某個(gè)業(yè)務(wù)流程進(jìn)行優(yōu)化時(shí)负甸，則分解到對(duì)應(yīng)流程即可流强，繪制出流程圖后再進(jìn)行分析。
2）所要描述的業(yè)務(wù)流程是否涉及到參與者呻待？
涉及到參與者的業(yè)務(wù)流程使用泳道圖來(lái)描述更簡(jiǎn)單明了打月。
舉例
業(yè)務(wù)簡(jiǎn)要描述：數(shù)學(xué)老師讓小麗幫忙把講臺(tái)上的寫了名字的語(yǔ)文課本送給語(yǔ)文老師，語(yǔ)文老師接下后微笑著對(duì)小麗說(shuō)謝謝蚕捉。
分析：包含了數(shù)學(xué)老師奏篙、小麗、語(yǔ)文老師這三個(gè)參與者迫淹，此時(shí)用泳道流程圖更合適秘通。
（2）問(wèn)題想明白了之后便可以對(duì)業(yè)務(wù)流程進(jìn)行梳理，進(jìn)而分解各個(gè)要素敛熬。
業(yè)務(wù)流程圖有4個(gè)關(guān)鍵要素：執(zhí)行操作肺稀、順序、輸入輸出荸型、規(guī)則盹靴；要更清楚的描述業(yè)務(wù)流程可以有參與者這一要素。
執(zhí)行操作：執(zhí)行了什么操作
順序：操作產(chǎn)生的順序
輸入輸出：發(fā)生操作的原因和結(jié)果
規(guī)則：操作產(chǎn)生的條件
參與者：誰(shuí)參與了這個(gè)流程瑞妇，可以是系統(tǒng)稿静、可以是頁(yè)面，也可以是用戶
以上個(gè)例子為例進(jìn)行分解：
業(yè)務(wù)簡(jiǎn)要描述：數(shù)學(xué)老師讓小麗幫忙把講臺(tái)上的寫了名字的語(yǔ)文課本送給語(yǔ)文老師辕狰，語(yǔ)文老師接下后微笑著對(duì)小麗說(shuō)謝謝改备。
執(zhí)行操作和順序（含輸入輸出）：請(qǐng)求幫忙、接受幫忙蔓倍、拿講臺(tái)上的語(yǔ)文課本悬钳、遞交課本、接收課本偶翅、道謝
規(guī)則：必須是寫了名字的語(yǔ)文課本
參與者：數(shù)學(xué)老師默勾、小麗、語(yǔ)文老師
以上是明確給出了業(yè)務(wù)描述聚谁，按照步驟基本上便能畫出業(yè)務(wù)流程圖母剥。在沒(méi)有明確給出業(yè)務(wù)描述的情況下，對(duì)業(yè)務(wù)流程的梳理主要有兩種方式：
1）深入現(xiàn)場(chǎng)調(diào)查，由工作人員介紹業(yè)務(wù)處理過(guò)程环疼。
(2）對(duì)現(xiàn)有業(yè)務(wù)流程的優(yōu)化习霹。
當(dāng)已經(jīng)對(duì)現(xiàn)有業(yè)務(wù)流程熟悉時(shí)，通過(guò)討論和分析炫隶，可梳理出業(yè)務(wù)流程淋叶，再通過(guò)優(yōu)化現(xiàn)有流程中不合理的地方，從而給出一個(gè)更好的流程來(lái)伪阶。
（3）流程圖規(guī)范
各圖形形狀/字號(hào)統(tǒng)一煞檩。如果各個(gè)圖形形狀大小/字號(hào)相差懸殊，這對(duì)于理解圖形的人也是一種折磨栅贴，對(duì)于某個(gè)比較重要的流程可以使用顏色來(lái)區(qū)分其他普通流程（但顏色數(shù)量和種類不應(yīng)太多形娇，以免重點(diǎn)模糊），再在該重要的流程旁加上注釋說(shuō)明筹误，就能將重點(diǎn)轉(zhuǎn)達(dá)給對(duì)方桐早。
流程名用動(dòng)賓結(jié)構(gòu)，如輸入手機(jī)號(hào)厨剪。
流程均以開(kāi)始框開(kāi)始哄酝，以結(jié)束框結(jié)束。
流程圖從左到右祷膳、從上到下排列陶衅。
流程線盡量不要交叉。
6.常見(jiàn)的繪制流程圖的工具
（1）在線工具
ProcessOn
draw
（2）客戶端
Microsoft Visio
edraw億圖
xmind
omniGraffle（mac）
StarUML
我一般常用ProcessOn畫業(yè)務(wù)流程圖直晨，一些uml圖也會(huì)使用StarUML搀军，這兩種工具畫出來(lái)的圖都挺賞心悅目。但具體用哪種工具不重要勇皇，重要的是學(xué)會(huì)對(duì)業(yè)務(wù)流程進(jìn)行梳理并將流程可視化罩句。
