閱讀2567
標籤：
產品經理流程圖設計流程圖（Flow Chart）這個概念對很多人來說並不陌生， 但如果讓你定義或者舉例說明什麼是產品流程圖， 恐怕還是有難度的。 或許諸如“使用者體驗”、“交互設計”、“邏輯關係”等詞會像走馬燈般閃現在你的腦海中， 但這是流程圖的全部內容嗎？很顯然並不是。
作為流經整個系統的資訊流的圖形代表， 流程圖說白了就是表示先做什麼、後做什麼， 也就是“開始， 結束， 行動， 狀態與判斷”的組合。 根據核心業務及達成目標的不同， 又可以將流程圖分為四種類型：產品流程圖、業務流程圖、操作流程圖及頁面跳轉流程圖。
一、關於頁面流程圖
顧名思義， 頁面流程圖是用來展示頁面之間的跳轉邏輯關係， 描述在什麼條件下、做了什麼事情以及所帶來的後續操作。 對設計師及產品經理而言， 頁面流程圖是細化工作量的基礎， 不僅能直觀地發現潛在的“地雷”、進行全域/系統化的思考， 而且能説明聚焦於使用者目標與任務的完成， 製作及調整修改的成本也低。
相較於單純的功能清單， 頁面流程圖也更易被你的開發工程師所接受， 它在評估工作量、開展代碼工作及反射功能邏輯等方面， 都可以作為重要的參考依據。
二、繪製頁面流程圖
總體來講， 大致能分為以下三個步驟：
第一步：驗證idea並優化功能、優先順序—開始前
俗話說“好的開始是成功的一半”。 同理在流程圖繪製中， 也需要提前做好“思想”準備， 其中驗證自己的idea是否靠譜以及明確用戶將如何參與使用十分重要。 設計想法的靠譜程度， 可以結合目標使用者群體、使用者價值以及用戶體驗來進行驗證。 同時， 需要對使用者的實際操作進行預想， 從而優化功能點及其中的流程。 最終明白我們要做什麼， 為哪些人做， 主要的功能是哪些，
第二步：從第一個初始頁面繪製—進行中
在知道了系統應該具有的功能、提供的內容之後， 現在需要將這些功能及內容巧妙地分配到不同的頁面中去。 頁面中會包含連結、按鈕、表單等元素，
可能聽起來會比較複雜， 但其實就像講故事一樣， 繪製流程圖最簡單的方式是從第一個初始頁面開始。 過程中， 不必糾結於細分用戶的類型、猜想用戶也許根本用不到哪些操作， 而是根據窮舉各項操作， 假設判斷用戶若點擊什麼就會到哪裡。 這裡以一個叫做Gogobot的原型例子為例， 它便是以Home頁為初始頁開始頁面的流程展示：
古人有雲“君子善假于物也”。 無論你是專業知識過硬、即使用Word也能隨手畫出amazing的流程圖的設計大咖， 還是尚且處於懵懂中的設計菜鳥， 一款好用的工具能起到錦上添花或雪中送炭的作用。 這裡小編提的兩個精美的頁面流程圖例子， 都是用Mockplus這款原型工具製作出來的， 除了提供精美的外觀外， 它還可以做到：
－即時生成（點擊軟體頂部工具列的“流程圖”圖示， 即可一鍵快速生成）；
－展示全部或任意多個頁面的流程圖；
－智慧生成流程連結線，展示頁面的批註資訊；
－支援一次匯出頁面流程圖，方便快捷。
第三步：頁面結構及內容的反復調整—結束後
完成了初步的繪製後，還需要通過自己不斷審查、團隊內部反復確認，將最符合用戶、團隊及自己預期的設計idea落地。除了邏輯及交互關係外，頁面的整體結構是否合理也很關鍵。這裡Mockplus也提供了一鍵切換腦圖設計模式的功能，可以快速規劃及調整需要的模組，對於專案的整體功能進行演示講解，同時支援匯出基於圖表的圖片，便於PRD文檔的籌畫。
本文由Mockplus團隊翻譯發佈于產品壹佰，未經許可，禁止轉載。
微信公眾號：Mockplus
即可一鍵快速生成）；－展示全部或任意多個頁面的流程圖；
－智慧生成流程連結線，展示頁面的批註資訊；
－支援一次匯出頁面流程圖，方便快捷。
第三步：頁面結構及內容的反復調整—結束後
完成了初步的繪製後，還需要通過自己不斷審查、團隊內部反復確認，將最符合用戶、團隊及自己預期的設計idea落地。除了邏輯及交互關係外，頁面的整體結構是否合理也很關鍵。這裡Mockplus也提供了一鍵切換腦圖設計模式的功能，可以快速規劃及調整需要的模組，對於專案的整體功能進行演示講解，同時支援匯出基於圖表的圖片，便於PRD文檔的籌畫。
本文由Mockplus團隊翻譯發佈于產品壹佰，未經許可，禁止轉載。
微信公眾號：Mockplus