如何繪制業(yè)務(wù)流程圖+案例

有一些同學(xué)看過了我寫《怎樣繪制業(yè)務(wù)流程圖》，發(fā)私信過來希望我談?wù)勴撁媪鞒虉D。這個(gè)話題其實(shí)我也醞釀過，但一直沒有寫出來。細(xì)究起來，除了懶，原因其實(shí)有好幾條：1.這一年半來工作都是圍繞數(shù)據(jù)平臺(tái)建設(shè)，不是很通用，沒法舉例。2.即使自己一直畫頁面流程圖，不過說實(shí)話屬于偏方多一些，按直覺行事，要總結(jié)出一兩條可通用“規(guī)則”比較難。今日因?yàn)橐驗(yàn)樘鞖忸A(yù)報(bào)號(hào)稱有雷震大雨，取消了原有外出計(jì)劃，剛好在家里，想起拋出這塊磚頭，期望這個(gè)話題能激發(fā)更多分享和討論。案例呢……想一個(gè)通俗易懂又具代表性案例真不輕易，它不能太簡(jiǎn)單，太簡(jiǎn)單話幾乎上沒有什么頁面，也不能太復(fù)雜，太復(fù)雜了我還hold不住。剛好前很快在收拾家里閑置衣服，舍不得扔但又不穿，當(dāng)初嘮叨一句，說要是有個(gè)地方能夠提交下捐贈(zèng)，有些人上門收就好了。在我頭疼要怎么舉例演示頁面流程圖時(shí)候，我就把這個(gè)大約YY了一下，就用“公益捐物網(wǎng)站”為例來說明吧。頁面流程圖是個(gè)好東西業(yè)務(wù)流程圖主要是描述誰在什么條件下做了什么事。而頁面流程圖是詳細(xì)到了網(wǎng)站、系統(tǒng)、產(chǎn)品功效設(shè)計(jì)時(shí)候，表現(xiàn)頁面之前流轉(zhuǎn)關(guān)系——用戶經(jīng)過什么操作進(jìn)了什么頁面及后續(xù)操作及頁面。從需求到到處理方案無疑要經(jīng)過很多階段。需求分析——用戶是誰？用戶問題或需求是什么？用什么功效去滿足需求或處理問題？這些功效優(yōu)先級(jí)是什么？這些問題都需要逐步得以明確，與此同時(shí)，你需要用一些線框圖、原型或者DEMO（這些在我認(rèn)為都是一個(gè)東西）去幫助自己精細(xì)化這些功效，想透徹那些需求。直接畫單張頁面線框圖當(dāng)然是能夠，不過有可能會(huì)出現(xiàn)一下子進(jìn)入單頁面，不先系統(tǒng)性規(guī)劃，考慮每項(xiàng)功效前置和后置，每項(xiàng)操作上下文，就很輕易顧此失彼，遺漏主要狀態(tài)或無視本應(yīng)簡(jiǎn)化任務(wù)。說到這里，單頁面線框圖很像PPT，我個(gè)人在做PPT之前，其實(shí)是一定要有腦圖或者已經(jīng)在一張大紙上將目錄結(jié)構(gòu)、每頁重點(diǎn)都寫出來、畫出來。所以真正做PPT則純粹是在做而已，能夠做得很快，只因?yàn)樾闹性缇陀凶V了。所以，在畫線框圖之前，我也習(xí)慣先將頁面流程圖畫出來。好處之于對(duì)于設(shè)計(jì)師或產(chǎn)品經(jīng)理：頁面流程圖一張頁面助你講完完整用戶與系統(tǒng)交互故事，借助它，你更輕易知道流程中潛在地雷是什么，哪里效率比較低，有利于系統(tǒng)化、全局化、周全性思索細(xì)化工作量基礎(chǔ)，經(jīng)過頁面流程圖可準(zhǔn)確評(píng)定需要多少張頁面。聚焦：頁面流程圖中每個(gè)頁面都無須追求精細(xì)——你目標(biāo)是規(guī)劃行為路徑，而不是單頁面交互設(shè)計(jì)，所以完全無需考慮頁面內(nèi)容、布局。所以你會(huì)愈加聚焦于用戶目標(biāo)和任務(wù)完成。無須過早陷入細(xì)節(jié)。關(guān)鍵是很快。線框圖有可能有幾十張，你畫起來沒那么快，而且一旦進(jìn)入細(xì)節(jié)，則還需要慢慢深究。不過頁面流程圖可能就是幾個(gè)小時(shí)事情。你就能夠?qū)φ麄€(gè)項(xiàng)目心中有數(shù)了。好處之于開發(fā)工程師：他們會(huì)很愿意你在沒有原型時(shí)侯，第一時(shí)間拿出頁面流程圖和他討論需求。相信我，這比單純功效列表或者有業(yè)務(wù)流程圖更讓他們興奮?？勺鳛樵u(píng)定工作量主要依據(jù)——可幫助他們對(duì)工作量也心中有數(shù)?？勺鰹殚_展代碼工作主要參考——尤其是前端開發(fā)，必須得知道每一個(gè)操作指向什么頁面。他們會(huì)映射功效邏輯，會(huì)給你更多好提議。繪制之前——回到開頭我們說案例——公益捐物網(wǎng)站，這個(gè)僅僅是idea，真不足以讓它變成一個(gè)產(chǎn)品?，F(xiàn)在借著本話題，我們也嘗試一下怎樣把隨機(jī)迸發(fā)一個(gè)idea快速轉(zhuǎn)化為產(chǎn)品吧。第一步：idea大拷問此步目標(biāo)是驗(yàn)證一下idea靠譜程度。怎么說靠譜？1.有目標(biāo)用戶——不是火星人，而且有一定規(guī)模性。2.對(duì)目標(biāo)用戶有價(jià)值——推薦使用Before&After（這個(gè)術(shù)語不用谷歌了，Heidi杜撰）方式描述清楚。Before——即現(xiàn)實(shí)狀況分析（需求、問題）。在沒有你產(chǎn)品前，你目標(biāo)用戶碰到問題是什么？他們明確及潛在需求是什么？市場(chǎng)上已經(jīng)有哪些產(chǎn)品？這些產(chǎn)品為何沒有滿足這些需求，處理這個(gè)問題？（當(dāng)然，內(nèi)部產(chǎn)品，沒必要分析太多競(jìng)品，不過腦子里要過一遍這些問題，沒壞處。）After——這個(gè)產(chǎn)品怎樣滿足需求及處理問題？除此之外，潛在利益是什么？能夠分用戶、企業(yè)多個(gè)維度闡釋。3.目標(biāo)用戶能用——有對(duì)應(yīng)能力貯備（不需要經(jīng)過學(xué)習(xí)、培訓(xùn)就可用你產(chǎn)品），可及性（你能夠去觸及這些用戶群體，讓他們了解有這個(gè)產(chǎn)品能夠用）本案例為了配合頁面流程圖隨手拈來，單純客觀描述一下，諸位也能夠幫忙診療下是否靠譜。咱們YY下吧。

