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