產品的三種流程圖,你都知道嗎?

66 評論 369005 瀏覽 2112 收藏 8 分鐘

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

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

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

什么是流程圖?

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

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

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

1111

三種流程圖

1. 業務流程圖

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

2222

刷牙流程

 

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

3333

業務流程(泳道圖)

 

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

3. 任務流程圖

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

4444

選購商品的流程

 

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

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

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

5555

流程圖繪制規則

頁面流

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

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

6666

購物頁面流

 

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

 

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 分析很棒 思路清晰了 受教

    來自湖南 回復
  2. 請問,實際設計過程中,從一個需求變成最終的原型圖,這些流程圖的使用順序是怎樣的?

    來自上海 回復
  3. 我覺得是不是還應該加上一個數據流程圖呢,一共4中流程(業務、任務、數據、頁面)

    來自北京 回復
  4. 總體來說寫的不錯

    來自廣東 回復
  5. 不喜勿噴,根據介紹個人實踐認為:
    3種:
    業務流程圖–主要后端技術關注【跨系統更多】
    頁面流程圖–主要前端關注【頁面之間的交互】
    任務流程圖–主要業務,老板關注,【站在用戶角度去實現】

    來自上海 回復
  6. 想了解一下任務流程圖和功能流程圖的區別?

    來自上海 回復
  7. 在其他文章里,在業務流程之后是功能邏輯圖到功能流程圖。再到頁面流程圖。
    個人理解功能邏輯和流程偏實現模型。任務流程更貼近用戶角度。
    其他人對此的如何看?

    回復
    1. 你所說的業務流程圖之后的功能邏輯圖 是指用X-mind的填寫出每個動作的支撐元素的一個結構,還是,還是流程?

      來自北京 回復
  8. 頁面流的第一段話是不是有個錯誤?
    通過泳道圖和流程圖,把業務流程和各個功能的任務流程用圖示的方式梳理清楚。其中“任務流程圖”直觀的告訴我們整個業務模型是怎樣的、涉及到哪些主體,這些主體下面都有什么任務要完成;“任務流程圖”展示了主干任務和分支任務,描述了一個任務的大致流程。

    第一個引號里面應該是業務流程圖吧?

    來自北京 回復
  9. 一直想知道賬戶和帳戶的區別 ?

    來自廣東 回復
    1. 這個就很復雜了,在很久很久以前,有一個傳說中的….

      來自四川 回復
    2. 跟錢有關系的是賬

      來自廣東 回復
  10. web端的產品也會使用頁面流程圖來表示頁面之間的關系嗎?

    來自北京 回復
  11. 那個,三個流程圖的編號是不是不太對

    來自遼寧 回復
    1. 什么編號啊?

      來自北京 回復
    2. 1. 業務流程圖
      3. 任務流程圖
      頁面流

      來自遼寧 回復
  12. 這個很好,實用

    來自上海 回復
  13. 很實用

    來自重慶 回復
  14. 挺好的

    來自山西 回復
  15. 能把事情說明白 能讓人看得懂的圖才是好圖

    來自上海 回復
  16. 非常實用,感謝分享!

    來自河南 回復
  17. 改天是不是可以講講文中提到的“產品方法論”呢?

    來自廣東 回復
  18. 其實今天最重要的一個發現是它們是包含結構

    來自廣東 回復
  19. “您的贊賞,是對我創作的最大鼓勵”這是系統加的嗎?

    來自上海 回復
    1. 其實你打開另一篇文章不就知道了,是的哈

      來自廣東 回復
  20. 學習了,感謝~

    來自廣東 回復
  21. 先分析,再畫流程圖,然后流程梳理,最后原型

    來自北京 回復
  22. 分析的很詳細,比較透徹,很多人實際工作中只是畫了任務流程圖,其實最重要的是業務流程要梳理清楚

    來自北京 回復
    1. 說得很對,一直都只會畫任務流程圖,今天才重點看業務流程圖,發現很重要

      來自廣東 回復
  23. 任務流程圖,業務流程圖,頁面流程圖這三個都是必須要有的嗎

    來自北京 回復
    1. 不是必須要有,只是有了可以把工作做的更好。

      來自廣東 回復
  24. 醍醐灌頂,感謝感謝!

    來自北京 回復
  25. 實在是干貨,謝謝了。第一次對流程圖有了完整理解。

    來自貴州 回復
  26. 感謝分享,以前自己沒有系統的按這個步驟來,總覺得亂,先從業務流程圖、到任務流程圖、再到頁面流程圖 ??

    來自廣東 回復
    1. 同上

      來自山西 回復
    2. 同上+1

      來自廣東 回復
  27. mark,我就是火急火急地畫原型開始,收藏!謝謝!

    來自福建 回復
  28. 干貨,已收藏。
    不過這就尷尬了,希望題主扔個信息架構圖學習下。

    回復
    1. 信息架構圖更多偏向數據信息,比如某個角色包含哪些屬性字段

      回復
  29. 業務流程圖可以理解為幾個角色的任務流程圖組合在一起嗎

    來自北京 回復
    1. 任務流程圖會更細分,業務流程圖相對要框架一點

      回復
  30. 現在更多的是將業務流程圖和任務流程圖合并一起

    來自廣東 回復
    1. 那這個圖有點大了,小篇幅是表達不清楚的

      來自浙江 回復
    2. yep 因人而異 看開發和老大的要求

      來自廣東 回復
    3. 可以雜糅在一起嗎?前幾天參加一個評審,產品經理畫的雜糅的圖,被噴了

      來自浙江 回復
    4. 一般業務流程圖畫清楚就可以;泳道圖這些都是后期可以再補的 業務上才是最重要的一點 每次都是因為業務流程和開發討論N久

      來自廣東 回復