關於流程圖設計，你須要Get的幾點必備知識

流程圖（Flow Chart）這個概念對不少人來講並不陌生，但若是讓你定義或者舉例說明什麼是產品流程圖，恐怕仍是有難度的。或許諸如「用戶體驗」、「交互設計」、「邏輯關係」等詞會像走馬燈般閃如今你的腦海中，但這是流程圖的所有內容嗎？很顯然並非。

做爲流經整個系統的信息流的圖形表明，流程圖說白了就是表示先作什麼、後作什麼，也就是「開始，結束，行動，狀態與判斷」的組合。根據核心業務及達成目標的不一樣，又能夠將流程圖分爲四種類型：產品流程圖、業務流程圖、操做流程圖及頁面跳轉流程圖。在幾乎全部的產品設計中，頁面流程圖都發揮着關鍵且不可替代的做用。

 

1、關於頁面流程圖

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

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

2、繪製頁面流程圖

整體來說，大體能分爲如下三個步驟：

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

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

 

 

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

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

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

 

 

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

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

－展現所有或任意多個頁面的流程圖；

－智能生成流程連接線，展現頁面的批註信息；

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

 

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

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

 

 

戳這裏，瞭解更多Mockplus的酷炫功能。