以美團外賣為例，區(qū)別業(yè)務(wù)流程圖和頁面流程圖

40 評論 165166 瀏覽 726 收藏 7 分鐘

在產(chǎn)品設(shè)計中，流程圖是非常重要的一環(huán)，它決定了我們的產(chǎn)品在后期的各個環(huán)節(jié)能否跑通，會不會出現(xiàn)沒有出口的情況。前段時間自己在畫各種流程圖的時候曾經(jīng)很迷茫，分不清業(yè)務(wù)流程圖，頁面流程圖的區(qū)別，在一段時間的學(xué)習(xí)后，有了一個大致的認(rèn)識，想分享給更多剛?cè)腴T也對此有疑問的小伙伴。

業(yè)務(wù)流程圖

什么叫業(yè)務(wù)流程圖？百科中描述系統(tǒng)內(nèi)各單位、人員之間業(yè)務(wù)關(guān)系、作業(yè)順序和管理信息流向的圖表。也可以直接簡單的理解為用圖來表示需要完成產(chǎn)品業(yè)務(wù)的過程。

在業(yè)務(wù)流程圖中，一個業(yè)務(wù)往往代表了多個需求，是多個需求的集合，因此，在繪制業(yè)務(wù)流程圖的時候，需要全局思考，必須要將主干及所有的分支考慮進(jìn)去，確保功能的完整性，直觀的展示產(chǎn)品的整個過程。它與頁面流程圖有著本質(zhì)上的不同。

怎樣畫業(yè)務(wù)流程圖

  • 不管是當(dāng)你在創(chuàng)造一個新產(chǎn)品時，還是在面對既有的產(chǎn)品做業(yè)務(wù)流程圖時，最重要最重要的就是一定要最先找到戰(zhàn)略目標(biāo)，確定產(chǎn)品定位。（美團外賣，定位就是外賣）
  • 再去深入了解思考核心業(yè)務(wù)流程，確定泳道。（美團外賣，核心流程就是從用戶開始下單一直到用戶最終收到外賣的整個過程）
  • 確定產(chǎn)品有哪幾個階段，思考業(yè)務(wù)在各個階段的形態(tài)。
  • 思考清楚后開始畫業(yè)務(wù)流程圖，在畫的過程中也在頭腦中進(jìn)行梳理，盡可能的不遺漏任何的分支或異常情況。

但是，業(yè)務(wù)流程圖并不是一成不變的，在多次討論會后中可能會有改動。因此，在剛開始梳理流程圖時保證邏輯的清晰，可以為將來的工作節(jié)省不必要的時間。而且，業(yè)務(wù)流程是和技術(shù)方進(jìn)行后續(xù)任務(wù)的基本，因為，必須保持邏輯的完整性，以便于技術(shù)方通過流程圖分配工作，增加整體工程的工作效率。

頁面流程圖

相比于業(yè)務(wù)流程圖來說，頁面流程圖就簡單得多，頁面流程圖就是從用戶出發(fā)，表示用戶在使用產(chǎn)品的操作流程，可以簡單理解為在用戶在產(chǎn)品中進(jìn)行操作時，頁面的跳轉(zhuǎn)過程。

怎樣畫頁面流程圖

  • 打開APP，查看各個頁面。
  • 思考不同頁面之間的跳轉(zhuǎn)及跳轉(zhuǎn)前提。
  • 思考頁面之間的聯(lián)系。
  • 明確每個頁面的元素，要體現(xiàn)誰在做什么

從業(yè)務(wù)流程圖和頁面流程圖的描述中，可以得出：

  • 業(yè)務(wù)流程圖更加完整，體現(xiàn)了整個過程，而針對不同用戶的頁面流程圖相對來說只體現(xiàn)了整個業(yè)務(wù)流程中的部分。
  • 頁面流程圖沒有體現(xiàn)異常流程具體處理方法。
  • 頁面流程圖與業(yè)務(wù)流程圖所針對的問題不同，業(yè)務(wù)流程圖針對的更多的是產(chǎn)品本身，頁面流程圖更多的考慮的是用戶與產(chǎn)品的交互。

這里以美團外賣為例，做了一份簡單的業(yè)務(wù)流程圖：

這里同時也以美團外賣為例，做了一份簡單的只有針對訂餐用戶方的部分的頁面流程圖：

在這兩幅流程圖的對比中，我們可以更加形象的去發(fā)現(xiàn)兩者的不同。就美團外賣來說，業(yè)務(wù)流程圖顯然與頁面流程圖的重點都不同，因此，涉及到的功能就有不同了，兩者的維度也有不同了。

總結(jié)

剛開始的去畫流程圖經(jīng)常會出現(xiàn)流程缺失，流程邏輯關(guān)系有問題，以及版面混亂等很多問題，不管是畫哪種流程圖，邏輯的清晰才是最大的根本，它們都是我們表達(dá)自己邏輯關(guān)系的一個載體。同時，當(dāng)我們?nèi)ブ谱髁鞒虉D的時候，也同樣更加深刻的梳理了它們在我們腦海中的邏輯關(guān)系，使得我們在繪圖的過程中也不斷地去優(yōu)化流程。產(chǎn)品經(jīng)理需要會做減法，不僅僅在需求上，在流程上也是如此，減少繁瑣無用流程，提高效率，也是一門不小的學(xué)問。

