Wireframe、Mockup、Prototype這三個詞相關卻不同 - daniel-qa/Vue GitHub Wiki

Wireframe、Mockup、Prototype這三個詞，雖然都跟「畫面」有關，但其實各自負責的階段與目的卻不相同

#

畫 Wireframe！

說到 Wireframe，許多人第一個可能會聯想到「畫草圖」、「設計師在畫 UI 的東西」，但在參與幾個專案後，我發現Wireframe不只是設計，更是 PM 溝通、釐清需求時不可或缺的重要工具，如欲知其中門道，且聽我娓娓道來~

畫的不是畫面，是共識

繪製Wireframe的時候，我們不會特別追求介面的美感，反而比較著重在：「使用者會怎麼操作？畫面之間怎麼串接？功能間的流程合理嗎？」這類的問題，繪製完會與設計師、工程師確認每個頁面、按鈕背後的行為與架構，在功能和流程上先達成共識。

在這個階段就把系統呈現方式、運作規劃好，開發的過程就能減少許多溝通成本，萬一在開發進行後才發現流程出問題，不但會拖延專案的時程，也會增加時間及人力成本

流程設計三兄弟：Wireframe、Mockup、Prototype，傻傻分不清？

Wireframe

Wireframe是最初階的規劃草圖，比較著重在功能與架構設計，通常只會用簡單的方框、線條和註解來表達每個畫面上應該有哪些元素、元素之間的關係、以及使用者會如何在不同畫面之間切換，協助團隊在設計與開發之前釐清功能流程，確保脈絡是合理且可行的。

Mockup

接著會進行Mockup，系統也要有好看的包裝！Mockup的主要目的就在這裡。在Wireframe與團隊達成共識後，就會進入產品 Mockup 階段，這時通常會由設計師根據Wireframe的架構進行設計，套用顏色、字型、圖標、品牌風格等等，呈現出實際畫面的樣子；它的重點不在互動，而是確保視覺效果符合客戶的期待，就像是幫人偶穿上衣服一樣，讓原本只有框線的產品有了新的視覺生命。

Prototype

Prototype 是將介面元素組合起來，製作成可以互動的版本，也就是最接近「真實產品操作」的模型。

通常在完成 Wireframe 或 Mockup 之後，PM 或設計師會進一步將它們製作成 Prototype，讓團隊或客戶不只能看畫面，還能實際走一遍流程，體驗使用情境；

早點發現操作流程有沒有卡卡的地方，還可以拿來收集使用者回饋，幫助我們在正式開發前把設計跟功能優化到更理想的狀態！

總結

簡單來說，Wireframe 解決的是系統脈絡，Mockup 呈現的是外觀，而 Prototype 則用來模擬操作流程

---

繪製Wireframe並不是堆疊 UI 元素，更重要的是背後能站得住腳的操作流程。