--- title: "認識 UI/UX 設計：從定義、工作流到入門路徑的完整指南" slug: what-is-ui-ux-design url: https://rar.design/posts/what-is-ui-ux-design published_at: 2026-05-25 modified_at: 2026-05-25 author: "設計師 Riven" category: "UI/UX 設計" access: public_access --- # 認識 UI/UX 設計：從定義、工作流到入門路徑的完整指南 > 搞懂介面與體驗的真實差別,避開新手最常踩的三個誤區 By **設計師 Riven** - 資深數位產品設計師｜知名線上課程講師 | 2026-05-25 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 是一間餐廳的菜單、桌椅、燈光、餐盤，人眼能看到的所有東西。UX 是你訂位時的順暢度、入座時被招呼的方式、菜出得多快、餐後有沒有人來收盤、結帳要排多久、走出店門時心裡記得什麼，整段體驗。 把這兩件事各自拆開來看，會更清楚它們在管什麼。 ▲ 好的 UI 不只是好看，還要清楚、一致、容易操作 ▲ UX 關心的不只是畫面，而是整段使用旅程 一個漂亮但難用的 app 是 UI 強 UX 弱。一個介面樸素但每一步都讓你覺得「他懂我」的 app 是 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 設計師一天在做什麼 把這個職位的工作流拆開，大致是五個階段。每一步都會回饋到上一步，不是單向走完就完事。 ▲ 真正的設計不是一次做完，而是不斷修正後更貼近使用者 大部分新手第一次接觸的是第三、四步「畫線框稿」跟「設計介面」，用 Figma 把畫面做出來。但這只佔整個職位 30% 的時間。資深設計師花更多時間在第一、二步研究跟定義問題，以及第五步測試與調整，因為這三步決定了中間做出來的東西要不要重做。重做一次的成本，遠大於前面多花一週做研究。 下面這張圖是 Figma 官方的設計系統介面，展示了「設計介面」階段的真實長相。左邊是元件庫（卡片、圖示），右邊是顏色變數的管理。一個設計師如果連這套東西都還沒建立，後面所有畫面都會手動拉，效率會在第二週就崩潰。 ▲ Figma 官方的設計系統示範：左側元件庫＋右側色彩變數，這是設計階段最核心的工作畫面 最後一步「測試與調整」是十年前的設計師不太需要做的事——做到 Figma 完稿就交給工程師。現在不一樣，設計師要會用 Dev Mode、寫元件 spec、跟工程師對齊 padding 跟 layout，甚至要看數據判斷使用者卡在哪。 ▲ 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 新手常踩的誤區 ▲ 設計實作上的四個常見誤區，每一個都有具體的 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 入門前，先想清楚這件事 UI/UX 設計這個職位最大的迷思是「它是個技術工種」。 它不是。它是一個「比一般人更會觀察人」的職業。你要看得到使用者在說什麼跟在做什麼的差距，看得到他為什麼第一步爽快、第二步遲疑、第三步離開。Figma 只是把這些觀察落地成介面的工具。 工具是學得來的。觀察力是練出來的。 新手把順序顛倒過來，先卡在工具，再回頭發現自己看不懂行為，是這個職位上多數人卡關五年的根本原因。 ▲ 好設計不是炫，而是讓人用得自然——當 UI 與 UX 一起做好，產品才會真正好看又好用 如果你才剛開始，把這件事記得：先學看，再學畫。 COURSE · UI/UX 100 種 Figma 設計的方法 從零到一百，用 Figma 學會 UI/UX 完整工作流。元件、自動排版、原型、設計系統一次到位。 ✦ 100 集影片，10+ 小時實戰教學 ✦ Component / Auto Layout / Variants 核心觀念 ✦ 從 0 練到能交付的設計師作品集 查看課程 → SUBSCRIPTION · AIWAKEN AI 覺醒設計應用攻略 AI 工具每週都在更新，我幫你過濾雜訊，只整理對設計師真正有用的應用。 ✦ AI 工具實測與工作流 ✦ 設計師角度 Prompt 技巧 ✦ 每週 AI × 設計新知 查看課程 → FAQ · COMMON QUESTIONS 常見問題 Q：UI 設計師跟 UX 設計師的薪水差別大嗎？ A：在台灣，純 UI 設計師起薪通常落在 4–5 萬，UX 或 Product Designer 通常 5–8 萬。資深的差距會拉開到接近一倍。差別不在工具熟練度，在能不能獨立從研究做到驗證。 Q：沒有設計背景能轉職 UI/UX 嗎？ A：可以，而且這個職位對非設計背景反而友善。工程師、PM、心理系、商管背景轉過來的設計師通常做得不錯，因為他們對行為跟邏輯的敏感度高。需要補的主要是視覺感跟工具，這兩件事相對好練。 Q：要不要先學 Photoshop 跟 Illustrator？ A：不用先學。Figma 已經涵蓋 UI/UX 工作流 95% 的需求。Photoshop 跟 Illustrator 是後期針對特定任務（修圖、印刷）才需要的補充技能，不是入門必要。 Q：作品集要放幾個 case？ A：3 個品質高的 case study，遠勝於 10 個只有 mockup 的作品。每個 case 要包含：問題定義、研究發現、設計決策、驗證結果。這四件事齊全的 case，比 dribbble 風格的精美畫面值錢得多。 Q：UI/UX 設計師會被 AI 取代嗎？ A：被取代的是只會把 wireframe 拉成精美 mockup 的設計師，這部分 AI 已經做得很好。不會被取代的是會做研究、會驗證、會理解使用者真實行為的設計師。AI 是工具，使用者觀察力是技能，工具會貶值，技能會增值。 Q：自學跟上課差別在哪？ A：自學的最大成本是「走錯方向不知道」。你會花三個月練很細的 Figma 技巧，最後發現市場根本不在意。上課的價值不在工具教學，在「有人告訴你下一步要練什麼」。如果你自學三個月還沒方向，這通常就是該找系統化資源的時機。