對于任何産品設計來說，構建流程都是一個繞不開的環節。其奠定了後續的産品框架，是用戶體驗的基石。本文将從定義和方法出發，結合實際案例，深入淺出地闡述流程圖的作用以及畫法。

最近在做一個關于閱讀筆記的原型，業務流程是要通過 app 掃碼識别圖書背面條形碼，然後将圖書加入書架，加入書架的書可以寫閱讀筆記，記錄閱讀的頁數和閱讀的狀态，中間的頁面流程複雜，于是決定通過閱讀筆記的業務跟大家說說頁面流程吧

01 什麼是頁面流程

頁面流程圖是展示頁面之前的流轉關系——用戶通過什麼操作進了什麼頁面及後續的操作及頁面，頁面流程圖是在業務流程圖之後原型設計之前的工作，是提高原型效率的中間件。

做原型圖，線框圖之前先列一個大綱，這個大綱就是頁面流程，可以幫助你更清晰的梳理需求，考慮每個頁面的重點和每項功能的前置與後置，在做原型之前需要先思考頁面流程，定好大綱，才能不偏離需求。

而且在做好頁面流程圖之後，也可以更好的幫助産品經理跟UI、測試、開發溝通，為之後做原型圖減少了很多不必要的修改。

02 為什麼要有頁面流程

1. 原型設計的基本依據

新入門的産品經理，接到一個需求之後往往就會先畫原型，而當你快速畫好原型投入開發之後就會發現需要一直改改改，不斷的改，邏輯漏洞很多，為什麼會這樣呢？如果你有這樣的困惑，那就需要好好反思一下是不是你的頁面流程是缺失的。

因為我們做産品是個逐層分解的過程，首先有需求，從需求轉化功能，确認功能梳理邏輯，根據業務邏輯拆解頁面流程，最後出原型效果圖，這時候的原型才會是圍繞需求展開的，所以頁面流程就是我們原型設計的基本依據。

2. 通過頁面流程模仿用戶操作能發現體驗問題

頁面流程是原型設計的基礎，所以代表的是用戶的立場，是站在用戶視角考慮用戶操作從而發現其中流程的合理與否。

以需求為出發點首先需要明确用戶需求的場景，用戶是怎麼用的，在用的過程中會有什麼問題，把用戶需求場景想清楚後再思考怎麼解決這個需求，通過模拟用戶的操作來發現用戶體驗的問題，這也是我們做原型設計的時候需要考慮的，所以頁面流程梳理好确認用戶的需求場景和操作邏輯才能更好的提高用戶交互體驗。

03 頁面流程該怎麼畫

1. 頁面流程中包含什麼

四方形：表明頁面主業務，通常是頁面的主功能部分

菱形：異常流程或判斷邏輯說明，一般在頁面中用tips或彈層來展示

流向：流向分為主幹流向和輔助流向，代表業務的邏輯走向

重點元素：每個流程中重點要表達和體現的内容

2. 畫頁面流程圖的工具

Axure：對于習慣用Axure的同學們來說，用這個工具畫頁面流程圖足夠了，畫完頁面流程圖還可以繼續畫原型，用同一個軟件切換會更方便

Visio：流程圖常用工具，不管什麼流程都可以輕松應對

總之頁面流程圖是幫助産品經理梳理業務邏輯的，隻要能理清思路，手繪或者用PPT簡單連線都可以達到目的

3. 明确業務流程 ，清晰頁面核心功能主線

之前說到頁面流程是在業務流程之後的，所以開始頁面流程之前，要先明确業務流程，那麼業務流程是什麼呢？

如果說頁面流程是站在用戶視角的，那麼業務流程就是産品視角。以産品的角度回歸業務流程的梳理，業務流程畫的好，頁面流程就能順理成章的清晰找到頁面流程中的四方形和菱形。

那有了業務流程為什麼還要畫頁面流程呢？因為頁面流程在業務流程的邏輯上加入了對于頁面的核心元素說明和下遊觸發說明，也就是考慮了用戶的實際使用場景的流程以及異常流程的處理方式，更加清晰展示用戶操作的每一條邏輯線。