總體來說，任何一個產(chǎn)品都是由點線面組成，每個需求是點，每個頁面是線，通過流程圖的串聯(lián)，最終形成了我們看到的完整的產(chǎn)品。流程圖是產(chǎn)品的骨架，業(yè)務(wù)流程圖是產(chǎn)品的大骨架，頁面流程圖是組成產(chǎn)品骨架的一個個小的骨頭，只有搭好骨架，我們才能為產(chǎn)品填充血肉，注入生命。

感謝看到這里，產(chǎn)品新人，望大家給出批評指導(dǎo)。因為之前自己弄錯了，重新做了一份頁面流程圖，謝謝大家對于我的問題的指出，這個流程圖在做的時候我才發(fā)現(xiàn)其實做好一個真正的完整的邏輯結(jié)構(gòu)清晰的流程圖還需要很長一段時間的修煉，包括也要對后端去做學(xué)習(xí)和了解，這樣才會更好的做好前后端的聯(lián)合，總之，我會繼續(xù)努力的。

 

本文由 @卉子醬 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

更多精彩內(nèi)容，請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
共 12 篇文章60169 人已學(xué)習(xí)

卉子醬
勤勤懇懇搬磚的產(chǎn)品一枚~ 微信公眾號：慢慢研究所
8篇作品 269138總閱讀量
04-0710761 瀏覽
Temu狂飆，“既要又要”
10-102103 瀏覽
被催熟的電子簽名第一股，一夜回到5年前
09-054289 瀏覽
教育類產(chǎn)品，如何更好地游戲化？
04-132046 瀏覽
大模型「涌現(xiàn)」的四個關(guān)鍵
12-251616 瀏覽
倒數(shù)日用戶注冊登錄流程拆解和優(yōu)化建議
評論
評論請登錄

  1. 派送騎手和后面的派送訂單等判斷和子流程不完成。顆粒度也大小不一

    來自浙江 回復(fù)

  2. 頁面流程圖中4.3和4.2.2的箭頭是不是反了？

    來自日本 回復(fù)

  3. 流程圖內(nèi)任務(wù)的顆粒度不一致，業(yè)務(wù)流程圖還是需要打磨的.

    來自北京 回復(fù)

  4. 作者畫的東西可能不是很清晰，但是圖的表現(xiàn)形式和名稱是沒錯的！頁面流程圖其實就是產(chǎn)品經(jīng)理在著手開始畫原型之前的單純展示頁面核心功能，這樣可以先打通頁面流程關(guān)系，不必要在具體原型布局上摳細(xì)節(jié)，做好后可以與開發(fā)溝通，開發(fā)也可以更快大致了解頁面操作流程，頁面流程通了，原型就是順手的事兒！套用某位老師的話：頁面交互圖，是指通過頁面跳轉(zhuǎn)關(guān)系建立的圖。如，首頁跳頻道列表，列表跳詳情。主要便于ui梳理他要設(shè)計幾個頁面。前端清楚頁面之間跳轉(zhuǎn)關(guān)系。頁面流程圖主要表現(xiàn)用戶完成一個事件任務(wù)需要涉及哪些頁面。如用戶要完成刪除好友，加好友，注冊登錄這幾個事件，涉及哪些頁面，這些頁面操作流程如何。

    來自廣東 回復(fù)

  5. 后年的是產(chǎn)品流程吧，不是頁面。。。。

    來自浙江 回復(fù)

  6. 瀏覽商品-加入菜籃-填寫收貨信息-支付，不涉及物流的話這就是業(yè)務(wù)流程了。有點誤人子弟了，哈哈

    來自廣東 回復(fù)

  7. 流程圖還是能挑出問題的

    來自北京 回復(fù)

  8. 這應(yīng)該是業(yè)務(wù)流程圖和任務(wù)流程圖吧。。。。。。。會被你帶溝里的，小姐姐

    來自河南 回復(fù)

  9. 應(yīng)該是任務(wù)流程圖吧，怎么可能是頁面流程圖。。。。。。。。。。。。

    來自浙江 回復(fù)

  10. 個人感覺有點混了 ，但是還不很有條理的

    來自北京 回復(fù)

  11. 小姐姐加油

    來自廣東 回復(fù)

  12. 用戶評價似乎缺了？

    來自北京 回復(fù)

    1. 前面都已經(jīng)說了，頁面流程是功能的整合，訂單詳情中已經(jīng)包括用戶評價，看來你還是沒搞清業(yè)務(wù)流程和頁面流程區(qū)別。

      來自廣東 回復(fù)

  13. 細(xì)節(jié)可能有待改進(jìn)。想法不錯

    來自山東 回復(fù)

    1. 謝謝~

      來自四川 回復(fù)

  14. 業(yè)務(wù)流程圖、任務(wù)流程圖、頁面流程圖，如何理解？

    來自上海 回復(fù)

    1. 三者的核心不一樣，業(yè)務(wù)和頁面我這里介紹了，業(yè)務(wù)流程圖是從戰(zhàn)略層去分析，而任務(wù)流程圖是分解到各個任務(wù)層具體是如何操作的，是在執(zhí)行某個具體任務(wù)時候的流程

      來自四川 回復(fù)

  15. 請問一下你畫流程圖是用什么工具畫的呢~

    來自福建 回復(fù)

    1. 業(yè)務(wù)流程用的visio，頁面流程用的axure

      來自四川 回復(fù)

  16. 在用戶體驗界面操作的時候，也需要梳理業(yè)務(wù)流程圖，對應(yīng)梳理前端頁面流程圖。由于用戶交互中不僅只有前端的頁面，還有后端的數(shù)據(jù)接口處理等，需要梳理清楚前后端的業(yè)務(wù)協(xié)助，才能做好線上功能

    來自江蘇 回復(fù)

  17. :mrgreen: 學(xué)習(xí)學(xué)習(xí)

    來自廣東 回復(fù)

  18. 你那個不是頁面流程，是用戶下單流程，

    回復(fù)

    1. ?? 我錯了。。。我到時候重新再整理個頁面流程圖上去。。

      來自四川 回復(fù)

  19. 業(yè)務(wù)流程圖邏輯很棒，學(xué)習(xí)了

    回復(fù)

  20. 業(yè)務(wù)流程略做的太粗糙，程序員看到想打人。
    1是你漏了業(yè)務(wù)后臺。運營人員想查今天銷售數(shù)據(jù)，用戶打了電話來噴有糾紛要查詢訂單啥的，你最少得有個入口給人家客服妹子查吧，這里沒有體現(xiàn)到和業(yè)務(wù)后臺的交互。系統(tǒng)管理是什么鬼，這里最少要拆成業(yè)務(wù)后臺（運營后臺啥的）+服務(wù)端。

    2用戶端，你漏了訂單狀態(tài)變化的提醒。按我點美團外賣的經(jīng)驗，支付完成后，在有推送的正向流程會依次接到餐廳動態(tài)、配送員動態(tài)（xx已接單、已取貨、已送達(dá)）、評價提醒。

    2你的支付環(huán)節(jié)有問題，你再看看。支付子流程——支付是否成功—N—是否超時—N—支付子流程。這啥意思，怎么又回到支付子流程去了。假設(shè)我用支付寶支付完了因為超時了服務(wù)端沒有返回結(jié)果，15分鐘倒計時走完了，還得再走一次支付流程啊，作為用戶的我要付款2次嗎？
    應(yīng)該是先倒計時再接受支付結(jié)果吧。倒計時內(nèi)有成功結(jié)果就生成訂單通知商家，沒結(jié)果是在訂單里面把狀態(tài)變成為待支付，而不是直接訂單失敗啥的。你再看看吧

    來自上海 回復(fù)

    1. :mrgreen:

      來自北京 回復(fù)

    2. ?? 感謝你寫了這么多這么詳細(xì)的的說明！我也有很多沒思考到的細(xì)節(jié)，確實對于你說的這幾個問題我沒有考慮到，再次畫圖的時候我會注意思考這些問題的

      來自四川 回復(fù)

    3. 你都看到別人說的了，為何你還不更新你的圖。。。。。。。故意的嗎

      來自浙江 回復(fù)

    4. 故意個毛啊，說話陰陽怪氣的

      來自湖南 回復(fù)

    5. 加一

      來自廣東 回復(fù)

    6. 思路清晰，你是開發(fā)還是產(chǎn)品？

      回復(fù)

    7. :mrgreen:

      來自北京 回復(fù)

    8. 手動點贊

      來自廣東 回復(fù)

    9. 你自己說的都矛盾，你自己也寫了支付是否成功—N—是否超時—N—支付子流程，前提是支付沒有成功（N）才又走一遍支付子流程，壓根就沒有支付成功，你哪來的支付兩次？

      來自廣東 回復(fù)

  21. 作者的頁面流程圖更像是用戶操作流程圖

    來自上海 回復(fù)

    1. 可能是我的理解有點偏差，我也是在學(xué)習(xí)的過程中，感謝提出的質(zhì)疑，我下來再去琢磨一下

      來自四川 回復(fù)

    2. 確實，文中給出是用戶操作流程圖，而不是頁面流程圖。頁面流程圖的是表明頁面及頁面關(guān)系的圖。基本構(gòu)成單位是頁面，每個頁面有頁面編號/名稱、頁面主要內(nèi)容、用戶操作對象，一般通過在頁面的操作對象上加上帶箭頭的連線（箭頭指向另一個頁面）將頁面串起來。

      來自北京 回復(fù)

    3. ?? 已改，謝謝大家的指教

      來自四川 回復(fù)

  22. 說的真好，最后一段比喻形象而又生動，表達(dá)作者的文筆也不錯

    來自湖南 回復(fù)

    1. ??

      來自四川 回復(fù)