10 個免費 UIUX 自學資源:設計師完整學習地圖
10 個免費 UIUX 自學資源完整比較,涵蓋 Material Design、Apple HIG、Nielsen Norman Group、Figma、Mobbin、Coursera 等,依判斷力、視覺語言、工具落地、研究驗證四階段分類,附八週自學節奏與作品集做法。
作者:褚崇名(Sliven)
本頁目錄
- 為什麼這份清單叫「學習地圖」,而不僅是資源堆疊
- 動手之前先分清楚:UI 與 UX 究竟在解什麼問題
- 學習地圖的四個階段:把資源排進能力的先後順序
- 階段一:建立判斷力的地基,讀懂設計規範與 UX 思維
- 階段二:視覺語言的免費修煉場,色彩字體與版面構成
- 階段三:工具落地,把想法變成可點擊的畫面
- 階段四:讓設計接得上真實使用者,研究與驗證
- 十個免費資源完整對照表,附階段與產出
- 走地圖時最容易卡住的三個陷阱,先避開再出發
- 陷阱一:把收藏當成進度
- 陷阱二:追著工具跑,忘了背後的判斷
- 陷阱三:僅畫不測,把作品集當展示櫥窗
- 自學 UIUX 最常見的四個問題
- 問題一:完全沒有設計底子,真的能自學嗎?
- 問題二:要不要花錢買付費課程或訂閱工具?
- 問題三:學多久才能開始接案或找工作?
- 問題四:AI 工具會不會讓設計師這個工作消失?
- 學完之後:用作品集把練習兌現成機會
- 把地圖變成行動:一份八週的自學節奏建議
認真說起來,不少人都這樣:打開求職網看到 UIUX 設計師的職缺越開越多,心動之餘卻卡在一個現實問題,到底要花多少學費、上多少堂課,才有資格自稱設計師?答案先講在前面:成為一名能用、能接案、能被信任的 UIUX 設計師,最關鍵的那一批學習資源,絕大多數是免費的。會卡住人的從來不是錢,而是不知道該按什麼順序學、學到什麼程度才算過關。
所以這篇以學習地圖的形式來寫,跳脫單純的資源清單。內容會先幫你把 UI 與 UX 的根本差異 拆清楚,接著用四個學習階段把十個免費資源排進對的位置,收尾再給你一張可以直接對照的總表,加上一份八週自學節奏建議。如果你時間有限僅能讀一段,就讀開頭那塊重點整理。
快速重點整理:UIUX 自學的核心不是「收集資源」,而是「按階段把每個能力練到能產出作品」。設計思維、視覺語言、工具落地、使用者研究這四塊各摸過一遍,再用作品集把學習兌現成面試與接案的門票。十個免費資源僅是地圖上的座標,真正讓你變強的是走完地圖的那雙腳。
免費不等於廉價,也不等於隨便。這份地圖包含官方設計規範、文件、公開文章,以及有使用額度或內容範圍限制的平台。像是 Google 與 Apple 公開維護的設計規範,本來就是產品團隊共用的準則;累積多年的 UX 研究文章庫,也能補足研究方法與實例。使用前仍要確認平台當下的免費範圍。
為什麼這份清單叫「學習地圖」,而不僅是資源堆疊
換句話說,網路上最不缺的就是資源清單。隨手一搜都有人幫你整理「二十個設計師必逛網站」「五十個 Figma 外掛推薦」,但這類清單有一個共同的副作用:它會讓你誤以為「收集」等於「學會」。
這個陷阱不少人都踩過。書籤列存了上百個連結,Figma Community 下載了幾十個免費模板,靈感網站追蹤了一整排設計師,結果一年過去,連一張自己原創的註冊頁都生不出來。資源再多,沒有先序、沒有產出標準,就僅是數位囤積,而且這種囤積還會帶來一種「我很努力」的錯覺。
換個方式想。學 UIUX 比較像學做菜,不像背單字。你不會把菜刀、平底鍋、烤箱、調味料一次買齊就自動變成廚師;你會先學握刀,再學火候,然後才端出一道完整的菜。設計也是同一回事:每一個免費資源背後對應的是一個具體能力,你要做的是把它們排進能力的先後順序裡,讓每個資源都對應到一個明確的能力。
這就是這份地圖把十個資源拆進四個階段的原因。階段的作用是讓你隨時知道「我現在站在哪、下一步該往哪走」。已經摸熟 Figma 的人,就不該還在工具教學裡打轉;連色彩對比都講不清楚的人,那再多的原型外掛也救不了你的畫面。
另一個常見的疑問是:既然免費資源這麼多,那花錢買課程到底有沒有必要?答案是,在你還沒走完一份完整的地圖之前,付費的邊際效益很低,因為你連自己哪裡弱都還看不清楚,買了往往僅是把更多資訊堆進收藏夾,然後在期限壓力下草草看完。等你真的把十個免費資源走過一遍,你就會非常清楚自己卡在哪個環節,那時候針對性地投資,每一塊錢才花在刀口上。這也是這份地圖堅持用免費資源來搭的原因:它強迫你用「走完」來證明決心,用「產出」來驗證實力,這兩件事花再多錢也買不到。
這份地圖也跟先前的 網頁設計自學路線圖 可以互補:那篇偏向「把一個網站從零架起來」的工程與版面流程,這篇則專注在「介面與體驗的設計判斷力」,兩條路徑搭在一起,才是一個能上線、又讓人願意用下去的網站。
動手之前先分清楚:UI 與 UX 究竟在解什麼問題
這也是新手最容易搞混的地方。先把這兩個詞分清楚,後面所有的資源才放得進對的位置,否則你會把全部心力倒進「畫好看的畫面」,卻漏掉設計師真正被僱用來做的事。
UI(User Interface,使用者介面)處理使用者如何看見並操作介面,包括按鈕、配色、字體層級、圖示、狀態與互動回饋。UX(User Experience,使用者體驗)的範圍更廣,會檢查流程有沒有必要、使用者會不會在某一步卡住、資訊架構合不合理,以及服務前後的整體感受。兩者互相影響,不是完全切開的職能。
打個比方。UI 是餐廳的裝潢與擺盤,UX 是從訂位、入座、點餐到結帳的整段體驗。一間裝潢再漂亮但點餐要等四十分鐘的餐廳,你不會想再去第二次;反之,一道擺盤很普通但味道驚豔的菜,你會願意原諒它的長相。兩者都重要,但它們是兩件事,需要的能力也不同。
| 比較項目 | UI 使用者介面 | UX 使用者體驗 |
|---|---|---|
| 主要關心 | 畫面怎麼呈現 | 流程是否順暢合理 |
| 典型產出 | 視覺稿、元件庫、圖示 | 使用者旅程、流程圖、線框稿 |
| 核心能力 | 配色、字體、排版、細節美感 | 邏輯、同理、研究、資訊架構 |
| 判斷標準 | 好不好看、一不一致 | 用戶能不能順利完成任務 |
| 常見誤解 | 以為就是「把東西變漂亮」 | 以為僅是「畫流程圖」 |
很多新手會直覺地把「UIUX」當成「把畫面畫好看」的代名詞,於是一頭栽進工具教學裡。這不能算錯,但它會讓你變成一個僅會畫圖、不會解問題的人。真正在市場上被搶手的設計師,是那種能用 UX 的邏輯說服別人「為什麼這裡要這樣設計」,再用 UI 的功力把它做出來的人。如果你對「從使用者的真實需求出發」這套思考方式還很陌生,可以先讀一遍 設計思考 的完整流程,它把同理、定義、發想到測試拆得很清楚,是建立 UX 思維很好的入口。
學習地圖的四個階段:把資源排進能力的先後順序
自學路徑可以拆成四個階段,每個階段對應一種你必須長出來的能力,也對應下面那十個免費資源裡的幾個。你可以把它想成一張闖關地圖,每過一關,你手上的作品集就會多一塊能見人的成品。
| 階段 | 要長出的能力 | 產出目標 | 對應資源 |
|---|---|---|---|
| 階段一:建立判斷力 | 讀懂設計規範、建立 UX 思維 | 能用語言講出「為什麼這樣設計」 | 資源 1、2、3 |
| 階段二:視覺語言 | 配色、字體、版面構成 | 一張視覺完整的單頁畫面 | 資源 4、5 |
| 階段三:工具落地 | Figma 操作、元件、原型 | 一個可點擊的原型 | 資源 6、7 |
| 階段四:研究與驗證 | 使用者研究、可用性測試 | 一份有依據的改版建議 | 資源 8、9、10 |
這四個階段不是線性的單行道。你在做階段三的原型時,常常會回頭發現階段二的視覺判斷不夠扎實;做到階段四的研究時,也可能推翻你階段一的假設。心裡有這張地圖,就比較不容易在原地打轉,因為你知道每一次回頭都是在補強。
這四個階段也對應了業界對設計師的不同期待。初階設計師通常被要求把階段二與階段三做扎實,能穩定產出乾淨的畫面與可用的原型;中階設計師要能獨立跑完階段一與階段四,用研究支撐設計決策;資深設計師則是四個階段都能串起來,還能把判斷力傳授給整個團隊。所以你不必一開始就樣樣精通,先確認自己現在站在哪一階,每一次產出都會讓你往下一個層級靠近一點。把目標放清楚,比把資源收集齊全重要太多。
階段一:建立判斷力的地基,讀懂設計規範與 UX 思維
第一個階段先不急著打開任何工具,而是要建立「判斷力」。判斷力的意思是,當你看到一個畫面,你能不能用具體的語言說出它好在哪、差在哪,而非僅憑感覺脫口說出「感覺還不錯」。這種判斷力哪裡來?從大量閱讀權威的設計規範與 UX 研究而來,而這些,恰恰好都是免費的。
資源 1:Google 的 Material Design 設計系統。這是 Google 公開維護的設計規範,從色彩、字體、間距、元件到動效都有詳細的準則與理由。它最珍貴的地方不是教你「怎麼做」,而是教你「為什麼這樣做」。例如它會解釋為什麼按鈕的點擊區域要有一定的最小面積、為什麼文字與背景要維持特定的對比比例。把這套規範當成你的設計語法課本,讀完之後你看任何介面都會多一層拆解能力。
資源 2:Apple 的 Human Interface Guidelines。這是 iOS 與 macOS 生態的設計聖經,同樣完全公開。它跟 Material Design 互補:前者偏 Android 與網頁的邏輯,後者偏蘋果生態的細節與手感。兩套都讀,你會發現好的設計原則其實是跨平台的,差別僅在於每個生態強調的優先順序不同。這也是新手不該一開始就挑陣營的原因,先把兩套都摸過一遍,判斷力才會寬。
資源 3:Nielsen Norman Group 的免費文章庫。這個網站是 UX 研究領域的權威之一,累積了數千篇關於可用性、使用者研究、資訊架構的深度文章。你不需要買它的付費報告,光是把它站內關於「十大可用性原則」「如何寫有效的網頁文案」「使用者研究的常見錯誤」這類基礎文章讀完,你的 UX 詞彙量就會比大多數自學者多出一截。判斷力,本質上來說就是詞彙量加上觀察量。
這個階段的產出看不到具體檔案,真正的成果是一種內化的眼光。建議你做一個小練習:每天挑一個你常用的 App 或網站,用這三個資源裡學到的原則,寫下三條它做得好的地方、三條可以改進的地方。堅持一個月,你會發現自己看畫面的方式完全變了。這個練習免費,但它的回報率高得嚇人。
階段二:視覺語言的免費修煉場,色彩字體與版面構成
有了判斷力,接下來要把判斷力變成「能做出來」的手感。這個階段處理的是 UI 那一塊:色彩怎麼選、字體怎麼搭、版面怎麼排、留白怎麼給。很多自學者在這裡卡關,多半因為沒有人告訴他們「美感是可以被拆解、被練習的」。
資源 4:Canva Design School 的免費設計課程。Canva 經營了一整套免費的設計教學單元,涵蓋配色、字體搭配、排版、品牌一致性等入門主題。它的價值在於把抽象的視覺原則拆成一步步可跟著做的小練習,非常適合完全沒有設計背景的人暖身。實務上也常推薦想快速產出社群圖或簡報的人從 Canva 新手教學 入門,因為它在「門檻低」與「成果不醜」之間取得了很好的平衡。當你對視覺有點手感之後,再進階去看 Canva Pro 的進階技巧,會更有感。
資源 5:MDN Web Docs 與 W3C 的無障礙規範。這個選擇可能跟你想的不一樣。多數人學 UIUX 不會想到 MDN,但它是網頁標準的權威文件庫,而其中關於色彩對比、語意化標籤、鍵盤可操作性的章節,正好是「專業設計師」與「僅會畫漂亮稿的人」之間的分水嶺。一份畫面如果對比不足、無法用鍵盤操作、螢幕閱讀器讀不出重點,那它再好看也是不及格的。把無障礙當成視覺語言的一部分來學,會讓你從第一天就站在對的位置上。
這個階段的產出,建議是「一張視覺完整的單頁畫面」。挑一個你喜歡的主題,例如一個咖啡店的活動頁,從配色、字體、圖片到按鈕全部自己決定。過程中你會不斷回頭查資源,這就是最有效的學習。顏色不知怎麼選,就回到我們寫過的 色彩學指南 與 色彩心理學,把色相環、對比色、品牌情緒這些觀念一次補齊;字體搭配卡住,就翻一下 英文字體推薦 與 中文字體指南,理解襯線、非襯線與中英混排的基本邏輯。
依 Statista 的長期統計(2026 年 4 月),全球行動裝置佔網頁流量的比例長年維持在高檔。這不代表所有產品都必須一律從手機版開始,但你應該依實際受眾與任務,同時驗證小螢幕、桌面、觸控與鍵盤操作。把 響應式網頁設計 放進視覺階段一起練,會比完成桌面稿後才補救更有效率。
階段三:工具落地,把想法變成可點擊的畫面
前兩個階段練的是腦與眼,這個階段練的是手。你要把腦裡的想法、眼睛判斷過的視覺,用一套工具做出來,而且要能做到「可點擊」。在 2026 年的設計圈,這個工具幾乎沒有懸念,就是 Figma。
資源 6:Figma 官方教學資源。Figma 自己維護了非常完整的免費學習素材,包括官方 YouTube 頻道的系列教學、Figma Community 上數千個免費模板與元件庫,以及 Help Center 裡的功能文件。建議你不要急著裝一卡車外掛,先把官方的基礎教學從頭到尾跟過一遍,把畫板、自動排版、元件、變數、原型連結這幾個核心觀念摸熟。基礎打穩了,再看 Figma 完整教學 把進階流程串起來,需要的話搭配 新手必裝外掛 與 網格系統 來加速。
資源 7:Mobbin 的免費範圍。Mobbin 收錄真實 App 與網站介面,免費帳號可瀏覽部分內容,實際額度與功能以當下方案為準。它適合用來比較成熟產品如何處理登入、註冊或結帳等流程,但畫面僅能當分析材料,不能取代自己的研究與設計。如果想要更多靈感來源,網頁設計靈感網站 這篇也整理了幾個可放進書籤的站。
這個階段的產出,是一個「可點擊的原型」。選一個你熟悉的日常流程,例如訂餐、借書、預約看診,把它從首頁到完成任務的每一步都畫出來,並用 Figma 的原型功能把頁面串起來,讓別人可以實際點點看。這份原型就是你作品集裡第一塊真正的磚。對原型與線框稿的差異還不清楚的人,可以先讀 UI Prototype 原型設計 這篇把觀念釐清,才不會把「畫得很細」誤會成「設計得很完整」。
這裡要誠實提醒一件事:工具學得越深,越容易掉進「為了用功能而用功能」的陷阱。Auto Layout 很強、變數很炫、互動元件很迷人,但設計師被僱用來解的是使用者的問題,不是來展示工具技巧的。每一次你忍不住想加一個複雜動效,先問自己:它幫使用者更快完成任務了嗎?如果答案是否定的,就砍掉。
階段四:讓設計接得上真實使用者,研究與驗證
走到第四個階段,你已經能做出還不錯的畫面與原型了。但「還不錯」跟「真的有效」之間,隔著一道叫做「使用者研究」的牆。這個階段要學的,是怎麼把手上的設計拿去給真實的人用,然後根據他們的反應來修正。
資源 8:Coursera 的免費課程預覽。Coursera 在 2025 年以「課程預覽」取代原本的普遍審閱模式,多數課程可免費查看第一個模組,完整內容則可能需要付費、試用或申請助學金。Google UX Design 系列可用來先理解課程架構,但不要把預覽誤認為整套課程都能免費旁聽。把它當成選課與補觀念的入口,實作仍要搭配其他公開資源;證書同樣不在免費範圍內,要付費或申請助學金才拿得到,而這一行真正被檢驗的是作品,一份能講清楚思考過程的作品集,說服力遠大於任何一張證書。
資源 9:UX Collective 與 Medium 上的設計實務文章。這類社群出版品涵蓋可用性測試、研究訪綱與跨職能溝通,適合補充個別設計師的做法與反思。不過文章品質與免費閱讀範圍不一,也不等同經過同儕審查的研究;遇到方法或數據主張時,應回查原始研究或官方規範。
資源 10:Dribbble 與 Behance 的靈感與風格養成。這兩個平台嚴格說來是「貫穿全程」的資源,但這份地圖把它放在階段四,是因為到了這個階段你才看得懂別人作品裡的門道。初學者看 Dribbble 常常僅看到「好炫」,但有了前三個階段的底子,你會開始看出別人怎麼處理資訊層級、怎麼引導視線、怎麼兼顧美感與可用性。這是從「消費者」升級成「拆解者」的關鍵轉變。
這個階段的產出,是「一份有依據的改版建議」。拿你階段三做好的原型,找三到五個目標使用者實際操作一次,觀察他們在哪一步猶豫、哪裡點錯、哪段文字看不懂,然後把這些發現整理成具體的修改清單。這份文件比任何一張漂亮畫面都更能證明你是一名設計師,因為它展現的是你解決問題的能力。想把研究做得更扎實,可以回頭讀 Persona 人物誌 與 顧客旅程地圖的畫法,把使用者輪廓與接觸點先畫清楚,研究才不會漫無目的。
十個免費資源完整對照表,附階段與產出
這張表把前面提到的十個資源整合在一起,標上它所屬的階段、強項與你練完之後該有的產出。你可以把它存下來,每過完一個資源就打個勾,當作自己的進度條。
| 編號 | 免費資源 | 階段 | 最大強項 | 建議產出 |
|---|---|---|---|---|
| 1 | Google Material Design | 一 | 跨平台設計原則與理由 | 用原則拆解一個 App |
| 2 | Apple Human Interface Guidelines | 一 | iOS 生態的細節與手感 | 對比兩套規範的差異 |
| 3 | Nielsen Norman Group 文章庫 | 一 | UX 研究的權威詞彙 | 十條可用性原則筆記 |
| 4 | Canva Design School | 二 | 視覺入門的低門檻練習 | 一張主題單頁的視覺稿 |
| 5 | MDN Web Docs 與 W3C WCAG | 二 | 網頁標準與無障礙 | 對比與無障礙檢核表 |
| 6 | Figma 官方教學與 Community | 三 | 業界標準工具的完整教學 | 一個可點擊原型 |
| 7 | Mobbin 免費額度 | 三 | 真實介面的拆解圖庫 | 一份流程拆解紀錄 |
| 8 | Coursera 課程預覽(Google UX 等) | 四 | 先看第一模組與課程架構 | 一份延伸學習清單 |
| 9 | UX Collective 與 Medium 文章 | 四 | 第一線實務經驗 | 一篇方法應用筆記 |
| 10 | Dribbble 與 Behance | 貫穿 | 風格與靈感養成 | 一份風格拆解收藏 |
這十個資源都能在不先付款的情況下開始使用,但免費範圍不同:Coursera 多數課程僅開放第一個模組預覽,Mobbin、Figma 與部分文章平台也有方案或閱讀限制。開始前先看方案頁,並把重點放在能否完成練習,而不是把「免費」理解成所有功能永久開放。
如果你想再往上加值,AI 工具是這一兩年最值得學的輔助能力。把 ChatGPT 的 UIUX 設計指令 學起來,你可以在用戶研究、文案發想、wireframe 草稿這些環節大幅提速。但請記得前面強調過的那句話:AI 可以幫你跑得更快,但它沒辦法替你走完該走的路。
走地圖時最容易卡住的三個陷阱,先避開再出發
有了地圖和資源,不代表路就一定走得順。不少自學者資源拿得比誰都齊,卻在三個地方反覆打轉。這三個陷阱跟你的聰明才智沒有關係,它們是學習方法本身的盲點,越早認出來越省時間。
陷阱一:把收藏當成進度
第一個陷阱前面提過,這裡再說得更白一點。很多人用「今天又存了幾個新網站」來衡量自己有沒有在學設計,但收藏的數字永遠不會自動變成能力。一個比較誠實的進度指標是「這週我產出了什麼」,哪怕僅是一張很醜的草稿,都比你又多存十個連結有價值。如果你發現自己連續兩週僅有收藏、沒有產出,那就是掉進這個陷阱的訊號,請立刻停下手邊的瀏覽,打開 Figma 隨便畫一張東西,先把產出這條線接回來。
陷阱二:追著工具跑,忘了背後的判斷
第二個陷阱在階段三特別容易發作。Figma 的功能每個月都在更新,外掛生態也越來越豐富,於是有人把大量時間投進「學會最新功能」,卻忽略了工具僅是手的延伸,真正決定畫面好壞的是腦裡的判斷。給你一個簡單的檢驗法:當你學會一個新功能,能不能立刻用它解決一個你之前解不動的問題?如果答不出來,那這個功能對現在的你就是裝飾品,先放著,等真的用得上再回頭學。
陷阱三:僅畫不測,把作品集當展示櫥窗
第三個陷阱最隱蔽。很多人花好幾個月把作品集打磨得美輪美奐,卻從來沒拿給真實使用者用過一次。結果面試時被問到「你怎麼知道這個設計有效」,僅能支支吾吾。設計與藝術的差別,就在於設計要解決問題、要被驗證。哪怕僅是找三個朋友操作你的原型、問他們幾句話,都比把作品集再美化一輪來得有價值。記得這句話:作品集展示的是你的思考過程,不是你的審美品味。
自學 UIUX 最常見的四個問題
問題一:完全沒有設計底子,真的能自學嗎?
能,而且這不是安慰話。設計的基礎能力,包括配色原則、字體層級、版面構成、使用者研究方法,全部都有公開、可學習的知識體系,不是靠天分撐起來的。真正會拉開差距的,是你願不願意用這十個免費資源反覆練習到能產出作品。不少轉職成功的人,起點都不是美術科班,而是肯把一個流程從研究到原型做完好幾遍的人。天分決定你的上限,但練習量決定你能不能跨過入門那道門檻。
問題二:要不要花錢買付費課程或訂閱工具?
建議是先用免費範圍完成一輪練習,再判斷缺口。Figma Starter 是免費方案,適合個人專案與基本設計、簡報及白板操作,但團隊元件庫、Dev Mode、發布功能與版本紀錄等項目有限制。當限制確實阻礙學習或協作時,再依需要升級。
問題三:學多久才能開始接案或找工作?
這題沒有標準答案。與其用月份判斷,不如看你是否已有兩到三個能說清楚問題、研究、決策、驗證與限制的完整專案。每個人的背景、投入程度與職缺要求差很多,接案與求職本身也需要分開練習;做完作品集僅是起點。
問題四:AI 工具會不會讓設計師這個工作消失?
目前無法斷言 AI 會不會讓某一類設計職缺消失,但它已能協助產生草稿、變體與示意圖,也會改變團隊分工。理解使用者、定義問題、驗證假設與說明取捨,仍需要設計師承擔責任。學習時可把 AI 網頁設計實戰 當成輔助流程,同時保留研究、查證與人工判斷。
學完之後:用作品集把練習兌現成機會
走到這裡,你手上有判斷力、有視覺手感、有可點擊的原型、還有一份有依據的改版建議。但這些東西如果僅躺在你的硬碟裡,它們就僅是練習,不會變成機會。把它們兌現成面試通知與接案詢價的關鍵,是一份讓人看得懂、願意看完的作品集。
作品集不是把你做過的所有東西倒出來,而是挑出兩到三個最能代表你思考過程的專案,把「為什麼這樣設計」講清楚。一個完整的專案通常會包含幾個部分:問題是什麼、你研究了什麼、你考慮過哪些方向、你選了什麼,以及你學到什麼。這個結構跟你在階段四練的研究與驗證是無縫銜接的,所以認真走完地圖的人,作品集幾乎是自然而然長出來的。
至於作品集要放在哪裡,選擇比你想的多。你可以用 Figma 直接做成可互動的案例頁,也可以自己架一個網站當作品集入口。如果走自架路線,作品集網站平台推薦 這篇比較了幾個常見的選項;想從設計端一路架到上線,則可以參考 作品集網站製作教學。對已經在用 WordPress 的人來說,這也是把設計能力接到現有內容管理系統的練習;根據 W3Techs 的統計(2026 年 6 月),WordPress 目前仍是廣泛使用的 CMS。
作品集不必全是一次成功的案例。若某次測試推翻原先假設,可以清楚交代「當時怎麼判斷、看到什麼證據、後來如何修改」。這種自我修正能讓讀者看見設計決策,但不必刻意製造失敗,也不能假設所有面試官都偏好同一種呈現方式。
把地圖變成行動:一份八週的自學節奏建議
讀到這裡,你可能會覺得「東西很多,不知道從哪裡開始」。這很正常,所以這裡給你一份具體的八週節奏,把前面所有東西排進行事曆。你不需要完全照抄,但有一個時間框架,會比「有空再學」踏實太多。
- 第一到第二週:階段一,建立判斷力。每天花四十分鐘讀 Material Design 與 Apple HIG 的基礎章節,搭配 Nielsen Norman Group 的十條可用性原則。每天挑一個常用 App 寫三好三壞,累積你的拆解筆記。
- 第三週:階段二,視覺語言。做完 Canva Design School 的入門單元,同時用 MDN 補完對比與無障礙的基本觀念。產出一張主題單頁的完整視覺稿。
- 第四到第五週:階段三,工具落地。跟完 Figma 官方基礎教學,用 Mobbin 拆解一個你喜歡的流程,然後做出一個可點擊的原型。這兩週是手感養成期,要耐住性子反覆修改。
- 第六到第七週:階段四,研究與驗證。用 Coursera 課程預覽與公開研究文章補觀念,把原型拿給符合目標受眾的參與者實測,整理出一份改版建議。
- 第八週:收攏成作品集。把前七週的產出整理成一到兩個完整專案,補上問題、研究、決策與反思的敘述,然後發布到你選定的平台。
八週是一份練習節奏,不是轉職保證。它能幫你走完一輪閱讀、設計、原型與驗證,但作品是否達到求職或接案門檻,仍要看完成品質、職缺要求與回饋修正。與其繼續收集資源,不如先把手上的練習做完並留下決策紀錄。
還有一件事想提醒你:自學最大的敵人從來不是難度本身,最常讓人放棄的其實是中斷。設計能力像肌肉,停太久就會萎縮,所以別一週狂衝二十小時然後休息三週,每天穩定摸個四十分鐘反而更有效。八週的節奏僅是骨架,你可以拉長到十二週、也可以濃縮到六週,但請務必保持每天都碰一下的連續性。當這份地圖變成你日常的一部分,你就不再需要別人推著你往前走了。
地圖給你了,資源也幫你挑過了,剩下的就是你願不願意踏出第一步。今天就挑一個你常用的 App,開始寫你的第一份拆解筆記吧。這一步免費,但它會決定你一年後站在哪裡。
常見問題
零基礎新手該從哪裡開始學 UIUX?
這些免費資源能拿到證書嗎?
有免費的 UIUX 中文教學嗎?
學完 UIUX 免費資源能找到工作嗎?
操作步驟
- 先確認你站在四個階段的哪一階:判斷力、視覺語言、工具落地、研究驗證,每次產出都讓你往下一個層級靠近一點,沒有這個錨點再好的資源清單都會變成書籤。
- 用十個免費資源對照表鎖定該階段的資源:階段一讀 Material Design 與 Apple HIG,階段二做 Canva 與 MDN 練習,階段三跟 Figma 官方教學,階段四用 Coursera 課程預覽補研究方法,其他平台先關掉,別再開新帳號。
- 每天挑一個常用 App 寫三好三壞:用階段一學到的設計原則,把判斷力從感覺升級成可表達的詞彙,堅持一個月,再排進行事曆。
- 把階段三做好的可點擊原型拿給三到五個人實測:觀察他們在哪一步猶豫、哪裡點錯,整理成一份有依據的改版建議,作為作品集裡最能證明思考過程的成品。