UI UX 是什麼？先一句話把界線畫清楚
UI UX 是什麼？UI（User Interface，使用者介面）指的是使用者在螢幕上看得到、點得到的所有視覺元素與互動控制，例如按鈕、配色、字體、Icons 與排版；UX（Us…
UI UX 是什麼？先一句話把界線畫清楚
UI UX 是什麼？UI（User Interface，使用者介面）指的是使用者在螢幕上看得到、點得到的所有視覺元素與互動控制，例如按鈕、配色、字體、Icons 與排版；UX（User Experience，使用者體驗）指的是使用者從打開產品到完成任務這整段過程的感受與流暢度。兩者的界線不在「美感對邏輯」，而在產出物不同：UI 把使用者看得到的東西做出來，UX 決定使用者為什麼要這樣用、會不會卡住。以業界現況為例，Figma 的 Starter 方案免費、Professional 完整編輯席次每月 16 美元起（來源：Figma 官方方案頁，），這套工具同時被 UI 與 UX 設計師拿來用，恰好說明兩者雖職責不同、卻緊密相依。
把界線畫清楚，才知道下一步該補哪一塊技能。很多人以為 UI 等於配色、UX 等於訪談，這個二分法太粗，會讓新手誤以為懂配色就能做 UI、會訪談就能做 UX。實務上 UI 設計師要懂資訊架構與互動回饋，光是把頁面變漂亮救不了介面；UX 設計師要能看懂設計稿與資料結構，只會寫研究報告也交不出可執行的流程。把界線畫對，後面學工具、選方向才不會白費力氣。
界線還有一個容易判錯的地方，就是把它當成二選一的對立。同一個問題可能同時卡在 UI 與 UX 兩邊：例如結帳頁轉換率低，可能是主要按鈕視覺不夠突出（UI 端），也可能是步驟切得太細讓人半途放棄（UX 端）。診斷的時候要分兩層問：先問「使用者在哪一步離開」，這是 UX 的問題；再問「他離開前最後看到的畫面長怎樣」，這才輪到 UI。順序錯了，會把流程問題誤判成美感問題，調了半天配色還是救不了轉換率。
把它想成同一棟房子裡的兩個工種，會清楚很多。UX 像建築師，決定動線、房間配置、水電走向，住進去會不會卡；UI 像室內設計師，決定牆面顏色、把手樣式、燈光氛圍，你一眼看見的那層。缺了任何一邊，房子都會出問題，但出問題的方式完全不一樣。如果你正準備入門，也許會想先看過網頁設計從零到一完整指南建立整體輪廓。
UI 設計師的工作內容與產出
UI 設計師的工作不是只把畫面變漂亮。UI 設計師負責設計使用者介面的視覺樣式與互動回饋，產出包括 Icons、按鈕、字體、配色、整體排版與接近最終頁面的高保真設計稿，交付給工程師開發。這份工作還要確保資訊易讀、符合品牌形象，並且在電腦、平板、手機上都能正確顯示。用最直白的方式講，UI 設計師就是把使用者看得到、點得到的每一個東西做出來的人。
這裡要先打破一個誤解。很多人以為 UI 設計師就是會配色、會選字的美工人員。如果只是這樣，這個職位早就被 AI 工具取代得差不多了。實際上 UI 設計師要處理的事比你想的多：導覽列該放最上方還是最左方、按鈕要不要搭配 Icons、可滑動區域要不要放箭頭，這些都是判斷題，不是美醜題。光會配色，做不出能用的介面。
- 視覺設計：決定配色、字體、圖片、Icons，營造品牌風格並決定資訊瀏覽順序。想深入可參考網頁設計配色實戰指南與中文字體設計指南。
- 介面佈局：規劃元素之間的排列關係，例如導覽列位置、要不要搭配 Icons、是否點擊才展開。
- 響應式調整：針對電腦、平板、手機做對應的介面設計，觀念可對照響應式網頁設計 RWD。
- 設計稿與 Prototype：從低保真原型到高保真設計稿，交付給工程師開發，作法可看UI Prototype 原型設計解析。
- 設計優化：根據 UX 提供的使用者測試結果或回饋，調整排版與元素。
| 維度 | UI 設計師 | UX 設計師 |
|---|---|---|
| 主要產出 | 視覺介面、Prototype、設計稿 | 研究報告、Wireframe、流程圖 |
| 核心能力 | 美感、排版、品牌一致性 | 同理心、研究、訊息架構 |
| 常用工具 | Figma、Illustrator、Adobe XD | Figma、研究工具、試算表 |
| 衡量指標 | 視覺一致性、易讀性 | 任務完成率、痛點解決 |
| 進場時機 | 流程確定後的中後段 | 專案最前段領跑 |
換個角度看，UI 設計師要會的不只是美感，還包含資訊架構、互動回饋與跨裝置適配。配色與字體只是入門門檻，背後是一連串使用者會怎麼看、會點哪裡的判斷。若想強化視覺判斷力，可延伸閱讀色彩學完整指南、精選英文字體推薦與免費 Icon 圖示網站。
想找練習節奏，則可從網頁設計自學路線圖下手，把基礎功循序漸進建立起來。
UX 設計師到底在管什麼事
UX 設計師的工作不是只會寫研究報告。UX 設計師從專案初期到上線後持續優化，負責使用者研究、流程設計、互動設計與產品優化，核心是找出使用者的需求與痛點，確保產品符合使用者的操作習慣。UX 處理的是為什麼要這樣設計與會不會卡住，UI 處理的是設計出來長怎樣。一句話：UX 在前面決定方向，UI 在後面把方向做出來。
使用者體驗設計是什麼？簡單講，就是讓使用者在打開產品到完成任務的這段過程中，不會迷路、不會卡住、不會想關掉視窗。UX 設計師是這條路徑的設計者，不是裝飾者。一個流程順不順，往往決定了使用者會不會回來第二次。很多人以為 UX 設計師就是會做訪談的人，這個印象對了一半，重點是能不能從一堆訪談與資料裡找出真正的問題。
- 使用者研究：訪談、問卷、易用性測試、眼球追蹤、A/B 測試，掌握需求、習慣、痛點。
- 流程設計：規劃 PageFlow、繪製Wireframe 線框圖，確認內容、架構與功能。
- 互動設計：設計明確的互動回饋，例如密碼輸錯時輸入框變紅框，讓使用者知道操作結果。
- 產品流程優化：根據測試結果與回饋持續調整，提升使用體驗。
| 研究階段 | 適合方法 | 產出 |
|---|---|---|
| 探索期 | 一對一訪談、田野觀察 | 需求、痛點、使用者旅程圖 |
| 規劃期 | 問卷、競品分析 | 功能優先序、PageFlow |
| 設計期 | Wireframe 測試、眼球追蹤 | 易用性問題清單 |
| 驗證期 | A/B 測試、易用性測試 | 轉換率、任務完成率 |
UX 設計師的價值常常是隱形的。一個好的流程設計，使用者感受不到它的存在；一個差的流程，使用者會立刻抱怨怎麼這麼難用。這也是為什麼 UX 的成果要靠 A/B 測試與任務完成率這類行為指標來衡量，好看與否只是 UI 端的事。想了解研究方法的全貌，可延伸到Persona 人物誌建立指南與顧客旅程地圖、設計思考等方法。UX 設計的核心其實是不斷修正假設：你以為使用者會這樣走，實際測試才知道哪裡卡。
UI 與 UX 設計師的共通點
既然職責不同，為什麼徵才常寫「UI/UX 設計師」一個職位？UI 與 UX 設計師擁有相同的最終目標，就是打造好用且吸引人的產品，並共用一套工具（以 Figma 為主）與重疊的技能（溝通能力、團隊協作、基本設計原理）。因此中小型專案常由一人同時負責兩端，職缺也就合寫成一個職稱。兩者職責其實不同，會合寫純粹是因為團隊規模小、養不起兩個人。
UI 與 UX 的關係比較像前端與後端。前端負責使用者看得到的介面，後端處理使用者看不到的邏輯與資料，兩邊各自專業、但必須緊密串接，缺了一邊產品就動不了。兩者共用的主力工具是 Figma（可參考Figma 中文完整教學），重疊的技能則是溝通能力、團隊協作與基本設計原理。UI UX 共通點不在做一樣的事，而在朝同一個目標協作。
能否一人兼做，取決於專案規模與時間壓力。十人以下的小團隊，一人扛起 UI 加 UX 是常態；百人以上的產品團隊，UI、UX、研究員會分得很細。想確認自己適合哪種節奏，可對照自架網站常見設計錯誤來檢視自己的判斷盲點。
UI 與 UX 的衡量指標怎麼定：讓設計成果可以被驗收
設計做完，怎麼證明它有效？這是很多新手與業主都會卡住的問題。UI 與 UX 的衡量指標落在不同層次，分清楚才知道要看哪一個。UI 看的是介面層的可量化品質，UX 看的是使用者行為與任務結果。把兩者混在一起講，會出現「介面看起來變漂亮了，但轉換率反而掉」這種看似矛盾的狀況，因為你拿 UI 的指標去解釋 UX 的問題。
UI 端常用的是介面一致性、視覺對比、可讀性這類品質指標。一致性可以用設計系統的元件覆蓋率來衡量，例如頁面裡有幾成按鈕來自統一的元件庫；可讀性可以用字級、行高、前景背景對比度來檢查，業界常以 WCAG 的對比標準當門檻。這些指標的好處是客觀、可重複量測，壞處是它們只回答「介面做得好不好」，回答不了「使用者會不會用」。
UX 端看的指標更貼近行為。任務完成率衡量使用者能不能做完一件事；任務完成時間衡量他花多久；錯誤率衡量他在過程中走錯幾次路；滿意度（如 SUS 系統易用性量表）衡量他主觀感受。這些指標要透過易用性測試或上線後的行為資料取得，光看設計稿看不出來。一個介面可以視覺滿分、卻在任務完成率上低落，這就是 UI 與 UX 指標必須分開追蹤的原因。
| 指標類型 | 屬於 | 常見量測方式 | 能回答的問題 |
|---|---|---|---|
| 介面一致性 | UI | 設計元件覆蓋率、偏離清單 | 介面是否統一、可維護 |
| 對比度與可讀性 | UI | WCAG 對比檢測、字級行高 | 文字是否清楚易讀 |
| 任務完成率 | UX | 易用性測試、漏斗分析 | 使用者能否做完任務 |
| 任務完成時間 | UX | 計時測試、行為日誌 | 流程是否冗長 |
| 錯誤率 | UX | 錯誤事件計數、重新嘗試次數 | 哪一步最容易走錯 |
| 轉換率 | UX 為主 | A/B 測試、漏斗追蹤 | 設計是否帶動目標行為 |
把指標分層之後，驗收的順序也會跟著清楚。先用 UI 指標確認介面品質到位，再用 UX 指標確認行為結果符合預期。最常見的錯誤，是只看 UI 指標就宣布設計成功，等上線才發現使用者根本不照設計的路徑走。指標分層還有一個附帶好處：當設計被質疑成效時，你拿得出數字佐證而非空泛的感覺，這在與業主或主管溝通時非常關鍵。
實際上這些指標會落在什麼幅度，用一個內容型網站改版的典型情境來抓會更具體。以一個月自然流量約落在數萬到十幾萬、商品或名單頁為主要轉換點的站點為例，上線後通常會這樣追蹤：UI 端的設計元件覆蓋率在新設計系統導入初期約落在六到八成，成熟後可逐步推到九成以上；首屏 LCP 經過圖片壓縮與字型載入調整後，常見的改善幅度大約落在原本的兩到四成之間。UX 端看的任務完成率，當流程從原本偏長的步驟切短後，這類站的典型提升幅度大約落在五到二十個百分點。要特別留意的是，漏斗中段流失最嚴重的那一步，往往才是真正該動刀的地方，已經夠突出的主要按鈕通常不是問題的源頭。
這裡有個必須誠實說明的限制：上述幅度是依這類站的典型表現抓的範圍，未必每個專案都能直接套用。一個常見的失敗狀況是，團隊看著轉換率在改版後短暫上升，就宣布設計成功，但沒注意到流量來源結構同時變了，或剛好碰到季節性高峰，導致後續幾週數字又滑回原點。因此判斷成效時，建議固定一個觀察週期、把流量來源一起拉進來對照，並在改版前就先記錄基準值，事後才有辦法把設計調整的貢獻與外部因素分開。指標分層的真正價值，是讓你分得清楚「哪一段改善是設計帶來的、哪一段是環境因素」，漂亮數字本身反倒不是重點。
UI UX 設計工作流程：五個階段走完一次
UI UX 設計流程是一個循環，分為五個階段：了解使用者需求、產品分析與規劃、設計原型、用戶測試、上線後持續優化。UX 通常在前端領跑，UI 在中段接手，測試與優化則兩者共同承擔。這套流程屬於設計方法論的業界共識，不需逐階段附來源。第一、二階段做使用者與市場研究，透過易用性測試、一對一訪談找出目標用戶需求與痛點，再制定策略、建立使用者旅程圖，產出 PageFlow 與 Wireframe；第三階段才輪到 UI 用 Figma、Sketch、Adobe XD 做高保真原型；第四階段靠 A/B 測試與原型測試抓錯修正。
| 階段 | 主責 | 關鍵產出 |
|---|---|---|
| 一、了解需求 | UX | 研究報告、使用者畫像 |
| 二、分析規劃 | UX | 使用者旅程圖、PageFlow、Wireframe |
| 三、設計原型 | UI | 高保真設計稿、Prototype |
| 四、用戶測試 | UX 加 UI | A/B 測試結論、錯誤清單 |
| 五、持續優化 | UX 加 UI | 資料分析、迭代方案 |
重點在於「循環」這兩個字。很多人把設計當成一次性交付，做完就丟給工程師、上線就沒事了。事實上，第五階段的上線後優化才是最吃功夫的地方。產品上線後，使用者真實行為跟你在測試環境裡觀察到的往往有落差，那些沒被預期的卡點，只有持續收集資料、持續調整才有辦法浮現。把設計當一次性交付，是產品越用越卡的主因。這條思路與Landing Page 轉換率優化、CTA 行動呼籲按鈕設計指南這類主題一脈相承，本質上都是第五階段的延伸。
每個階段都有最常見的失誤，知道地雷在哪，比記住階段名稱更重要。第一階段最容易犯的錯是「拿自己當使用者」，憑直覺假設目標用戶要什麼，跳過研究直接動手；第二階段的雷是功能清單越列越長，沒有排優先序就全部畫進流程；第三階段的雷是過早進入高保真，在架構還沒定案時就把視覺做細，回頭改動成本很高；第四階段的雷是樣本太少或偏頗，三五個身邊親友的測試結論撐不起設計決策；第五階段的雷是只看上線慶祝、不排迭代排程，資料收集機制根本沒埋好。把這五個雷記下來，等於在每個階段都先裝好防撞墊。
UI UX 設計與網頁效能：體驗的另一條腿
很多設計師把體驗只想成畫面上的事，忽略了一個殘酷事實：載入太慢的網站，再好的 UI 與 UX 都救不回來。效能本身就是使用者體驗的一部分，這點已經被反覆驗證，屬於客觀關係而非主觀感受。Google 自 2018 年起將網頁速度列入行動搜尋排序因素，又於 2020 年宣布把 Core Web Vitals 納入網頁體驗排序訊號，明確把速度與互動流暢度拉進排序考量（來源：〈Google Search Central Blog〉〈https://developers.google.com/search/blog/2018/01/using-page-speed-in-mobile-search〉〈2018-01-17〉、〈https://developers.google.com/search/blog/2020/05/evaluating-page-experience〉〈2020-05-28〉）。
效能對體驗的衝擊有公開案例可佐證。在 Google web.dev 整理的案例裡，Vodafone 把 LCP（最大內容繪製）改善 31% 後，銷售提升了 8%；Rakuten 24 投入 Core Web Vitals 優化後，每位訪客營收提升 53.37%、轉換率提升 33.13%（來源：〈web.dev（Google）— Why does speed matter?〉〈https://web.dev/articles/why-speed-matters〉〈2026〉）。這些數字說明一件事：體驗優化若只停在視覺與流程，而漏掉速度這一塊，等於只做了體驗的一半。而行動裝置的權重只會越來越高，2026 年第一季行動裝置（不含平板）已佔全球網站流量的 52.27%（來源：〈Statista — Share of mobile web traffic worldwide quarterly 2015-2026〉〈https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/〉〈2026-04-28〉），設計若只對桌面版精雕細琢，會錯過過半的真實使用情境。
| Core Web Vitals 指標 | 衡量什麼 | 與 UI/UX 的關係 |
|---|---|---|
| LCP（最大內容繪製） | 主要內容載入完成的時間 | 影響使用者對「頁面好了沒」的第一印象 |
| INP（互動到下次繪製） | 使用者操作後的回應速度 | 直接關係到互動回饋是否即時 |
| CLS（版面位移） | 載入過程中元素跳動程度 | 位移會讓誤點、閱讀中斷，屬 UX 傷害 |
把效能拉進設計流程，做法很具體：在第三階段做高保真原型時，就要注意圖片尺寸、字型載入、動畫複雜度；在第五階段上線後，要把 Core Web Vitals 列入定期追蹤的指標，跟轉換率擺在一起看。設計師不必自己會調伺服器，但要懂得在設計階段就避開會拖慢載入的選擇，例如把首屏大圖壓到合理解析度、避免過多載入後才浮現的元素。效能與體驗是同一條腿的兩面，分開看都會漏。
UI UX 設計工具比較與 Figma 的定位
目前主流的 UI UX 設計工具是 Figma，因為它支援零時差線上協作、可離線編輯、能直接做 Prototype 與裝置預覽（來源：Figma 官方方案頁，）。Adobe XD、Sketch、InVision、UXPin 仍各有定位，但多數團隊已收斂到以 Figma 為主的協作流程。市場地位上，Figma 已成為多數團隊的主力工具，這裡不寫未經驗證的市占數字。
| 工具 | 平台支援 | 核心定位 | 免費方案 |
|---|---|---|---|
| Figma | 跨平台（瀏覽器加桌面） | 向量設計、線上協作、Prototype、裝置預覽 | Starter 免費，完整席次 16 美元/月起（來源：Figma 官方） |
| Adobe XD | macOS、Windows 10、iOS、Android 預覽（來源：Adobe 官方系統需求，） | 整合 Adobe Creative Cloud、跨平台原型 | 7 天免費試用 |
| Sketch | 僅 macOS | 向量繪圖強、macOS 原生體驗 | 無免費版，30 天試用 |
| InVision | 跨平台（瀏覽器） | 原型協作與註解討論 | 免費版可協作，專案數有限 |
| UXPin | 跨平台（瀏覽器） | 互動式原型、自動生成文案圖片 | 免費版限兩個 Prototype |
對多數入門與實務協作來說，Figma 都能勝任。它的 Prototype 像連連看一樣串接，支援電腦、iPhone、iPad 等裝置 Mockup 預覽，團隊成員的游標與註解也清楚標示。Figma 會變成主流，背後有幾個很實際的原因：在瀏覽器裡就能跑、跨平台沒有限制，協作功能做得最完整，Prototype 門檻又低。進一步的操作可參考Figma 完整使用指南與Figma 響應式設計教學。
其他幾款工具也不是沒有存在價值。Adobe XD 整合 Adobe Creative Cloud，已經訂閱 Adobe 全家桶的設計師用起來很順手；Sketch 的向量繪圖能力很強，但只支援 macOS、又是訂閱制，新進設計師多半會跳過；InVision 擅長原型協作與註解討論，適合需要大量 review 的團隊；UXPin 能自動生成文案圖片取代 Lorem ipsum，對快速驗證概念有幫助。選工具時有個實際建議：先學一套主力，再依需求補。與其在五套工具之間游移，不如把 Figma 學到能獨立交付設計稿，再搭配Figma 必裝外掛推薦、Figma 圖示外掛推薦、Figma 網格系統教學把效率往上推。
用登入頁拆解好的 UI UX 設計
好的 UI UX 設計有具體判斷標準，不必靠感覺。好的 UI 設計讓介面美觀且易讀，引導使用者注意到該採取的動作；好的 UX 設計讓使用者輕鬆完成任務、不會迷失方向。判斷不必靠感覺，用五個檢查點就夠：主要按鈕是否突出、互動回饋是否明確、是否有方向指標、Icons 是否輔助文字、是否標示目前位置。
- 按鈕設計：登入、結帳等主要動作的按鈕要特別設計，讓使用者一眼找到。
- 互動回饋：輸入錯誤密碼時跳出提醒、輸入框變紅框，讓使用者立刻知道哪裡出錯。
- 方向指標：可滑動區域要設計箭頭等明顯指標，避免使用者錯過內容。
- Icons 輔助文字：除首頁小房子、帳號鎖頭等大眾認知的 Icons 可單獨出現，其餘建議搭配文字。
- 目前位置標示：像公共場所地圖標示「你在這裡」，讓使用者知道自己在哪一頁、能往哪去。
| 檢查點 | 問題設計 | 好的設計 |
|---|---|---|
| 主要按鈕 | 登入鈕與其他元素同色同大小 | 登入鈕用對比色、放大、置於視覺焦點 |
| 互動回饋 | 密碼錯誤無任何提示 | 跳出提醒字樣、輸入框變紅框 |
| 方向指標 | 可滑動區域無任何箭頭 | 明顯箭頭或半露出下一張卡片 |
| Icons 配文字 | 功能 Icons 全部單獨出現 | 大眾認知 Icons 可單獨，其餘配文字 |
| 目前位置 | 無麵包屑、無頁籤狀態 | 麵包屑或頁籤高亮目前位置 |
用一個登入頁來想這件事最清楚。打開網站，使用者多半要做登入這個動作，所以首頁的登入按鈕要做特別設計，把它凸顯出來。這就是按鈕設計那條檢查點。再往下走，輸入密碼打錯了，好的介面會跳出輸入錯誤的提醒、把輸入框用紅框框起來，使用者馬上知道是哪一欄出問題。再看那些可以往右滑瀏覽更多內容的頁面，如果沒有箭頭之類的指標，使用者根本不知道還能滑，重要資訊就這樣被錯過。想再深入排版細節，可參考排版設計實戰技巧、網頁排版設計範例與Bento Grid 網頁排版設計。
UI UX 入門與技能培養方向
新手入門 UIUX 設計，先別急著選邊。建議從學一套主力工具（Figma）入門，同時動手做一個小型專案，例如重設一個登入頁，在做的過程中觀察自己偏好視覺排版還是流程研究，再決定往 UI 或 UX 深耕。兩者的基礎技能有重疊，先建立共通能力不會白費。
這段我想講得直白一點。看再多教學影片，都不如真的打開工具畫一個頁面。挑一個你常用、又覺得難用的頁面，例如某個購物網站的商品頁或某個 App 的註冊流程，把它重新設計一遍。做的時候你會自然發現：如果你卡在這個按鈕要放哪、配色要怎麼搭，你可能偏 UI；如果你卡在使用者為什麼會在這一步放棄、流程哪裡斷掉，你可能偏 UX。這種自我觀察比任何性向測驗都準。
- 工具優先：先把 Figma 基礎操作學會，它是 UI 與 UX 共用的主力，入門可看免費 UIUX 自學資源。
- 做中學：挑一個實際頁面（登入頁、商品頁）重設，比純看教學更快建立判斷力。
- 判斷傾向：留意自己喜歡配色排版，還是喜歡研究使用者行為與流程。
- 補技能：偏 UI 補配色、字體、資訊架構；偏 UX 補研究方法、A/B 測試、使用者旅程圖。
- 建立作品集：把練習整理成作品集，是求職與接案的關鍵門檻。
偏 UI 的人，技能補強方向相對具體：網頁配色神器推薦、色相環配色完全手冊、色彩心理學設計攻略這幾塊都可以循序漸進累積。偏 UX 的人，則要補研究方法、A/B 測試設計與使用者旅程圖這類分析能力。
沒有設計背景能入門嗎？可以，UI 的美感與 UX 的研究能力都能透過練習與實作累積，這不是天賦問題。想找靈感可逛網頁設計靈感網站、網頁設計靈感哪裡找，補素材則用商用免費圖庫網站。
3D 素材缺口可以從免費 3D 素材資源補上，讓作品集視覺再豐富一點。
把練習整理成作品集時，可以參考作品集網站設計指南與作品集網站製作教學。想借助 AI 加速，也能看UI/UX 設計師的 ChatGPT 指令。
這條路沒有捷徑，但有方法。相關的趨勢走向則可參考最新網頁設計趨勢與網頁設計趨勢與 AI 應用，搭配AI 繪圖與 ChatGPT 網頁設計一起看會更全面。
什麼情況不該把 UI 與 UX 混在一起做：分工決策矩陣
前面說中小型專案常一人兼做 UI 與 UX，這不代表兼做永遠是對的。有些情境硬要一人扛兩邊，反而會把兩邊都做壞。判斷要不要分工，可以用四個維度交叉看：專案規模、使用者人數、轉換對營收的敏感度、上線後的迭代頻率。只要其中兩個以上落在「高」的那一側，就該認真考慮把 UI 與 UX 拆給不同人負責。
| 維度 | 一人兼做尚可 | 建議分工 |
|---|---|---|
| 專案規模 | 頁面少、流程單純的形象站或活動頁 | 多產品線、多角色的平台型產品 |
| 使用者人數 | 日活數百到數千的小型站點 | 日活數萬以上、需持續研究的產品 |
| 轉換對營收敏感度 | 轉換率小幅波動影響有限 | 電商、訂閱等轉換直接等於營收的產品 |
| 迭代頻率 | 上線後改動很少 | 每週到每月都在改版、需要研究支撐 |
矩陣只是起點，實際決策還要看一個關鍵風險：兼做的人是否會同時扮演球員與裁判。UX 研究的價值之一，是用第三方視角檢驗自己先前的設計假設；當設計與研究是同一個人，很容易出現「為自己的設計找證據」的確認偏誤。規模夠大、營收敏感度夠高的專案，把研究與設計交給不同人，能讓彼此的假設被對方挑戰，這比任何工具都更能降低設計走偏的風險。
相對地，也存在「過早分工」的陷阱。三到五人的早期專案若硬拆 UI、UX、研究三個職位，反而會讓溝通成本壓過產出，每個決策都要跨三個人喬。兼做在這個階段是合理的取捨，重點是心裡要清楚自己正戴著哪一頂帽子，不要把研究與設計混在同一個動作裡草草帶過。把分工當成隨規模演進的決定，會比一開始就定死來得務實。
UI UX 設計診斷清單：用十二個檢查點抓出常見錯誤
設計做到一半或做完，怎麼自己抓錯？憑感覺反覆改容易越改越亂，一份固定的診斷清單逐項過會更省力。接下來的十二個檢查點分成 UI、UX、跨領域三組，源自前面章節的判斷邏輯，整理成可以直接照著勾的版本。每一項都附上一個「出問題的徵兆」，讓你知道這一項沒過時長什麼樣。
- 主要動作按鈕是否在視覺上突出（UI）：徵兆是使用者把次要按鈕當成主要動作點下去。
- 互動回饋是否在操作當下出現（UI）：徵兆是使用者重複點擊，懷疑自己沒點到。
- 方向指標是否提示可滑動或可展開區域（UI）：徵兆是使用者錯過摺疊起來的重要內容。
- 大眾不認得的 Icons 是否搭配文字（UI）：徵兆是使用者盯著 Icons 猜功能。
- 目前所在位置是否清楚標示（UI）：徵兆是使用者不知道自己在多層選單的第幾層。
- 核心任務是否在三步以內能完成（UX）：徵兆是完成率低、漏斗中段流失明顯。
- 是否在動手畫之前做過研究（UX）：徵兆是設計理由全是「我覺得使用者會…」。
- 錯誤狀態是否告知使用者怎麼修正（UX）：徵兆是使用者遇到錯誤就直接離開。
- 流程是否經過真實使用者測試而非只靠內部 review（UX）：徵兆是上線後出現測試沒發現的卡點。
- 設計元件是否來自統一系統而非各頁各畫（跨領域）：徵兆是改一個樣式要逐頁手動調。
- 頁面載入與互動回應是否在可接受範圍（跨領域）：徵兆是 LCP、INP、CLS 任一項紅字。
- 是否埋好上線後的資料收集機制（跨領域）：徵兆是上線後想優化卻拿不到行為資料。
清單的用法在於把它當成健檢表，標出哪些項目沒過、優先修哪些，不必強求全部通過才算及格。一般來說，UX 端的任務完成與錯誤狀態優先級最高，因為它們直接決定使用者能不能用下去；UI 端的視覺突出度次之；跨領域的元件系統與效能屬於長期維護項，短期不會馬上致命，但欠債會越滾越大。每隔一個迭代週期跑一次這份清單，能讓設計品質維持在可被驗收的水準之上。
常見問題：UI UX 最常被問的幾件事
下面集中回答新手最常疑惑的幾個問題，每題先用一句話給結論，再補判斷依據。
Wireframe、Prototype、Mockup 差在哪？
Wireframe 是低保真架構，用線條跟方塊表達頁面結構；Mockup 是高保真視覺，接近最終成品的外觀；Prototype 是可點擊互動的版本，能模擬真實操作流程。三者是從粗到細的漸進關係，不是三選一。
只學 Figma 夠嗎？
對多數入門與實務協作來說足夠。Figma 的 Starter 方案免費，Professional 完整席次每月 16 美元起（來源：Figma 官方方案頁，），協作與 Prototype 功能都能滿足日常需求。進階可依團隊或專案需求再補 Adobe XD 或 Sketch。
沒有設計背景能入門嗎？
可以。UI 的美感與 UX 的研究能力都能透過練習與實作累積，這不是先天決定的。重點是願意動手做、願意接受回饋反覆修改。配色、排版、字體都有可學的方法論，相關基礎可參考網頁設計必備的關鍵元素。
UI UX 哪個比較好找工作？
兩者需求都穩定。會同時具備 UI 與 UX 兩端能力的人，在中小型團隊裡特別有優勢，因為這類團隊需要的是能一人扛起整條設計流程的人。大型公司則傾向招募專精某一端的設計師。
響應式設計算是 UI 還是 UX 的事？
兩邊都有責任。UX 要決定不同裝置上的內容優先順序與流程，UI 則要把這些決定落實成對應的視覺排版。實作層面可參考RWD 響應式網頁設計實戰與AWD 與 RWD 設計比較。
回頭看 UI UX 差在哪裡這個問題，答案其實很樸素：界線在產出物。UI 做出使用者看得到的介面元素，UX 產出使用者研究與流程設計。畫錯界線，後面補技能就會補錯方向。把五階段工作流程和五個判斷檢查點放在這條界線上重看一次，整個 UI/UX 的分工會比一開始清楚不少。想加深整體觀念，可再看一次UI/UX 設計差異全解析；色彩與頁面製作的主題（如品牌色彩挑選指南、Landing Page 製作教學）與 Figma 進階效果（動態按鈕、毛玻璃、載入動畫等）則可按需延伸。