關于流程設計，有三種流程圖……了解了業務、確定了需求，會梳理出產品的信息架構。

剛入行的時候，我會火急火燎地畫原型圖，因為畫原型圖的時候成就感最大，這畢竟是真正意義上的輸出物??！終于畫完美美的原型圖了，拿給評審或和開發溝通，才發現存在很多邏輯漏洞，不是缺少分支流程，就是沒考慮異常狀態，就這樣來來回回修改原型圖，被開發同學鄙視和效率低下不說，自己都開始懷疑自己了。

隨著項目經驗的增加和方法論的逐步完善，終于知道在需求和原型圖之間存在著兩道墻，一個是信息架構，另一個則是流程設計。只有按照相應的設計原則跨過這兩道墻才能在畫原型圖時做到心中有數，考慮周全，而不是跟著感覺走。

什么是流程圖？

你是不是會覺得跟一些人沒有共同語言，并不是因為我們說著不同的語言，而是彼此知道的概念不一樣，或者對同個概念的理解不同，所以導致了溝通困難，你明明在說A，對方理解成B，這種雞同鴨講的溝通真是難以忍受。既然概念如此重要，當學習新知識時，第一件事就是透徹的了解概念，在理解概念的前提下再去擴展方法論和踐行，才能學好新知識。流程圖，絕大多數人三個字都認識，但當它們組合在一起，表達了什么意義呢？

流程圖：用圖示的方式反映出特定主體為了滿足特定需求而進行的有特定邏輯關系的一系列操作過程。精簡一下，就是流程圖是用圖示來表示某一系列的操作過程。這個操作過程有特定的主體，是為了滿足特定的需求且有特定邏輯關系的。例如：京東的購物流程，特定主體是用戶、特定需求是購物、特定邏輯關系是用戶購物過程中的邏輯。

產品設計中涉及的流程圖有三種，業務流程圖、任務流程圖、頁面流程圖。

三種流程圖

1. 業務流程圖

凡事都是有流程的，包括最簡單的吃飯睡覺刷牙，刷牙時，你要先拿起牙刷牙膏、擠牙膏、刷牙、漱口、洗牙刷、放好牙膏牙刷。

刷牙流程

你發現了用戶的一個痛點，想要去解決它，進行產品定位和需求分析之后，你需要對整個業務模式進行分析，需要考慮一下幾個問題①涉及到哪些主體？②每個主體都有哪些任務？③各個主體之間怎么聯系的？

業務流程（泳道圖）

這是網上關于購物支付的泳道圖，用來反映業務流程。上述的泳道圖涉及到賣家、買家、第三方支付、銀行等主體；每個主體都有其相應的任務；并用箭頭來表示各個任務之間的先后次序。

3. 任務流程圖

泳道圖從戰略層分析了整個業務流程，接下來要去分解到各個任務層具體是如何操作的，例如上面買家選購商品這個任務就涉及到搜索商品、瀏覽搜索結果、查看商品詳情、若滿意則進入訂單任務，若不滿意則返回到搜索結果或者重新搜索，這就是具體的某個任務的流程。

選購商品的流程

畫具體任務流程的時候要注意從整體流程到局部流程，從主干流程到分支，從正常流程到異常流程。對于交互設計師來說，任務流程的主體一般是產品的用戶，任務流程圖反映的則是用戶的行為。

拿滴滴和易到來說，打車就是主干流程，查看行程、查看優惠券、設置就是分支流程，做設計時應該先考慮打車流程，再去完善其它流程；用戶正常打到車是正常流程，網絡異常、高峰期打不到車等屬于異常流程，先考慮正常流程、再考慮異常流程，而且異常流程一定要思考的全面。產品的邏輯漏洞多半是由于異常流程沒有考慮清楚，所以畫任務流程圖能有效的減少產品原型圖的邏輯漏洞。

雖然流程圖簡單，但也有一套規則。按照規則來畫，才不會被笑話。

流程圖繪制規則

頁面流

通過泳道圖和流程圖，把業務流程和各個功能的任務流程用圖示的方式梳理清楚。其中任務流程圖直觀的告訴我們整個業務模型是怎樣的、涉及到哪些主體，這些主體下面都有什么任務要完成；任務流程圖展示了主干任務和分支任務，描述了一個任務的大致流程。

而頁面流程圖的對象是頁面，頁面是互聯網產品設計最基本的單元，不管APP也好、H5也好、PC端也好，這些產品由一個個頁面組成。頁面流描述了用戶完成一個任務需要經過哪些頁面。也就是我在哪，經過什么操作，能去哪。頁面流有三個要素：頁面、行動點、連接線。下面拿購物的頁面流舉例說明：

購物頁面流

畫頁面流時一般只考慮用戶的正常路徑就行，如果需要指出異常流程，在正常流程附近畫出異常流程就行。產品設計從需求分析到信息架構、再到業務流程——任務流程——頁面流、再到最后的原型圖（線框圖）是一個從抽象到具象的過程，也是從概況到細分的過程。經過一步步的分析，逐步將想法變成實實在在的產品，這就是產品設計的魅力所在。而這其中流程設計起到舉足輕重的作用，不可忽視。

本文由 @鄒志楠 原創發布于人人都是產品經理。未經許可，禁止轉載。