認識 UI/UX 設計：從定義、工作流到入門路徑的完整指南

搞懂介面與體驗的真實差別,避開新手最常踩的三個誤區

設計師 Riven

2026年5月25日下午 2:56

UI/UX 設計

DESIGN FOUNDATIONS · 2026

▲ 給設計新手的入門整理：UI 是介面、UX 是體驗，兩者一起把產品做得更好

QUICK ANSWER

UI 設計處理畫面層，按鈕在哪、顏色怎麼配、間距怎麼抓；UX 設計處理行為層，使用者來幹嘛、卡在哪一步、怎麼讓他下次再來。兩者本來是同一個設計師在兩個尺度上做同一件事，但市場切成兩個職位以後，多數新手都卡在 UI 端做不到 UX。要入門 UI/UX，需要的不只是 Figma 熟練度，而是看得到使用者行為的眼睛。

最近又收到一封信，問我「UI/UX 設計到底是什麼」。一年下來這種信我大概收到五十封，問的人從大學生到要轉職的工程師都有。

UI/UX 這四個字這幾年被講爛了。求職網站上每三個設計師職缺就有一個寫著 UI/UX 設計師，但真正能交付完整體驗的設計師，能從一張白紙的需求文件，走到使用者真的願意第二次打開 app 的那一段路，市場上不到一成。

設計圈深耕快十年，我看過太多設計師卡在中間。會用 Figma、做得出漂亮的卡片、能套漸層按鈕。但接到「為什麼使用者第二步就離開」這種問題，眼神就開始飄。

這篇要做的事很簡單：把 UI 跟 UX 到底是什麼、為什麼台灣市場常常把它弄混、入門該往哪走，一次講清楚。

CHAPTER 01 · WHAT IS IT

UI 與 UX 到底是什麼

UX 這個詞是 Don Norman 在 1990 年代初期在 Apple 任職時造的。他自己後來在 NN/g 的影片裡親口說過，發明這個詞的原因，是當時的「user interface」太狹隘，沒辦法描述他在做的事。他要處理的不只是介面，而是使用者拿到產品、打開、操作、出問題、找客服、退貨、推薦給朋友的整段體驗。

從一開始，UX 就是個比 UI 更大的概念。UI 是 UX 的一部分。

先搞懂 UI 與 UX 對照圖：UI 是 User Interface 你看得到、點得到的介面，包含色彩、字體、按鈕、排版；UX 是 User Experience 你在使用過程中的感受與流程，包含好不好懂、順不順手、找不找得到、會不會想繼續用

▲ UI 讓產品看起來清楚好看，UX 讓產品用起來自然舒服

用個比喻你會比較有感。UI 是一間餐廳的菜單、桌椅、燈光、餐盤，人眼能看到的所有東西。UX 是你訂位時的順暢度、入座時被招呼的方式、菜出得多快、餐後有沒有人來收盤、結帳要排多久、走出店門時心裡記得什麼，整段體驗。

把這兩件事各自拆開來看，會更清楚它們在管什麼。

UI 是什麼？UI 是使用者直接看到與操作的介面設計，四個核心面向：色彩決定畫面的情緒與辨識度、字體影響可讀性與品牌感、按鈕引導點擊與操作、版面整理資訊層級與視覺節奏

▲ 好的 UI 不只是好看，還要清楚、一致、容易操作

UX 是什麼？UX 是使用者從開始到完成任務時的整體體驗，四個檢查點：好不好懂、順不順手、找不找得到、有沒有感受；對應進入、瀏覽、操作、完成四個階段

▲ UX 關心的不只是畫面，而是整段使用旅程

一個漂亮但難用的 app 是 UI 強 UX 弱。一個介面樸素但每一步都讓你覺得「他懂我」的 app 是 UI 弱 UX 強。最好的產品兩者都強，這也是為什麼這個職位這幾年薪水水漲船高。

UI 與 UX 差在哪裡？一句話記住：UI 是介面，UX 是體驗。UI 聚焦畫面呈現、視覺與互動元件；UX 聚焦使用流程、感受、效率與理解。小例子：按鈕很好看是 UI，按鈕放對位置讓人一眼就知道下一步是 UX。兩者一起把產品做得更好。

▲ 一句話收：UI 是介面、UX 是體驗，兩者一起做才把產品做得更好

CHAPTER 02 · WHY IT MATTERS

為什麼這幾年特別熱

兩個結構性原因。

第一，軟體業變紅海了。十年前一個 app 能上架就是優勢，現在每個品類都有十幾個競爭對手。產品功能拉不開差距的時候，使用體驗就成了唯一的決勝點。Netflix 跟 Disney+ 的內容陣容差不多，但介面流暢度、推薦演算法的精準、跳劇的方便程度，這些藏在細節裡的 UX 決策，最後決定使用者繼續訂閱誰。

第二，矽谷把這個職位的薪資天花板拉得很高。資深 Product Designer 在大廠的 total compensation 可以做到 25 萬美金以上。台灣雖然數字小一個數量級，但 UI/UX 設計師的中位數薪水比平面設計師高出大約一倍，這在十年前是不存在的差距。

背後的邏輯一致：當產品做出來的東西看起來都差不多，誰能讓使用者「再回來一次」，誰就贏。這個能力的供給遠小於需求，所以價格上去。

如果你想往這個方向走，可以先看看趨勢，了解現在介面正在往哪個方向長：2026 UI/UX 設計趨勢全解析。

「當產品功能拉不開差距，使用體驗就成了唯一的決勝點。」

CHAPTER 03 · HOW IT WORKS

UI/UX 設計師一天在做什麼

把這個職位的工作流拆開，大致是五個階段。每一步都會回饋到上一步，不是單向走完就完事。

