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

繪制之前

1. 目標用戶

2：功能列表及優先級

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

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

對于捐贈人：

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

填寫并提交捐贈請求：捐贈內容、圖片、新舊程度、上門時間（可選擇提前電話預約）

查看并追蹤捐贈狀態：看到過去捐贈的各種衣物及領取的積分

捐贈衣物并獲取積分

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

積分兌換：兌換各參與的公益商家優惠券。

部分業務流程圖示例：

可以說這兩步的工作是繪制頁面流程圖必不可少的準備，我們明白了要做什么，為哪些人做，主要的功能是哪些？功能之間的流程是什么樣的。但是因為是互聯網產品，這些流程必須以頁面為承載體，比如“提交捐贈”是一項活動，到了頁面設計時，我們要用幾張頁面去完成這一個動作呢？這些頁面彼此是什么關系呢？

繪制頁面流程圖

現在我們已經知道了系統應該有哪些功能，我們應該提供哪些內容，現在就需要將這些功能及內容分配到不同的頁面去。

頁面流程圖簡要

頁面=操作+內容，操作是需要用戶觸發的，包含鏈接、按鈕、表單等等。用戶通過這些操作，看到同一個頁面上不同的內容，或者跳轉到其他的頁面。

頁面流程圖目標：表現用戶的不同的操作指令下不同頁面流轉關系。

頁面流程圖元素：頁面、操作或狀態、鏈接線

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

如何開始繪制？

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

或者有人問了:

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

我的經驗是：不要細分用戶類型，而是根據頁面窮舉各項操作，基于假設判斷用戶若點擊什么就會到哪里。

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

他有兩個主要被引導的操作：

可以查看捐贈或新提交一個捐贈

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

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

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

一些提示：

頁面一般用矩形表示，頁面上要體現關鍵的內容塊及主要操作。

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

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

也有不適合用頁面流程圖去表現的網站，主要是因為操作類的更多不是縱深型的一步步流程，而是平行中跳轉，如門戶類網站查看新聞的用例、如音樂類網站等等。這種情況下，最好用站點地圖（site map）去表達頁面從屬關系就可以了。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。