三個步驟教你如何做好后臺產品設計
編者按:這篇文章主要探討了后臺產品的設計方法與思路,以點餐為例詳細說明了如何做好業務邏輯梳理、產品梳理以及原型設計。
這段時間,讓我對后臺產品有了初步的了解。所以想嘗試自己總結一下對后臺產品設計和開發的一些知識。后臺產品也有不同的分類,我要介紹的是工作流方面的產品。
以下的內容,有很多都參考了前輩的意見。有不對的地方也希望大家多多指點。
首先要清楚的是,后臺產品和前端產品存在很大的差異性。后臺產品更加注重的是業務邏輯的清晰和功能的實現,而前端產品對視覺設計和交互設計有更高的要求。
下面開始,介紹自己總結的后臺產品的設計方法與思路(就像前面所言,更多還有其他前輩的知識,先在此道謝)。
業務邏輯梳理
需求調研與分析完成后,就是自己對內容的消化和吸收。首先要做的事情是自己先清晰地理解一個產品。只有自己理解了,才能更好地推進產品進行開發。
先梳理清楚線下的業務流程。將線下的業務流程梳理清楚以后,然后才是對產品的思考。這里要介紹幾種幫助自己更好地梳理業務流程的工具。
狀態圖,流程圖,泳道圖。三種圖,所起到的作用是不一樣的。下面我詳細說明。
a.狀態圖
狀態圖的作用是讓人清楚業務的實現需要經歷的狀態序列,以及引起狀態轉移的事件,和因狀態轉移而伴隨的動作。狀態圖的驅動是基于狀態的轉換。下面我以點餐為例子。
業務的開始和結束用圓角矩形表示。業務的狀態以矩形表示。每一個矩形都表示一個狀態。菱形表示業務分支。每一個矩形之間都伴隨著一個動作。
狀態圖能清楚地讓我們看到完成的點餐流程中,會在哪些地方進行停留,并知道轉向下一個狀態時會伴隨著怎樣的動作。另外,在 “菜品加工中” 下方特意設立了一個 “食材準備中” 作為子狀態,因為業務流程中可能會出現某些特殊的情況(如某些菜品需要準備食材)而停留在某個狀態,這時需要先去完成其它操作(準備食材) 后再回到該狀態(菜品加工中)繼續之后的業務流程。
也許會有人覺得,這樣做將簡單的事情復雜化了。如果對于簡單的業務邏輯,確實有點多此一舉,但如果一個業務流程中存在很多個(7 個 +?)狀態的時候,我相信狀態圖能讓你在進行業務梳理時保持比較清醒的頭腦。
b.流程圖
流程圖,相信大多數人對此并不陌生。但是,我看見很多人繪制的流程圖并不是十分規范。不規范的流程圖,自己理解起來可能沒有什么問題,但是別人可能就會產生誤解。
流程圖,我將它分為分為三步走。1.流程圖。2.泳道圖。3.分階段的泳道圖。下面一個一個介紹。
業務流程圖描述的是完整的業務流程,以業務處理過程為中心,一般沒有數據的概念。流程圖以動作來推動業務前進。下面還是以點餐作為例子。
同樣業務的開始和結束用圓角矩形表示,而每一個動作則以矩形表示,菱形表示可能會出現的分支??梢郧逦目吹搅鞒虉D沒有任何狀態標識。狀態圖與流程圖表達的不同效果一眼便知。
流程圖更加關注的是業務實現具體需要進行哪些操作。每一個動作的構成形式基本都是 “動詞 + 名詞” 或者 “動詞” 的形,這樣才能更加明晰以動作為驅動的流程圖。
c.泳道圖
泳道圖,又稱為跨職能流程圖。也是我所說的流程圖的第二步。作為流程圖的進階,泳道圖加入了泳道表示不同角色(或崗位、部門等)。讓人在了解業務流程時,也清楚由誰執行該動作。同樣以點餐為例子。
可以看到,每一個動作都放在相應的泳道下,對應了執行此動作的人。這樣對于業務流程中不同角色的職責也會更為明確的認識。
d.流程圖終極版
可以看到,在最左邊加了一個側欄,將不同的動作劃分進了不同的階段。個人覺得這是彌補了之前沒有狀態說明的不足。讓人在了解詳細業務流程的同時,也對狀態有了大概的認識。
也 許很多人,覺得花這么多時間畫圖會浪費很多時間。我覺得仁者見仁智者見智了。對于我個人而言,每天搗弄這些圖,會很快加深我對產品的理解。特別是在業務比 較復雜,而且之前有完全沒有接觸過相關方面知識的時候,僅靠大腦很難有清楚的思維,但是圖形化后卻能很好地理解。在業務整理上多花點時間整理,我覺得是很 有必要的。
產品梳理
a.梳理好線下的業務邏輯以后,要將它抽離搬到線上。這個過程,可能會刪除掉某些線下的環節。
同樣以點餐為例。
可以看到,這個過程當中,廚師和勤雜工在線上不需要有操作。所以狀態圖和流程圖看起來簡潔了很多。
b.產品功能點。
依據產出的流程圖,基本上可以大致確定產品的功能點。
先理出單獨的功能(功能)
然后加入角色(功能 + 角色)
準備工作做好以后,可以開始搭建產品的架構圖了。
頁面關系
頁面 + 功能
頁面內架構
后面的架構就不寫了。
先搭頁面,再確定頁面內的功能,最后細化頁面內的信息。在原型出來以前,可以拿產品架構圖先和別人進行一下交流。產品架構圖相較于原型圖,與數據庫的設計思想比較一致。而原型視圖化后,對于數據庫設計卻反而變得抽象了。另外,產品架構圖修改較快捷,返工成本相對較小。
需要說明的是,產品架構圖更多是需要個人的整理。
原型設計
產品梳理好以后,就要開始搭建原型了。
a.先確定通用模塊:頁頭、頁尾、一級導航、二級導航
根據產品的不同,選擇合適的布局。
b.將產品架構圖的內容填充到頁面內,并加入文字說明操作
c.細節添加
文案
導航: 一(二、三)級導航;菜單…
常用模塊交互方式
按鈕
- 彈窗:對話框…
- 色彩:頁面基調;字體顏色…
- 反饋:提示;警告;正確;錯誤…
細節內容可以在頁面旁邊的進行注釋。但盡量要單獨出一份詳細的 PRD。
產品設計的階段,就暫時結束了。
之后就是與開發溝通,推動產品一步一步往前走了。這個過程中,可能會有許多需求變更和返工。要有充足的耐心慢慢解決問題。
產品設計也許結束了,但是產品的開發才剛剛開始。
路漫漫其修遠兮,吾將上下而求索。
作者:方東東
本文由 @點融黑幫 授權發布于人人都是產品經理?,未經許可,禁止轉載。
這是前端產品
舉得例子是一個較為簡單的例子,但是作者把事情說得很清楚,可見邏輯性以及語言組織能力
很棒的分享 ;蟹蟹~
謝謝分享!思路很清晰,能用上,學習了。
學習了
收藏起來借鑒
這個是關于后臺的產品么。。
實用
一看就是經過實操后的總結,很完整。這樣出來的需求后期就算改需求也不會出現大問題。厲害
為什么下單頁面和訂單頁面出現在一個產品主頁下,客戶和服務員用的是同一個APP端?
這難道不是蘇杰《人人都是產品經理》里的內容 么????
實操才是王道。贊這篇文章
6
寫的很實用,現實中我們往往會漏了其中一些步驟
很不錯的分享
寫的好棒,謝謝作者的分享。 ??
時間過了一年多,再過來看,依然覺得很有價值。想弄清楚流程,使用者,信息和功能。前期的流程圖可能是很多忽略的,但是這個才是做好的第一步
目前正在學習后臺產品的一些東西,感謝分享,思路很清晰
想問一下 泳道圖,感覺有些時候,一個泳道需要擠著兩個角色,是不是這個時候就再分開成兩個泳道
邏輯和思路非常清晰,有收獲,最近再做新版本,恰好可以實踐一把。謝謝
思路清晰,很有條理,棒棒的
點贊點贊
感謝分享 ??
很好,思路清晰,有收獲,1024個贊。
補腦 ?
終于看到教程級帖子了!66666
受益匪淺
感覺流程圖和狀態圖是一個意思,或者是個包含關系。
教程級的說明!
??
請問一下你的這些圖都用VISO畫的么?好贊
下半部分是axure畫的