一個 UI/UX 設計流程：1 理解使用者、先知道對象是誰需求是什麼；2 定義問題、釐清痛點與目標；3 畫線框稿、先安排資訊與版面；4 設計介面、做出視覺風格與互動元件；5 測試與調整、根據回饋持續最佳化。流程不一定完全直線，常常會反覆修正。

▲ 真正的設計不是一次做完，而是不斷修正後更貼近使用者

大部分新手第一次接觸的是第三、四步「畫線框稿」跟「設計介面」，用 Figma 把畫面做出來。但這只佔整個職位 30% 的時間。資深設計師花更多時間在第一、二步研究跟定義問題，以及第五步測試與調整，因為這三步決定了中間做出來的東西要不要重做。重做一次的成本，遠大於前面多花一週做研究。

下面這張圖是 Figma 官方的設計系統介面，展示了「設計介面」階段的真實長相。左邊是元件庫（卡片、圖示），右邊是顏色變數的管理。一個設計師如果連這套東西都還沒建立，後面所有畫面都會手動拉，效率會在第二週就崩潰。

Figma 設計系統介面截圖：左側是 Card/Travel 與 Card/Activity 元件庫，包含旅遊卡片元件與圖示組；右側是 Color libraries 色彩變數管理面板，列出 background-dark、background-lime、text-dark 等具語意命名的色票

▲ Figma 官方的設計系統示範：左側元件庫＋右側色彩變數，這是設計階段最核心的工作畫面

最後一步「測試與調整」是十年前的設計師不太需要做的事——做到 Figma 完稿就交給工程師。現在不一樣，設計師要會用 Dev Mode、寫元件 spec、跟工程師對齊 padding 跟 layout，甚至要看數據判斷使用者卡在哪。

Figma Dev Mode 介面：左側是博物館網站的視覺稿與多名設計師協作游標（Rico、Jane），右側顯示 padding、layout、CSS 規格交付給工程師

▲ Figma Dev Mode 的真實畫面：左邊設計稿、右邊系統產出的 padding 與 CSS spec、中間是多人即時協作的游標。這是「測試與調整」階段的標準工作場景

CHAPTER 04 · GETTING STARTED

入門路徑：從工具到作品集

新手最常問的問題：「我要從哪開始？」

我給的路徑分三階段。每一步都不要跳，跳了會在後面付出更大的代價。

STAGE 01

1–2 個月

把工具吃透

Figma 是現在的市場標準。學會 component、auto layout、variants 三個核心概念，比學一百個快捷鍵重要。這三個是後面所有效率的基礎。

STAGE 02

2–3 個月

臨摹三個你喜歡的 app

不要從零開始想「我要設計一個社群 app」，這是新手最大的陷阱。臨摹 Airbnb、Notion、Spotify 任何一個你天天用的 app 的核心流程，把每一個畫面都還原一次。你會學到的是「為什麼這裡放這個按鈕、為什麼這裡用這種對話框」。

STAGE 03

3 個月以上

做一個有完整 case study 的作品

作品集裡只有漂亮畫面是不夠的，要有「我為什麼這樣做」的決策過程。研究訪談的記錄、wireframe 的迭代、A/B 測試的結果，這些東西比 dribbble 風格的精美 mockup 值錢十倍。

作品集這件事，我之前寫過一篇專門講「面試官會停下來看的設計師作品集只有四種模式」，整理了哪些 case study 結構最有效，可以搭配這篇看：能讓面試官停下來看的設計師作品集，只有 4 種模式。

很多人會問三個月夠不夠。看你怎麼用。一天兩小時、三個月，能做到能找到第一份初階工作的程度。一天八小時、三個月，能做到中階水準。這個職位的學習曲線比視覺設計陡，但天花板高很多。

CHAPTER 05 · LIMITS

新手常踩的誤區

新手常見 4 個誤區：1 只顧好看，畫面漂亮但不知道怎麼用；2 資訊太多，重點不明使用者容易分心；3 按鈕不明顯，不知道哪裡可以點、下一步在哪；4 沒有站在使用者角度，自己覺得合理不代表真的好用。設計不是自我感動，而是幫人解決問題。

▲ 設計實作上的四個常見誤區，每一個都有具體的 before / after 對照

上面這張圖整理的是設計實作層的誤區——做出來的東西好不好用。接下來我要講的是另一層，學習觀念上的三個誤區，剛入門的人最常踩，而且常常自己沒發現。

誤區一：以為「會用 Figma」就是「會做 UI/UX」

Figma 是工具，不是技能。會 Figma 跟會做設計的關係，跟會用 Word 跟會寫小說的關係差不多。新手把九成時間花在練 Figma 操作，是把學徒當師傅。

誤區二：以為 UI 跟 UX 是兩個不同職位

台灣市場確實常常把這兩個職稱分開招，但全世界的好公司都把它合併成一個職位（Product Designer 或 UX Designer）。如果你的職涯目標是去頂尖團隊，要把自己當「兩個尺度上做同一件事」的設計師訓練，不是只做其中一邊。

誤區三：過度執著於視覺風格

新手常常糾結「我要做新擬物還是極簡風」「漸層用對嗎」這種視覺問題。資深設計師糾結的是「使用者第三步為什麼會回上一頁」，這是兩個層級的問題。視覺風格容易學，行為觀察難練。先把難的練起來。

這三個誤區的共同點是「看到的優先」。新手只看得到視覺、看得到工具、看得到職稱，看不到藏在這些東西底下的行為邏輯。如果要從根本上補這一塊，Steve Krug 的《Don't Make Me Think》是我推薦的第一本書，這本書專門訓練「看見行為」的能力：Don't Make Me Think 設計書推薦。

CHAPTER 06 · TAKEAWAYS