wireframe、mockup、prototype 差異：3 個階段一次搞懂

多數人以為線框圖（wireframe）、視覺稿（mockup）、原型（prototype）只是同一份設計稿越畫越精緻的三個階段，先隨手畫個灰階版面，再上色定稿，最後加上互動效果，擬真度像一條進度條逐格往上疊。三者真正的差異其實不在做得多細，而在各自負責回答哪個問題：線框圖管架構對不對，視覺稿管看起來像不像，原型管用起來順不順，不是同一件事越做越完整的百分比。

連經驗豐富的設計師都常把這三個詞混著用，把「畫線框圖」講成「先做個 mockup」，或是把互動原型誤稱成「高保真線框圖」。名稱混用看似小事，實際上卻會讓團隊在該討論架構的階段先吵起版面配色，或是拿著一份還沒驗證過操作流程的視覺稿就急著送去開發。分不清 wireframe、mockup、prototype 的差異，往往就是專案反覆重工的起點。

先從最陽春、也最容易被誤解的線框圖講起，再依序拆視覺稿與原型各自守住哪一塊，最後把三者攤開放進同一張表裡逐項比對。

線框圖是什麼？只負責排出功能骨架

線框圖（wireframe）是三者之中擬真度最低的一種，通常只用黑白或灰階的方框、線條與文字區塊表示版面結構，不放顏色、不用真實字體，也不放實際的圖片素材，取而代之的是一長串看起來像亂碼的佔位文字（lorem ipsum）與灰色矩形示意圖片位置。這種什麼都還沒定案的粗糙感不是缺點，線框圖本來的目的，就是讓團隊先對功能配置與資訊層級達成共識，而不是被顏色、字型這些視覺細節分散注意力。

換句話說，線框圖畫得越接近成品，反而越容易失焦。如果一開始就把按鈕上色、把標題換成漂亮字體，與會的人很容易開始討論「這個藍色好不好看」，而不是「這個按鈕該不該放在這裡」。所以線框圖階段刻意保持粗糙，才能把討論焦點鎖在架構與使用者流程上，也方便在定案前快速收集回饋，大改特改都不心疼。

製作線框圖的門檻也刻意壓得很低，最陽春的做法就是紙筆，在白板或便條紙上隨手畫格子；數位工具裡，Balsamiq 這類專門畫線框圖的軟體會提供一整套刻意做得很粗糙的元件庫，Figma 內建的線框圖套件也能讓人快速堆出灰階版面。不管用哪種工具，線框圖要解決的問題都只有一個，那就是先把功能與版面骨架排出來，顏色與字體留到下一階段再談。

視覺稿是什麼？把骨架穿上顏色與字體

視覺稿（mockup）在線框圖打好的架構上，把顏色、字型、真實圖片與品牌識別通通穿上去，呈現出「做出來會長什麼樣子」的完整靜態畫面。跟線框圖最大的不同在於擬真度，視覺稿看起來幾乎就是成品，連字體大小、按鈕顏色、圖片素材都跟最終上線的樣子非常接近；但它終究只是一張靜態畫面，滑鼠點下去不會有任何反應。視覺稿要回答的問題是看起來對不對，不是動不動得起來（互動這件事留給下一節的原型講）。

這個定位也決定了視覺稿在專案裡的角色。當團隊需要跟利害關係人確認品牌調性、需要老闆或客戶點頭同意視覺方向時，一份灰階線框圖很難讓人有感覺，這時候就輪到視覺稿上場，用真實的色彩與字體讓人一眼看懂完成後大概是這個樣子，爭取到繼續往下走的共識。Figma 官方資源庫就提到，視覺稿最重要的功能之一，是讓利害關係人能實際確認顏色、字體這些品牌識別元素有沒有一致。不過也正因為視覺稿做得太像成品，反而容易讓人誤以為專案已經接近完工，即使背後的操作邏輯根本還沒驗證過，這是視覺稿階段特別容易踩的一個陷阱。

視覺稿通常在 Figma、Sketch 或 Photoshop 這類設計工具裡完成，這些工具擅長處理色彩、圖層與版面編排，也方便快速套用不同的配色方案讓客戶比較。只要記得視覺稿還是一張靜態圖，它負責的是像不像，動不動得起來要留給下一階段的原型去回答。

原型是什麼？讓畫面真的能被點開

