這個話題其實我也醞釀過歧沪，但一直沒有寫出來歹撒。細究起來，除了懶诊胞，原因其實有好幾條：

1. 這一年半來的工作都是圍繞數(shù)據(jù)平臺建設(shè)暖夭，不是很通用，沒法舉例撵孤。

2. 雖然自己一直畫頁面流程圖迈着，但是說實話屬于偏方多一些，按直覺行事邪码，要總結(jié)出一兩條可通用的“規(guī)則”比較難裕菠。

今日因為因為天氣預(yù)報號稱有雷震大雨，取消了原有的外出計劃闭专，剛好在家里奴潘，想起拋出這塊磚頭旧烧，期望這個話題能激發(fā)更多的分享和討論。

案例呢……想一個通俗易懂又具代表性的案例真不容易画髓，它不能太簡單掘剪，太簡單的話幾乎上沒有什么頁面，也不能太復(fù)雜奈虾，太復(fù)雜了我還hold不住杖小。

剛好前不久在收拾家里閑置的衣服，舍不得扔但又不穿愚墓，當時嘮叨一句，說要是有個地方能夠提交下捐贈昂勉，有人上門收就好了浪册。在我頭疼要怎么舉例演示頁面流程圖的時候，我就把這個大概YY了一下岗照，就用“公益捐物網(wǎng)站”為例來說明吧村象。

頁面流程圖是個好東西

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

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

從需求到到解決方案無疑要經(jīng)過很多階段库菲。需求的分析——用戶是誰?用戶的問題或需求是什么?用什么功能去滿足需求或解決問題?這些功能的優(yōu)先級是什么?這些問題都需要逐步得以明確，與此同時志膀，你需要用一些線框圖熙宇、原型或者DEMO(這些在我認為都是一個東西)去幫助自己精細化這些功能，想透徹那些需求溉浙。

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

說到這里，單頁面的線框圖很像PPT赊时，我個人在做PPT之前吨铸，其實是一定要有腦圖或者已經(jīng)在一張大紙上將目錄結(jié)構(gòu)、每頁的重點都寫出來祖秒、畫出來的诞吱。所以真正做PPT則純粹是在做而已舟奠，可以做得很快，只因為心中早就有譜了房维。所以沼瘫，在畫線框圖之前，我也習(xí)慣先將頁面流程圖畫出來咙俩。

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

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

細化工作量的基礎(chǔ)皂股，通過頁面流程圖可準確評估需要多少張頁面。

聚焦：頁面流程圖中的每個頁面都不必追求精細——你的目標是規(guī)劃行為路徑命黔，而不是單頁面交互設(shè)計呜呐，所以完全無需考慮頁面內(nèi)容、布局悍募。所以你會更加聚焦于用戶目標和任務(wù)的完成蘑辑。不必過早陷入細節(jié)。

關(guān)鍵是很快坠宴。線框圖有可能有幾十張洋魂，你畫起來沒那么快，而且一旦進入細節(jié)喜鼓，則還需要慢慢深究忧设。但是頁面流程圖也許就是幾個小時的事情。你就可以對整個項目心中有數(shù)了颠通。

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

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

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

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

他們會映射功能邏輯，會給你更多好的建議牢撼。

繪制之前——

回到開頭我們說的案例——公益捐物網(wǎng)站匙隔，這個僅僅是idea，真不足以讓它變成一個產(chǎn)品⊙妫現(xiàn)在借著本話題纷责，我們也嘗試一下如何把隨機迸發(fā)的一個idea快速轉(zhuǎn)化為產(chǎn)品吧捍掺。

第一步：idea大拷問

此步的目的是驗證一下idea的靠譜程度。怎么說靠譜?

1. 有目標用戶——不是火星人再膳，而且有一定的規(guī)模性挺勿。

2. 對目標用戶有價值——推薦使用Before&After(這個術(shù)語不用google了，Heidi杜撰的)方式描述清楚喂柒。

