Wireframe, Mockup,Prototype 產品開發三階段大不同！線框圖、視覺稿與原型工具差異一覽
在設計和開發產品的過程中，Wireframe、Mockup 和 Prototype 是三個重要且不同的階段，每個階段有其特定的用途和重要性，通常會按這個順序逐步進行，從基本的結構設計到最終的可互動原型，幫助團隊和客戶清晰理解和完善產品。以下是這三者的區別：
【Wireframe 線框圖】
➤ 定義：Wireframe 是產品設計的基本骨架，它主要顯示頁面或應用的結構和佈局。
➊ 細節：通常不包含具體的設計細節（如顏色、圖片、文字樣式等），而是專注於功能區塊的位置和頁面元素的擺放。
➋ 用途：用來確認基本佈局和用戶流動（user flow），是早期概念驗證的工具。
➌ 工具：常用的工具有 Balsamiq、Sketch、Adobe XD 等。
【Mockup 視覺稿】
➤ 定義：Mockup 是比 Wireframe 更進一步的設計圖，包含了實際的設計元素，如顏色、字體、圖片等。
➊ 細節：它展示了最終產品的視覺設計，幫助團隊和客戶理解產品的外觀和感覺。
➋ 用途：用來進行設計驗證，展示給利益相關者，獲得對視覺設計的反饋。
➌ 工具：常用的工具有 Photoshop、Sketch、Figma 等。
【Prototype 原型工具】
➤ 定義：Prototype 是可互動的模型，模擬最終產品的功能和用戶交互體驗。
➊ 細節：包含了所有的設計細節和互動行為，可以讓用戶進行點擊、滑動等操作，模擬真實的使用體驗。
➋ 用途：用來進行用戶測試和驗證產品的功能，識別和修正潛在的問題。
➌ 工具：常用的工具有 InVision、Axure、Adobe XD、Figma 等。
【比較總結】
① Wireframe：側重於結構和佈局，低保真度。
② Mockup：側重於視覺設計，高保真度，但通常不可互動。
③ Prototype：側重於功能和互動，高保真度且可互動。
