說到頁面流程圖，看似很簡單。但是其實很多人畫得不規(guī)范，不能清晰表達產(chǎn)品整體的頁面架構(gòu)。
希望我的經(jīng)驗對一些不太會畫圖建模的PM有點啟發(fā)。一、頁面流程是什么
頁面流程是指產(chǎn)品的所有頁面以及相互間流向關(guān)系。
1.1、包含元素
頁面，有向線條。
可能包含判斷條件。
不包含具體功能。
不包含彈層、元件等視覺組件。
1.2、頁面命名
要么是名詞，比如購物車。可加定語，比如我的紅包。
要么是動賓短語，比如確認(rèn)訂單。
要么是通用叫法、比如我的。
可以參考同行業(yè)的TOP5競品。
盡量保持和原型軟件中頁面結(jié)構(gòu)的命名一致。
詳見
產(chǎn)品需求文檔需要遵循的命名規(guī)則
。
1.3、頁面定位
每個頁面盡量是一個完整獨立的小功能。
除非功能太復(fù)雜，需要多個頁面。此時頁面的作用是功能的某一操作。
請結(jié)合上述的頁面命名來考慮每一個頁面該如何定位。
1.4、維度只有一種
既然是頁面流程圖，那么研究維度只應(yīng)該有頁面。尤其不應(yīng)該看到功能和業(yè)務(wù)。這個錯誤很多PM都會犯。
延伸一點，每個產(chǎn)品至少有3大架構(gòu)：業(yè)務(wù)流程、功能流程、頁面流程。后續(xù)的文章word文檔里畫流程圖，我會一一來講。
二、頁面流程的作用
之所以頁面流程這個東西出現(xiàn)在產(chǎn)品經(jīng)理的設(shè)計工作中，主要有以下原因。
2.1、了解全局
對于團隊所有人來說，通過頁面流程圖可以大概了解整個APP的情況，偏視覺層。
2.2、傳達需求
對視覺設(shè)計師，知道要做多少視覺稿，具體每個頁面有哪些視覺元素。
對前端工程師，知道自己該寫多少個頁面，搭建頁面代碼結(jié)構(gòu)。
2.3、評估工作量
用頁面數(shù)量來評估各自的工作量，可以大概估算出工期。
2.4、梳理業(yè)務(wù)
頁面流程是業(yè)務(wù)的直接體現(xiàn)，根據(jù)業(yè)務(wù)區(qū)反復(fù)研究它，可以讓產(chǎn)品整體變得更簡潔，結(jié)構(gòu)變得更優(yōu)美。
三、頁面流程不能這樣畫
大部分初級PM畫頁面流程圖基本上會犯兩個錯誤。
3.1、包含其他維度
上面已經(jīng)說了，再重申一下只應(yīng)該出現(xiàn)頁面這個維度，不應(yīng)該有什么亂七八糟的業(yè)務(wù)、功能、甚至是組件、元件什么的。
3.2、展示具體內(nèi)容
有些PM畫把頁面的具體內(nèi)容表示出來，其實很不對的。
以
閃電約APP
來畫了一個錯誤的頁面流程圖，只畫了幾個頁面。供大家參考。至少犯了上面1、2、4錯誤。
四、頁面流程應(yīng)該這樣畫
4.1、找出所有頁面
不管你使用哪款原型軟件，總有它的頁面結(jié)構(gòu)。據(jù)此畫出所有的頁面不難。
需要注意的是頁面是物理層面的，真實存在。而不像業(yè)務(wù)流程圖中的業(yè)務(wù)模塊，只是邏輯層面的，并不需要真實體現(xiàn)。
如果你是使用Axure，可以直接拖動左方頁面結(jié)構(gòu)中的頁面標(biāo)題到右邊的畫布中即可。
4.2、用有向線條關(guān)聯(lián)
使用線條將2個頁面聯(lián)系起來，直到把所有的頁面跳轉(zhuǎn)加上為止。
如果你是使用Axure，請不要傻乎乎的連接，而是使用連接線模式。
4.3、增加條件判斷
這一步不是必須的word文檔里畫流程圖，但是稍微復(fù)雜一些的產(chǎn)品建議使用。
拿上面的錯誤圖來說，首頁和3個頁面有關(guān)聯(lián)，那什么情況下跳轉(zhuǎn)到第一個頁面呢。這個就是需要條件判斷來說明。這一點平鋪的UI視覺稿并不能體現(xiàn)這一點PM的價值。
其實吧，UI視覺稿的平鋪圖可以作為前端工程師定義代碼層面的頁面結(jié)構(gòu)，屬于物理結(jié)構(gòu)。但是邏輯層面的頁面結(jié)構(gòu)必須輔以條件判斷。
重新畫一下上面的頁面流程圖，正確應(yīng)該如下。
4.4、檢查是否犯錯
上面說的幾個常見錯誤，最好檢查一下有沒有犯。
五、總結(jié)
補充一點，如果你是使用Axure來畫頁面流程的話，可以全選所有的頁面，然后右鍵一鍵生成流程圖，
點擊查看效果
。
其實頁面頁面流程圖還需要按照角色(用戶、商家)，端(客戶端、服務(wù)端)，有時候還需要按照版本來畫。根據(jù)自身產(chǎn)品的復(fù)雜程度，按照此文方法畫出即可。
#其他畫圖建模文章#
移動PM需要梳理這些流程圖
如何繪畫狀態(tài)機來描述業(yè)務(wù)變化
如何用ER圖繪制業(yè)務(wù)實體模型
PM如何用原型打造獨一無二的簡歷