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)相關製作工具?

(點擊前往看介紹)

FigmaZeplin
MarvelCanva
SketchMockplus

1. Figma

Figma 是一個線上設計和協作工具,可用於設計和原型製作,且設計師和團隊成員可以協同工作,在同一個專案中共享和註釋設計文件。

網址:前往Figma

圖片來源/Figma

2. Zeplin

Zeplin 是一個協作工具,用於設計師和開發人員之間的設計轉換和開發工作流程。設計師可以將他們在設計工具(如 Sketch、Figma 等)中的設計文件直接導出到 Zeplin 中,開發人員可以從中獲取 CSS 代碼、圖像資源和準確的尺寸和間距等開發所需要的資訊或程式碼。

網址:前往Zeplin

圖片來源/Zeplin

3. Marvel

Marvel 是一個線上設計和原型製作的工具,可以幫助設計師將靜態設計轉化為具有互動效果的原型,並進行測試和共享。

網址:前往Marvel

圖片來源/Marvel

4. Canva

Canva 是一個線上平台,提供各種設計工具和模板,直觀的拖放界面和豐富的設計元素庫,使非設計師也能輕鬆創造專業的圖形設計作品。

網址:前往Canva

圖片來源/Canva

5. Sketch

Sketch 是一個專業的向量繪圖工具,主要用於 UI 和 UX 設計。它有簡潔的界面和豐富的設計功能,及支援各種其它工具的整合套件,可擴展其功能和整合其他設計工具。

網址:前往Sketch

圖片來源/Sketch

6. Mockplus

Mockplus 是一個可快速製作原型的工具,設計師可以使用拖放方式將元素放置在畫布上,並添加互動效果和轉場動畫。

網址:前往Mockplus

圖片來源/Mockplus

節錄自:博碩文化《商業分析師的數位轉型專案策略:結合ChatGPT從商業分析到需求工程管理實務/徐夢潔 Zoe 著 》
節錄自:博碩文化《商業分析師的數位轉型專案策略:結合ChatGPT從商業分析到需求工程管理實務/徐夢潔 Zoe 著 》


更多【商業分析】工作機會

沒看到有興趣的職缺嗎?

更多【產品經理】工作機會

沒看到有興趣的職缺嗎?

你是搶手的數位人才嗎?104有超多寶藏職缺等你探索⮕

104數發人才專區