談?wù)勴?yè)面設(shè)計(jì)流程圖（附案例）

有一些同學(xué)看過(guò)了我寫(xiě)的《如何繪制業(yè)務(wù)流程圖》，發(fā)私信過(guò)來(lái)希望我談?wù)勴?yè)面流程圖。

　　這個(gè)話(huà)題其實(shí)我也醞釀過(guò)，但一直沒(méi)有寫(xiě)出來(lái)。細(xì)究起來(lái)，除了懶，原因其實(shí)有好幾條：

　　1. 這一年半來(lái)的工作都是圍繞數(shù)據(jù)平臺(tái)建設(shè)，不是很通用，沒(méi)法舉例。

　　2. 雖然自己一直畫(huà)頁(yè)面流程圖，但是說(shuō)實(shí)話(huà)屬于偏方多一些，按直覺(jué)行事，要總結(jié)出一兩條可通用的“規(guī)則”比較難。

　　今日因?yàn)橐驗(yàn)樘鞖忸A(yù)報(bào)號(hào)稱(chēng)有雷震大雨，取消了原有的外出計(jì)劃，剛好在家里，想起拋出這塊磚頭，期望這個(gè)話(huà)題能激發(fā)更多的分享和討論。

　　案例呢……想一個(gè)通俗易懂又具代表性的案例真不容易，它不能太簡(jiǎn)單，太簡(jiǎn)單的話(huà)幾乎上沒(méi)有什么頁(yè)面，也不能太復(fù)雜，太復(fù)雜了我還hold不住。

　　剛好前不久在收拾家里閑置的衣服，舍不得扔但又不穿，當(dāng)時(shí)嘮叨一句，說(shuō)要是有個(gè)地方能夠提交下捐贈(zèng)，有人上門(mén)收就好了。在我頭疼要怎么舉例演示頁(yè)面流程圖的時(shí)候，我就把這個(gè)大概YY了一下，就用“公益捐物網(wǎng)站”為例來(lái)說(shuō)明吧。

　　頁(yè)面流程圖是個(gè)好東西

　　業(yè)務(wù)流程圖重要的是描述誰(shuí)在什么條件下做了什么事。

　　而頁(yè)面流程圖是具體到了網(wǎng)站、系統(tǒng)、產(chǎn)品功能設(shè)計(jì)的時(shí)候，表現(xiàn)頁(yè)面之前的流轉(zhuǎn)關(guān)系——用戶(hù)通過(guò)什么操作進(jìn)了什么頁(yè)面及后續(xù)的操作及頁(yè)面。

　　從需求到到解決方案無(wú)疑要經(jīng)過(guò)很多階段。需求的分析——用戶(hù)是誰(shuí)?用戶(hù)的問(wèn)題或需求是什么?用什么功能去滿(mǎn)足需求或解決問(wèn)題?這些功能的優(yōu)先級(jí)是什么?這些問(wèn)題都需要逐步得以明確，與此同時(shí)，你需要用一些線(xiàn)框圖、原型或者DEMO(這些在我認(rèn)為都是一個(gè)東西)去幫助自己精細(xì)化這些功能，想透徹那些需求。

　　直接畫(huà)單張頁(yè)面的線(xiàn)框圖當(dāng)然是可以的，但是有可能會(huì)出現(xiàn)一下子進(jìn)入單頁(yè)面，不先系統(tǒng)性規(guī)劃，考慮每項(xiàng)功能的前置和后置，每項(xiàng)操作的上下文，就很容易顧此失彼，遺漏重要狀態(tài)或忽視本應(yīng)簡(jiǎn)化的任務(wù)。

　　說(shuō)到這里，單頁(yè)面的線(xiàn)框圖很像PPT，我個(gè)人在做PPT之前，其實(shí)是一定要有腦圖或者已經(jīng)在一張大紙上將目錄結(jié)構(gòu)、每頁(yè)的重點(diǎn)都寫(xiě)出來(lái)、畫(huà)出來(lái)的。所以真正做PPT則純粹是在做而已，可以做得很快，只因?yàn)樾闹性缇陀凶V了。所以，在畫(huà)線(xiàn)框圖之前，我也習(xí)慣先將頁(yè)面流程圖畫(huà)出來(lái)。

