原文鏈接：http://www.woshipm.com/pmd/27239.html

繪制之前

1. 目標(biāo)用戶

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

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

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

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

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

填寫并提交捐贈(zèng)請(qǐng)求：捐贈(zèng)內(nèi)容、圖片、新舊程度、上門時(shí)間（可選擇提前電話預(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)容，操作是需要用戶觸發(fā)的，包含鏈接、按鈕、表單等等。用戶通過(guò)這些操作，看到同一個(gè)頁(yè)面上不同的內(nèi)容，或者跳轉(zhuǎn)到其他的頁(yè)面。

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

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

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

如何開始繪制？

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

或者有人問(wèn)了:

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

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

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

他有兩個(gè)主要被引導(dǎo)的操作：

可以查看捐贈(zèng)或新提交一個(gè)捐贈(zèng)

可以查看公益積分或兌換積分

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

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

一些提示：

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

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

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

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

總結(jié)

以上是生活随笔為你收集整理的绘制页面流程图的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。