轉載自：http://www.chanpin100.com/article/102985，致敬原作者。

業務流程圖、任務流程圖、頁面流程圖，看完這篇，你再也不用擔心流程圖的問題了

很多人拿到需求就火急火燎的開始畫原型，然後畫著畫著覺得有些地方沒有考慮到，又回頭去改，如果在畫原型之前，你能將自己的業務流程想好，使用者的操作流程想好，頁面跳轉想清楚，你就能少做很多無用功，達到事半功倍的效果。

一、什麼是流程圖

流程圖=流程+圖。

流程是一系列的邏輯關係（包含因果關係、時間先後、必要條件、輸入輸出）產品經理做需求前一定要先把這些邏輯關係理清楚，如果非要用一句話概括的話“流程就是在特定的情境下滿足使用者特定需要的總結”。

圖就是將你頭腦中的邏輯關係以圖形化的形式呈現出來，具有圖形化、視覺化的特點，因為是圖，你可以像你的版本迭代一樣，當你的邏輯需要修改的時候拿出來迭代一下，同時因為有圖，你還可以更好的給專案成員進行宣講。

二、為什麼要畫流程圖

1、幫助梳理邏輯

我們每個人想一個邏輯的時候，不一定能把這個邏輯的細枝末節都想到，如果我們貿然的畫原型就有可能做許多無用功，這個時候畫流程圖可以幫助我們梳理清楚我們的邏輯。建議剛開始梳理邏輯的時候可以在紙上畫畫這種流程圖，因為這樣的好處是你可以快速的把你腦中的邏輯呈現在紙上，修改起來也方便，當你畫好以後然後再用專業的工具畫出來儲存。

2、便於宣講和傳播

產品經理需要開評審會和寫PRD文件的，這個時候如果你有一張清晰的流程圖，不僅便於你講解，也便於技術理解，同時把你的流程圖插入PRD文件中也方便傳播，當技術忘記流程的時候，檢視一下文件裡的流程就知道流程是啥樣了，不用反覆來找你確認。

3、優化迭代

對於拿到一個邏輯，我們不一定能考慮的那麼周全，這個時候有一個清晰的流程圖也方便做記錄以及修改。

同時每個版本迭代的流程圖可能會有相應的變化，通過對每個版本流程圖的對比分析，可以知道流程優化在什麼地方，產品優化了什麼地方。

三、流程圖元素定義

流程圖是符號化的圖形語言，有自己的規範，菱形代表判斷，距形代表具體的操作行為、開始和結束用圓角表示...

遵守這些行業規範不僅讓別人覺得你專業，同時也有利於看的人理解，就好像阿拉伯數字全世界都能看懂一樣。

四、產品經理要繪製的流程圖

產品中設計的流程圖主要有三種，業務路程圖、任務流程圖、頁面流程圖，下面我們來一一介紹。

1、業務流程圖

業務流程圖就是描述那些個體在什麼條件下做了什麼事情，他們之間有何關聯。主要分三個方面：①涉及到哪些主體？②每個主體都有哪些任務？③各個主體之間怎麼聯絡的？一般涉及到多個主體，每個主體之間有聯絡，比如p2p平臺。這是p2p的業務流程圖、涉及到借款人、平臺、投資人、第三方支付四個主體，以及每個主題需要完成的任務、任務之間的聯絡和先後順序。

2、任務流程圖

泳道圖一般是從戰略上分析整個業務流程，讓你對公司所做的業務有個大概的瞭解，而任務流程圖就是在你的產品操作上，使用者通過什麼樣的操作來完成它的目標，比如你去銀行ATM機器上取錢，你是如何一步步操作把錢取出來的，這裡以p2p理財產品購買為例，來說明購買的任務流程圖。

畫流程圖的時候注意主要流程和異常流程，在這個例子中，主要流程就是購買流程、異常流程就是沒有設定交易密碼、使用者忘記交易密碼、以及超過重試次數這些流程，畫流程圖的時候先畫主要的流程，然後再把異常額流程考慮上，查漏補缺，保證不遺漏，產品的邏輯漏洞多半是由於異常情況沒有考慮清楚，畫流程圖可以有效的幫助你梳理邏輯。

3、頁面流程圖