　　好處之于對(duì)于設(shè)計(jì)師或產(chǎn)品經(jīng)理：

　　頁(yè)面流程圖一張頁(yè)面助你講完完整的用戶(hù)與系統(tǒng)的交互故事，借助它，你更容易知道流程中的潛在地雷是什么，哪里的效率比較低，有助于系統(tǒng)化、全局化、周全性的思考

　　細(xì)化工作量的基礎(chǔ)，通過(guò)頁(yè)面流程圖可準(zhǔn)確評(píng)估需要多少?gòu)堩?yè)面。

　　聚焦：頁(yè)面流程圖中的每個(gè)頁(yè)面都不必追求精細(xì)——你的目標(biāo)是規(guī)劃行為路徑，而不是單頁(yè)面交互設(shè)計(jì)，所以完全無(wú)需考慮頁(yè)面內(nèi)容、布局。所以你會(huì)更加聚焦于用戶(hù)目標(biāo)和任務(wù)的完成。不必過(guò)早陷入細(xì)節(jié)。

　　關(guān)鍵是很快。線(xiàn)框圖有可能有幾十張，你畫(huà)起來(lái)沒(méi)那么快，而且一旦進(jìn)入細(xì)節(jié)，則還需要慢慢深究。但是頁(yè)面流程圖也許就是幾個(gè)小時(shí)的事情。你就可以對(duì)整個(gè)項(xiàng)目心中有數(shù)了。

　　好處之于開(kāi)發(fā)工程師：

　　他們會(huì)很樂(lè)意你在沒(méi)有原型的時(shí)侯，第一時(shí)間拿出頁(yè)面流程圖和他討論需求。相信我，這比單純的功能列表或者有業(yè)務(wù)流程圖更讓他們興奮。

　　可作為評(píng)估工作量的重要依據(jù)——可幫助他們對(duì)工作量也心中有數(shù)。

　　可做為開(kāi)展代碼工作的重要參考——特別是前端開(kāi)發(fā)，必須得知道每一種操作指向什么頁(yè)面。

　　他們會(huì)映射功能邏輯，會(huì)給你更多好的建議。

　　繪制之前——

　　回到開(kāi)頭我們說(shuō)的案例——公益捐物網(wǎng)站，這個(gè)僅僅是idea，真不足以讓它變成一個(gè)產(chǎn)品?，F(xiàn)在借著本話(huà)題，我們也嘗試一下如何把隨機(jī)迸發(fā)的一個(gè)idea快速轉(zhuǎn)化為產(chǎn)品吧。

　　第一步：idea大拷問(wèn)

　　此步的目的是驗(yàn)證一下idea的靠譜程度。怎么說(shuō)靠譜?

　　1. 有目標(biāo)用戶(hù)——不是火星人，而且有一定的規(guī)模性。

　　2. 對(duì)目標(biāo)用戶(hù)有價(jià)值——推薦使用Before&After(這個(gè)術(shù)語(yǔ)不用google了，Heidi杜撰的)方式描述清楚。

　　Before——即現(xiàn)狀分析(需求、問(wèn)題)。在沒(méi)有你的產(chǎn)品前，你的目標(biāo)用戶(hù)遇到的問(wèn)題是什么?他們明確的及潛在的需求是什么?市場(chǎng)上已經(jīng)有哪些產(chǎn)品?這些產(chǎn)品為什么沒(méi)有滿(mǎn)足這些需求，解決這個(gè)問(wèn)題?(當(dāng)然，內(nèi)部產(chǎn)品，沒(méi)必要分析太多競(jìng)品，但是腦子里要過(guò)一遍這些問(wèn)題，沒(méi)壞處。)

　　 After——這個(gè)產(chǎn)品如何滿(mǎn)足需求及解決問(wèn)題的?除此之外，潛在的利益是什么?可以分用戶(hù)、公司多個(gè)維度闡釋。

