UI 設計報價主要取決於三件事：要設計多少個畫面與狀態、是否包含可點擊的互動原型與設計系統，以及交付給工程師的規格做到什麼程度。只用「幾頁多少錢」估價容易失準，因為一個畫面在手機、平板、桌機的版本，以及載入中、空資料、錯誤等狀態，都各自需要設計。這篇專談介面設計本身，不談網站架設的整體費用；金額請以實際報價為準，以下說明計價單位、交付範圍與比較方法。
UI 設計常見的計價單位：畫面、狀態與斷點
介面設計的工作量不只看頁面數，比較準確的估法是把每個畫面拆成三個面向：
- 畫面數：登入、列表、詳細頁、表單、結帳等獨立畫面；共用版型的頁面可以合併估算。
- 狀態：同一畫面在載入中、空資料、錯誤、成功、權限不足時的樣子，以及按鈕、輸入框的互動狀態。報價只算正常狀態，開發時才會發現缺圖。
- 斷點與平台：網頁要設計幾種寬度，應用程式要不要同時做 iOS 與 Android。Google 的 web.dev 建議依內容決定斷點，不要照特定裝置；Android 官方文件則把顯示區分成精簡、中等、展開等視窗大小類別。兩個平台也各有官方設計指南，例如 Apple 的人機介面指南與 Google 的 Material Design，要不要分平台設計會直接影響工時。
報價單若只寫頁數，可以請對方說明每頁包含哪些狀態與幾種寬度。
互動原型與設計系統怎麼估
互動原型
原型的精細度差異很大：把靜態畫面串成可點擊的流程，適合使用者測試與內部確認；要呈現轉場、拖曳、滑動等細節，就需要更多製作時間。先決定原型的用途是驗證流程、向主管簡報，還是給工程師當動態規格，再選對應的精細度。
設計系統
設計系統把顏色、字級、間距、圓角等決策整理成可重複使用的規則與元件。Material Design 把設計權杖（design tokens）形容為所有介面元素的構成單位，同一組權杖會同時用在設計稿、工具與程式碼。建立元件庫與使用說明是一筆前期投入，產品畫面多、會持續擴充時，新畫面都能沿用；只做一次性的活動頁，簡單的樣式指南通常就夠。
交付物清單：報價裡應該看得到的項目
- 設計原始檔：命名一致、依流程分組，交接後別人也看得懂。
- 元件庫：按鈕、表單、卡片、導覽等元件，以及各狀態的變化。
- 標註規格：尺寸、間距、字級、色碼，以及響應式的變化規則。
- 切圖與圖示：開發需要的圖示與圖片輸出格式。
- 互動說明：點擊後的行為、動畫節奏與轉場方式。
- 無障礙檢查：WCAG 是網頁內容無障礙的國際標準，AA 等級包含文字對比度等準則，官方建議採用的現行版本也把點選目標的尺寸下限列為 AA 準則，讓低視力者看得清楚、使用者不易誤觸相鄰按鈕；合約要寫明依循的版本與等級。
- 交接與設計驗收：交接說明會議，以及開發完成後比對實作與設計稿。
同樣叫做 UI 設計，有的報價只交畫面，有的包含上述全部；缺哪一項，日後就得由工程師或你自己補上。
修改與驗收：分階段確認才不會整份重來
UI 專案通常分成線框圖、視覺設計、原型三個階段，每階段定稿後再進下一步。合約可以這樣約定：
- 每階段各含幾輪修改，一輪是指彙整後一次提出的意見。
- 流程、功能或畫面數量的變動屬於需求變更，另行估價，不算在修改次數內。
- 每階段有明確的驗收標準，例如所有狀態都已設計、各寬度版本齊全、對比度符合約定等級。
- 驗收以書面或訊息留紀錄，已確認的階段若要推翻，視為變更。
把修改與變更分開，是控制費用的關鍵。許多超支來自視覺做到一半才調整功能流程，結果線框圖與畫面都要重做。
UI 設計與前端開發的分工界線
| 工作 | 通常屬於 UI 設計 | 通常屬於前端開發 |
|---|---|---|
| 畫面與元件 | 視覺、狀態、元件規則 | 把元件寫成程式並串接資料 |
| 響應式 | 各寬度的版面與變化規則 | 實作斷點並在各瀏覽器測試 |
| 互動與動畫 | 描述行為與節奏 | 實作效能可接受的動畫 |
| 品質確認 | 比對實作是否符合設計 | 修正差異與功能錯誤 |
灰色地帶要在報價時講定，例如設計稿沒畫到的寬度由誰決定、圖示由誰輸出、設計驗收做幾輪。同一團隊同時承接設計與前端時，也請對方分開列出兩塊的工作範圍，才能判斷各自的成本。
比較 UI 設計報價的檢核表
- 範圍：畫面數、狀態與斷點是否寫明，各家是否依同一份清單估算。
- 前期研究：是否包含使用者流程、資訊架構與線框圖，還是直接從視覺開始。
- 原型與設計系統：精細度到哪裡、元件庫是否交付。
- 交付物：原始檔、標註、切圖與設計驗收是否包含。
- 權利歸屬：依智慧財產局整理的著作權法規定，出資聘人完成的作品，沒有約定時著作財產權歸受聘的設計方，委託方雖可利用，範圍卻容易有爭議。合約要寫明設計稿與元件庫能否自由修改、延伸到其他產品，實際條款請以法律專業意見為準。
- 相關經驗：是否做過類似產品，例如電商、會員系統或後台管理介面。
想先釐清介面設計與使用者體驗的分別，可以參考網頁設計 UI 與 UX 的基本概念。
委託前的準備：需求越清楚，報價越準
- 功能清單與畫面清單，標出優先順序與這次要做的範圍。
- 主要使用者流程，例如註冊、下單、預約的步驟。
- 既有的品牌規範、標誌與參考產品。
- 技術限制：開發框架、既有元件庫、要支援的瀏覽器與裝置。
- 時程與上線日期，以及每階段由誰驗收。
需求還不明確時，可以先委託範圍較小的探索或線框圖階段，確認流程後再估完整的視覺與原型，避免一開始就用模糊的範圍報價。
常見問題
UI 設計報價為什麼常用畫面數計算？
畫面是雙方容易對齊的單位，但每個畫面包含的狀態與寬度版本差很多。比價時要看每個畫面包含哪些版本，而不是只比畫面數量。
UI 設計和 UX 設計要分開報價嗎？
可以合併也可以分開。報價若包含使用者研究、流程與線框圖，就涵蓋了 UX 的工作；直接從視覺開始的報價，前期流程要由你方或其他團隊提供。
一定要建立設計系統嗎？
不一定。產品畫面多、會持續擴充或有多個團隊參與時較值得投入；單次活動頁或畫面很少的專案，整理基本的樣式規則就夠用。
工程師做出來和設計稿不一樣怎麼辦？
報價時就約定設計驗收，由設計方比對實作與設計稿、列出差異清單，再由開發修正。少了這一步，落差通常要到上線後才被發現。
UI 設計報價可以包含前端切版嗎？
可以，但要分開列出兩塊的範圍與交付物。設計與前端是不同專業，分開列才能判斷各自是否合理，日後也方便更換其中一方。
本文由京采數位科技整理。我們自 2005 年起提供官網設計、系統開發與 Google SEO 服務，實際案例可見成果與案例。
想直接討論你自己的網站狀況，或需要一份初步的搜尋機會評估？
相關主題
下一步
準備委託 UI 設計時，先把畫面清單、狀態與交付物整理成一份需求表，再請不同團隊依同一份需求報價。如果介面設計是官網改版的一部分，京采的網頁設計服務會從商業目標反推資訊架構、版位順序與行動呼籲，並兼顧效能與行動體驗。歡迎與我們聯繫，說明你的產品與時程。