假設(shè)我們是要做這么一個(gè)網(wǎng)站，必須有幾個(gè)參加角色吧。必須有些人去收衣物，能夠和公益組織、社工群體、慈善組織取得聯(lián)絡(luò)，讓他們成為第一個(gè)參加方。這里不展開了。當(dāng)然也必須有些人要捐贈(zèng)衣物，這里，假設(shè)定位于年輕人群體，舍得買也舍得捐，有足夠能力貯備能夠使用在線系統(tǒng)而不是等收廢品大爺吆喝。目標(biāo)用戶：各居民區(qū)住戶，年輕人為主，年紀(jì)在22到35歲Before：空間矛盾：小戶型房子，儲(chǔ)物空間有限；時(shí)尚群體，消費(fèi)空間很大，比較喜歡嘗鮮，衣服和各種生活物品只進(jìn)不出，沒有足夠地方容納，必須要推陳應(yīng)新。處理舊衣物方式有限：獨(dú)生兒女群體居多，也沒有家人親戚能夠贈(zèng)予。即使知道哪里有災(zāi)難發(fā)生，災(zāi)民缺衣少物也沒有通道進(jìn)行捐贈(zèng)；二手市場(chǎng)花費(fèi)精力，且效果不好?！瑼fter：可隨時(shí)提交捐贈(zèng)需求，等候有些人上門收取，輕松做到眼不見心不煩。捐贈(zèng)帶來額外好處：1.換取公益積分（積分可用于訂閱雜志、享受參加活動(dòng)商家優(yōu)惠、換取書籍等）2.公益積分可沖抵水電費(fèi)……好吧，YY吧。不過寫到這里，俺發(fā)覺還是基本靠譜吧，所以繼續(xù)往下吧。。第二步：功效列表及優(yōu)先級(jí)此步是深入明確要做什么，以及用戶大約會(huì)怎么參加使用。參加這個(gè)產(chǎn)品有負(fù)責(zé)收衣服，也有捐贈(zèng)衣服，單表這捐贈(zèng)衣服用戶角色吧，省得不小心兜不住了。業(yè)務(wù)故事：小A有一批衣服需要捐贈(zèng)，他在手機(jī)上提交一份捐贈(zèng)需求，寫明自己要捐贈(zèng)什么衣服，新舊程度，多少數(shù)量，什么方式預(yù)約上門時(shí)間……小A提交捐贈(zèng)后，收到預(yù)約電話，約好了3天后周末下午上門取衣服。到了預(yù)定時(shí)間，上門取衣服社工檢驗(yàn)了捐贈(zèng)數(shù)量后，拿出手機(jī)查找到小A捐贈(zèng)那筆單子，確認(rèn)收到幾件衣服，并發(fā)送積分。小A捐贈(zèng)了幾次衣服后，發(fā)覺自己擁有了不少公益積分，小A能夠在積分頻道能夠兌換書籍，也能夠兌換一些公益合作商家優(yōu)惠卡，如洗車、吃飯等。故事里大約會(huì)包含什么功效呢？對(duì)于捐贈(zèng)人：登錄/注冊(cè)：支持用微博、QQ賬戶登錄填寫并提交捐贈(zèng)請(qǐng)求：捐贈(zèng)內(nèi)容、圖片、新舊程度、上門時(shí)間（可選擇提前電話預(yù)約）查看并追蹤捐贈(zèng)狀態(tài)：看到過去捐贈(zèng)各種衣物及領(lǐng)取積分捐贈(zèng)衣物并獲取積分公益積分查看：查看自己積分情況，歷史總積分，已兌換及未兌換積分兌換：兌換各參加公益商家優(yōu)惠券。部分業(yè)務(wù)流程圖示例：能夠說這兩步工作是繪制頁面流程圖必不可少準(zhǔn)備，我們明白了要做什么，為哪些人做，主要功效是哪些？功效之間流程是什么樣。不過因?yàn)槭腔ヂ?lián)網(wǎng)產(chǎn)品，這些流程必須以頁面為承載體，比如“提交捐贈(zèng)”是一項(xiàng)活動(dòng)，到了頁面設(shè)計(jì)時(shí)，我們要用幾張頁面去完成這一個(gè)動(dòng)作呢？這些頁面彼此是什么關(guān)系呢？繪制頁面流程圖現(xiàn)在我們已經(jīng)知道了系統(tǒng)應(yīng)該有哪些功效，我們應(yīng)該提供哪些內(nèi)容，現(xiàn)在就需要將這些功效及內(nèi)容分配到不一樣頁面去。頁面流程圖簡(jiǎn)明：頁面=操作+內(nèi)容，操作是需要用戶觸發(fā)，包含鏈接、按鈕、表單等等。用戶經(jīng)過這些操作，看到同一個(gè)頁面上不一樣內(nèi)容，或者跳轉(zhuǎn)到其余頁面。頁面流程圖目標(biāo)：表現(xiàn)用戶不一樣操作指令下不一樣頁面流轉(zhuǎn)關(guān)系。頁面流程圖元素：頁面、操作或狀態(tài)、鏈接線頁面也有分類：請(qǐng)注意有些操作可能不會(huì)帶你去一個(gè)實(shí)際頁面，而是有可能發(fā)個(gè)短信、發(fā)個(gè)郵件等，這些也需要被表現(xiàn)出來。怎樣開始繪制？即像講一個(gè)故事，最簡(jiǎn)單就是從用戶第一個(gè)初始頁面開始進(jìn)行。或者有些人問了:我用戶角色可能根本用不到有些操作，條條大路通羅馬，他只選擇了其中一條路徑，那我怎么能把全部頁面都畫出來呢？我經(jīng)驗(yàn)是：不要細(xì)分用戶類型，而是依照頁面窮舉各項(xiàng)操作，基于假設(shè)判斷用戶若點(diǎn)擊什么就會(huì)到哪里。在這個(gè)案例中，我希望用戶第一個(gè)頁面是首頁。他有兩個(gè)主要被引導(dǎo)操作：1.能夠查看捐贈(zèng)或新提交一個(gè)捐贈(zèng)。2.能夠查看公益積分或兌換積分。以下就是從這個(gè)頁面開始一系列頁面流程：這個(gè)圖受篇幅限制沒有全部畫完，比如到了積分商城后還有一系列頁面呢，有興趣同學(xué)繼續(xù)試試?！疽恍┨嵝选浚喉撁嫱☉T用矩形表示，頁面上要表現(xiàn)關(guān)鍵內(nèi)容塊及主要操作。使用圓角矩形放到連接線上表示各項(xiàng)操作。一個(gè)頁面可引出多個(gè)操作指向不一樣頁面。只表現(xiàn)系統(tǒng)判斷，用戶本身判斷不需要表現(xiàn)出來——比如用戶到了詳情頁面是要購置呢？還是加入收藏呢？還是離開呢？這些直接用操作指向不一樣頁面即可。也有不適適用頁面流程圖去表現(xiàn)網(wǎng)站，主要是因?yàn)椴僮黝惛嗖皇强v深型一步步流程，而是平行中跳轉(zhuǎn)，如門戶類網(wǎng)站查看新聞?dòng)美⑷缫魳奉惥W(wǎng)站等等。這種情況下，最好用站點(diǎn)地圖（sitemap）去表示頁面隸屬關(guān)系就能夠了?？赡艽蠹視?huì)留心到，上圖中操作有可能就是設(shè)計(jì)時(shí)頁面上實(shí)實(shí)在在按鈕或者文字鏈接，沒錯(cuò)。不過有些頁面流程圖未必是能夠完全按操作、頁面來連接，下列圖是我在3年前畫過一個(gè)頁面流程圖（請(qǐng)注意這個(gè)流程圖就不符合我說幾條規(guī)則）。當(dāng)用戶抵達(dá)詳情頁后，他下一步操作可能是什么？詳情頁操作太多了……支付、加入購物車、加入收藏、推薦給朋友、離開、再逛……下列圖中“以后再說”并不是操作，“對(duì)比后再?zèng)Q定”也不是操作，這正像什么呢？是對(duì)操作做一個(gè)人工分類還是表現(xiàn)用戶意圖傾向？當(dāng)初我憑直覺去畫這張圖時(shí)候，用意是在于探尋購物路徑中有沒有可優(yōu)化空間，所以是想要把用戶操作前意圖列舉出來。假如用戶喜歡這個(gè)商品話，可能會(huì)想做什么？現(xiàn)在我們提供了哪些功效能夠繼續(xù)往下走？當(dāng)不喜歡話，他們可能想要做什么？我們現(xiàn)在又做了什么挽留？【點(diǎn)擊圖片可查看大圖】所以，我們也能夠在頁面流程圖中加入“意圖”項(xiàng)，你能夠用你喜歡形狀去表示“意圖”，比如橢圓。最終——一定會(huì)有些人問繪制工具是什么……文中所舉捐贈(zèng)案例，我是用PPT隨手畫。假如篇幅不需要太大，完全能夠用PPT繪制，另存為圖片，導(dǎo)