　　3. 目標(biāo)用戶(hù)能用——有相應(yīng)的能力儲(chǔ)備(不需要經(jīng)過(guò)學(xué)習(xí)、培訓(xùn)就可用你的產(chǎn)品)，可及性(你能夠去觸及這些用戶(hù)群體，讓他們了解有這個(gè)產(chǎn)品可以用)

　　本案例為了配合頁(yè)面流程圖隨手拈來(lái)，單純客觀描述一下，諸位也可以幫忙診斷下是否靠譜。

　　咱們YY下吧。 

　　假設(shè)我們是要做這樣一個(gè)網(wǎng)站，必須有幾個(gè)參與角色吧。必須有人去收衣物，可以和公益組織、社工群體、慈善組織取得聯(lián)系，讓他們成為第一種參與方。這里不展開(kāi)了。

　　當(dāng)然也必須有人要捐贈(zèng)衣物，這里，假設(shè)定位于年輕人群體，舍得買(mǎi)也舍得捐，有足夠的能力儲(chǔ)備可以使用在線(xiàn)系統(tǒng)而不是等收廢品的大爺吆喝。

　　目標(biāo)用戶(hù)：各居民區(qū)住戶(hù)，年輕人為主，年齡在22到35歲

　　Before：

　　空間矛盾：小戶(hù)型房子，儲(chǔ)物空間有限;時(shí)尚群體，消費(fèi)空間很大，比較喜歡嘗鮮，衣服和各種生活物品只進(jìn)不出，沒(méi)有足夠地方容納，必須要推陳應(yīng)新。

　　處理舊衣物的方式有限：獨(dú)生子女群體居多，也沒(méi)有家人親戚可以贈(zèng)送。即使知道哪里有災(zāi)難發(fā)生，災(zāi)民缺衣少物也沒(méi)有通道進(jìn)行捐贈(zèng);二手市場(chǎng)耗費(fèi)精力，且效果不好。……

　　After：

　　可隨時(shí)提交捐贈(zèng)需求，等待有人上門(mén)收取，輕松做到眼不見(jiàn)心不煩。

　　捐贈(zèng)帶來(lái)額外好處：1. 換取公益積分(積分可用于訂閱雜志、享受參與活動(dòng)的商家優(yōu)惠、換取書(shū)籍等)2. 公益積分可沖抵水電費(fèi)……好吧，YY吧。

　　不過(guò)寫(xiě)到這里，俺發(fā)現(xiàn)還是基本靠譜的吧，所以繼續(xù)往下吧。。

　　第二步：功能列表及優(yōu)先級(jí)

　　此步是進(jìn)一步明確要做什么，以及用戶(hù)大概會(huì)怎么參與使用。

　　參與這個(gè)產(chǎn)品的有負(fù)責(zé)收衣服的，也有捐贈(zèng)衣服的，單表這捐贈(zèng)衣服的用戶(hù)角色吧，免得不小心兜不住了。

　　業(yè)務(wù)故事：小A有一批衣服需要捐贈(zèng)，他在手機(jī)上提交一份捐贈(zèng)需求，寫(xiě)明自己要捐贈(zèng)什么衣服，新舊程度，多少數(shù)量，什么方式預(yù)約上門(mén)時(shí)間……小A提交捐贈(zèng)后，收到預(yù)約電話(huà)，約好了3天后的周末下午上門(mén)取衣服。到了預(yù)定的時(shí)間，上門(mén)取衣服的社工檢查了捐贈(zèng)的數(shù)量后，拿出手機(jī)查找到小A捐贈(zèng)的那筆單子，確認(rèn)收到幾件衣服，并發(fā)送積分。小A捐贈(zèng)了幾次衣服后，發(fā)現(xiàn)自己擁有了不少公益積分，小A可以在積分頻道可以?xún)稉Q書(shū)籍，也可以?xún)稉Q一些公益合作商家的優(yōu)惠卡，如洗車(chē)、吃飯等。

　　故事里大概會(huì)包含什么功能呢？

　　對(duì)于捐贈(zèng)人：

　　登錄/注冊(cè)：支持用微博、QQ賬戶(hù)登錄

