UIUX 是什麼?想成為 UX 設計師前要先搞懂的差異
想走 UX 設計師學習路徑,第一步要分清 UI、UX 與 Product Designer 的工作邊界。UX Designer 重點是理解需求、規劃流程、驗證體驗;UI Designer 重點是介面視覺與元件呈現。
UI 偏介面呈現,UX 偏使用者完成任務的整體體驗
UI 指的是使用者看到與操作的介面,例如按鈕、表單、版面、字體、顏色與元件狀態。UX 指的是使用者從開始任務到完成任務的整體感受,包含能不能找到資訊、流程是否合理、錯誤是否容易修正、操作後是否有清楚回饋。
如果你剛開始學 uiux,不要把 UX 想成「畫漂亮畫面」。Alice Wang 在看新手作品時,最常見的落差不是畫面不夠精緻,而是說不清楚為什麼這個流程比較好。想補 UI / UX 基礎差異,可搭配閱讀 UI / UX 差異完整解析。
實務上 UI、UX、Product Designer 如何分工?
| 角色 | 主要關注 | 常見產出 | 新手學習重點 |
|---|---|---|---|
| UX Designer | 使用者需求、任務流程、體驗驗證 | 訪談摘要、persona、user flow、wireframe、prototype、usability testing report | 能定義問題、整理需求、設計流程並驗證解法 |
| UI Designer | 介面視覺、元件呈現、版面細節 | 高保真 UI、元件規格、設計稿、互動狀態 | 掌握版面、字級、色彩、元件一致性與視覺層級 |
| Product Designer | 產品目標、使用者體驗、商業指標與跨部門協作 | 產品流程、功能規劃、設計決策紀錄、成效追蹤 | 把 UX、UI、產品目標與團隊限制一起思考 |
為什麼要聚焦 UX Designer 學習路徑,而不是泛談 UIUX?
因為「UIUX」在台灣職缺裡常被混用,同一個職稱可能偏 UI、偏 UX,也可能接近產品設計師。如果你的目標是成為 UX Designer,學習順序就不能只跟著工具走,而要先建立使用者研究、流程設計、原型測試與溝通能力。想補完整 UIUX 入門脈絡,可延伸閱讀 UIUX 設計完整指南。
UX 設計師的學習路徑總覽:從零開始應該分成 5 個階段
UIUX 學習路徑建議分成 5 階段:理解產品問題、學使用者研究、規劃流程與資訊架構、製作原型並測試,最後整理作品集與投遞職缺。
第 1 階段:理解 UIUX、設計思考與產品問題
第一階段先學設計思考、產品目標與使用者任務。你要能拆解一個 App 或網站:它服務誰、解決什麼問題、使用者在哪一步卡住、公司希望使用者完成什麼行為。設計思考可搭配 設計思考流程指南 建立基本框架。
第 2 階段:學使用者研究與需求整理
第二階段學訪談、問卷、競品分析與資料整理。新手不需要一開始就做大型研究,但要學會提出研究問題、設計訪談題目、整理 insight,並把使用者痛點轉成可處理的設計問題。
第 3 階段:學 user flow、IA、wireframe 與 prototype
第三階段把需求轉成流程。user flow 幫你看任務步驟,information architecture 幫你整理資訊層級,wireframe 幫你先排內容與操作,prototype 則用來模擬互動。這一階段的重點不是畫到多漂亮,而是讓流程可以被討論與測試。
第 4 階段:學可用性測試與設計迭代
第四階段練習 usability testing。你要設定任務、觀察使用者操作、記錄卡住的地方,再依照結果調整設計。很多新手作品集缺的就是這一段,因為只展示成品,很難證明設計判斷真的有效。
第 5 階段:整理作品集並開始投遞職缺
第五階段把一個完整案例整理成 UX case study,包含問題背景、研究方法、流程設計、原型、測試結果與迭代。當你能清楚講出「為什麼這樣設計」與「測試後改了什麼」,就可以開始投遞初階 UX、UIUX 或產品設計相關職缺。
| 階段 | 學習目標 | 建議時間 | 產出物 |
|---|---|---|---|
| 第 1 階段 | 理解 UIUX、使用者體驗與產品問題 | 2 到 3 週 | 產品拆解筆記、問題清單 |
| 第 2 階段 | 學會基礎研究與需求整理 | 3 到 4 週 | 訪談摘要、persona、insight 整理 |
| 第 3 階段 | 把需求轉成流程與原型 | 4 到 6 週 | user flow、IA、wireframe、prototype |
| 第 4 階段 | 驗證設計並做設計迭代 | 2 到 4 週 | 測試腳本、測試紀錄、迭代前後比較 |
| 第 5 階段 | 整理作品集並準備求職 | 3 到 6 週 | UX case study、履歷、面試作品簡報 |
想轉職 UIUX 設計師,要先學 UI 還是 UX?
想轉職 UIUX 設計師,起點要看背景。非設計背景建議先學 UX 流程再補 UI 表達;視覺背景要補研究與流程;工程、PM、行銷背景則要補介面與設計呈現。
非設計背景:先學 UX 流程,再補基本 UI 表達
如果你沒有設計背景,先不要急著把 Figma 練成繪圖工具。比較穩的順序是先學使用者研究、任務流程、wireframe,再補基本介面排版、元件狀態與設計系統概念。這樣做的好處是,你的作品集會先有清楚邏輯,不會只剩一組漂亮畫面。
視覺設計背景:從畫面美感轉向任務流程
如果你是平面、品牌、行銷設計或 UI 背景,優勢通常是視覺表達與軟體熟悉度。缺口多半在問題定義、使用者研究、資訊架構與測試。Alice Wang 會建議這類讀者把原本的設計稿改寫成 case study,補上目標、使用者情境、決策理由與測試結果。
工程或 PM 背景:補研究方法與介面表達
工程背景通常懂技術限制與產品開發流程,PM 或行銷背景通常懂需求、指標與溝通。這些都是 UX Designer 的加分項,但仍要補介面結構、互動狀態、prototype 與可用性測試。若想比較 UI 職涯技能,可延伸閱讀 UI 設計師職能與求職技能。
判斷自己適合從 UX、UI 或 Product Design 切入的方法
判斷方式很實際:你比較擅長研究問題、整理流程、做介面視覺,還是協調產品目標?如果你喜歡訪談、拆流程、找使用者卡點,適合從 UX 切入;如果你對視覺與元件細節敏感,可從 UI 切入;如果你常在商業目標、功能優先順序與團隊協作之間取捨,Product Design 可能更接近你的方向。
| 背景 | 建議起點 | 要補的能力 | 第一個練習 |
|---|---|---|---|
| 非設計背景 | UX 流程與產品拆解 | 基本 UI、Figma、介面結構 | 重畫一個會員註冊流程的 wireframe |
| 視覺設計背景 | 使用者研究與任務流程 | 訪談、user flow、測試紀錄 | 把既有作品補成 UX case study |
| 工程背景 | 互動設計與原型表達 | 介面排版、設計語言、使用者訪談 | 把一個功能規格轉成可點擊 prototype |
| PM 或行銷背景 | 需求分析與使用者旅程 | Figma、wireframe、可用性測試 | 拆解電商結帳流程並提出改善版本 |
UX 設計師必學技能:不只會 Figma,還要能定義問題
UX 設計師必學技能包含使用者研究、需求分析、流程設計、原型製作、可用性測試與跨職能溝通。Figma 是工具,問題定義與驗證能力才是 UX 的核心。
使用者研究:訪談、問卷、競品分析、資料整理
使用者研究的目的是找出使用者真正的任務、限制與痛點。新手要學到能設計訪談大綱、避免誘導式問題、整理訪談紀錄,並把觀察轉成可行的 insight。可搭配 使用者研究方法比較 與 使用者訪談流程技巧 補足方法細節。
流程設計:user flow、user journey map、information architecture
流程設計是在安排使用者如何完成任務。user flow 看操作步驟,user journey map 看情緒、痛點與接觸點,information architecture 則處理資訊分類與層級。新手可以從拆解訂票、結帳、註冊流程開始,練習找出不必要步驟與資訊斷點。延伸可讀 資訊架構設計流程 與 user flow 繪製指南。
原型設計:wireframe、prototype、互動狀態
wireframe 用來確認內容、優先順序與操作路徑,prototype 用來模擬互動。新手至少要能用 Figma 做低保真與中保真原型,設定按鈕、返回、錯誤、成功、空狀態等基本互動。工具可參考 Figma 入門教學,原型觀念可搭配 prototype 製作指南。
驗證方法:usability testing、任務完成率、錯誤率
可用性測試不是問使用者「喜不喜歡」,而是觀察他能不能完成指定任務。新手要學會設計測試任務、記錄完成時間、卡關點、錯誤次數與使用者回饋,再用結果修正原型。完整流程可延伸閱讀 可用性測試流程。
溝通能力:如何把設計理由講給 PM 與工程師聽
UX Designer 很少只對自己負責。你需要把設計理由講給 PM、工程師、行銷與主管聽。好的說法會連回使用者證據、任務流程、技術限制與產品目標,而不是只說「我覺得這樣比較順」。這是新手最容易低估、卻最常在面試被看見的能力。
| 技能 | 為什麼要學 | 學到什麼程度 | 如何練習 |
|---|---|---|---|
| 使用者研究 | 避免只靠個人猜測做設計 | 能做 3 到 5 位訪談並整理共通痛點 | 找身邊使用者訪談常用 App 的任務經驗 |
| 需求分析 | 把模糊問題轉成可設計的目標 | 能區分使用者需求、商業目標與功能需求 | 把訪談紀錄整理成問題陳述 |
| 流程設計 | 讓使用者用較少阻力完成任務 | 能畫 user flow、journey map 與基本 IA | 拆解訂票、結帳、註冊流程 |
| 原型設計 | 讓想法可討論、可測試 | 能做 wireframe 與可點擊 prototype | 用 Figma 或 FigJam 做一個功能流程 |
| 驗證方法 | 確認設計是否真的改善體驗 | 能設計任務、記錄問題、提出迭代 | 請 3 位使用者操作原型並記錄卡點 |
| 溝通協作 | 讓設計能在產品團隊中落地 | 能用證據與限制說明設計取捨 | 把同一個設計決策分別講給 PM 與工程師聽 |
每個學習階段應該產出什麼?UX 作品集的交付物地圖
UX 作品集要呈現問題脈絡、研究證據、設計決策、測試結果與迭代過程。只放最終 UI 畫面,無法證明你具備 UX Designer 的完整能力。
研究階段:persona、訪談摘要、insight 整理
研究階段要呈現你如何理解使用者,而不是堆一堆訪談逐字稿。作品集中可以放研究目標、受訪者條件、訪談摘要、共通痛點與 persona。persona 不需要做得像海報,重點是讓讀者看懂使用者任務、動機、限制與決策情境。
規劃階段:user journey map、user flow、IA sitemap
規劃階段要讓面試官看到你如何把 insight 轉成流程。user journey map 可以說明使用者在不同接觸點的痛點,user flow 說明操作路徑,IA sitemap 說明資訊如何分類。這些交付物不用每個案子都放滿,但要足以支撐你的設計選擇。
設計階段:wireframe、prototype、design rationale
設計階段要放 wireframe、prototype 與 design rationale。design rationale 是設計理由,包含為什麼調整步驟、為什麼更換資訊順序、為什麼某個按鈕要放在特定位置。Alice Wang 會看重這一段,因為它直接反映設計師是不是在解問題。
驗證階段:usability test report、迭代前後比較
驗證階段可以放測試任務、受測者人數範圍、觀察到的問題、修改前後對照與結果。新手專案不一定能取得商業數據,但至少應該呈現任務完成、錯誤、困惑與回饋如何影響下一版設計。
作品集應避免只展示最終 UI 畫面
最終 UI 畫面可以放,但它應該服務案例說明。若作品集只有首頁、色彩與 mockup,面試官很難判斷你是否會做使用者研究、流程規劃與可用性測試。比較好的做法是把每張畫面放回決策脈絡裡,說清楚它解決了哪個問題。
| 學習階段 | 產出物 | 作品集呈現方式 |
|---|---|---|
| 研究 | persona、訪談摘要、insight | 用 1 到 2 頁說明研究問題、主要發現與設計機會 |
| 規劃 | user journey map、user flow、IA sitemap | 標出原流程痛點與新流程如何降低摩擦 |
| 設計 | wireframe、prototype、design rationale | 展示從低保真到中高保真的決策變化 |
| 驗證 | usability test report、迭代前後比較 | 列出測試任務、問題、修改方向與結果 |
| 求職整理 | UX case study、履歷、面試簡報 | 用一個完整故事串起問題、過程、決策與成果 |
- 作品集是否說明使用者是誰,以及他遇到什麼問題。
- 是否有研究方法,而不是直接跳到解法。
- 是否呈現 user flow、wireframe 或 prototype 的演進。
- 是否有測試、回饋或至少明確的驗證方式。
- 是否能用 5 分鐘講完一個案例的重點。
台灣 UX Designer 職缺通常看什麼?從職缺反推學習重點
台灣 UX Designer 職缺通常看工具能力、UX 流程、作品集、溝通協作與問題解決證據。比起只列技能,作品集能否證明你的設計過程更關鍵。
初階 UX / UIUX 職缺常見要求
初階職缺常見要求包含 Figma 操作、wireframe、prototype、基本研究方法、可用性測試、跨部門溝通與作品集。部分公司會把 UI 與 UX 寫在同一個職稱裡,因此你需要從職缺內容判斷它實際偏向哪一種工作。
台灣公司常見的「UIUX」其實可能偏 UI、UX 或 Product Design
如果職缺強調視覺規範、元件庫、高保真設計稿,多半偏 UI。如果強調訪談、流程、測試、需求分析,多半偏 UX。如果強調產品策略、功能規劃、指標與跨部門推動,可能接近 Product Designer。職稱只能參考,工作內容才是判斷重點。
如何從職缺描述判斷自己還缺哪一塊?
把職缺拆成工具、研究、流程、視覺、測試、溝通六類,再對照作品集是否有證據。若職缺要求 usability testing,而你的作品集沒有測試紀錄,就要先補一個測試段落。若職缺要求設計系統,你至少要能說明元件狀態與一致性,不必一開始就做完整治理。
薪資可以參考,但不應該是學習路徑的唯一依據
薪資會受年資、公司類型、職務偏 UI 或 UX、作品集品質與面試表現影響。可以查 104、Cake、Yourator 等台灣職缺平台建立市場感,但不要只用薪資決定學習順序。對新手來說,先做出能說明研究、流程、原型與驗證的作品,比追逐單一薪資數字更有用。
| 職缺要求 | 代表公司想看到 | 學習對策 |
|---|---|---|
| 熟悉 Figma、prototype | 能快速產出可討論的設計稿 | 練習低保真到可點擊原型的完整流程 |
| 具備使用者研究經驗 | 能用證據理解需求 | 補訪談、問卷、競品分析與 insight 整理 |
| 能規劃 user flow 或 IA | 能處理複雜流程與資訊層級 | 拆解結帳、註冊、搜尋等常見任務流程 |
| 有 usability testing 經驗 | 能驗證設計並提出迭代 | 替作品集補測試任務、觀察紀錄與修改前後比較 |
| 能與 PM、工程師合作 | 能把設計放進產品開發流程 | 練習用使用者證據、技術限制與產品目標說明取捨 |
怎麼判斷自己 UX 學得好不好?用指標檢查設計成果
判斷 UX 學得好不好,要看使用者是否更容易完成任務,以及產品是否能觀察到行為或滿意度改善。可用任務完成率、錯誤率、轉換率、SUS、NPS 等指標檢查。
可用性指標:任務完成率、錯誤率、完成時間
可用性指標適合新手作品集,因為不一定需要真實商業數據。任務完成率看使用者是否完成指定任務,錯誤率看操作中出現多少錯誤,完成時間看流程是否過長。即使只有小規模測試,也能幫助你說明設計前後的差異。
商業指標:轉換率、留存率、客服詢問量
商業指標通常在公司內部比較容易取得。轉換率可用於結帳、註冊、訂閱等流程;留存率可觀察使用者是否持續回來;客服詢問量可反映流程是否讓人困惑。新手不用假裝自己有企業後台數據,但要知道這些指標如何連到 UX 成效。
滿意度指標:SUS、NPS、使用者回饋
SUS 可用來衡量系統可用性,NPS 常用來觀察推薦意願,使用者回饋則能補足數字背後的原因。這些指標不應被當成唯一答案,因為使用者說喜歡,不代表他真的能完成任務。比較好的做法是把行為觀察與回饋一起看。
新手作品集可以怎麼呈現「驗證」而不是只呈現成品?
新手可以用 3 到 5 位測試者做小規模 usability testing,設定明確任務,例如「完成訂票付款」或「找到退貨規則」。作品集中呈現測試任務、觀察到的問題、修改方向與迭代後結果,就能比單純展示成品更有說服力。
| 指標類型 | 指標 | 可以回答的問題 | 新手作品集呈現方式 |
|---|---|---|---|
| 可用性 | 任務完成率 | 使用者能不能完成指定任務 | 列出測試人數範圍、任務與完成情況 |
| 可用性 | 錯誤率 | 流程中哪些地方容易出錯 | 整理錯誤類型與對應修改 |
| 可用性 | 完成時間 | 操作是否過長或不直覺 | 比較修改前後的操作步驟與時間感受 |
| 商業 | 轉換率、留存率、客服詢問量 | 設計是否影響產品行為 | 若無真實數據,可說明預期觀察方式 |
| 滿意度 | SUS、NPS、使用者回饋 | 使用者對體驗的主觀評價 | 摘錄關鍵回饋並對照設計修改 |
UIUX 常見誤解:UI 不是只看美感,UX 也不是只看順不順
UIUX 常見誤解包括會 Figma 就會設計、UX 只是問卷、UI 好看就代表體驗好、UX 一定要寫程式。正確學習方向是理解問題、設計流程、驗證體驗。
誤解 1:會 Figma 就等於會 UIUX
正確理解是 Figma 只是表達與協作工具。它能幫你畫 wireframe、製作 prototype、整理元件,但無法替你判斷使用者需求。學習建議是把 Figma 練習放進專案流程裡,不要只練漂亮畫面。
誤解 2:UX 就是問使用者喜不喜歡
UX 研究不只是收集喜好。訪談要理解使用者如何做決策,可用性測試要觀察使用者能不能完成任務。學習建議是少問「你喜歡嗎」,多觀察「你怎麼完成這件事」。
誤解 3:UI 好看就代表 UX 好
漂亮 UI 可能提升信任感,但如果資訊找不到、流程太長、錯誤訊息不清楚,使用者仍然會離開。學習建議是把視覺表現與任務流程一起檢查,尤其要看關鍵行為是否更容易完成。
誤解 4:UX 設計師一定要會寫程式
UX Designer 不需要像軟體工程師一樣寫程式,但懂基本 HTML、CSS、元件狀態與技術限制會有幫助。學習建議是理解工程語言與限制,讓溝通更順,不必把前端框架當成入門主線。
誤解 5:新手一定要先報昂貴課程才可以開始
課程可以縮短摸索時間,但不是唯一入口。新手可以先用公開資源、產品拆解、訪談練習與自發專案建立基本能力。Alice Wang 會建議先完成一個小而完整的 case study,再決定是否需要付費課程補強。
| 常見誤解 | 正確理解 | 學習建議 |
|---|---|---|
| 會 Figma 就會 UIUX | 工具不等於 UX 能力 | 用 Figma 表達研究、流程與原型 |
| UX 就是問卷或訪談 | 研究要服務問題定義與設計決策 | 把研究結果轉成 insight 與設計機會 |
| UI 好看就代表 UX 好 | 體驗要看任務是否能完成 | 同時檢查視覺、流程、錯誤與回饋 |
| UX 一定要會寫程式 | 懂技術限制有幫助,但不等於要當工程師 | 學基本前端概念與工程溝通語言 |
| 一定要先報昂貴課程 | 課程是加速器,不是入場券 | 先完成小型專案,再判斷需要補哪一段 |
90 天 UX Designer 入門學習計畫
90 天 UX Designer 入門目標不是保證轉職,而是完成一個能說明研究、流程、原型、測試與迭代的 UX case study,作為後續作品集與求職基礎。
第 1 到 30 天:建立觀念與拆解現有產品
前 30 天先建立 UIUX、UX Designer、設計思考與產品流程的基本觀念。每天選一個常用產品拆解,例如訂票、外送、電商、銀行 App,記錄使用者目標、操作步驟、卡點與可能改善方向。這個階段的重點是訓練觀察,不急著做完整設計稿。
第 31 到 60 天:完成研究、流程與低保真原型
第 31 到 60 天選定一個題目,進行 3 到 5 位使用者訪談或小型問卷,整理 persona、journey map 與 user flow。接著用 FigJam、Miro 或 Notion 整理資料,再用 Figma 做 wireframe 與低保真 prototype。這階段要讓問題與解法連得起來。
第 61 到 90 天:完成測試、迭代與作品集案例
第 61 到 90 天用 prototype 做 usability testing,觀察使用者是否能完成任務,記錄錯誤、困惑與回饋。完成修改後,把整個專案整理成 UX case study。作品集不必一開始就很華麗,但結構要清楚,讀者要看得出你的判斷依據。
建議練習題:訂票 App、電商結帳、會員註冊流程
練習題建議選日常任務,因為容易找到受訪者,也容易觀察痛點。訂票 App 可練習日期、座位、付款流程;電商結帳可練習運送、折扣、付款與錯誤處理;會員註冊可練習表單、驗證、隱私提示與成功狀態。
| 時間 | 任務 | 產出 | 檢核標準 |
|---|---|---|---|
| 第 1 到 30 天 | 學 UIUX 基礎、拆解產品、練習觀察流程 | 產品拆解筆記、問題清單、初步改善假設 | 能說明一個產品的使用者、任務與主要卡點 |
| 第 31 到 60 天 | 做使用者研究、整理需求、畫流程與 wireframe | 訪談摘要、persona、user flow、低保真 prototype | 能把研究發現連到設計方向 |
| 第 61 到 90 天 | 做可用性測試、修改原型、整理作品集案例 | 測試紀錄、迭代前後比較、UX case study | 能用案例說明問題、過程、決策與驗證結果 |
UIUX 設計一定要會寫程式嗎?
不一定。UX Designer 不需要像工程師一樣寫程式,但懂基本 HTML、CSS、元件狀態與技術限制,能幫助你和工程師溝通。若職缺明確要求前端能力,再依職務內容補強即可。
想成為 UX 設計師,要讀什麼科系?
不限科系。設計、心理、資訊、傳播、商管背景都有機會,重點是能不能做使用者研究、整理問題、設計流程並用作品集說明決策。科系會影響起點,但不會直接決定能不能入門。
UIUX 平均薪資大概多少?
薪資會受年資、公司類型、作品集與職務偏 UI、UX 或 Product Design 影響。建議查 104、Cake、Yourator 等台灣職缺平台,比較同年資與相近職務,不要只看單一數字。
新手先學 Figma 就夠了嗎?
不夠。Figma 是表達工具,UX Designer 還需要學使用者研究、流程設計、資訊架構、原型測試與設計溝通。比較好的練習方式,是用 Figma 做出能被測試的 prototype,而不是只畫靜態畫面。
沒有設計背景可以轉職 UX Designer 嗎?
可以,但要補兩件事:基本介面表達能力,以及能完整說明一個產品問題從研究到驗證的過程。非設計背景常有其他優勢,例如產業知識、工程理解、資料整理或專案溝通能力,這些都可以放進作品集脈絡。
UX Designer 跟 UI Designer 差在哪?
UI Designer 偏介面視覺與元件呈現,UX Designer 偏使用者需求、流程、任務完成與體驗驗證。實務上兩者會合作,也可能在初階 UIUX 職缺中被同一個人負責,所以看職缺內容比看職稱更準。
UIUX 跟產品設計一樣嗎?
不完全一樣。Product Designer 通常更靠近產品策略、商業目標與跨部門協作,UIUX 則可能依公司定義偏 UI、偏 UX 或兩者混合。求職時要看工作內容是否包含研究、流程、視覺、產品指標與團隊協作。
UX 作品集一定要有真實商業案嗎?
不一定。新手可以用自發專案,但必須有清楚問題、研究方法、設計過程、測試與迭代,不能只重做漂亮畫面。如果沒有真實商業數據,可以用可用性測試與使用者回饋補足驗證段落。
UX 學習路徑大概要多久?
若每週穩定投入,3 個月可完成一個入門 UX case study;要達到可穩定求職,通常還需要更多作品、回饋與面試練習。學習時間會受背景、投入時數、作品集品質與求職目標影響。
AI 會取代 UX Designer 嗎?
AI 會加速資料整理、原型發想與文案生成,但使用者問題判斷、研究設計、利害關係人溝通與決策取捨仍需要人負責。對新手來說,AI 可以當輔助工具,但不能取代對使用者與產品脈絡的理解。