Wireframe、Mockup、Prototype有什麼差異？盤點6大Prototype原型相關製作工具
線框圖Wireframe、視覺稿Mockup、功能原型Prototype的差異是什麼？一般來說，商業分析師或產品經理會製作線框圖，UI/UX 產品設計師會製作視覺稿，而功能原型則需要系統分析師參與其中。製作時應考慮哪些因素？盤點包括Figma、Zeplin、Marvel、Canva……等6種常見原型Prototype製作工具。
文／徐夢潔 Zoe
- 本文目錄（點擊可快速前往）
線框圖、視覺稿、功能原型有什麼差異及限制？
一般而言，商業分析師或產品經理會製作線框圖，UI/UX 產品設計師會製作視覺稿，而功能原型則需要系統分析師參與其中。但隨著現在功能原型製作工具的普遍，許多商業分析師或產品經理也會透過功能原型來描述需求。
線框圖、視覺稿和功能原型各自有其獨特的描述方式。舉例來說，在＜第 15 章：系統功能清單及系統功能流程圖－如何定義可見系統功能與不可見系統功能？＞中，我們提到了可見系統功能應該具備的特徵，包括一致的操作設計和可直觀學習操作，這正是視覺稿的設計重點。以下是它們各自的定義和差異：
- 線框圖（Wireframe）：線框圖是簡單的黑白圖形，用於展示網站的結構和佈局。它強調訊息和系統功能流程，並且非功能性需求應該與線框圖一起被提出。
- 視覺稿（Mockup）：視覺稿在線框圖的基礎上添加顏色、字體、圖像等視覺元素，用於展示網站的外觀和風格。它著重於展現企業或品牌的形象和主視覺。在視覺稿階段，可以提早確認所需的畫面元件，並統一系統功能畫面的操作設計，這也是軟體需求規格書「系統開發標準」中會涉及的內容。
- 功能原型（Prototype）：功能原型在視覺稿的基礎上添加動畫、交互、數據等功能元素，用於展示系統的行為和使用體驗。它的重點在於可用性和可行性。完善功能原型可能還需要系統架構師和系統分析師的協助。因此，功能原型若在需求分析階段就完成的話，需要留意後續變更的可能。
線框圖、視覺稿、功能原型的差異
| 線框圖Wireframe | 視覺稿Mockup | 功能原型Prototype |
|---|---|---|
| 簡單的黑白圖形，展示網站的結構和佈局 | 在線框圖的基礎上添加顏色、字體、圖像等視覺元素，展示網站的外觀和風格 | 在視覺稿的基礎上添加動畫、交互、數據等功能元素，展示網站的行為和體驗 |
| 重點在於訊息層級和業務流程 | 重點在於企業或品牌的形象及主視覺 | 重點在於可用性和可行性 |
| 非功能性需求要與線框圖一併提出 | 系統開發標準中會涉及的畫面元件管理，在視覺稿階段可以提早確認所需元件，並統一系統功能畫面的操作設計 | 功能原型的完善還需要系統架構及系統分析的資訊，因此功能原型若在需求分析階段就完成的畫，需要留意後續變更的可能 |
| 可以用紙筆草稿或文書軟體製作 | 可以用Photoshop、Sketch等設計工具製作 | 可以用Adobe XD、Framer等原型工具製作 |
雖然線框圖、視覺稿和功能原型提供了顯著的視覺優勢，但是也必需要瞭解它們的局限性。
- 無法完整地呈現系統的所有功能和行為，例如不可見系統功能。
- 無法整合真實數據以評估系統的效能表現和使用者體驗。
- 製作過程需要投入大量的時間和資源。
- 使用者的回饋不明確，或者他們無法正確地理解設計用意。
- 無法模擬不可見系統功能的細節，導致忽略不可見系統功能複雜性帶來的挑戰。
- 設計的視覺效果在技術上不可行或無法實現。
以上是關於線框圖、視覺稿和功能原型的限制。理解這些限制並在使用時謹慎處理限制所帶來的盲點，仍可透過線框圖、視覺稿和功能原型的優勢協助提高需求確認的精確性和使用者體驗。
《實務小技巧》
在需求訪談階段，仍然可以先製作線框圖或視覺稿，以更快速了解需求的外觀和樣貌，來幫助需求訪談的進行。但不能忽略需求分析步驟，也不能忽視其他需求分析技術所描述的需求內容。因此，在需求分析時，請堅持按照需求分析步驟執行，以確保不遺漏任何重要的需求內容。
製作線框圖（Wireframe）時應考慮的因素？
線框圖在與其他需求分析步驟的需求文件搭配時，包括循序圖、領域模型、使用案例及業務流程圖，有以下幾個製作重點：
1. 線框圖也可以包含不可見系統功能的執行結果
在＜第 15 章：系統功能清單及系統功能流程圖－如何定義可見系統功能與不可見系統功能？＞中說明，將不可見系統功能的執行結果呈現在可見系統功能中，以透過介面更明確掌握不可見系統功能的狀態。例如設計 API 呼叫紀錄查詢功能的線框圖，以掌握 API 執行結果。
2. 線框圖的操作順序應與循序圖的訊息序列一致
透過線框圖直觀的介面，有可能為了使用者體驗因素，因此需要調整循序圖的訊息序列。線框圖及循序圖的訊息序列兩者最終要一致。
3. 線框圖介面的欄位應與領域模型一致
在線框圖中的輸入欄位，必須要有對應的輸出欄位。例如新增客戶資料功能中的所有欄位，就必須要在客戶查詢功能中包含這些欄位，即使原本需求中不包含輸出欄位的需求。
並且需要確認線框圖裡的欄位，與領域模型裡的屬性及方法一致，確保實現循序圖的數據落地需求，以避免線框圖欄位呈現的資料實際上沒有被儲存在資料庫中。
4. 線框圖搭配的需求說明，是說明操作面及設計面的需求，不是說明業務需求
當線框圖的操作面及設計面，或非功能性需求需要描述時，可搭配需求說明文件補充相關資訊。但不可以在需求說明文件中說明業務需求。業務需求說明應該在循序圖、領域模型及使用案例中說明。
5. 線框圖的介面操作應與業務流程圖中的相關作業能進行整合
線框圖的操作面需要能與其它線下作業面順暢整合，以達到流程改造及數位化作業的效益。
線框圖是呈現需求分析結果的介面，因此線框圖的設計應與其它需求文件內容一致。以達到視覺化的需求呈現，同時也維持需求的完整性。
確認線框圖與其它需求文件內容一致的步驟相當重要。實際上，許多利害關係人透過線框圖確認需求是否符合他們的期望時，往往會受到視覺感受的影響，而導致沒有完整確認其他需求內容是否符合。因此，在線框圖設計完畢後，務必需要與循序圖、領域模型、使用案例及業務流程圖相互確認需求的一致性。
有哪些常見的原型（Prototype）相關製作工具？
（點擊前往看介紹）
1. Figma
Figma 是一個線上設計和協作工具，可用於設計和原型製作，且設計師和團隊成員可以協同工作，在同一個專案中共享和註釋設計文件。
網址：前往Figma
2. Zeplin
Zeplin 是一個協作工具，用於設計師和開發人員之間的設計轉換和開發工作流程。設計師可以將他們在設計工具（如 Sketch、Figma 等）中的設計文件直接導出到 Zeplin 中，開發人員可以從中獲取 CSS 代碼、圖像資源和準確的尺寸和間距等開發所需要的資訊或程式碼。
網址：前往Zeplin
3. Marvel
Marvel 是一個線上設計和原型製作的工具，可以幫助設計師將靜態設計轉化為具有互動效果的原型，並進行測試和共享。
網址：前往Marvel
4. Canva
Canva 是一個線上平台，提供各種設計工具和模板，直觀的拖放界面和豐富的設計元素庫，使非設計師也能輕鬆創造專業的圖形設計作品。
網址：前往Canva
5. Sketch
Sketch 是一個專業的向量繪圖工具，主要用於 UI 和 UX 設計。它有簡潔的界面和豐富的設計功能，及支援各種其它工具的整合套件，可擴展其功能和整合其他設計工具。
網址：前往Sketch
6. Mockplus
Mockplus 是一個可快速製作原型的工具，設計師可以使用拖放方式將元素放置在畫布上，並添加互動效果和轉場動畫。
網址：前往Mockplus
 |
| 節錄自：博碩文化《商業分析師的數位轉型專案策略：結合ChatGPT從商業分析到需求工程管理實務／徐夢潔 Zoe 著 》 |
沒看到有興趣的職缺嗎？
沒看到有興趣的職缺嗎？