　　填寫(xiě)并提交捐贈(zèng)請(qǐng)求：捐贈(zèng)內(nèi)容、圖片、新舊程度、上門(mén)時(shí)間(可選擇提前電話(huà)預(yù)約)

　　查看并追蹤捐贈(zèng)狀態(tài)：看到過(guò)去捐贈(zèng)的各種衣物及領(lǐng)取的積分

　　捐贈(zèng)衣物并獲取積分

　　公益積分查看：查看自己的積分情況，歷史總積分，已兌換的及未兌換的

　　積分兌換：兌換各參與的公益商家優(yōu)惠券。

　　部分業(yè)務(wù)流程圖示例：

　　可以說(shuō)這兩步的工作是繪制頁(yè)面流程圖必不可少的準(zhǔn)備，我們明白了要做什么，為哪些人做，主要的功能是哪些?功能之間的流程是什么樣的。但是因?yàn)槭腔ヂ?lián)網(wǎng)產(chǎn)品，這些流程必須以頁(yè)面為承載體，比如“提交捐贈(zèng)”是一項(xiàng)活動(dòng)，到了頁(yè)面設(shè)計(jì)時(shí)，我們要用幾張頁(yè)面去完成這一個(gè)動(dòng)作呢?這些頁(yè)面彼此是什么關(guān)系呢?

　　繪制頁(yè)面流程圖

　　現(xiàn)在我們已經(jīng)知道了系統(tǒng)應(yīng)該有哪些功能，我們應(yīng)該提供哪些內(nèi)容，現(xiàn)在就需要將這些功能及內(nèi)容分配到不同的頁(yè)面去。

　　頁(yè)面流程圖簡(jiǎn)要：

　　頁(yè)面=操作+內(nèi)容，操作是需要用戶(hù)觸發(fā)的，包含鏈接、按鈕、表單等等。用戶(hù)通過(guò)這些操作，看到同一個(gè)頁(yè)面上不同的內(nèi)容，或者跳轉(zhuǎn)到其他的頁(yè)面。

　　頁(yè)面流程圖目標(biāo)：表現(xiàn)用戶(hù)的不同的操作指令下不同頁(yè)面流轉(zhuǎn)關(guān)系。

　　頁(yè)面流程圖元素：頁(yè)面、操作或狀態(tài)、鏈接線(xiàn)

　　頁(yè)面也有分類(lèi)：請(qǐng)注意有些操作可能不會(huì)帶你去一個(gè)實(shí)際的頁(yè)面，而是有可能發(fā)個(gè)短信、發(fā)個(gè)郵件等，這些也需要被表現(xiàn)出來(lái)。

　　如何開(kāi)始繪制？

　　即像講一個(gè)故事，最簡(jiǎn)單的就是從用戶(hù)的第一個(gè)初始頁(yè)面開(kāi)始進(jìn)行。

　　或者有人問(wèn)了: 我的用戶(hù)角色也許根本用不到有些操作，條條大路通羅馬，他只選擇了其中一條路徑，那我怎么能把所有的頁(yè)面都畫(huà)出來(lái)呢?

　　我的經(jīng)驗(yàn)是：不要細(xì)分用戶(hù)類(lèi)型，而是根據(jù)頁(yè)面窮舉各項(xiàng)操作，基于假設(shè)判斷用戶(hù)若點(diǎn)擊什么就會(huì)到哪里。

　　在這個(gè)案例中，我希望用戶(hù)的第一個(gè)頁(yè)面是首頁(yè)。

　　他有兩個(gè)主要被引導(dǎo)的操作：1. 可以查看捐贈(zèng)或新提交一個(gè)捐贈(zèng)。2. 可以查看公益積分或兌換積分。

　　以下就是從這個(gè)頁(yè)面開(kāi)始的一系列頁(yè)面流程：

　　這個(gè)圖受篇幅限制沒(méi)有全部畫(huà)完，比如到了積分商城后還有一系列頁(yè)面呢，有興趣的同學(xué)繼續(xù)試試。

　　【一些提示】：

　　頁(yè)面一般用矩形表示，頁(yè)面上要體現(xiàn)關(guān)鍵的內(nèi)容塊及主要操作。