4. 明确頁面中的核心元素和邏輯關系

頁面流程往往不僅僅隻有新頁面，還會有涉及一些老頁面需要優化，如果一個新頁面的功能需要在老頁面加一個入口的話，那麼這個入口的核心元素是什麼，需要重點表現的是什麼，入口到下一個頁面之間的邏輯關系是什麼，是怎麼跳轉的，需要增加哪些異常流程的處理邏輯，通過頁面流程來明确頁面的核心元素，對原型設計是一個非常大的提升。

隻要明确了頁面的核心元素和下遊邏輯關系，就基本确定了原型的大概，這個時候不用過于關注按鈕的形态和顔色，隻需要确認是否符合業務需求的功能邏輯即可。

案例說明

以個人書架的加入藏書業務為例，看一下頁面流程圖的具體繪制過程

首先來說明下加入藏書的需求，用戶通過App掃一掃家裡圖書背面的ISBN碼識别圖書加入個人書架，形成個人藏書架。

業務流程是這樣的：

在業務流程中說明了個人藏書架的功能邏輯，而接下來就要考慮每個功能需要幾個頁面，每個頁面需要體現什麼樣的元素，這些重要元素會不會觸發一些異常流程，該怎麼觸發下遊頁面。

我們繼續來看個人書架的頁面流程圖：

在這個頁面流程圖中，包含了以下幾類：

• 頁面說明，如頁面的名稱是什麼，有哪些核心元素；
• 通過頁面點擊動作後會分為有幾條邏輯線，每個邏輯的過程以及跳轉。比如4.圖書信息的頁面，核心元素分為展示掃描到的圖書信息和結果不符合兩部分，如果結果符合就點擊加入藏書完成，不符合就點擊不符合進入下一頁面邏輯，這就是不同的元素會觸發不同邏輯；

隻要确認好每個頁面功能中想要重點表現的是什麼，那在原型設計中就會更加表現得更見直白。

有一些頁面的最終路徑可能都是同一個頁面，這也是很正常的，通過頁面流程能夠很清晰的看到站在用戶的角度每一個點擊操作的進展和之後的邏輯，這也就是産品交互的雛形

5. 優化和調整頁面順序

當梳理清楚業務和功能邏輯後就可以整理頁面流程了，頁面流程要遵循盡可能窮舉所有相關涉及的頁面，然後做減法的方法。

将相同功能或者元素的頁面合并，可以通過畫原型草圖的方法優化和調整頁面關鍵元素，在這個過程中或許會發現某一些頁面的元素展示并不符合預期邏輯，這時候就可以考慮換掉，也可以跟UI溝通是否調整，最終呈現出來的原型才是符合業務邏輯的。

頁面流程的問題

畫頁面流程的過程會幫助你更全面的思考邏輯，這中間包含了正常邏輯和異常邏輯，也會有各個頁面之間的跳轉邏輯。那麼畫頁面流程要注意哪些問題呢？

1. 不要忽略異常流程

關于異常流程的處理邏輯，在原型中一般表現為彈層或者提示。

對一些關鍵元素的操作會觸發異常流程，以個人書架業務的添加圖書信息為例，正常流程為輸入圖書信息點擊添加按鈕完成添加進入圖書詳情頁，然而在輸入圖書信息的過程中會存在一些必填項的非空判斷的錯誤提示和關于專業名詞的解釋說明或者其它規則說明，也要在設計之初就考慮進來。

2. 考慮下遊的觸發點

在頁面流程的設計中需要加入下遊處罰點的考慮，通常是按鈕或者超鍊接的形式，通過點擊不同狀态的按鈕會跳轉到不同的頁面，那每一個按鈕對應的下遊頁面是什麼，想要引導用戶做什麼樣的操作都要考慮，通過頁面流程的梳理會增加你對整體業務邏輯的進一步理解，形成一個産品的全局意識。

本文由 @花卷er 原創發布于人人都是産品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部