Prototype（原型）是什麼？保真度層級與Wireframe、MVP差異解析

作者｜瞻新資訊　張安邦執行長（台大醫工背景・十年以上IT服務公司創辦人）

在還沒寫一行程式之前，先做一個「假的」畫面讓使用者點點看——這聽起來像是多繞一步，但原型（Prototype）存在的理由，正是用相對低的成本，在真正投入開發之前先驗證「這個流程對不對」。

這篇文章把原型講清楚：保真度該怎麼選、原型跟Wireframe、Mockup、MVP這幾個常被混用的詞差在哪、為什麼原型能省下後面的開發成本，以及原型測試具體該怎麼做。

Prototype在設計流程中的角色

原型通常出現在UI/UX設計流程的中後段——資訊架構與線框圖確定大方向之後，用可以互動點擊的版本，模擬使用者跟介面之間的真實互動，在寫程式之前先驗證流程走不走得通。完整的UI/UX設計六階段流程，可以參考UI/UX設計流程六階段這篇文章，這裡不重複，直接進入原型本身的核心概念。

保真度光譜：從紙本原型到高保真互動稿

原型不是一個單一的東西，而是一個「保真度」（fidelity）光譜——從最簡單的草圖，到幾乎跟成品沒兩樣的互動版本，中間有很多可以選擇的程度。評估保真度大致看三個維度：視覺（畫面像不像成品）、內容（文案與資料是暫代文字還是真實內容）、互動性（能不能真的點擊、切換畫面）。

光譜大致排列如下：

• 紙本原型／低保真線框：用暫代方塊、手繪草圖表示基本版面，任何人都能畫，不需要專業軟體或設計技能，適合最早期快速驗證大方向
• 線框圖（Wireframe）：靜態的版面藍圖，聚焦在資訊該放哪裡、版面怎麼配置，通常不含真實文案或配色
• 視覺稿（Mockup）：中保真度，開始放入草稿文案、圖片與配色，但通常還是靜態畫面，不能真的點擊
• 互動原型（Prototype）：把靜態畫面串接起來，加上可點擊的互動與導覽流程，保真度越高，動效與轉場也越接近真實成品

保真度該選多高，取決於這一輪想驗證的是什麼，也取決於原型要拿給誰看：如果是內部團隊討論流程方向對不對，低保真的紙本原型或線框串接通常就夠用，重點是快速迭代、不糾結細節；但如果是要拿給客戶簽核、或是向投資人展示產品的真實質感，就需要拉高到高保真互動原型，讓對方感受到接近成品的操作體驗。保真度越高，製作成本也越明顯上升，這是需求方可以主動拿捏的一個槓桿。

Prototype、Wireframe、Mockup、MVP，差在哪裡

這幾個詞常被交替使用，但指的其實是不同東西：

名稱	保真度	是否可互動	主要目的
Wireframe（線框圖）	低到中	否，靜態	確定版面配置與資訊該放哪裡
Mockup（視覺稿）	中	否，靜態	確定視覺風格、配色、文案調性
Prototype（原型）	中到高	是，可點擊互動	驗證使用者操作流程是否順暢
MVP（最小可行產品）	高（真實運作）	是，真實功能	用最小開發成本驗證產品在真實市場的可行性

前三者都還在「設計稿」階段，沒有真正的程式邏輯在背後運作；MVP則已經是一個真正能運作的產品，只是功能範圍刻意縮到最小，目的是用最低成本驗證市場假設，而不是在設計階段模擬體驗。搞混這幾個詞最常見的後果，是需求方以為驗收的是「原型」，實際上廠商只給了不能互動的視覺稿，雙方期待落差就是從這裡開始的。

為什麼要在寫程式前先做原型？「改動成本曲線」的啟示

軟體工程裡有個經典概念：問題發現得越晚，修正成本越高。這個說法最早出自Barry Boehm 1981年的研究，他與Basili後續的同儕審查研究發現，產品交付後才修正的問題，成本大約是需求與設計階段修正的100倍。原型的存在，某種程度上就是為了把「流程設計錯誤」這種問題盡量攔在成本最低的階段。

不過這個「100倍」的數字需要一點現代情境的但書：這是軟體開發裡被引用最廣、但也最容易被誤用的「事實」之一。在強調短週期、疊代開發的現代敏捷（Agile）情境下，這條成本曲線已經明顯比傳統瀑布式開發時期平緩許多——因為疊代式開發本來就預期需求會變動，透過每個短週期的即時回饋盡早發現問題，不會像瀑布式專案那樣把所有改動都拖到最後才一次爆發。換句話說，原型的價值還是成立(早點驗證永遠比晚點驗證便宜)，但不必把「100倍」當成放諸四海皆準的精確數字。

原型測試怎麼做？出聲思考法

原型做出來之後，最常見的驗證方法是「出聲思考法」（Think-Aloud Protocol）：請測試者在操作原型的過程中，把腦中所有想法即時說出來——正在看什麼、在想什麼、預期接下來會發生什麼、有什麼感覺。

這個方法的價值在於，觀察者看到的不只是測試者「最後有沒有完成任務」，而是完整的思考過程，能藉此發現使用者在哪裡猶豫、哪裡誤解了設計的用意、期待跟實際介面表現不一致的地方在哪。出聲思考法特別適合用在探索或診斷階段的原型測試，但其實從最早期的紙本原型到已經上線的正式系統，各個階段都適用。根據一項可用性研究調查，出聲思考法是86%受訪者最常使用的可用性測試技巧，是目前業界最普及的原型驗證方法。

常見的原型製作工具

實務上，多數團隊會用設計協作工具直接製作互動原型，把畫面之間的點擊、跳轉關係串起來，不需要真的寫程式碼就能做出可以操作的原型（例如Figma、Adobe XD、Framer等常見的設計工具都有這類功能）。選擇工具時，比較重要的是團隊協作與交接工程端的順暢度，而不是特定工具的功能多寡——多數主流工具在基本的原型串接功能上已經相差不大。

動手做原型之前，先想清楚這幾件事

開始做原型之前，建議先想清楚：這一輪主要想驗證的是流程順不順，還是動效與真實感受（決定保真度該拉多高）、原型是要拿給內部團隊討論還是對外簽核展示、驗收標準是什麼（測試者不看說明能不能獨立完成任務）、以及要用什麼方法測試（出聲思考法搭配觀察，還是搭配事後訪談）。想清楚這些，原型才能真正發揮「用低成本先驗證」的價值，而不是變成另一份要維護的設計文件。

原型的意義不是做出一份好看的設計稿，而是用相對低的成本，在真正投入開發資源之前先確認方向對不對。瞻新資訊在協助客戶做網站與APP開發時，會依專案階段規劃合適保真度的原型驗證，有需要的話歡迎聊聊你的專案需求。

FAQ