【文章摘要】說白了就是表示先做什麼後做什麼，實際上就是“開始，結束，行動，狀態與判斷”的組合。

流程圖定義

流程圖是表示流經一個系統的資訊流的圖形代表。

說白了就是表示先做什麼後做什麼，實際上就是“開始，結束，行動，狀態與判斷”的組合。

產品流程圖

產品流程圖包括業務流程、操作流程和頁面跳轉流程。

業務流程圖

作用：描述系統內各角色之間的業務關係和作業順序，包括使用產品各種角色中的操作，是描述整個系統的業務走向和業務流程，以業務處理過程為中心。通常會由幾個「角色」來組成，他會有一種流水線般的工作線，A搞定了，傳給了B，B搞定他的部分，傳給了C，C搞定後又要將結果傳給A做。

操作流程圖

作用：描述使用者為完成某個任務而對產品的一個操作流程

比如成功下單，比如登陸註冊，比如退款等等。

頁面跳轉流程圖

作用：描述頁面之間的跳轉邏輯，主要面向表現層。

這裡面會設計到一些邏輯上的問題，比如一個提示彈框出現後，如果點選確定，下一步頁面去哪裡？點選取消呢？

例子

拿外賣點餐產品當例子：“我要訂餐”

業務流程圖

設計產品的時候常常從業務流程開始。

假象一下我們的產品是個第三方訂餐平臺，平臺上有很多餐館，使用者通過我們的平臺點餐付款，我們通知餐館做飯，送餐等等。我們首先要做的就是理清產品中有多少種角色，在腦子裡想象下如果一個使用者下單，需要穿梭過多少種角色才能完成它的下單流程，然後將流程畫出。

畫業務流程通常會用到“泳道圖”這個是專門來表示多角色配合的一種流程。如下圖

角色有三，使用者，系統（後臺），廚房（第三方商家）。

跑一下這個短短的流程，如果「使用者」選好了今天的飯菜，提交訂單了，這時就將訂單資訊推送給了「系統」，「系統」在後臺生成訂單，使用者的訂單狀態變為「等待付款」。（其實系統這部分使用者是看不到的，但是 產品經理 需要想清楚。）使用者會來到支付頁面，這時候做一個判斷，使用者是否為這個訂單支付了費用呢？如果是，那麼「系統」就會受理這個訂單，將資訊推送給第三方「廚房」，如果不是，那麼使用者就是取消了訂單，訂單狀態變為「訂單失敗」。

流程中總是由一個動作展開，那麼思考時，我們要對每一步都帶著一個“如果……不……”會怎麼樣的心態，就會發現很多可以做判斷的地方。如果支付不成功呢？如果廚房不接單呢？如果退款不成功呢？這樣想下去你的流程細節就會越來越完善。

總結

業務流程著眼於整個系統的，注重主要環節。

你不只是一個使用者，因為使用者是不必知道後臺的一些判斷細節或是操作過程的，但如果你是產品經理的話是一定要清楚的。

業務流程設計流程

設定角色→跑通流程→用“如果……不……”窮盡判斷，思考產品背後的判斷邏輯。

操作流程

以下是“使用者下單”的操作流程。

總結

相對於業務流程圖，操作流程圖更專注於某一個任務或目標，注重細節；

操作流程圖是以一個使用者的操作角度來寫，並不限於所謂的消費者使用者（後臺的操作流程也可以）；

在初畫操作流程的時候，不要早早的去過分在意細節與逆流程。（逆流程便是那些需要判斷是否的那個“否”的流程），第一次用最理想的狀態，將流程跑通，再去思考這裡面會不會有那些“如果……不……”的細節。

頁面流程圖

從圖中可以看出構成：

介面。

一個矩形代表一個介面，這個流程中使用者走過兩個介面（登入頁和首頁），因為表達的是介面的跳轉，介面是使用者實實在在接觸到的媒介，非介面的內容，不要出現。

動作。

矩形之間也就是介面之間加上一個觸發動作，比如從介面A點選下一步按鈕，到達介面B，“點選下一步”就是連線這兩個介面的關鍵動作，需要標示出來，上圖例子就是“單擊提交按鈕”。

條件。

一個動作之後可能有多種“是/否”的結果，則在矩形之間、動作之後加上一個或多個判斷菱形。如上圖的檢驗賬號密碼是否輸入正確。

總結

業務流程與操作流程都在他之上完成，當建立起來操作流程，頁面跳轉的流程也就躍然紙上了。只是在做某些互動行為時要多加註意頁面之間的邏輯、層級關係，做到跳轉不歧義。