UI UX 是使用者介面（User Interface）與使用者體驗（User Experience）設計的統稱，UI 關注產品的視覺與互動元素，UX 關注使用者與產品互動的整體感受。 本文從核心差異、設計元素、7 步驟流程、工具比較到台灣薪資行情與自學路徑，提供完整的 UI UX 入門指南。
UI UX 是什麼？一個例子秒懂 UI 與 UX 的差別
想像你走進一間咖啡廳。菜單上的字型、配色、圖片排版、按鈕樣式——這些你「看到」和「觸碰到」的東西，就是 UI（使用者介面）。而你從走進門、找到座位、看懂菜單、順利點餐到拿到咖啡的整個過程是否順暢愉快——這就是 UX（使用者體驗）。
UI（使用者介面）是什麼？
UI 設計（User Interface Design）是指使用者與產品之間的直接互動介面。它涵蓋產品或網站上每一個視覺元素：按鈕的形狀與顏色、字型的選擇、圖標的設計、整體的色彩方案與佈局。
UI 設計師的核心任務是讓這些視覺元素既美觀又直觀，引導使用者自然地完成下一步行動——無論是點擊購買按鈕、填寫表單，還是瀏覽更多內容。
回到咖啡廳的比喻：菜單上用大字標示招牌飲品、用暖色調搭配食物照片、把「立即點餐」按鈕設計得顯眼好按——這些都是 UI 設計的範疇。
UX（使用者體驗）是什麼？
UX 設計（User Experience Design）的範圍更為廣泛，關注的是使用者與產品互動的整體感受。這不僅包括介面的外觀，還包括產品的可用性、操作效率，以及使用者在使用過程中的情感反應。
UX 設計的目標是確保產品不僅能滿足使用者需求，還能提供愉快且高效的使用體驗。UX 設計師需要研究使用者的行為模式、痛點和動機，透過原型測試和迭代來持續改進產品。
繼續咖啡廳的比喻：你是否能在 30 秒內找到想喝的飲品？結帳流程是否只需要兩個步驟？等待時是否有明確的取餐提示？這些「流程是否順暢」的問題，就是 UX 設計要解決的。
UI vs UX 差異比較表
| 比較維度 | UI 設計 | UX 設計 |
|---|---|---|
| 定義 | 產品的視覺呈現與互動元素 | 使用者與產品互動的整體體驗 |
| 核心問題 | 「這個產品看起來如何？」 | 「這個產品用起來感覺如何？」 |
| 焦點 | 色彩、字型、按鈕、圖標、佈局 | 使用者需求、流程順暢度、任務完成率 |
| 目的 | 創造美觀且直觀的介面 | 確保順暢且令人滿意的使用體驗 |
| 主要產出 | 高保真視覺稿、設計系統、UI 規範 | 使用者流程圖、Wireframe、互動原型 |
| 測量標準 | 視覺吸引力、介面一致性 | 使用者滿意度、任務完成率、可用性 |
| 代表工具 | Figma、Webflow | Maze、Hotjar、UserTesting |
| 使用者考量 | 使用者如何「看到」產品 | 使用者如何「使用」產品 |
價格僅供參考，以官網為準
結論：UI 和 UX 缺一不可。 一個介面再美觀，如果操作流程混亂，使用者會覺得「徒有其表」；反之，流程再順暢，如果介面粗糙不專業，使用者也不會想深入探索。兩者必須協同工作，才能創造出真正成功的產品。
UI 設計的核心元素：視覺、互動、布局
掌握 UI 設計的三大核心元素——視覺設計、互動設計、布局與結構——是建立優秀使用者介面的基礎。這三者協同運作，決定了使用者的第一印象和操作直覺。
視覺設計（色彩、字型、圖像）
視覺設計是使用者接觸產品時最先感知的層面，包含三個關鍵要素：
- 色彩：不僅賦予設計美感，還能傳達情感和品牌訊息。例如，藍色傳達信任感（常見於金融類產品），橘色傳達活力與行動力（常見於電商的 CTA 按鈕）。台灣品牌常見的配色錯誤是在同一頁面使用超過 4 種主色，導致視覺混亂——建議遵循「60-30-10」配色法則（60% 主色、30% 輔色、10% 強調色）
- 字型：字型選擇直接影響可讀性和品牌調性。不同的字體風格和大小可以建立清晰的視覺層次，引導使用者的閱讀順序。想深入了解字型搭配，可以參考配色網站中的色彩與字型搭配建議
- 圖像使用：高品質的圖片和圖形能幫助使用者理解複雜資訊，並大幅提升介面的視覺吸引力
互動設計（按鍵、圖標、轉場效果）
互動設計決定了使用者如何與產品「對話」。判斷好的互動設計有 3 個標準：
- 可預測性：使用者點擊按鈕前就能預期會發生什麼
- 即時反饋：每個操作都有明確的視覺或觸覺回應（例如按鈕按下時的顏色變化）
- 容錯性：即使使用者操作錯誤，也能輕鬆撤銷或修正
具體來說，按鍵應該易於識別且反饋明確；圖標應該直觀且一目了然；轉場效果應該提供有意義的導航提示，而不是分散注意力。
布局與結構（網格、對齊、間距）
布局設計是 UI 的骨架，決定了產品的整體秩序感和專業度：
- 網格系統：幫助設計師創建一致且有組織的佈局，維持設計的整體一致性
- 對齊：元素的精確對齊能創造清晰且專業的外觀，提高介面的可讀性
- 間距：適當的邊距和填充能創造「呼吸感」，突出最重要的資訊
你可以透過 Figma 的網格系統和對齊工具來實踐這些佈局原則。想進一步了解佈局設計的基礎，可以參考Wireframe 是什麼這篇教學。
UX 設計的核心原則：研究、思維、測試
UX 設計的三大核心原則——使用者研究、設計思維、可用性測試——構成了一個完整的設計方法論。從理解使用者開始，到驗證設計方案的有效性，這些原則確保產品能真正滿足使用者需求。
使用者研究：了解目標使用者的 3 種方法
深入的使用者研究是所有 UX 設計的起點。以下是三種最常用的研究方法，各有不同的適用時機：
| 研究方法 | 適用時機 | 優勢 | 限制 |
|---|---|---|---|
| 使用者訪談 | 專案初期，需要深入了解動機和痛點 | 能挖掘深層需求和情感 | 樣本數少，耗時較長 |
| 問卷調查 | 需要大量數據驗證假設 | 樣本數大，可量化分析 | 無法追問細節 |
| 觀察法 | 需要了解真實使用情境 | 發現使用者自己都沒意識到的行為 | 需要現場觀察條件 |
這些研究方法的成果會被整理成「使用者人物誌」（Persona）——一個代表目標使用者群體的虛構角色，包含他們的需求、行為模式和痛點，作為後續設計決策的依據。
設計思維：5 步驟解決問題流程
設計思維（Design Thinking）是 UX 設計中最核心的問題解決框架，包含 5 個步驟：
- 同理（Empathize）：透過使用者研究，站在使用者的角度理解他們的需求和感受
- 定義（Define）：將研究發現轉化為明確的問題陳述，例如「使用者在結帳流程中平均放棄率達 70%」
- 發想（Ideate）：針對定義的問題進行腦力激盪，產出多種可能的解決方案
- 原型（Prototype）：快速製作低成本的原型來具象化解決方案
- 測試（Test）：讓真實使用者測試原型，收集反饋並迭代改進
可用性測試：驗證設計有效性的方法
可用性測試是 UX 設計中不可或缺的驗證環節。兩種最常見的測試方法各有適用場景：
- A/B 測試：適合驗證具體的設計變更（例如按鈕顏色、文案措辭），需要較大的流量樣本，能提供量化數據
- 使用者訪談測試：適合探索性的設計驗證（例如新功能的操作流程），樣本數 5-8 人即可發現 80% 以上的可用性問題
Webflow 在可用性測試階段特別有用——它能將設計直接轉化為可互動的網站原型，讓你無需寫程式就能快速部署測試版本並收集使用者反饋。
UI UX 設計師是什麼？工作內容、必備技能與台灣薪資
了解 UI UX 的概念之後，你可能會好奇：UI UX 設計師的日常工作是什麼？需要哪些技能？在台灣的薪資行情如何？這個章節為你完整解答。
UI 設計師 vs UX 設計師：工作內容差異
雖然許多公司會將 UI 和 UX 合併為同一個職位，但兩者的核心工作內容有明顯差異：
UI 設計師的日常任務：
- 製作高保真視覺稿（Mockup）和設計規範
- 建立和維護設計系統（Design System），確保品牌視覺一致性
- 設計圖標、按鈕、表單等互動元素
- 與前端工程師協作，確保設計在實際開發中被準確還原
UX 設計師的日常任務：
- 進行使用者訪談和問卷調查，建立使用者人物誌（Persona）
- 製作使用者流程圖（User Flow）和資訊架構（Information Architecture）
- 建立低保真線框圖（Wireframe）和互動原型（Prototype）
- 規劃和執行可用性測試，根據數據迭代設計
UI UX 設計師必備技能清單
成為 UI UX 設計師需要軟硬技能兼備：
硬技能：
- 設計工具：Figma（業界標準，必學）、Sketch、Adobe Illustrator
- 原型工具：Figma Prototype、InVision、Principle
- 建站工具：Webflow（視覺化建站，無需寫程式）
- 基礎程式概念：了解 HTML/CSS 的基本結構（不需要精通，但能與工程師更有效溝通）
軟技能：
- 同理心：能站在使用者角度思考問題
- 溝通能力：能向非設計背景的利害關係人清楚解釋設計決策
- 批判性思維：能客觀評估自己的設計，接受反饋並持續改進
想深入了解 UI 設計的完整技能樹，可以參考站內的 UI 設計專文。
台灣 UI UX 設計師薪資行情
根據 104 人力銀行和 CakeResume 的公開數據，截至撰文時台灣 UI UX 設計師的月薪行情大致如下：
| 經驗等級 | 月薪範圍（NT$） | 典型職稱 |
|---|---|---|
| 初階（0-2 年） | 35,000 – 50,000 | Junior UI/UX Designer |
| 中階（3-5 年） | 55,000 – 75,000 | UI/UX Designer、Product Designer |
| 資深（5 年以上） | 80,000+ | Senior Designer、Design Lead |
影響薪資的關鍵因素：
- 作品集品質：比學歷更重要，是面試的核心評估依據。如果你正在準備作品集，可以參考作品集範本的製作指南
- 產業別：科技業和金融業的薪資通常高於傳統產業 15-30%
- 技能廣度：同時具備 UI 和 UX 能力的「全端設計師」薪資通常更高
- 工具熟練度：熟練使用 Figma 和 Webflow 已成為多數職缺的基本要求
UI UX 設計流程：7 步驟從零到上線
UI UX 設計並非一次性的工作，而是一個從研究到上線、持續迭代的完整流程。以下 7 個步驟涵蓋了從零開始到產品上線的每個關鍵環節。
步驟 1–2：設計前準備與策劃（使用者研究 + 資訊架構）
步驟 1：設計前準備
- 使用者研究：進行訪談、問卷、觀察，了解目標使用者的需求和行為
- 市場分析：研究競爭對手和市場趨勢，確定設計方向
- 建立使用者人物誌：基於研究資料創建代表性的使用者角色
步驟 2：設計策劃
- 定義需求：確定產品需求和使用者故事（User Story）
- 資訊架構：規劃產品的結構和使用者的導航路徑
新手常見陷阱： 很多初學者會跳過使用者研究，直接打開 Figma 開始畫畫面。這就像蓋房子不畫設計圖就直接動工——最後往往需要大幅返工。即使只花一個下午訪談 3-5 位目標使用者，都能大幅降低後續修改的成本。
步驟 3–4：草圖、線框圖與高保真設計
步驟 3：設計開始
- 草圖和線框圖：用手繪或 Figma 創建低保真度的介面佈局草圖
- 建立原型：將線框圖轉換為可點擊的低保真原型
步驟 4：設計開發
- 高保真設計：根據線框圖創建具體的視覺設計，包括色彩、字型、圖像
- 互動元素：設計按鈕、圖標和其他互動元素
- 動態和過渡：在 Figma 中添加交互效果和動態過渡
低保真 vs 高保真原型的選擇時機：
- 低保真原型（Wireframe）：適合專案初期，快速驗證資訊架構和操作流程是否合理，製作時間短、修改成本低
- 高保真原型（Mockup/Prototype）：適合設計中後期，需要驗證視覺設計和微互動效果，接近最終產品的呈現
步驟 5：測試與迭代（如何收集有效反饋）
使用者測試是整個設計流程中最容易被忽略、卻最能提升產品品質的環節。
5 個使用者測試時最常被忽略的問題：
- 只找「朋友」測試：朋友會因為人情壓力給出過於正面的反饋，應該找真正的目標使用者
- 引導性提問：「你覺得這個按鈕是不是很好按？」會引導答案。改問「你會怎麼完成購買？」
- 樣本數不足：至少需要 5 位使用者才能發現大部分可用性問題
- 只關注負面反饋：正面反饋同樣重要，它告訴你哪些設計決策是正確的
- 測試太晚才做：不要等到高保真設計完成才測試，低保真階段就該開始
步驟 6–7：交付實施與監測優化
步驟 6：交付和實施
- 建立設計系統：確保設計的一致性和可重用性
- 準備設計資產：將圖標、圖像等資產及規範準備好，交付給開發團隊
- 與工程師協作：確保設計在技術實現過程中被準確還原
設計師與工程師交接時的 3 個常見摩擦點： 1. 標注不完整：設計稿缺少間距、字級、色碼等具體數值，工程師只能「猜」。解決方法：使用 Figma 的 Dev Mode 自動產出標注 2. 動態效果描述不清：「這裡要有一個滑入效果」太模糊。解決方法：在 Figma 中建立可互動的原型，讓工程師直接體驗 3. 響應式規則未定義：只提供桌面版設計，沒有說明手機版的佈局變化。解決方法：至少提供桌面、平板、手機三種斷點的設計稿
步驟 7：監測與優化
- 後續評估：產品發布後，持續監測使用者行為數據和反饋
- 持續改進：根據使用者的實際使用情況，不斷對設計進行優化迭代
UI UX 設計工具推薦：Figma 與 Webflow 怎麼選？
在 UI UX 設計領域，Figma 和 Webflow 是兩款最被廣泛使用的工具。它們的定位不同，但在實際工作中經常互補搭配。
Figma 功能特色與適用場景
Figma 是一款基於瀏覽器的協作型介面設計工具，是目前業界的標準設計工具。核心優勢包括：
- 實時協作：團隊成員可以同時在同一份檔案上工作，即時看到彼此的修改
- 組件系統：建立可重用的設計元素，大幅提高工作效率
- 原型製作：直接在 Figma 中建立可互動的原型，無需第三方軟體
- 跨平台：基於網頁的工具，任何作業系統都能使用
適用場景：移動應用 UI 設計、網站視覺設計、設計系統建立、團隊協作原型製作。想深入學習 Figma 操作，可以參考Figma 教學完整指南。
Webflow 功能特色與適用場景
Webflow 是一款視覺化網頁開發平台，讓設計師無需寫程式就能建立專業網站。核心優勢包括：
- 視覺設計工具：像使用設計軟體一樣直接設計網站，所見即所得
- 自動產出程式碼：自動生成乾淨的 HTML、CSS 和 JavaScript
- 響應式設計：輕鬆建立適應不同螢幕尺寸的設計
- 直接發布：設計完成後可直接發布上線，無需額外的開發流程
適用場景：將設計直接轉化為功能性網站、建立互動式網站、快速部署原型進行使用者測試。
Figma vs Webflow 比較表：該用哪一個？
| 比較項目 | Figma | Webflow |
|---|---|---|
| 主要用途 | UI 設計、原型製作、設計系統 | 視覺化建站、將設計轉為網站 |
| 學習難度 | 中等（1-2 週上手基礎功能） | 中高（需理解 CSS 概念，2-4 週上手） |
| 免費方案 | 免費（3 個 Figma 檔案 + 3 個 FigJam 檔案） | 免費（2 個靜態頁面，1,000 次/月瀏覽） |
| 付費方案 | Professional Full Seat NT$512/月 | Basic NT$448/月 |
| 適合誰 | UI/UX 設計師、產品設計團隊 | 設計師兼開發者、小型企業、自由接案者 |
| 開始使用 | 免費註冊 → | 免費試用 → |
價格僅供參考，以官網為準
兩者互補而非競爭：最常見的工作流程是先在 Figma 完成 UI 設計和原型製作，再用 Webflow 將設計轉化為實際可運作的網站。如果你是純設計師，先學 Figma；如果你需要自己建站上線，再學 Webflow。
結論
UI UX 設計是讓網站和應用程式從「能用」進階到「好用」的核心能力。本文重點整理：
- UI 與 UX 的本質差異：UI 處理視覺與互動細節，UX 規劃整體使用者體驗與情感旅程，兩者缺一不可。
- UI UX 設計師職涯：台灣初階月薪約 NT$45,000-60,000，中高階可達 NT$80,000-120,000+，5 年內依舊是穩定成長的職類。
- 從零學起的最快路徑：先學 Figma 工具操作（1-2 週上手），再讀 1-2 本 UX 入門書（《Don’t Make Me Think》是經典），同時做 3-5 個個人作品集專案。
- 工具選擇建議：純設計用 Figma；要做互動原型 + 上線網站，用 Webflow。
如果你正考慮轉職或升級技能，建議從 Google UX Design Professional Certificate 開始：6 個月專業認證、Coursera 平台 7 天免費試用、可申請助學金，是目前最具業界公信力的 UX 入門課程。
常見問題（FAQ）
UI 和 UX 有什麼不同？
UI（使用者介面）關注產品的視覺呈現和互動元素，例如按鈕、色彩、字型、圖標等。UX（使用者體驗）關注使用者與產品互動的整體感受，包括操作流程是否順暢、任務是否容易完成、使用過程中的情感反應。簡單來說，UI 是「產品看起來如何」，UX 是「產品用起來感覺如何」。
UI UX 設計師薪水大概多少？
根據 104 人力銀行和 CakeResume 的公開數據，台灣 UI UX 設計師的月薪行情大致為：初階（0-2 年經驗）NT$35,000-50,000、中階（3-5 年）NT$55,000-75,000、資深（5 年以上）NT$80,000 以上。科技業和金融業的薪資通常高於傳統產業，而作品集品質是影響薪資的最關鍵因素。
學 UI UX 需要會寫程式嗎？
不需要會寫程式。UI UX 設計師的核心工作是設計，不是開發。但了解基礎的 HTML/CSS 概念（例如 div、margin、padding、響應式斷點）會有明顯加分，因為這能幫助你設計出工程師更容易實現的介面，也能讓你與開發團隊的溝通更順暢。
UI UX 自學要多久才能找到工作？
從零基礎到具備求職能力，密集自學大約需要 3-6 個月，利用下班時間自學則需要 6-12 個月。關鍵不在於學了多久，而在於你的作品集是否能展示完整的設計思維——從使用者研究、問題定義、設計方案到測試迭代的完整流程。建議至少準備 2-3 個完整的設計專案作為作品集。
什麼是 Wireframe 和 Prototype？
Wireframe（線框圖）是產品設計的初步草圖，展示元素的基本佈局和功能架構，不包含具體的視覺設計（沒有顏色、圖片），重點在於確認資訊架構和操作流程是否合理。Prototype（原型）則是更接近最終產品的互動模型，可以模擬使用者的操作流程，用於測試和驗證設計方案。兩者的關係是：先做 Wireframe 確認骨架，再做 Prototype 驗證互動。
UI UX 設計師需要準備作品集嗎？
絕對需要，而且作品集是 UI UX 設計師求職時最重要的評估依據——比學歷和證照都重要。好的作品集不只展示最終的設計畫面，更要展示完整的設計過程：你如何發現問題、如何進行使用者研究、設計決策的依據是什麼、測試後做了哪些改進。建議使用 Figma 製作作品集內容，再透過 WordPress.com 或 Webflow 建立線上作品集網站。