如果說業務流程圖幫助你梳理戰略，任務流程圖幫助你梳理使用者操作行為（主要給程式設計師看）、頁面跳轉流程在幫助你梳理各個頁面之間的跳轉關係（主要給UI和前端程式設計師看）這是一個逐步從整體到區域性，從後端到前端的過程。

所有的產品都是由頁面組成的，不論是APP、PC、H5都是由一個個頁面組成的，頁面流程圖描述完成一個任務需要經過哪些步驟，你在畫圖的時候只需要清晰的表現出使用者點選頁面的什麼地方，然後跳轉到那個頁面。主要由頁面、行動點、連線線組成，下面以使用者購買理財產品舉例。

頁面流程一般只考慮正常的操作流程就行，對於異常的操作流程在正常流程的旁邊畫出，例如：上面的正常頁面跳轉是使用者購買這個流程，異常頁面跳轉流程是在購買介面金額不足的時候點選去充值流程，這個在正常流程的旁邊標示出來就好。

五、如何繪製流程圖

上面說了需要繪製流程圖，這裡說說繪製流程圖的思路。

1、調查研究

對於業務流程圖，如果你不懂業務，可以讓業務人員給你講解，嘴甜一點；對於操作流程圖你可以實地觀察使用者的操作，或者自己走一下業務流程以及使用競品；至於頁面流程圖，只要你元素出來了，怎麼跳轉，這個難度應該不大。

2、梳理提煉

業務人員給我們講解的流程，我們要梳理提煉出來，可以把主要的流程畫出來，然後再向裡面補進異常流程，我們可以先在紙上畫畫，這樣速度比較快，根據業務員的講解，然後再用專業的工具展現出來。一般流程圖有三種結構：順序結構、選擇結構、迴圈結構

3、評估確認

我們可以讓精通業務和涉及到流程圖的角色都參與到評估流程圖裡來，眾人拾柴火焰高，其他人員說不定能把我們沒有想到的流程提出來，產品經理要多和別人交流。

4、維護更新

我們的流程圖需要不斷的維護和更新，因為我們的流程有可能變更或者優化，流程圖也需要定期維護和更新。比如以前你是綁卡和充值兩個流程，你現在為了使用者體驗把他們整合到一起，直接綁卡充值，這個時候你的流程圖就需要變更。

六、繪製流程圖的工具有哪些

"工欲善其事,必先利其器",下面就為大家介紹幾款常用流程圖繪製工具。

1、visio

Visio是微軟推出的一款流程圖繪製工具，它有很多元件庫，可以方便快捷的完成流程圖、泳道圖、結構圖的繪製，但是不支援mac電腦（苦惱），其實我一直覺得它挺好用的，雖然畫出來可能沒有mac上用Omnigraffle畫出來的美。

2、Omnigraffle（Mac）

Mac下沒有Visio很多人就用這個，這個一般流程圖都能繪製，但是效率感覺沒有Visio高，優點就是畫出來的圖形比較美，同時支援外部外掛，缺點就是沒有比較好的泳道流程圖外掛，畫起泳道圖來不是你太方便，需要下載的畫可以去馬雲家買一個，省時省力，還可更新。

3、ProcessOn

是一款網頁版的線上作圖工具，優點是無需下載安裝、破解這些破事，同時支援線上協作，可以多人同時對一個檔案協作編輯，而且上手比較容易，它提供很多流程圖模版，可以方便的畫出流程圖、思維導圖、原型圖、UML圖，缺點就是在繪製泳道圖需要增加泳道的時候，只能在最後一列加入，不能在中間加入這一點有點麻煩，還有要吐槽的就是由於是線上的，有時候匯出圖片，匯出來的並不太好，流程圖畫的大的時候也無法截圖。

4、Axure

axure畫原型挺好用的，畫人物流程圖的時候也可以用，但是要畫泳道圖、UML圖的時候，沒有對應的模版，需要自己畫，效率不高，如果你覺得畫原型，製作文件都在Axure裡，不想來回切換軟體的畫，可以在裡面自己製作一個元件，下次直接呼叫。

總結：在用xmind梳理完成你的產品架構和功能列表，然後用流程圖梳理一下你頭腦中的邏輯，最後才是畫產品的原型，這是一個從整體到區域性，從巨像到抽象的過程，只有這樣才能達到事半功倍的效果。歡迎加微信（yw5201a1）交流。

更多幹貨請關注微信公眾號：chanpinliu880