本文轉(zhuǎn)載自知乎：劉大大
很多人拿到需求就火急火燎的開(kāi)始畫(huà)原型绽淘，然后畫(huà)著畫(huà)著覺(jué)得有些地方?jīng)]有考慮到，又回頭去改闹伪，如果在畫(huà)原型之前沪铭，你能將自己的業(yè)務(wù)流程想好，用戶的操作流程想好偏瓤，頁(yè)面跳轉(zhuǎn)想清楚杀怠，你就能少做很多無(wú)用功，達(dá)到事半功倍的效果厅克。
一赔退、什么是流程圖
流程圖=流程+圖。
流程是一系列的邏輯關(guān)系（包含因果關(guān)系证舟、時(shí)間先后硕旗、必要條件、輸入輸出）產(chǎn)品經(jīng)理做需求前一定要先把這些邏輯關(guān)系理清楚女责，如果非要用一句話概括的話“流程就是在特定的情境下滿足用戶特定需要的總結(jié)”漆枚。
圖就是將你頭腦中的邏輯關(guān)系以圖形化的形式呈現(xiàn)出來(lái)，具有圖形化鲤竹、可視化的特點(diǎn)浪读，因?yàn)槭菆D，你可以像你的版本迭代一樣辛藻，當(dāng)你的邏輯需要修改的時(shí)候拿出來(lái)迭代一下碘橘，同時(shí)因?yàn)橛袌D，你還可以更好的給項(xiàng)目成員進(jìn)行宣講吱肌。
二痘拆、為什么要畫(huà)流程圖
1、幫助梳理邏輯
我們每個(gè)人想一個(gè)邏輯的時(shí)候氮墨，不一定能把這個(gè)邏輯的細(xì)枝末節(jié)都想到纺蛆，如果我們貿(mào)然的畫(huà)原型就有可能做許多無(wú)用功，這個(gè)時(shí)候畫(huà)流程圖可以幫助我們梳理清楚我們的邏輯规揪。建議剛開(kāi)始梳理邏輯的時(shí)候可以在紙上畫(huà)畫(huà)這種流程圖桥氏，因?yàn)檫@樣的好處是你可以快速的把你腦中的邏輯呈現(xiàn)在紙上，修改起來(lái)也方便猛铅，當(dāng)你畫(huà)好以后然后再用專(zhuān)業(yè)的工具畫(huà)出來(lái)保存字支。
2、便于宣講和傳播
產(chǎn)品經(jīng)理需要開(kāi)評(píng)審會(huì)和寫(xiě)PRD文檔的，這個(gè)時(shí)候如果你有一張清晰的流程圖堕伪，不僅便于你講解揖庄，也便于技術(shù)理解，同時(shí)把你的流程圖插入PRD文檔中也方便傳播欠雌，當(dāng)技術(shù)忘記流程的時(shí)候蹄梢，查看一下文檔里的流程就知道流程是啥樣了，不用反復(fù)來(lái)找你確認(rèn)富俄。
3禁炒、優(yōu)化迭代
對(duì)于拿到一個(gè)邏輯，我們不一定能考慮的那么周全蛙酪，這個(gè)時(shí)候有一個(gè)清晰的流程圖也方便做記錄以及修改齐苛。
同時(shí)每個(gè)版本迭代的流程圖可能會(huì)有相應(yīng)的變化，通過(guò)對(duì)每個(gè)版本流程圖的對(duì)比分析桂塞，可以知道流程優(yōu)化在什么地方凹蜂，產(chǎn)品優(yōu)化了什么地方。
三阁危、流程圖元素定義
流程圖是符號(hào)化的圖形語(yǔ)言玛痊，有自己的規(guī)范，菱形代表判斷狂打，距形代表具體的操作行為擂煞、開(kāi)始和結(jié)束用圓角表示...
遵守這些行業(yè)規(guī)范不僅讓別人覺(jué)得你專(zhuān)業(yè)，同時(shí)也有利于看的人理解趴乡，就好像阿拉伯?dāng)?shù)字全世界都能看懂一樣对省。
四、產(chǎn)品經(jīng)理要繪制的流程圖
產(chǎn)品中設(shè)計(jì)的流程圖主要有三種晾捏，業(yè)務(wù)路程圖蒿涎、任務(wù)流程圖、頁(yè)面流程圖惦辛，下面我們來(lái)一一介紹劳秋。
1、業(yè)務(wù)流程圖
業(yè)務(wù)流程圖就是描述那些個(gè)體在什么條件下做了什么事情胖齐，他們之間有何關(guān)聯(lián)玻淑。主要分三個(gè)方面：①涉及到哪些主體？②每個(gè)主體都有哪些任務(wù)呀伙？③各個(gè)主體之間怎么聯(lián)系的补履？一般涉及到多個(gè)主體，每個(gè)主體之間有聯(lián)系剿另，比如p2p平臺(tái)箫锤。
這是p2p的業(yè)務(wù)流程圖帅腌、涉及到借款人、平臺(tái)麻汰、投資人、第三方支付四個(gè)主體戚篙，以及每個(gè)主題需要完成的任務(wù)五鲫、任務(wù)之間的聯(lián)系和先后順序。
2岔擂、任務(wù)流程圖
泳道圖一般是從戰(zhàn)略上分析整個(gè)業(yè)務(wù)流程位喂，讓你對(duì)公司所做的業(yè)務(wù)有個(gè)大概的了解，而任務(wù)流程圖就是在你的產(chǎn)品操作上乱灵，用戶通過(guò)什么樣的操作來(lái)完成它的目標(biāo)塑崖，比如你去銀行ATM機(jī)器上取錢(qián)，你是如何一步步操作把錢(qián)取出來(lái)的痛倚，這里以p2p理財(cái)產(chǎn)品購(gòu)買(mǎi)為例规婆，來(lái)說(shuō)明購(gòu)買(mǎi)的任務(wù)流程圖。
畫(huà)流程圖的時(shí)候注意主要流程和異常流程蝉稳，在這個(gè)例子中抒蚜，主要流程就是購(gòu)買(mǎi)流程、異常流程就是沒(méi)有設(shè)置交易密碼耘戚、用戶忘記交易密碼嗡髓、以及超過(guò)重試次數(shù)這些流程，畫(huà)流程圖的時(shí)候先畫(huà)主要的流程收津，然后再把異常額流程考慮上饿这，查漏補(bǔ)缺，保證不遺漏撞秋，產(chǎn)品的邏輯漏洞多半是由于異常情況沒(méi)有考慮清楚长捧，畫(huà)流程圖可以有效的幫助你梳理邏輯。
3部服、頁(yè)面流程圖
如果說(shuō)業(yè)務(wù)流程圖幫助你梳理戰(zhàn)略唆姐，任務(wù)流程圖幫助你梳理用戶操作行為（主要給程序員看）、頁(yè)面跳轉(zhuǎn)流程在幫助你梳理各個(gè)頁(yè)面之間的跳轉(zhuǎn)關(guān)系（主要給UI和前端程序員看）這是一個(gè)逐步從整體到局部廓八，從后端到前端的過(guò)程奉芦。
所有的產(chǎn)品都是由頁(yè)面組成的，不論是APP剧蹂、PC声功、H5都是由一個(gè)個(gè)頁(yè)面組成的，頁(yè)面流程圖描述完成一個(gè)任務(wù)需要經(jīng)過(guò)哪些步驟宠叼，你在畫(huà)圖的時(shí)候只需要清晰的表現(xiàn)出用戶點(diǎn)擊頁(yè)面的什么地方先巴，然后跳轉(zhuǎn)到那個(gè)頁(yè)面其爵。主要由頁(yè)面、行動(dòng)點(diǎn)伸蚯、連接線組成摩渺，下面以用戶購(gòu)買(mǎi)理財(cái)產(chǎn)品舉例。
頁(yè)面流程一般只考慮正常的操作流程就行剂邮，對(duì)于異常的操作流程在正常流程的旁邊畫(huà)出摇幻，例如：上面的正常頁(yè)面跳轉(zhuǎn)是用戶購(gòu)買(mǎi)這個(gè)流程，異常頁(yè)面跳轉(zhuǎn)流程是在購(gòu)買(mǎi)界面金額不足的時(shí)候點(diǎn)擊去充值流程挥萌，這個(gè)在正常流程的旁邊標(biāo)示出來(lái)就好绰姻。
五、如何繪制流程圖
上面說(shuō)了需要繪制流程圖引瀑，這里說(shuō)說(shuō)繪制流程圖的思路狂芋。
1、調(diào)查研究
對(duì)于業(yè)務(wù)流程圖憨栽，如果你不懂業(yè)務(wù)帜矾，可以讓業(yè)務(wù)人員給你講解，嘴甜一點(diǎn)徒像；對(duì)于操作流程圖你可以實(shí)地觀察用戶的操作黍特，或者自己走一下業(yè)務(wù)流程以及使用競(jìng)品；至于頁(yè)面流程圖锯蛀，只要你元素出來(lái)了灭衷，怎么跳轉(zhuǎn)，這個(gè)難度應(yīng)該不大旁涤。
2翔曲、梳理提煉
業(yè)務(wù)人員給我們講解的流程，我們要梳理提煉出來(lái)劈愚，可以把主要的流程畫(huà)出來(lái)瞳遍，然后再向里面補(bǔ)進(jìn)異常流程，我們可以先在紙上畫(huà)畫(huà)菌羽，這樣速度比較快掠械，根據(jù)業(yè)務(wù)員的講解，然后再用專(zhuān)業(yè)的工具展現(xiàn)出來(lái)注祖。一般流程圖有三種結(jié)構(gòu)：順序結(jié)構(gòu)猾蒂、選擇結(jié)構(gòu)、循環(huán)結(jié)構(gòu)
3是晨、評(píng)估確認(rèn)
我們可以讓精通業(yè)務(wù)和涉及到流程圖的角色都參與到評(píng)估流程圖里來(lái)肚菠，眾人拾柴火焰高，其他人員說(shuō)不定能把我們沒(méi)有想到的流程提出來(lái)罩缴，產(chǎn)品經(jīng)理要多和別人交流蚊逢。
4层扶、維護(hù)更新
我們的流程圖需要不斷的維護(hù)和更新，因?yàn)槲覀兊牧鞒逃锌赡茏兏蛘邇?yōu)化烙荷，流程圖也需要定期維護(hù)和更新镜会。比如以前你是綁卡和充值兩個(gè)流程，你現(xiàn)在為了用戶體驗(yàn)把他們整合到一起终抽，直接綁卡充值稚叹，這個(gè)時(shí)候你的流程圖就需要變更。
六拿诸、繪制流程圖的工具有哪些
"工欲善其事,必先利其器",下面就為大家介紹幾款常用流程圖繪制工具。
1塞茅、visio
Visio是微軟推出的一款流程圖繪制工具亩码，它有很多組件庫(kù)，可以方便快捷的完成流程圖野瘦、泳道圖描沟、結(jié)構(gòu)圖的繪制，但是不支持mac電腦（苦惱）鞭光，其實(shí)我一直覺(jué)得它挺好用的吏廉，雖然畫(huà)出來(lái)可能沒(méi)有mac上用Omnigraffle畫(huà)出來(lái)的美。
2惰许、Omnigraffle（Mac）
Mac下沒(méi)有Visio很多人就用這個(gè)席覆，這個(gè)一般流程圖都能繪制，但是效率感覺(jué)沒(méi)有Visio高汹买，優(yōu)點(diǎn)就是畫(huà)出來(lái)的圖形比較美佩伤，同時(shí)支持外部插件，缺點(diǎn)就是沒(méi)有比較好的泳道流程圖插件晦毙，畫(huà)起泳道圖來(lái)不是你太方便生巡，需要下載的畫(huà)可以去馬云家買(mǎi)一個(gè)，省時(shí)省力见妒，還可更新孤荣。
3、ProcessOn
是一款網(wǎng)頁(yè)版的在線作圖工具须揣，優(yōu)點(diǎn)是無(wú)需下載安裝盐股、破解這些破事，同時(shí)支持在線協(xié)作返敬，可以多人同時(shí)對(duì)一個(gè)文件協(xié)作編輯遂庄，而且上手比較容易，它提供很多流程圖模版劲赠，可以方便的畫(huà)出流程圖涛目、思維導(dǎo)圖秸谢、原型圖、UML圖霹肝，缺點(diǎn)就是在繪制泳道圖需要增加泳道的時(shí)候估蹄，只能在最后一列加入，不能在中間加入這一點(diǎn)有點(diǎn)麻煩沫换，還有要吐槽的就是由于是在線的臭蚁，有時(shí)候?qū)С鰣D片，導(dǎo)出來(lái)的并不太好讯赏，流程圖畫(huà)的大的時(shí)候也無(wú)法截圖垮兑。
4、Axure
axure畫(huà)原型挺好用的漱挎，畫(huà)人物流程圖的時(shí)候也可以用系枪，但是要畫(huà)泳道圖、UML圖的時(shí)候磕谅，沒(méi)有對(duì)應(yīng)的模版私爷，需要自己畫(huà)，效率不高膊夹，如果你覺(jué)得畫(huà)原型衬浑，制作文檔都在Axure里，不想來(lái)回切換軟件的畫(huà)放刨，可以在里面自己制作一個(gè)組件工秩，下次直接調(diào)用。
總結(jié)：在用xmind梳理完成你的產(chǎn)品架構(gòu)和功能列表进统，然后用流程圖梳理一下你頭腦中的邏輯拓诸，最后才是畫(huà)產(chǎn)品的原型，這是一個(gè)從整體到局部麻昼，從巨像到抽象的過(guò)程奠支，只有這樣才能達(dá)到事半功倍的效果。歡迎加微信（yw5201a1）交流抚芦。
更多干貨請(qǐng)關(guān)注微信公眾號(hào)：chanpinliu880
