UI UX 是什麼？UI 設計與 UX 設計的差別、產出與驗收

TL;DR

• UI（User Interface，使用者介面）指使用者直接看到與操作的部分；UX（User Experience，使用者體驗）指使用者為了完成某件事，從抵達到離開的整段過程。兩者處理的是不同層次的問題。
• 最實際的分辨方式不是看定義，而是看驗收方法：UI 可以對照設計稿逐項核對，UX 只能請人實際操作一次才會顯現。
• UI 有一部分決策可以量測，不必爭論喜好。文字與背景的對比度、可點擊區域的尺寸都有公開標準可依循。
• UX 的範圍比介面大。ISO 9241-210 把使用者體驗定義為「使用前、使用中與使用後的感受與反應」，資料本身不齊全也算 UX 問題。
• 委託時常見的落差是：報價寫了「UI／UX 設計」，交付的卻只有視覺稿。分辨方式是問產出物清單，不是問流程名稱。

目錄

• UI 與 UX 的定義
• UI 設計與 UX 設計的三個分界
• UX 設計的工作範圍與產出
• UI 設計的工作範圍與產出
• UI 設計可量測的客觀依據
• UI 與 UX 的驗收方式
• UI UX 的四個常見誤解
• 委託前可以確認的事項

引言

報價單上寫「含 UI／UX 設計」的情況很普遍，但兩邊對這五個字的理解未必一致。委託方多半以為包含了流程規劃與實際測試，接案方有時指的只是視覺稿的排版與元件樣式，等到交付才發現落差。

這篇整理 UI 與 UX 各自指的是什麼、產出物有哪些差別，以及驗收時該分別檢查哪些東西。內容以委託與驗收的角度為主，不涉及設計軟體的操作，也不談設計師的職涯路徑。

需要先了解網頁設計整體工作範圍的讀者，可參考網頁設計是什麼？網站設計的範圍、UI／UX、RWD 與驗收標準。

UI 與 UX 的定義

UI 是 User Interface 的縮寫，中文譯為使用者介面，指的是使用者直接看到與操作的那一層：按鈕的樣式與大小、表單欄位的排列方式、選單如何展開、點擊之後有沒有回饋。這一層的問題通常肉眼可見，例如按鈕太小、對比不足、目前處於哪個狀態看不出來。

UX 是 User Experience 的縮寫，中文譯為使用者體驗，範圍比介面大得多。國際標準 ISO 9241-210 的定義是「使用者因為使用或預期使用某個系統、產品或服務，所產生的感受與反應」，並且明確涵蓋使用之前、使用當中與使用之後三個階段。「使用前的預期」與「使用後的印象」都被算了進去，而那兩段通常不在介面上發生。

這個詞被廣泛使用，一般認為與 Donald Norman 在 1990 年代中期的推動有關。他與 Jakob Nielsen 在 1998 年那篇常被引用的定義文章裡舉過一個例子：一個電影評論網站即使搜尋介面做得完美，若資料庫本身缺少獨立製片的片單，使用者的體驗依然是差的。同一篇把易用性描述為「介面的一項品質屬性」，位置在 UI 那一層，而整體體驗又比易用性更廣。

照這個劃分，資料不齊、庫存沒更新、客服回覆要等三天，全都是 UX 問題，即使介面本身無可挑剔。這也是為什麼單靠重做視覺往往解決不了轉換率。

UI 設計與 UX 設計的三個分界

定義聽起來清楚，實際討論時仍容易混在一起，尤其是在會議上臨時要判斷「這件事該找誰處理」的時候。有幾個角度可以拿來對照。

最直觀的是處理對象的差別。UI 處理元件與畫面，一次面對的是一個頁面；UX 處理路徑與步驟，一次面對的是一段跨越好幾個頁面的流程。討論「這顆按鈕放哪裡」屬於前者，而「使用者為什麼走到這一步才發現要先註冊」屬於後者，兩個問題就算在同一場會議提出，該調整的東西也不在同一層。

比較有辨別力的則是產出物。UI 的產出是看得到的東西，包括設計稿、元件庫與狀態規範；UX 的產出多半不是圖，而是流程圖、資訊架構、頁面優先順序，以及測試之後累積下來的修改清單。這一項之所以實用，是它可以直接寫進合約——報價單若只列了設計稿張數，那麼買到的實際上就只有 UI，其餘部分無論會議上談過什麼都不在交付範圍內。

還有一個事後才會用到的角度，是失敗時聽到的抱怨。UI 出問題時，使用者會說「看起來怪怪的」「按不到」；UX 出問題時的說法則是「找不到」「不知道下一步要幹嘛」「填到一半就放棄了」。後面那幾句話，盯著設計稿看再久也看不出來。

UX 設計的工作範圍與產出

UX 的工作大致落在三個階段，而且順序不太能顛倒。

釐清使用者要完成什麼。 商業型網站的訪客通常帶著明確目的而來——確認營業時間、比較方案、找到聯絡方式、完成一次預約。把這些目的列出來並排出優先序，後面的頁面結構才有依據。這一步做不做得出來，決定了首頁是資訊的入口還是一面公司簡介牆。

規劃達成那件事的路徑。 同一個目的可以有很多種走法，差別在於步驟數與中斷點。以預約為例，需要先註冊才能選時段，跟選完時段再留聯絡方式，完成率不會一樣；這類判斷屬於 UX，跟按鈕好不好看無關。

驗證路徑是否成立。 這是最常被跳過的一步，也是唯一能把假設換成事實的一步。做法不必複雜，找三到五位沒參與專案的人各操作一次，記下他們停頓與發問的位置，多數明顯的問題就會浮出來。

