業(yè)務(wù)流程圖重要的是說清楚了做什么事，而頁面流程圖則側(cè)重在功能設(shè)計(jì)中碎连，頁面與頁面之間的流轉(zhuǎn)關(guān)系灰羽，即用戶通過什么操作進(jìn)入了什么頁面及后續(xù)的操作及頁面。由于這個(gè)屬性鱼辙，它一般處于業(yè)務(wù)流程圖和原型制作之間廉嚼。
1. 頁面流程圖是什么
a、處于業(yè)務(wù)流程圖與原型設(shè)計(jì)之間倒戏，是交互設(shè)計(jì)怠噪、原型設(shè)計(jì)的基本依據(jù)。
b杜跷、用戶視角的操作流程傍念，把自己想成用戶，完全模擬用戶去思考頁面流向葛闷，探索用戶體驗(yàn)的合理性憋槐，發(fā)現(xiàn)體驗(yàn)上的問題。
c孵运、大致元素及模型如下：
-編號(hào)代表頁面編號(hào)秦陋，后續(xù)在原型中可延續(xù)使用蔓彩，便于查找頁面
-名稱代表頁面名稱
-操作名稱代表用戶的動(dòng)作
-核心元素代表頁面中需要重點(diǎn)體現(xiàn)和表達(dá)的功能/內(nèi)容
-注：有些時(shí)候有些操作并不會(huì)指向頁面治笨，而是發(fā)個(gè)短信等，也要在頁面流程上表現(xiàn)出來赤嚼，后面有舉例
1.1 工具
a旷赖、建議Axure，頁面流程圖與信息架構(gòu)圖都是原型的底子
b更卒、Visio等孵，這個(gè)是便于跨部門溝通，office辦公全家桶蹂空，你懂的
c俯萌、PPT果录，上臺(tái)必備
2. 為什么要有頁面流程圖
a、突出頁面元素和邏輯之間的關(guān)系咐熙，大致清楚頁面中元素的跳轉(zhuǎn)是怎樣弱恒，提升原型設(shè)計(jì)的效率。
b棋恼、代表用戶的操作流程返弹，做頁面流程圖能夠快速發(fā)現(xiàn)交互問題。（頁面流程圖是用戶視角爪飘，業(yè)務(wù)流程圖是后端視角）
c义起、成本低，一張圖也許幾個(gè)小時(shí)就能夠完成师崎，但是每一個(gè)頁面的線框圖全部畫完可遠(yuǎn)不止這些時(shí)間默终。
d、能夠讓你更關(guān)注問題本質(zhì)——行為路徑抡诞，而不是過早陷入細(xì)節(jié)思考穷蛹，并且還能夠通過優(yōu)化路徑減少不必要的頁面。
3. 怎么畫頁面流程圖
3.1 回歸業(yè)務(wù)流程昼汗，明確主線
a肴熏、頁面流程一定來自于業(yè)務(wù)流程
b、一般為業(yè)務(wù)流程中的方形部分（大方形）
c顷窒、異常流程一般為彈層或者彈窗
d蛙吏、業(yè)務(wù)流程畫得好，頁面流程就很簡單
案例：需求梳理模塊以及功能流程設(shè)計(jì)模塊鞋吉，咱們都舉過一個(gè)優(yōu)惠碼功能的例子鸦做，這里咱們繼續(xù)這個(gè)案例進(jìn)行舉例：
需求點(diǎn)：產(chǎn)品增加一個(gè)優(yōu)惠碼功能，讓運(yùn)營人員能夠給用戶發(fā)優(yōu)惠碼谓着，用戶下單時(shí)使用優(yōu)惠碼泼诱，抵扣相對(duì)應(yīng)的折扣/金額。
業(yè)務(wù)流程圖：
然后咱們進(jìn)行了細(xì)化赊锚，得到后臺(tái)系統(tǒng)的業(yè)務(wù)流程
注意：后臺(tái)系統(tǒng)一般不用做頁面流程圖治筒，頁面流程圖一般用于前端和用戶型產(chǎn)品，后臺(tái)系統(tǒng)有業(yè)務(wù)流程圖一般也就夠了舷蒲，頂多附帶個(gè)信息架構(gòu)圖导坟。
再往下得到了用戶階段的頁面流程圖：
注意業(yè)務(wù)流程圖中的五個(gè)動(dòng)作帖池，這五個(gè)方塊的動(dòng)作就是關(guān)鍵頁面，大概就是這么個(gè)流程：
3.2 明確頁面中重點(diǎn)元素
a、功能在頁面中贰逾，有哪些是需要表現(xiàn)元素
b、增加異常流程處理的邏輯，要么彈層要么提示
c、增加輔助的幫助頁面
d启绰、考慮下游觸發(fā)點(diǎn)
梳理清楚頁面中重點(diǎn)元素后，得到頁面流程圖：
3.3 溝通與優(yōu)化流程
a沟使、盡可能窮舉涉及的頁面酬土，先繁后簡
b、通過原型草圖格带，優(yōu)化調(diào)整頁面關(guān)鍵元素撤缴，例如原型草圖中覺得按鈕或者頁面要調(diào)整，頁面流程也要跟隨調(diào)整
c叽唱、與UI屈呕、UE、前端研發(fā)多溝通棺亭，頁面流程圖需要UI一起參與
3.4 回顧和檢查
a虎眨、回歸業(yè)務(wù)邏輯
b、明確每個(gè)頁面中的核心元素
c镶摘、優(yōu)化和調(diào)整
本篇分享主要內(nèi)容到這里就算是結(jié)束了嗽桩，其實(shí)頁面流程圖并不復(fù)雜，承接業(yè)務(wù)流程凄敢，將業(yè)務(wù)流程結(jié)合用戶視角處理成頁面流程碌冶，便于講解與優(yōu)化交互流程，為后續(xù)原型設(shè)計(jì)打底子涝缝。
無論哪種流程圖扑庞，都是工具而已，邏輯清晰是最大的根本拒逮。
希望本篇分享能夠幫助你更好地認(rèn)識(shí)頁面流程圖罐氨。
想要更多干貨分享就快來關(guān)注我的個(gè)人公眾號(hào)吧！滩援！
花名：饅頭
個(gè)人公眾號(hào)：我是饅頭
座右銘：博學(xué)之栅隐，審問之，慎思之玩徊，明辨之租悄，篤行之