原型（prototype）在視覺稿的基礎上，再加上一層可以點擊、可以切換畫面的互動機制，讓整份設計稿從看的變成可以操作的。使用者點一下按鈕，畫面真的會跳轉到下一頁；滑動一下選單，真的會展開子項目。原型模擬的是接近真實的使用流程，好讓團隊在真正動手寫程式之前，先透過易用性測試抓出操作上的問題，而不是等到工程都做完了才發現流程繞了一大圈。

能不能真的點下去，是原型跟前兩者最大的分界。線框圖與視覺稿都是靜態畫面，原型才第一次讓人可以像使用真實產品一樣操作；不過要注意的是，不少工具會提供可點擊式線框圖這種介於中間的形式，畫面還是灰階粗略的線框圖樣式，但已經可以點擊切換到下一個畫面。Justinmind 部落格就指出，正式原型比這種可點擊式線框圖多了事件觸發、動畫效果、變數控制這類進階互動，可點擊式線框圖能做到的通常只是「點了會換頁」，程度遠不及正式原型，兩者不能直接畫上等號。

製作原型常見的工具包括 Figma 內建的原型模式、Adobe XD、Axure，以及 InVision、Marvel 這類專門做互動雛型的服務，各自在動畫效果、邏輯判斷的複雜度上略有不同。不論用哪一套，原型要驗證的核心問題都是同一個，使用者照著這個流程操作，走得順不順、卡不卡關，這件事只有做出真正能點的東西才問得出答案。

線框圖、視覺稿、原型的四個關鍵差異

前面三節分別定義了線框圖、視覺稿、原型各自在忙什麼，這裡把三者攤開放進同一張表裡，從擬真度、能不能互動、通常由誰負責、常用工具這四個具體維度逐一比對，讓你一眼看懂彼此的分界在哪裡，而不必再回頭拼湊三段定義。

三者的擬真度差多少？

如果把擬真度攤開成一條光譜，線框圖落在最低的一端，黑白方框加上佔位文字，連版面比例都可能只是抓個大概；視覺稿落在最高的一端，顏色、字體、圖片全部到位，乍看之下幾乎跟成品沒有兩樣；原型則落在中間偏高的位置，雖然也有真實的視覺元素，但因為要呈現切換畫面的動態效果，製作時反而常會為了讓互動流暢而簡化部分視覺細節。

這裡最容易產生的誤解，是把擬真度直接當成完成度的指標。一份做得漂漂亮亮的視覺稿，擬真度甚至可能比原型還高，但它終究點不動；反過來說，一個擬真度沒那麼講究的原型，只要互動邏輯做對，照樣能拿去做真正的使用者測試。擬真度回答的是看起來多接近成品，跟能不能操作是兩件不能互相取代的事。

能不能真的點下去，是原型的分水嶺

把前面三節的內容收斂到一個維度來看，線框圖與視覺稿其實站在同一邊，兩者都是靜態畫面，不管畫得多精緻，滑鼠點下去都不會有反應。真正能讓畫面切換、讓使用者體驗到操作這件事的，只有原型。這也是為什麼有些流程需要先驗證使用者會不會在這一步卡住時，單靠視覺稿是問不出答案的，非得做出可以互動的原型不可。

前面提過的可點擊式線框圖，就是卡在這條分水嶺附近的模糊地帶，它外觀還是線框圖的灰階粗略樣式，但已經加上基本的點擊換頁功能，容易讓人誤以為這就等於做了原型。實際上正式的原型除了點擊換頁，還會處理事件觸發、動畫轉場、變數狀態這類更進階的互動邏輯，可點擊式線框圖能做到的互動深度遠不及此，兩者只是都能點，能點到的程度差了不只一截。

三個階段，各自由誰負責畫？

三個階段除了產出物不同，通常也對應不同的專業分工。線框圖階段講究的是邏輯與流程，一般由產品經理或專案負責人主導，把功能該放哪裡、使用者會怎麼操作先想清楚，不太需要精細的美感訓練；視覺稿階段換成視覺設計師接手，這時候考驗的是配色、字體排版、品牌一致性這些美術判斷；原型階段則常常需要設計師與工程端一起協作，才能把點擊之後該發生什麼事、動畫怎麼銜接這些細節做出來。Justinmind 部落格也觀察到，設計師與開發者對線框圖的關注點其實不太一樣，前者比較在意使用者流程走不走得通，後者更在意功能核心有沒有先排定。

這種分工邏輯講的是這件事通常需要什麼技能，不是規定一定要換人做。團隊規模小、一人身兼多職是很常見的狀況，一個人從線框圖畫到原型完全沒問題；重點是清楚意識到每個階段需要切換的思考方式不同，排架構的時候先別想配色，做視覺稿的時候也別急著把互動邏輯設計進去，把每個階段該想的事情想完，再往下一關走。