Before——即現(xiàn)狀分析(需求不瓶、問題)。在沒有你的產(chǎn)品前灾杰，你的目標用戶遇到的問題是什么?他們明確的及潛在的需求是什么?市場上已經(jīng)有哪些產(chǎn)品?這些產(chǎn)品為什么沒有滿足這些需求蚊丐，解決這個問題?(當然，內(nèi)部產(chǎn)品艳吠，沒必要分析太多競品吠撮，但是腦子里要過一遍這些問題，沒壞處讲竿。)

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

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

本案例為了配合頁面流程圖隨手拈來，單純客觀描述一下全庸，諸位也可以幫忙診斷下是否靠譜秀仲。

咱們YY下吧。

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

當然也必須有人要捐贈衣物，這里坤候，假設(shè)定位于年輕人群體胁赢，舍得買也舍得捐，有足夠的能力儲備可以使用在線系統(tǒng)而不是等收廢品的大爺吆喝白筹。

目標用戶：各居民區(qū)住戶智末，年輕人為主谅摄，年齡在22到35歲

Before：

空間矛盾：小戶型房子，儲物空間有限;時尚群體吹害，消費空間很大螟凭，比較喜歡嘗鮮，衣服和各種生活物品只進不出它呀，沒有足夠地方容納螺男，必須要推陳應(yīng)新。

處理舊衣物的方式有限：獨生子女群體居多纵穿，也沒有家人親戚可以贈送下隧。即使知道哪里有災(zāi)難發(fā)生，災(zāi)民缺衣少物也沒有通道進行捐贈;二手市場耗費精力谓媒，且效果不好淆院。……

After：

可隨時提交捐贈需求句惯，等待有人上門收取土辩，輕松做到眼不見心不煩。

捐贈帶來額外好處：1. 換取公益積分(積分可用于訂閱雜志抢野、享受參與活動的商家優(yōu)惠拷淘、換取書籍等)2. 公益積分可沖抵水電費……好吧，YY吧指孤。

不過寫到這里启涯，俺發(fā)現(xiàn)還是基本靠譜的吧，所以繼續(xù)往下吧恃轩。结洼。

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

此步是進一步明確要做什么，以及用戶大概會怎么參與使用叉跛。

參與這個產(chǎn)品的有負責(zé)收衣服的松忍，也有捐贈衣服的，單表這捐贈衣服的用戶角色吧筷厘，免得不小心兜不住了挽铁。

業(yè)務(wù)故事：小A有一批衣服需要捐贈，他在手機上提交一份捐贈需求敞掘，寫明自己要捐贈什么衣服叽掘，新舊程度，多少數(shù)量玖雁，什么方式預(yù)約上門時間……小A提交捐贈后更扁，收到預(yù)約電話，約好了3天后的周末下午上門取衣服。到了預(yù)定的時間浓镜，上門取衣服的社工檢查了捐贈的數(shù)量后溃列，拿出手機查找到小A捐贈的那筆單子，確認收到幾件衣服膛薛，并發(fā)送積分听隐。小A捐贈了幾次衣服后，發(fā)現(xiàn)自己擁有了不少公益積分哄啄，小A可以在積分頻道可以兌換書籍雅任，也可以兌換一些公益合作商家的優(yōu)惠卡，如洗車咨跌、吃飯等沪么。

故事里大概會包含什么功能呢？

對于捐贈人：

登錄/注冊：支持用微博锌半、QQ賬戶登錄

填寫并提交捐贈請求：捐贈內(nèi)容禽车、圖片、新舊程度刊殉、上門時間(可選擇提前電話預(yù)約)

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

捐贈衣物并獲取積分

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

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

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

可以說這兩步的工作是繪制頁面流程圖必不可少的準備逸月，我們明白了要做什么，為哪些人做亚亲，主要的功能是哪些?功能之間的流程是什么樣的。但是因為是互聯(lián)網(wǎng)產(chǎn)品腐缤，這些流程必須以頁面為承載體捌归，比如“提交捐贈”是一項活動，到了頁面設(shè)計時岭粤，我們要用幾張頁面去完成這一個動作呢?這些頁面彼此是什么關(guān)系呢?

