定義
頁面流程圖表現(xiàn)頁面之前的流轉(zhuǎn)關(guān)系——用戶通過什么操作進了什么頁面及后續(xù)的操作及頁面衔肢。
為什么做旷余，好處
一下子進入單頁面唾戚，不先系統(tǒng)性規(guī)劃浸踩，考慮每項功能的前置和后置，每項操作的上下文傻挂，容易顧此失彼乘碑，遺漏重要狀態(tài)或忽視本應(yīng)簡化的任務(wù)。
好處之于對于設(shè)計師或產(chǎn)品經(jīng)理：
- 頁面流程圖一張頁面助你講完完整的用戶與系統(tǒng)的交互故事踊谋，借助它蝉仇，你更容易知道流程中的潛在地雷是什么，哪里的效率比較低殖蚕，有助于系統(tǒng)化轿衔、全局化、周全性的思考
- 細化工作量的基礎(chǔ)睦疫，通過頁面流程圖可準(zhǔn)確評估需要多少張頁面害驹。
- 聚焦：頁面流程圖中的每個頁面都不必追求精細——你的目標(biāo)是規(guī)劃行為路徑，而不是單頁面交互設(shè)計蛤育，所以完全無需考慮頁面內(nèi)容宛官、布局。所以你會更加聚焦于用戶目標(biāo)和任務(wù)的完成瓦糕。不必過早陷入細節(jié)底洗。
- 關(guān)鍵是很快。線框圖有可能有幾十張咕娄，你畫起來沒那么快亥揖，而且一旦進入細節(jié)，則還需要慢慢深究圣勒。但是頁面流程圖也許就是幾個小時的事情费变。你就可以對整個項目心中有數(shù)了。
好處之于開發(fā)工程師：
- 可作為評估工作量的重要依據(jù)——可幫助他們對工作量也心中有數(shù)圣贸。
- 可做為開展代碼工作的重要參考——特別是前端開發(fā)挚歧，必須得知道每一種操作指向什么頁面。
- 他們會映射功能邏輯吁峻，會給你更多好的建議滑负。
頁面流程圖簡要
- 頁面流程圖目標(biāo)：表現(xiàn)用戶的不同的操作指令下不同頁面流轉(zhuǎn)關(guān)系。
2.** 頁面=操作+內(nèi)容**用含，操作是需要用戶觸發(fā)的橙困，包含鏈接、按鈕耕餐、表單等等凡傅。用戶通過這些操作，看到同一個頁面上不同的內(nèi)容肠缔，或者跳轉(zhuǎn)到其他的頁面夏跷。
- 頁面流程圖元素：頁面哼转、操作或狀態(tài)、連接線
頁面用矩形表示槽华，頁面上要體現(xiàn)關(guān)鍵的內(nèi)容塊及主要操作壹蔓。
操作用圓角矩形表示，放在連接線上猫态。一個頁面可引出多個操作指向不同的頁面佣蓉。
用橢圓表示意圖，比如：購物頁面亲雪，用戶喜歡這個商品的話勇凭，可能會想做什么？目前我們提供了哪些功能可以繼續(xù)往下走义辕？當(dāng)不喜歡的話虾标，他們可能想要做什么？我們目前又做了什么挽留灌砖？
頁面也有分類：請注意有些操作可能不會帶你去一個實際的頁面璧函，而是有可能發(fā)個短信、發(fā)個郵件等基显，這些也需要被表現(xiàn)出來蘸吓。
也有不適合用頁面流程圖去表現(xiàn)的網(wǎng)站，如果操作不是縱深型的一步步流程撩幽，而是平行中跳轉(zhuǎn)库继，如門戶類網(wǎng)站查看新聞的用例、如音樂類網(wǎng)站等等摸航。這種情況下制跟，最好用站點地圖（site map）去表達頁面從屬關(guān)系就可以了舅桩。
6.移動APP需考慮系統(tǒng)物理返回鍵的狀況酱虎，這也是操作的一種
怎么做
- 從第一個頁面開始
- 不分用戶類型，根據(jù)頁面窮舉各項操作擂涛，基于假設(shè)判斷用戶若點擊什么就會到哪里读串。
原文給出了一個公益捐贈網(wǎng)站的例子，從idea到功能列表到業(yè)務(wù)流程圖撒妈，在到頁面流程圖：
筆者試著畫了一個在線購物網(wǎng)站的頁面流程圖恢暖，有幾點感受：
微店頁面流程圖
- 流程圖本來是為了全局思考，那種很大的頁面排成一排再組連接線的狰右，很漂亮杰捂，但很快畫不下
- 復(fù)雜流程很容易交叉，混亂棋蚌，和業(yè)務(wù)流程圖一樣嫁佳，先主干再枝干挨队，先畫核心流程，放置于畫布正中間利于擴充
- 關(guān)鍵功能蒿往，內(nèi)容放置于頁面不如放置于注釋盛垦，清晰，利于擴充
- 頁面瓤漏，操作腾夯，判斷，注釋不同底色利于閱讀
