用 Wireflow 的方式，寫 PRD

Wireflow 是一種結合「流程圖」跟「線框圖」的設計方式，主要用來描述使用者在操作產品時，從一個畫面跳轉到另一個畫面的流程，同時每個節點也會搭配簡單的畫面草圖（Wireframe），讓整個使用流程更具體、可視化。

簡單講，它就是「畫面流程圖」，既有流程的線條，也看得到大概每一頁長什麼樣子。

Wireflow 是什麼？

Wireflow 是一種結合了 Wireframe 和流程圖的設計方法，它用來幫助團隊更好理解一個步驟或是流程，你可以把它想像成每一張圖就是一張 UI，點擊了什麼功能之後，它會告訴你每一步該怎麼走，並且用圖片來展示每一個畫面和交互邏輯。

Wireflow 的用途

1. 視覺化流程：它可以顯示從一個畫面到另一個畫面的過程，並且標示出每一步的互動。
2. 簡化複雜性：當有很多步驟時，Wireflow 可以把這些步驟用圖示和箭頭清楚連接起來，讓大家很容易看懂。
3. 協作工具：團隊可以用 Wireflow 來討論和改進用戶體驗，確保大家對流程的理解是一致的。

什麼時候適合用 Wireflow？

• 專案初期，想先把整體使用流程梳理清楚的時候
• 跟設計師、工程師溝通畫面邏輯
• 做初步提案或 prototype 前，不想花太多時間畫高保真設計稿
• 討論使用者體驗與轉換流程，幫助釐清動線與功能位置

我真的很感激當年遇到的工程師，他們認為規格要寫出來之外，還要畫出來，而且要畫到「點擊了什麼之後，要出現什麼畫面」的程度，所以，光是那一個APP，我至少畫了上百張的規格，那段時間奠定了我能快速產出規格的基礎。

在那個時候，各家公司的文件寫法我大概都已經參考過了，最終，看到了 Nielsen Norman Group (NNG) 公司所寫的一篇文章「 Wireflows: A UX Deliverable for Workflows and Apps 」，讓我接下來幾乎都是用這種方式和團隊來溝通。

科普一下：

Nielsen Norman Group (NNG) 是一家專注於用戶體驗設計和研究的公司，由 Jakob Nielsen 和 Don Norman 兩位大神創立，什麼？這兩位大神沒聽過？

十大易用性原則聽過吧？Jakob 提出的，Don Norman door 是指那些設計不良的門，讓人們不容易理解該如何打開或操作的門，這個名稱來自於 Don Norman 的書。

而他們兩創立的 NNG，提供用戶體驗（UX）培訓、諮詢服務以及產出實證研究的文章、影片，他們在 UX 領域的深度研究和洞見著稱，許多文章經過多年之後仍然非常值得一看再看。

用 Wireflow 有什麼好處？

• 團隊更容易對齊對畫面的認知
• 可以先確認流程設計是否合理，再進一步細化設計
• 減少未來重工，提高設計與開發效率
• 幫助你在設計和提案階段更快速獲得回饋

Wireflow 也有一些壞處

Wireflow 雖然很適合在產品開發初期用來快速溝通使用者操作流程與畫面邏輯，但它也有一些限制。首先，Wireflow 通常只呈現簡化的線框圖，畫面細節有限，無法表現真實的互動行為或動畫效果；當流程變得複雜、畫面數量變多時，整張圖容易變得雜亂、難以閱讀，反而降低了溝通效率。

此外，Wireflow 沒有統一標準格式，每個人畫法不同，容易造成誤解；像條件跳轉、彈窗邏輯這類複雜情境，用箭頭來表示會很吃力、不直觀。再加上如果流程修改頻繁，Wireflow 的維護成本也不低，可能需要重新連線、重排結構。

所以，雖然 Wireflow 是個好工具，但比較適合處理中小型流程與初期討論，若是高互動或高複雜度的產品，建議搭配 Prototype 或其他輔助圖來補足。

簡單來說，Wireflow 就是用圖來告訴你「當用戶做了這個動作後，接下來會發生什麼」，這對於設計複雜的系統或服務非常有用，尤其是有閱讀障礙的工程師。

常見問題

要深入了解 PRD ，請參考我們的詳細指南：PRD 怎麼寫？我教你。