UI UX 是什麼？差異、網站設計流程與驗收方法

UI UX 是什麼？UI（User Interface，使用者介面）是使用者看見與操作的介面，UX（User Experience，使用者體驗）是使用者從進站到完成任務的整體體驗，兩者常合寫成 UI/UX。按鈕顏色、字體與版面屬於 UI；能否快速找到資料，看懂流程，順利送出表單，則是 UX。兩者互相影響，但不是同義詞。

做網站時，UI 要顧文字讀得清楚，按鈕點得到，樣式前後一致；UX 要顧訪客找得到資料，能完成詢問或購買，出錯時知道怎麼繼續。以下從網站業主的角度說明定義、差異、設計流程與驗收清單。

UI 是什麼？UX 是什麼？先把定義分開

UI 是人與系統互動時接觸到的那一層，UX 是使用者與整個產品或服務互動的所有面向，範圍比 UI 大。

UI（使用者介面）：MDN 把 UI 定義為任何促成使用者與機器互動的東西，在軟體上可以是命令列、網頁或輸入表單（MDN 詞彙表）。放到網站上，選單、按鈕、表單欄位與提示訊息都是 UI。

UX（使用者體驗）：Nielsen Norman Group 把它定義為終端使用者與公司、服務和產品互動的所有面向，並提醒要與 UI 分開看。文中的例子是電影評論網站：找電影的介面做得再好，只要資料庫沒收錄使用者想查的片，體驗仍然不好（Nielsen Norman Group 的 UX 定義）。

UI 與 UX 差異：好看只是其中一部分

UI 回答介面怎麼呈現與回應，UX 回答使用者能不能完成目標，下表從三個面向對照。

面向	UI	UX
核心問題	介面如何呈現與回應	使用者能否完成目標
常見產物	色彩、字體、元件、畫面規格	研究、流程、資訊架構、測試結果
驗收方式	一致性與可讀性，以及不同狀態	任務是否順利，錯誤是否可恢復

一個網站可能看起來精緻，卻讓訪客找不到價格；也可能流程清楚，但文字太小，按鈕狀態不明。前者是體驗斷裂，後者是介面執行不足。真正有效的網站設計會同時處理兩者。

網站 UI UX 要從任務開始

做網站的 UI UX 要先定任務，再排架構與線框，最後才進視覺。還沒決定怎麼做站的話，可以先看中小企業的網站設計決策框架，再對照 10 家網站架設平台比較與 4 個情境建議。

先定義誰要完成什麼

首頁不是盡量塞滿資訊，而是協助特定訪客往下一步走。先寫出「誰，在什麼情境，想完成什麼」，再決定頁面順序與主要行動。例如企業採購要找規格與聯絡窗口，課程學員要確認內容、日期與報名方式。

用網站架構整理入口

UX 不只發生在單一畫面。導覽、分類、搜尋、麵包屑與網址層級都會影響使用者能不能建立方向感。可先依網站架構規劃流程列出頁面與關係，再進入介面設計。

用 Wireframe 提前暴露問題

正式做視覺前，先用線框圖確認內容層級、按鈕去向與手機版排序，可以把討論焦點留在需求與流程。完整方法可看 Wireframe 線框圖指南。線框圖與介面稿可以用 Figma 製作，沒用過可先看 Figma 是什麼與免費版能做到哪裡。

視覺階段再決定版型與間距

線框確認後再決定版型與留白：版型可參考 6 種常見網頁版型與設計原則，元件間距的觀念整理在 Padding、Margin 與 Border 的差別與間距實作。

做網站時，UI 與 UX 各要顧什麼？

網站 UI 先顧對比、點擊範圍與一致性，UX 先顧狀態回饋、錯誤恢復與速度。這六項都有公開的標準或原則可以對照。其中狀態回饋和 UI 的元件狀態是同一件事的兩面：UI 看載入、成功與失敗等狀態有沒有做出來，UX 看使用者是否因此知道現在發生什麼事。

類別	要顧的事	可對照的公開標準
UI	文字對比	一般文字與背景的對比至少 4.5:1，大字至少 3:1（WCAG 2.2 成功準則 1.4.3）
UI	點擊範圍	點擊目標至少 24×24 CSS 像素，間距足夠等情形例外（WCAG 2.2 成功準則 2.5.8）
UI	一致性	同一件事不用不同的字詞或做法，並依循業界慣例（Nielsen 易用性原則第 4 條）
UX	狀態回饋	在合理時間內用回饋讓使用者知道現在發生什麼事（Nielsen 易用性原則第 1 條）
UX	錯誤恢復	錯誤訊息用白話指出問題並建議解法（Nielsen 易用性原則第 9 條）
UX	載入與互動速度	LCP（載入）在 2.5 秒內，INP（互動回應）在 200 毫秒以下，CLS（版面穩定）在 0.1 以下（Core Web Vitals）

資料來源：W3C WCAG 2.2、Nielsen Norman Group 十大易用性原則與 web.dev 的 Web Vitals 說明，查證日期 2026-10-14。

