谈谈页面流程图(附案例) | 人人都是产品经理
這個話題其實我也醞釀過,但一直沒有寫出來。細究起來,除了懶,原因其實有好幾條:
1. 這一年半來的工作都是圍繞數據平臺建設,不是很通用,沒法舉例。
2. 雖然自己一直畫頁面流程圖,但是說實話屬于偏方多一些,按直覺行事,要總結出一兩條可通用的“規則”比較難。
今日因為因為天氣預報號稱有雷震大雨,取消了原有的外出計劃,剛好在家里,想起拋出這塊磚頭,期望這個話題能激發更多的分享和討論。
案例呢……想一個通俗易懂又具代表性的案例真不容易,它不能太簡單,太簡單的話幾乎上沒有什么頁面,也不能太復雜,太復雜了我還hold不住。
剛好前不久在收拾家里閑置的衣服,舍不得扔但又不穿,當時嘮叨一句,說要是有個地方能夠提交下捐贈,有人上門收就好了。在我頭疼要怎么舉例演示頁面流程圖的時候,我就把這個大概YY了一下,就用“公益捐物網站”為例來說明吧。
頁面流程圖是個好東西
業務流程圖重要的是描述誰在什么條件下做了什么事。
而頁面流程圖是具體到了網站、系統、產品功能設計的時候,表現頁面之前的流轉關系——用戶通過什么操作進了什么頁面及后續的操作及頁面。
從需求到到解決方案無疑要經過很多階段。需求的分析——用戶是誰?用戶的問題或需求是什么?用什么功能去滿足需求或解決問題?這些功能的優先級是什么?這些問題都需要逐步得以明確,與此同時,你需要用一些線框圖、原型或者DEMO(這些在我認為都是一個東西)去幫助自己精細化這些功能,想透徹那些需求。
直接畫單張頁面的線框圖當然是可以的,但是有可能會出現一下子進入單頁面,不先系統性規劃,考慮每項功能的前置和后置,每項操作的上下文,就很容易顧此失彼,遺漏重要狀態或忽視本應簡化的任務。
說到這里,單頁面的線框圖很像PPT,我個人在做PPT之前,其實是一定要有腦圖或者已經在一張大紙上將目錄結構、每頁的重點都寫出來、畫出來的。所以真正做PPT則純粹是在做而已,可以做得很快,只因為心中早就有譜了。所以,在畫線框圖之前,我也習慣先將頁面流程圖畫出來。
好處之于對于設計師或產品經理:
好處之于開發工程師:
他們會很樂意你在沒有原型的時侯,第一時間拿出頁面流程圖和他討論需求。相信我,這比單純的功能列表或者有業務流程圖更讓他們興奮。
繪制之前——
回到開頭我們說的案例——公益捐物網站,這個僅僅是idea,真不足以讓它變成一個產品。現在借著本話題,我們也嘗試一下如何把隨機迸發的一個idea快速轉化為產品吧。
第一步:idea大拷問
此步的目的是驗證一下idea的靠譜程度。怎么說靠譜?
1. 有目標用戶——不是火星人,而且有一定的規模性。
2. 對目標用戶有價值——推薦使用Before&After(這個術語不用google了,Heidi杜撰的)方式描述清楚。
- Before——即現狀分析(需求、問題)。在沒有你的產品前,你的目標用戶遇到的問題是什么?他們明確的及潛在的需求是什么?市場上已經有哪些產品?這些產品為什么沒有滿足這些需求,解決這個問題?(當然,內部產品,沒必要分析太多競品,但是腦子里要過一遍這些問題,沒壞處。)
- ?After——這個產品如何滿足需求及解決問題的?除此之外,潛在的利益是什么?可以分用戶、公司多個維度闡釋。
3. 目標用戶能用——有相應的能力儲備(不需要經過學習、培訓就可用你的產品),可及性(你能夠去觸及這些用戶群體,讓他們了解有這個產品可以用)
本案例為了配合頁面流程圖隨手拈來,單純客觀描述一下,諸位也可以幫忙診斷下是否靠譜。
咱們YY下吧。?
假設我們是要做這樣一個網站,必須有幾個參與角色吧。必須有人去收衣物,可以和公益組織、社工群體、慈善組織取得聯系,讓他們成為第一種參與方。這里不展開了。
當然也必須有人要捐贈衣物,這里,假設定位于年輕人群體,舍得買也舍得捐,有足夠的能力儲備可以使用在線系統而不是等收廢品的大爺吆喝。
目標用戶:各居民區住戶,年輕人為主,年齡在22到35歲
Before:
After:
不過寫到這里,俺發現還是基本靠譜的吧,所以繼續往下吧。。
第二步:功能列表及優先級
此步是進一步明確要做什么,以及用戶大概會怎么參與使用。
參與這個產品的有負責收衣服的,也有捐贈衣服的,單表這捐贈衣服的用戶角色吧,免得不小心兜不住了。
業務故事:小A有一批衣服需要捐贈,他在手機上提交一份捐贈需求,寫明自己要捐贈什么衣服,新舊程度,多少數量,什么方式預約上門時間……小A提交捐贈后,收到預約電話,約好了3天后的周末下午上門取衣服。到了預定的時間,上門取衣服的社工檢查了捐贈的數量后,拿出手機查找到小A捐贈的那筆單子,確認收到幾件衣服,并發送積分。小A捐贈了幾次衣服后,發現自己擁有了不少公益積分,小A可以在積分頻道可以兌換書籍,也可以兌換一些公益合作商家的優惠卡,如洗車、吃飯等。
故事里大概會包含什么功能呢?
對于捐贈人:
部分業務流程圖示例:
可以說這兩步的工作是繪制頁面流程圖必不可少的準備,我們明白了要做什么,為哪些人做,主要的功能是哪些?功能之間的流程是什么樣的。但是因為是互聯網產品,這些流程必須以頁面為承載體,比如“提交捐贈”是一項活動,到了頁面設計時,我們要用幾張頁面去完成這一個動作呢?這些頁面彼此是什么關系呢?
繪制頁面流程圖
現在我們已經知道了系統應該有哪些功能,我們應該提供哪些內容,現在就需要將這些功能及內容分配到不同的頁面去。
頁面流程圖簡要:
如何開始繪制?
即像講一個故事,最簡單的就是從用戶的第一個初始頁面開始進行。
或者有人問了: 我的用戶角色也許根本用不到有些操作,條條大路通羅馬,他只選擇了其中一條路徑,那我怎么能把所有的頁面都畫出來呢?
我的經驗是:不要細分用戶類型,而是根據頁面窮舉各項操作,基于假設判斷用戶若點擊什么就會到哪里。
在這個案例中,我希望用戶的第一個頁面是首頁。
他有兩個主要被引導的操作:1. 可以查看捐贈或新提交一個捐贈。2. 可以查看公益積分或兌換積分。
以下就是從這個頁面開始的一系列頁面流程:
?
這個圖受篇幅限制沒有全部畫完,比如到了積分商城后還有一系列頁面呢,有興趣的同學繼續試試。
【一些提示】:
可能大家會留意到,上圖中的操作有可能就是設計時頁面上實實在在的按鈕或者文字鏈接,沒錯的。
但是有些頁面流程圖未必是能夠完全按操作、頁面來連接的,下圖是我在3年前畫過的一個頁面流程圖(請注意這個流程圖就不符合我說的幾條規則)。當用戶到達詳情頁后,他的下一步操作可能是什么?詳情頁的操作太多了……支付、加入購物車、加入收藏、推薦給朋友、離開、再逛……下圖中的“以后再說”并不是操作,“對比后再決定”也不是操作,這正像什么呢?是對操作做一個人工的分類還是表現用戶的意圖傾向?當時我憑直覺去畫這張圖的時候,用意是在于探尋購物路徑中有無可優化的空間,所以是想要把用戶操作前的意圖列舉出來。如果用戶喜歡這個商品的話,可能會想做什么?目前我們提供了哪些功能可以繼續往下走?當不喜歡的話,他們可能想要做什么?我們目前又做了什么挽留?
【點擊圖片可查看大圖】
所以,我們也可以在頁面流程圖中加入“意圖”項,你可以用你喜歡的形狀去表示“意圖”,比如橢圓。
最后——
一定會有人問繪制工具是什么……
文中所舉的捐贈案例,我是用PPT隨手畫的。
如果篇幅不需要太大,完全可以用PPT繪制,另存為圖片,導入到AXURE原型工具里,然后在每個頁面上加一個透明的矩形,再添加鏈接到相應的線框圖頁面。
以前也多用AXURE繪制頁面流程圖,如:(這個例子中,操作按鈕沒有放到鏈接線上,是因為此用例頁面數量不多,頁面可以比較大,連接線可以直接從頁面上的操作中畫出)
?
最后我想說的是,頁面流程圖重在把事情講清楚,把頁面交代清楚,不必追求太多的規則和條條框框,你可以用你最舒適的方式去表達。文中所舉的方式,是我比較習慣的,也歡迎各位同學交流下你們是怎么繪制頁面流程圖的。
轉載請注明原文出處,轉載自 http://www.woshipm.com/pmd/27239.html
轉載于:https://www.cnblogs.com/yangf2016/p/5424476.html
總結
以上是生活随笔為你收集整理的谈谈页面流程图(附案例) | 人人都是产品经理的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: CCRC信息安全服务资质认证等级和范围
- 下一篇: CefSharp语言(Locales)本