繪制頁面流程圖

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

頁面流程圖簡要：

頁面=操作+內(nèi)容巾兆，操作是需要用戶觸發(fā)的，包含鏈接虎囚、按鈕角塑、表單等等。用戶通過這些操作淘讥，看到同一個頁面上不同的內(nèi)容圃伶，或者跳轉(zhuǎn)到其他的頁面。

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

頁面流程圖元素：頁面窒朋、操作或狀態(tài)搀罢、鏈接線

頁面也有分類：請注意有些操作可能不會帶你去一個實際的頁面，而是有可能發(fā)個短信侥猩、發(fā)個郵件等榔至，這些也需要被表現(xiàn)出來。

如何開始繪制欺劳？

即像講一個故事唧取，最簡單的就是從用戶的第一個初始頁面開始進行。

或者有人問了: 我的用戶角色也許根本用不到有些操作杰标，條條大路通羅馬兵怯，他只選擇了其中一條路徑，那我怎么能把所有的頁面都畫出來呢?

我的經(jīng)驗是：不要細分用戶類型腔剂，而是根據(jù)頁面窮舉各項操作媒区，基于假設(shè)判斷用戶若點擊什么就會到哪里。

在這個案例中掸犬，我希望用戶的第一個頁面是首頁袜漩。

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

以下就是從這個頁面開始的一系列頁面流程：

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

【一些提示】：

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

使用圓角矩形放到連接線上表示各項操作柔滔。一個頁面可引出多個操作指向不同的頁面溢陪。

只體現(xiàn)系統(tǒng)判斷，用戶本身的判斷不需要體現(xiàn)出來——比如用戶到了詳情頁面是要購買呢?還是加入收藏呢?還是離開呢?這些直接用操作指向不同的頁面即可睛廊。

也有不適合用頁面流程圖去表現(xiàn)的網(wǎng)站形真，主要是因為操作類的更多不是縱深型的一步步流程，而是平行中跳轉(zhuǎn)超全，如門戶類網(wǎng)站查看新聞的用例咆霜、如音樂類網(wǎng)站等等。這種情況下嘶朱，最好用站點地圖(site map)去表達頁面從屬關(guān)系就可以了蛾坯。

可能大家會留意到，上圖中的操作有可能就是設(shè)計時頁面上實實在在的按鈕或者文字鏈接疏遏，沒錯的偿衰。

但是有些頁面流程圖未必是能夠完全按操作挂疆、頁面來連接的，下圖是我在3年前畫過的一個頁面流程圖(請注意這個流程圖就不符合我說的幾條規(guī)則)下翎。當用戶到達詳情頁后缤言，他的下一步操作可能是什么?詳情頁的操作太多了……支付、加入購物車视事、加入收藏胆萧、推薦給朋友、離開俐东、再逛……下圖中的“以后再說”并不是操作跌穗，“對比后再決定”也不是操作，這正像什么呢?是對操作做一個人工的分類還是表現(xiàn)用戶的意圖傾向?當時我憑直覺去畫這張圖的時候虏辫，用意是在于探尋購物路徑中有無可優(yōu)化的空間蚌吸，所以是想要把用戶操作前的意圖列舉出來。如果用戶喜歡這個商品的話砌庄，可能會想做什么?目前我們提供了哪些功能可以繼續(xù)往下走?當不喜歡的話羹唠，他們可能想要做什么?我們目前又做了什么挽留?

【點擊圖片可查看大圖】

所以，我們也可以在頁面流程圖中加入“意圖”項娄昆，你可以用你喜歡的形狀去表示“意圖”佩微，比如橢圓。

最后——

一定會有人問繪制工具是什么……

文中所舉的捐贈案例萌焰，我是用PPT隨手畫的哺眯。

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

以前也多用AXURE繪制頁面流程圖，如：(這個例子中互纯，操作按鈕沒有放到鏈接線上瑟幕，是因為此用例頁面數(shù)量不多磕蒲，頁面可以比較大留潦，連接線可以直接從頁面上的操作中畫出)

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