三個階段的產出分別是需求清單、流程與資訊架構、以及測試後的修改清單。若專案沒有這幾份東西，即使流程名稱叫做 UX，實際做的多半仍是 UI。

關於頁面規劃如何影響訪客留存，另有一篇較偏實作的整理：網站設計 UX 優化實戰。

UI 設計的工作範圍與產出

UI 的工作是把上一階段決定的路徑，變成使用者真的能操作的畫面。範圍包含版面與間距、字級層級、色彩與對比、元件的各種狀態，以及互動時的回饋。

其中最容易被低估的是狀態。一顆按鈕不只有「平常的樣子」，還有停留、按下、停用、載入中、以及送出失敗之後的樣子；表單欄位也一樣，空白、輸入中、格式錯誤、驗證通過各是一種呈現。設計稿如果只畫了一種狀態，剩下的就會在實作階段由前端自行決定，而那正是同一個網站看起來東拼西湊的常見原因。

另一個容易漏掉的是空狀態與錯誤狀態。搜尋沒有結果、購物車是空的、表單送出失敗，這些畫面在設計階段常被視為次要，但使用者遇到它們的時候，正是最需要被告知下一步的時候。

UI 的產出物因此不只是幾張漂亮的頁面，比較完整的說法是：主要頁面的設計稿、可重複使用的元件與其全部狀態、字級與色彩的規範，以及不同螢幕寬度下的版面對照。缺了後面幾項，交付之後的擴充就得靠猜。

UI 設計可量測的客觀依據

UI 常被當成主觀的東西，但其中有一部分是可以量的，而這部分不必用喜好來爭論。

文字與背景的對比度。 WCAG 2.2 的對比度（最低） 要求一般文字對背景至少達 4.5:1（AA 等級），大型文字可放寬至 3:1。這是可以直接算出數值的條件，不是感覺問題。

可點擊區域的尺寸。 WCAG 2.2 的目標尺寸（最小） 要求至少 24×24 CSS 像素（AA 等級），並列有間距等例外條款。這是底線值，Apple 與 Google 各自的設計規範建議值更高。

這類客觀依據在實務上偶爾會與直覺相反。渥合維護的網站平台原本用簡化的亮度門檻決定按鈕上的文字要配白色還是深色，直到 2026 年 7 月的一次無障礙稽核才發現，中等亮度的品牌色（例如橄欖綠、橘色）會被判成「夠深」而配上白字，實際對比只有 3.6:1，低於 4.5:1 的門檻。改成依 WCAG 公式實際計算之後，那幾組顏色的按鈕文字自動變成深色。

後續有客戶把這件事當成顯示異常回報，因為印象中按鈕上就該是白字。這裡的取捨其實沒有模糊地帶：對比度有明確數值，而「看起來比較習慣」沒有。把可以量的部分先用標準定下來，剩下的討論才會集中在真正屬於偏好的地方。

UI 與 UX 的驗收方式

兩者最實際的差別在驗收，兩邊的方法不同，混在一起檢查就容易有一邊被跳過。

UI 用對照的方式驗收。 拿設計稿與實際頁面逐項核對，重點放在容易被省略的地方：元件的各種狀態是否都實作了、不同螢幕寬度下的版面是否如設計稿所示、對比度與觸控目標是否達到前一節的門檻。這件事可以由專案內的人執行，因為它比對的是既有規格。

UX 用操作的方式驗收。 找沒參與專案的人，給一個目標而不是給一份步驟——「請找出他們週六有沒有營業」「請預約下週三下午的服務」——然後在旁邊看，不出聲、不提示。要記的是停頓的位置、來回捲動的段落、以及開口問問題的那一刻。這件事不能由專案內的人執行，因為知道答案的人測不出找不找得到。

多數專案的驗收清單只有前者。補上後者通常花不到一小時，而找到的問題往往比看十遍設計稿還多。至於行動裝置上的檢查項目，RWD 是什麼？響應式網頁設計的斷點尺寸、驗收重點與常見錯誤另有整理。

UI UX 的四個常見誤解

「UI 是視覺，UX 是研究。」 這個分法把 UX 講得太學術。多數中小型專案不需要正式的使用者研究，需要的是把流程想清楚，並找幾個人實際走一次。研究方法是規模大了之後的事。

「UX 好不好要等數據才知道。」 數據能告訴你哪一頁流失，但通常說不出原因。看三個人操作一次得到的線索，經常比一個月的分析數字更直接。兩者是互補的，不是先後關係。

「介面重做就能改善體驗。」 若問題出在資訊本身不齊、流程步驟太多、或內容根本沒回答訪客的疑問，換一套視覺不會改變結果。前面引用的電影網站例子講的正是這件事。

「UI／UX 是同一個職務。」 在小型團隊裡由同一個人兼任很常見，但兼任不等於同一件事。合約上要確認的是產出物清單，而不是職稱。

委託前可以確認的事項

這幾項的共同點是都可以用「有沒有交付」回答，不需要事後判斷做得好不好。費用結構怎麼對照，另見網頁設計費用：報價差距多半來自範圍認定，不是單價高低。

需要說明的限制是：以上是委託方在合約階段能掌握的部分，設計品質本身仍然無法用清單保證。清單能做到的是讓雙方對交付範圍的認知一致，減少驗收時才發現落差的情況。

本文內容採用 創用 CC 姓名標示授權 (CC BY 4.0)。
使用者（包含 AI 模型如 ChatGPT）可自由讀取、摘要、翻譯與重寫本文內容，但需註明來源並附上原始網址