　　使用圓角矩形放到連接線(xiàn)上表示各項(xiàng)操作。一個(gè)頁(yè)面可引出多個(gè)操作指向不同的頁(yè)面。

　　只體現(xiàn)系統(tǒng)判斷，用戶(hù)本身的判斷不需要體現(xiàn)出來(lái)——比如用戶(hù)到了詳情頁(yè)面是要購(gòu)買(mǎi)呢?還是加入收藏呢?還是離開(kāi)呢?這些直接用操作指向不同的頁(yè)面即可。

　　也有不適合用頁(yè)面流程圖去表現(xiàn)的網(wǎng)站，主要是因?yàn)椴僮黝?lèi)的更多不是縱深型的一步步流程，而是平行中跳轉(zhuǎn)，如門(mén)戶(hù)類(lèi)網(wǎng)站查看新聞的用例、如音樂(lè)類(lèi)網(wǎng)站等等。這種情況下，最好用站點(diǎn)地圖(site map)去表達(dá)頁(yè)面從屬關(guān)系就可以了。

　　可能大家會(huì)留意到，上圖中的操作有可能就是設(shè)計(jì)時(shí)頁(yè)面上實(shí)實(shí)在在的按鈕或者文字鏈接，沒(méi)錯(cuò)的。

　　但是有些頁(yè)面流程圖未必是能夠完全按操作、頁(yè)面來(lái)連接的，下圖是我在3年前畫(huà)過(guò)的一個(gè)頁(yè)面流程圖(請(qǐng)注意這個(gè)流程圖就不符合我說(shuō)的幾條規(guī)則)。當(dāng)用戶(hù)到達(dá)詳情頁(yè)后，他的下一步操作可能是什么?詳情頁(yè)的操作太多了……支付、加入購(gòu)物車(chē)、加入收藏、推薦給朋友、離開(kāi)、再逛……下圖中的“以后再說(shuō)”并不是操作，“對(duì)比后再?zèng)Q定”也不是操作，這正像什么呢?是對(duì)操作做一個(gè)人工的分類(lèi)還是表現(xiàn)用戶(hù)的意圖傾向?當(dāng)時(shí)我憑直覺(jué)去畫(huà)這張圖的時(shí)候，用意是在于探尋購(gòu)物路徑中有無(wú)可優(yōu)化的空間，所以是想要把用戶(hù)操作前的意圖列舉出來(lái)。如果用戶(hù)喜歡這個(gè)商品的話(huà)，可能會(huì)想做什么?目前我們提供了哪些功能可以繼續(xù)往下走?當(dāng)不喜歡的話(huà)，他們可能想要做什么?我們目前又做了什么挽留?

　　【點(diǎn)擊圖片可查看大圖】

　　所以，我們也可以在頁(yè)面流程圖中加入“意圖”項(xiàng)，你可以用你喜歡的形狀去表示“意圖”，比如橢圓。

　　最后——

　　一定會(huì)有人問(wèn)繪制工具是什么……

　　文中所舉的捐贈(zèng)案例，我是用PPT隨手畫(huà)的。

　　如果篇幅不需要太大，完全可以用PPT繪制，另存為圖片，導(dǎo)入到AXURE原型工具里，然后在每個(gè)頁(yè)面上加一個(gè)透明的矩形，再添加鏈接到相應(yīng)的線(xiàn)框圖頁(yè)面。

　　以前也多用AXURE繪制頁(yè)面流程圖，如：(這個(gè)例子中，操作按鈕沒(méi)有放到鏈接線(xiàn)上，是因?yàn)榇擞美?yè)面數(shù)量不多，頁(yè)面可以比較大，連接線(xiàn)可以直接從頁(yè)面上的操作中畫(huà)出)

　　最后我想說(shuō)的是，頁(yè)面流程圖重在把事情講清楚，把頁(yè)面交代清楚，不必追求太多的規(guī)則和條條框框，你可以用你最舒適的方式去表達(dá)。文中所舉的方式，是我比較習(xí)慣的，也歡迎各位同學(xué)交流下你們是怎么繪制頁(yè)面流程圖的。