流程圖（Flow Chart）這個概念對很多人來說并不陌生，但如果讓你定義或者舉例說明什么是產品流程圖，恐怕還是有難度的。或許諸如“用戶體驗”、“交互設計”、“邏輯關系”等詞會像走馬燈般閃現在你的腦海中，但這是流程圖的全部內容嗎？很顯然并不是。

作為流經整個系統的信息流的圖形代表，流程圖說白了就是表示先做什么、后做什么，也就是“開始，結束，行動，狀態與判斷”的組合。根據核心業務及達成目標的不同，又可以將流程圖分為四種類型：產品流程圖、業務流程圖、操作流程圖及頁面跳轉流程圖。在幾乎所有的產品設計中，頁面流程圖都發揮著關鍵且不可替代的作用。

一、關于頁面流程圖

顧名思義，頁面流程圖是用來展示頁面之間的跳轉邏輯關系，描述在什么條件下、做了什么事情以及所帶來的后續操作。對設計師及產品經理而言，頁面流程圖是細化工作量的基礎，不僅能直觀地發現潛在的“地雷”、進行全局/系統化的思考，而且能幫助聚焦于用戶目標與任務的完成，制作及調整修改的成本也低。

相較于單純的功能列表，頁面流程圖也更易被你的開發工程師所接受，它在評估工作量、開展代碼工作及反射功能邏輯等方面，都可以作為重要的參考依據。那如何才能繪制出既能把事情講清楚，也能把頁面交代清楚，同時又讓大家感覺舒服的頁面流程圖呢？下面小編總結了一些技巧及心得，不妨一起來看看。

二、繪制頁面流程圖

總體來講，大致能分為以下三個步驟：

第一步：驗證idea并優化功能、優先級｜開始前

俗話說“好的開始是成功的一半”。同理在流程圖繪制中，也需要提前做好“思想”準備，其中驗證自己的idea是否靠譜以及明確用戶將如何參與使用十分重要。設計想法的靠譜程度，可以結合目標用戶群體、用戶價值以及用戶體驗來進行驗證。同時，需要對用戶的實際操作進行預想，從而優化功能點及其中的流程。最終明白我們要做什么，為哪些人做，主要的功能是哪些，功能之間是怎么樣的流程。這里以國外作品集網站Behance上的設計師Anny Zhang的設計為例：

項目鏈接地址

第二步：從第一個初始頁面繪制｜進行中

在知道了系統應該具有的功能、提供的內容之后，現在需要將這些功能及內容巧妙地分配到不同的頁面中去。頁面中會包含鏈接、按鈕、表單等元素，在經過用戶的觸發后，會跳轉到其他的頁面上。同時，頁面之間會有鏈接線進行連接，具有不同的狀態及屬性，最終表現用戶不同的操作指令下、不同頁面的流轉關系。

可能聽起來會比較復雜，但其實就像講故事一樣，繪制流程圖最簡單的方式是從第一個初始頁面開始。過程中，不必糾結于細分用戶的類型、猜想用戶也許根本用不到哪些操作，而是根據窮舉各項操作，假設判斷用戶若點擊什么就會到哪里。這里以一個叫做Gogobot的原型例子為例，它便是以Home頁為初始頁開始頁面的流程展示：

項目預覽及下載地址

古人有云“君子善假于物也”。無論你是專業知識過硬、即使用Word也能隨手畫出amazing的流程圖的設計大咖，還是尚且處于懵懂中的設計菜鳥，一款好用的工具能起到錦上添花或雪中送炭的作用。這里小編提的兩個精美的頁面流程圖例子，都是用Mockplus這款原型工具制作出來的，除了提供精美的外觀外，它還可以做到：

－即時生成（點擊軟件頂部工具欄的“流程圖”圖標，即可一鍵快速生成）；

－展示全部或任意多個頁面的流程圖；

－智能生成流程鏈接線，展示頁面的批注信息；

－支持一次導出頁面流程圖，方便快捷。

第三步：頁面結構及內容的反復調整｜結束后

完成了初步的繪制后，還需要通過自己不斷審查、團隊內部反復確認，將最符合用戶、團隊及自己預期的設計idea落地。除了邏輯及交互關系外，頁面的整體結構是否合理也很關鍵。這里Mockplus也提供了一鍵切換腦圖設計模式的功能，可以快速規劃及調整需要的模塊，對于項目的整體功能進行演示講解，同時支持導出基于圖表的圖片，便于PRD文檔的籌劃。

戳這里，了解更多Mockplus的酷炫功能。