三個階段，各自常用什麼工具？

畫線框圖最看重的是快、成本低，紙筆是最原始也最快的做法，數位工具裡 Balsamiq 這類軟體會刻意提供粗糙感十足的元件庫，讓人不會因為畫面太精緻而分心；Figma 裡也有現成的線框圖套件，能快速堆出灰階版面。到了視覺稿階段，工具換成 Figma、Sketch、Photoshop 這類擅長處理色彩、圖層與版面細節的設計軟體，方便快速套用不同配色方案讓利害關係人比較。原型階段則需要能處理互動邏輯的工具，像是 Figma 內建的原型模式、Adobe XD、Axure，或是 InVision、Marvel 這類專門做互動雛型的服務，各自在動畫效果與邏輯判斷的複雜度上略有差異。

另外，像 Figma 這樣的工具，現在已經逐漸把三個階段收進同一套介面裡完成，用 FigJam 協作討論線框架構，接著在 Figma 設計檔案裡把視覺稿做出來，再切換到原型模式加上互動效果，不必在三套軟體之間來回搬檔案。工具整合是趨勢，但這不代表三個階段本身可以省略，只是換檔的成本變低了。

小案子不必照三階段走完

前面四個維度比較下來，可以看出不是每個專案都得老老實實把線框圖、視覺稿、原型三個階段走完一遍。Aha 的產品管理指南就直接點出，不必為每一項產品或功能都做齊這三種產出；頁面數量少、互動邏輯單純的小案子，常常會直接拿設計工具裡現成的高保真模板當視覺稿使用，線框圖這一關索性省略。比較複雜的情況，例如牽涉多個部門協作、操作流程本身就繞了好幾層，或是需要找真實使用者做測試，三個階段分開做反而比較省事，能在早期就抓出架構上的問題，而不是等到畫面都做漂亮了才發現流程根本不通。

省略線框圖直接跳到高保真設計，最大的風險不在美感，而在討論容易被視覺細節帶偏。Balsamiq 部落格就提醒過，做得漂亮的畫面很容易讓利害關係人產生一種已經定案的安心感，即使背後的邏輯根本還沒驗證，這正是過早跳進高保真細節的陷阱。等到真的發現流程有問題，往往已經投入不少時間在視覺細節上，回頭調整的成本也跟著墊高。要不要跳過線框圖，關鍵不在案子大小這個表面標準，而在這個案子的複雜度與協作人數，是不是撐得起早期就把架構定清楚的必要性。

AI 工具，讓三個階段的分界變模糊了嗎？

小案子有充分的理由跳過線框圖，但另一個讓人也想跳過這一步的理由，來自這幾年 AI 工具的進化。現在，AI 生成工具已經能單靠一句提示詞，直接產出接近完稿的高保真畫面，甚至做出可以點擊操作的互動雛型，這讓先老老實實畫一輪線框圖這件事，看起來好像可以直接跳過。Balsamiq 部落格今年一月的一篇文章就指出，AI 讓團隊能快速探索多種視覺方向、大幅壓縮產出時間，但 AI 沒辦法替團隊決定這個產出到底適不適合你的產品，更沒辦法取代對產品邏輯本身的判斷。

換句話說，AI 加速的是畫面產出的速度，不是架構有沒有想清楚這件事。一份由 AI 一鍵生成、視覺完成度很高的畫面，看起來可能比人工畫三天的線框圖還像成品，但畫面漂亮從來不等於功能配置對了、使用者流程順了。如果團隊看到這麼完整的畫面就直接跳過架構討論，反而更容易把原本該在線框圖階段抓出來的問題，一路帶到後面才爆出來。

比較務實的做法，是讓 AI 去加速視覺稿與原型這兩個已經確定方向、需要快速產出多個版本的階段，線框圖階段真正該做的架構取捨與流程判斷，還是得留給人來拍板。工具再快，回答這樣設計對不對的仍然是人，不是生成畫面的速度。

線框圖問的是架構想清楚了嗎，視覺稿問的是看起來對不對，原型問的是用起來順不順，這三個問題彼此獨立，答對一個不代表另外兩個也過關，它們從來不是同一份工作越做越完整的進度百分比。就算未來 AI 工具真的能一步生成接近完稿、還能操作的畫面，這三個問題本身也不會因此消失，只是回答它們的速度變快了，判斷該怎麼回答的人還是你。