說到頁面流程圖，看似很簡單。但是其實很多人畫得不規範，不能清晰表達產品整體的頁面架構。希望我的經驗可以對一些不太會畫圖建模的PM有點啟發。

頁面流程是什麼

頁面流程是指產品的所有頁面以及相互間流向關係。

包含元素

頁面，有向線條。

可能包含判斷條件。

不包含具體功能。

不包含彈層、元件等視覺組件。

頁面命名

要麼是名詞，比如購物車。可加定語，比如我的紅包。

要麼是動賓短語，比如確認訂單。

要麼是通用叫法、比如我的。

可以參考同行業的TOP5競品。

盡量保持和原型軟體中頁面結構的命名一致。

頁面定位

每個頁面盡量是一個完整獨立的小功能。

除非功能太複雜，需要多個頁面。此時頁面的作用是功能的某一操作。

請結合上述的頁面命名來考慮每一個頁面該如何定位。

維度只有一種

既然是頁面流程圖，那麼研究維度只應該有頁面。尤其不應該看到功能和業務。這個錯誤很多PM都會犯。

延伸一點，每個產品至少有3大架構：業務流程、功能流程、頁面流程。後續的文章，我會一一來講。

頁面流程的作用

之所以頁面流程這個東西出現在產品經理的設計工作中，主要有以下原因。

了解全局

對於團隊所有人來說，通過頁面流程圖可以大概了解整個APP的情況，偏視覺層。

傳達需求

對視覺設計師，知道要做多少視覺稿，具體每個頁面有哪些視覺元素。

對前端工程師，知道自己該寫多少個頁面，搭建頁面代碼結構。

評估工作量

用頁面數量來評估各自的工作量，可以大概估算出工期。

梳理業務

頁面流程是業務的直接體現，根據業務區反覆研究它，可以讓產品整體變得更簡潔，結構變得更優美。

頁面流程不能這樣畫

大部分初級PM畫頁面流程圖基本上會犯兩個錯誤。

只能有頁面這一維度

上面已經說了，再重申一下只應該出現頁面這個維度，不應該有什麼亂七八糟的業務、功能、甚至是組件、元件什麼的。

不應展示具體內容

有些PM畫把頁面的具體內容表示出來，其實很不對的。

• 抽象維度不一致，頁面和頁面內容是兩個概念。
• 畫頁面內容需要耗費很長時間。
• 頁面內容改動頻率大，需要經常複查並修改。
• 具體內容有功能、有控制項、有圖標、有文字，很難抽象表述，以及表述完全。如果你這樣畫過，你就會理解這裡的苦處。

以閃電約APP來畫了一個錯誤的頁面流程圖，只畫了幾個頁面。供大家參考。至少犯了上面1、2、4錯誤。

頁面流程應該這樣畫

找出所有頁面

不管你使用哪款原型軟體，總有它的頁面結構。據此畫出所有的頁面不難。

需要注意的是頁面是物理層面的，真實存在。而不像業務流程圖中的業務模塊，只是邏輯層面的，並不需要真實體現。

如果你是使用Axure，可以直接拖動左方頁面結構中的頁面標題到右邊的畫布中即可。

用有向線條關聯

使用線條將2個頁面聯繫起來，直到把所有的頁面跳轉加上為止。

如果你是使用Axure，請不要傻乎乎的連接，而是使用連接線模式。

增加條件判斷

這一步不是必須的，但是稍微複雜一些的產品建議使用。

拿上面的錯誤圖來說，首頁和3個頁面有關聯，那什麼情況下跳轉到第一個頁面呢。這個就是需要條件判斷來說明。這一點平鋪的UI視覺稿並不能體現這一點PM的價值。

其實吧，UI視覺稿的平鋪圖可以作為前端工程師定義代碼層面的頁面結構，屬於物理結構。但是邏輯層面的頁面結構必須輔以條件判斷。

重新畫一下上面的頁面流程圖，正確應該如下：

檢查是否犯錯

上面說的幾個常見錯誤，最好檢查一下有沒有犯。

總結

補充一點，如果你是使用Axure來畫頁面流程的話，可以全選所有的頁面，然後右鍵一鍵生成流程圖

其實頁面頁面流程圖還需要按照角色(用戶、商家)，端(客戶端、服務端)，有時候還需要按照版本來畫。根據自身產品的複雜程度，按照此文方法畫出即可。

接下來會講一下功能流程圖、業務流程圖如何畫。

推薦閱讀：

相关文章