業務流程圖重要的是說清楚了做什么事，而頁面流程圖則側重在功能設計中，頁面與頁面之間的流轉關系，即用戶通過什么操作進入了什么頁面及后續的操作及頁面。由於這個屬性，它一般處於業務流程圖和原型制作之間。
1. 頁面流程圖是什么
a、處於業務流程圖與原型設計之間，是交互設計、原型設計的基本依據。
b、用戶視角的操作流程，把自己想成用戶，完全模擬用戶去思考頁面流向，探索用戶體驗的合理性，發現體驗上的問題。
c、大致元素及模型如下：
-編號代表頁面編號，后續在原型中可延續使用，便於查找頁面
-名稱代表頁面名稱
-操作名稱代表用戶的動作
-核心元素代表頁面中需要重點體現和表達的功能/內容
-注：有些時候有些操作並不會指向頁面，而是發個短信等，也要在頁面流程上表現出來，后面有舉例
1.1 工具
a、建議Axure，頁面流程圖與信息架構圖都是原型的底子
b、Visio，這個是便於跨部門溝通，office辦公全家桶，你懂的
c、PPT，上台必備
2. 為什么要有頁面流程圖
a、突出頁面元素和邏輯之間的關系，大致清楚頁面中元素的跳轉是怎樣，提升原型設計的效率。
b、代表用戶的操作流程，做頁面流程圖能夠快速發現交互問題。（頁面流程圖是用戶視角，業務流程圖是后端視角）
c、成本低，一張圖也許幾個小時就能夠完成，但是每一個頁面的線框圖全部畫完可遠不止這些時間。
d、能夠讓你更關注問題本質——行為路徑，而不是過早陷入細節思考，並且還能夠通過優化路徑減少不必要的頁面。
3. 怎么畫頁面流程圖
3.1 回歸業務流程，明確主線
a、頁面流程一定來自於業務流程
b、一般為業務流程中的方形部分（大方形）
c、異常流程一般為彈層或者彈窗
d、業務流程畫得好，頁面流程就很簡單
案例：需求梳理模塊以及功能流程設計模塊，咱們都舉過一個優惠碼功能的例子，這里咱們繼續這個案例進行舉例：
需求點：產品增加一個優惠碼功能，讓運營人員能夠給用戶發優惠碼，用戶下單時使用優惠碼，抵扣相對應的折扣/金額。
業務流程圖：
然后咱們進行了細化，得到后台系統的業務流程
注意：后台系統一般不用做頁面流程圖，頁面流程圖一般用於前端和用戶型產品，后台系統有業務流程圖一般也就夠了，頂多附帶個信息架構圖。
再往下得到了用戶階段的頁面流程圖：
注意業務流程圖中的五個動作，這五個方塊的動作就是關鍵頁面，大概就是這么個流程：
3.2 明確頁面中重點元素
a、功能在頁面中，有哪些是需要表現元素
b、增加異常流程處理的邏輯，要么彈層要么提示
c、增加輔助的幫助頁面
d、考慮下游觸發點
梳理清楚頁面中重點元素后，得到頁面流程圖：
3.3 溝通與優化流程
a、盡可能窮舉涉及的頁面，先繁后簡
b、通過原型草圖，優化調整頁面關鍵元素，例如原型草圖中覺得按鈕或者頁面要調整，頁面流程也要跟隨調整
c、與UI、UE、前端研發多溝通，頁面流程圖需要UI一起參與
3.4 回顧和檢查
a、回歸業務邏輯
b、明確每個頁面中的核心元素
c、優化和調整
本篇分享主要內容到這里就算是結束了，其實頁面流程圖並不復雜，承接業務流程，將業務流程結合用戶視角處理成頁面流程，便於講解與優化交互流程，為后續原型設計打底子。
作者：勤勞的饅頭
鏈接：https://www.jianshu.com/p/9626453a9d93
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權並注明出處。