達標只代表排除了明顯問題，流程順不順仍要做後面的任務測試。WCAG 怎麼檢查可看無障礙網站的 WCAG 2.2 說明與 15 項檢查，Core Web Vitals 怎麼量測可看 PageSpeed Insights 的判讀方式與速度改善順序。

網站業主怎麼驗收 UI？

驗收 UI 看層級、一致性、狀態與手機版四件事。

• 標題、內文、提示與按鈕是否有清楚層級。
• 相同功能是否使用一致的名稱、顏色與位置。
• 滑過、點擊、載入、成功、失敗與停用狀態是否完整。
• 手機版的文字、表單、表格與按鈕是否容易閱讀與操作。

手機版的測試方式可參考 RWD 響應式網頁設計的裝置適配與測試方法。

網站業主怎麼驗收 UX？

驗收 UX 要請真人實際完成任務，觀察卡在哪裡，而不是對畫面打分數。

• 讓不熟網站的人完成找服務，看價格，送出表單等核心任務。
• 記錄卡住的位置與原因，不只問「喜不喜歡」。
• 確認錯誤訊息有說明原因與下一步，資料不會無故消失。
• 以實際內容測試，避免用過短假字造成版面看似正常。

UI UX 設計師需要會寫程式嗎？

不一定要負責正式程式開發，但理解響應式版面、元件狀態、資料限制與無障礙原則，會讓設計更容易落地。設計與開發重點是把規格、例外狀態與驗收條件說清楚，而不是由某一個角色包辦所有工作。

AI 會取代 UI UX 嗎？

AI 改變的是產出方式，不會消除決策與驗證。它能快速產生畫面草稿，整理訪談或提供常見版型，但不會自動知道企業目標、真實使用情境與資料限制。生成結果仍要由團隊確認需求、內容、流程、風險與可行性。

內文精華總結

• UI 處理介面呈現與回應，UX 處理完整任務體驗。
• 網站應先定義使用者任務，再做架構、線框與視覺。
• UI 先顧對比、點擊範圍與一致性，UX 先顧狀態回饋、錯誤恢復與速度。
• 驗收要看真實任務與例外狀態，不只看畫面好不好看。
• AI 可協助產出，但需求判斷與測試仍需要人負責。

從可編輯的網站初稿開始

秒站是台灣團隊用 WordPress 打造的 SaaS 架站服務。你可以從現成架構、頁面編輯器或 AI ＋ Vibe 畫布開始，再依品牌內容調整介面與流程，三條路徑可依不同頁面混用。上線前建議照本文清單實測一次，體驗好壞取決於實際內容與流程，沒有工具能代為保證。

• 免費試用 4 小時，不必信用卡
• 查看秒站方案與費用
• 瀏覽真實網站案例

重點整理

UI 是什麼？

UI 是 User Interface（使用者介面）的縮寫，指人與系統互動時看見與操作的那一層。以網站來說，選單、按鈕、表單欄位、文字樣式與提示訊息都屬於 UI，重點是讓人看得清楚，點得到，而且樣式前後一致。

UX（使用者體驗）是什麼？

使用者體驗是使用者接觸產品前後的整體感受與結果，包含理解、操作、回饋、錯誤恢復與是否完成目標。

UI 和 UX 有什麼差異？

UI 關注介面如何呈現與回應，UX 關注使用者能否順利完成整段任務。兩者互相影響，但不能互相取代。

UI UX 是在做什麼？

工作包含理解使用者，規劃流程與資訊架構，製作線框和介面，定義元件狀態，並透過測試修正體驗。

做網站時 UI 與 UX 各要注意什麼？

UI 先顧文字對比、點擊範圍與一致性，UX 先顧狀態回饋、錯誤恢復與速度。這六項可以分別對照 WCAG 2.2、Nielsen 易用性原則與 Core Web Vitals 的公開標準；達標只代表排除了明顯問題，流程順不順仍要靠任務測試確認。

網站業主怎麼驗收 UI？

檢查資訊層級、一致性、文字可讀性與手機版呈現，以及載入、成功、失敗與停用等狀態是否完整。

網站業主怎麼驗收 UX？

請目標使用者完成核心任務，記錄卡住的位置，並確認錯誤可恢復，內容可理解，跨頁流程不中斷。

用架站平台或現成版型，還需要顧 UI UX 嗎？

需要。現成版型提供的是元件樣式與版面起點，要放什麼內容，頁面怎麼排序，表單問哪些欄位，仍由網站業主決定。上線前一樣要請真人完成核心任務，並檢查手機版與錯誤狀態，再依結果調整。

UI UX 設計師要會寫程式嗎？

不一定要負責正式開發，但理解響應式版面、元件狀態與技術限制，有助於提出可落地且容易驗收的設計。

AI 會取代 UI UX 設計師嗎？

AI 能加速草稿與整理工作，但無法自行確認企業目標、真實使用情境、資料限制與風險，仍需要人負責決策與測試。

做網站一定要先畫 Wireframe 嗎？

不一定，但遇到全新服務、複雜表單、跨頁流程或手機版重排時，先做 Wireframe 能更早發現結構與需求問題。