能讓面試官停下來看的設計師作品集,只有 4 種模式

不是作品的倉庫,是判斷力的展示櫃
設計師 Riven

設計師 Riven

2026年5月9日 上午 3:30

UI/UX 設計
設計師作品集 4 種典型模式拆解:案例驅動、故事驅動、系統驅動、思考驅動

CHAPTER 05 · REVERSE ENGINEERING

QUICK ANSWER

UI/UX 設計師作品集精選案例可以拆出四種典型模式:案例驅動型(首頁直接列 case)、故事驅動型(敘事開場)、系統驅動型(強調 design system)、思考驅動型(文字主導)。每一種都解決不同的 hiring 問題、適合不同類型的設計師。看別人作品集不是欣賞,是 reverse engineering——拆出版面、敘事、視覺背後的決策,才能反推自己作品集應該長什麼樣。

CHAPTER 1 · THE MISTAKE

看別人作品集的兩種方式

大多數設計師看別人的作品集,看的是「欣賞」。

打開 Behance、打開 Awwwards、打開某個 senior 的個人網站,一頁一頁滑下去,心裡想「哇好厲害」「這個 hero 好酷」「這個 case study 寫得真好」。然後關掉視窗——看完了,但什麼都沒帶走。

這就是欣賞跟 reverse engineering 的差別。欣賞讓你說「好厲害」,但判斷力沒有變強。reverse engineering 讓你看到動作背後的決策——這個人為什麼把 case study 從問題切入而不是 demo 切入?這個首頁為什麼把第三個 case 放第一位?這個關於我頁為什麼只寫 80 字?

這些問題背後都有設計決策。能拆得出來,你的判斷力會比看完 100 個作品集只是 say wow 的人強 10 倍。

這篇講四種典型作品集模式。每一種都解決不同的 hiring 問題,每一種都有它適合的設計師類型。看完之後,你會知道別人的作品集為什麼長那樣——也會知道你的作品集應該長什麼樣。

拆別人作品集不是欣賞,
是 reverse engineering。

CHAPTER 2 · FOUR PATTERNS

四種典型作品集模式

看了幾百個設計師的作品集之後,會發現大多數能讓人停下來的作品集,骨架其實只有四種模式。每一種都在回答一個不同的 hiring 問題。

FOUR PORTFOLIO PATTERNS

01

案例驅動型

作品本身是賣點,首頁直接列 case。適合 case 質量過硬的設計師。

02

故事驅動型

個人軌跡是切入點,首頁是敘事。適合轉職者跟跨領域設計師。

03

系統驅動型

工作方法是賣點,首頁強調 process 跟 design system。適合想進大公司的人。

04

思考驅動型

寫作是賣點,首頁文字主導、mockup 很少。適合 UX 跟 product strategy 取向的人。

這四種沒有哪個比較好——好壞取決於你是什麼樣的設計師、想去什麼樣的公司、手上有什麼樣的素材。接下來一個一個拆。

CHAPTER 3 · DEEP DIVE

四個模式各自怎麼長

模式 01 — 案例驅動型

最常見的作品集模式。首頁打開——一句 positioning,然後直接列 4 到 6 個 case,每個 case 有 hero 圖、標題、一句問題描述。沒有冗長自介,沒有設計理念,沒有 timeline。就是 case。

版面結構大約長這樣:

WIREFRAME · CASE-FIRST

HERO · 一句 POSITIONING

CASE 01

CASE 02

CASE 03

CASE 04

ABOUT · CONTACT

這個模式賣的是「case 本身的品質」。面試官打開首頁,5 秒之內看到 4 個 case,直接決定要不要點進去——case 在這個模式裡是主角,一切都為 case 服務。

解決的 hiring 問題是:「這個人做出來的東西是什麼水準?」面試官想看的是輸出——你的設計做得好不好,case study 寫得透不透,判斷力強不強。

適合誰?case 質量過硬的設計師。有 4-6 個能寫出完整 case study 的專案,每個專案都能拆出 reframe、取捨、decision、outcome——這種人用案例驅動型最直接。

不適合誰?case 數量不夠,或者 case 質量參差不齊的設計師。你只有 2 個強 case 加 4 個普通 case,用案例驅動型反而會稀釋——讀者一路看完 6 個 case,對你的印象停留在最後一個普通 case 上,不是最強的那個。

常見失敗——8 個以上的 case 一字排開。讀者點不開,每個 case 被認真看的機率被稀釋。前一篇講過了,這個模式裡 4-6 個是上限。

模式 02 — 故事驅動型

首頁打開不是 case,是一段敘事。通常是「我從哪裡來,為什麼變成設計師,最近在想什麼」這種第一人稱開場。case 在後面,但讀者進到 case 之前,已經對「這個人」有印象了。

WIREFRAME · NARRATIVE-FIRST

HERO · 個人敘事段落

━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━

FEATURED CASE 01 · 大尺寸

CASE 02

CASE 03

ABOUT · CONTACT

這個模式賣的是「個人軌跡」。設計能力之外的差異化——你的故事跟其他會做 UI 的人有什麼不同?

解決的 hiring 問題是:「為什麼是這個人,不是另一個會做 UI 的人?」面試官手上 30 份履歷,每個人的 UI 都做得不錯,但最後讓他打電話的,通常是個人軌跡讓他記得的那個。

適合誰?轉職者、跨領域工作經驗的人、有獨特背景的設計師。你原本是醫生轉設計師,原本是工程師轉設計師,原本做行銷做了 5 年才入坑,這些「不是設計本科」的軌跡反而是你的優勢——故事驅動型把它放大。

不適合誰?設計本科出身、履歷一路都在設計圈的人。你的故事是「畢業之後做了三年 UI,現在想換公司」——這個故事沒有差異化,放在首頁反而稀釋了你的 case。

常見失敗——故事寫得太雞湯。「從小就喜歡畫畫」「對美的事物充滿好奇」「希望透過設計改變世界」。這種句子寫了等於沒寫——所有人都會這樣講,沒有差異化。故事驅動型的核心是「具體軌跡」,不是「對設計的熱愛」。

模式 03 — 系統驅動型

首頁打開——一段 positioning,然後是工作方法的展示。design system 圖、component library 截圖、process flow、團隊協作的 diagram。case 在最後,但 case 寫法不太一樣——重點不是「我做了什麼」,是「我用什麼方法做的」。

WIREFRAME · SYSTEM-FIRST

HERO · SYSTEM 思維 POSITIONING

DESIGN SYSTEM · COMPONENTS

PROCESS / METHODOLOGY

CASE 01

CASE 02

ABOUT · CONTACT

這個模式賣的是「規模化做事的能力」。不是「我能做出一個漂亮的 button」,是「我能建立一套讓 50 個設計師都能做出一致 button 的系統」。

解決的 hiring 問題是:「這個人能不能在大團隊裡規模化做事?」大公司的設計團隊 5-50 人,單一設計師再強也不夠,需要的是能建系統的人。

適合誰?design system designer、senior 以上、想進大公司或想接大型品牌專案的人。你做過 design system 的設計工作,有 token system、component library、design ops 經驗——這些東西放在前面,面試官會直接判斷你能不能 cover 他們的痛點。

不適合誰?junior、產出主要是 single screen 的設計師。你還沒做過系統化專案,首頁強推 design system 反而會讓面試官覺得「你是不是把 component sticker sheet 包裝成 design system」。

常見失敗——首頁太規範化,看起來像 design ops 不是 designer。系統驅動型的微妙之處在於——你要展示「能建系統」,但不能讓人覺得你「只會建系統」。Case 還是要有,只是位置在後面,比例少一點。

模式 04 — 思考驅動型

首頁打開——幾乎沒有視覺。一段 positioning,一個文章列表,一些 case 連結。mockup 很少,甚至沒有。這種作品集第一次打開會讓人懷疑——「他是設計師嗎?」。

WIREFRAME · THINK-FIRST

HERO · 一段思考 POSITIONING

━━━━━━━━━━━━━━━━━
━━━━━━━━━━━

ESSAY 01 · 標題

ESSAY 02 · 標題

ESSAY 03 · 標題

CASE 01

CASE 02

ABOUT · CONTACT

這個模式賣的是「思考能力」。設計工具誰都會,設計理論誰都讀過——但能把設計問題寫成清楚的句子,只有少數設計師做得到。

解決的 hiring 問題是:「這個人怎麼想設計?」有些公司——特別是早期 SaaS startup、product strategy 取向的團隊——徵設計師時更看重思考力,不是執行力。他們可以找便宜的執行型設計師,但找不到能跟 PM 一起想 product 方向的設計師。

適合誰?UX 重於 UI 的設計師、想往 product strategy 走的設計師、寫作能力強的設計師。你的優勢是「能拆問題」「能寫清楚」「能跟 PM 對話」——思考驅動型把這些放大。

不適合誰?UI 取向設計師、視覺設計師、junior。你的優勢是「畫得漂亮」「執行力強」,思考驅動型反而埋掉這些優勢——首頁沒有 mockup,面試官沒辦法第一眼看到你的視覺品質。

常見失敗——完全沒有視覺證據。通篇文字、零 mockup、零 case 截圖,會讓面試官懷疑你是不是真的會做設計——可能寫得好但畫不出來。思考驅動型的微妙之處是:文字主導,但要有 case 證明你不是只會說。

CHAPTER 3.5 · MIXING PATTERNS

四個模式可以混合嗎

可以——但前提是你清楚每個模式在解決什麼 hiring 問題。

最常見的合理混合有兩種。

案例驅動 + 系統驅動——你的 case 質量過硬,同時做過 design system。首頁用 case 為主排版(4-6 個 case grid),但其中 1-2 個 case 用 system thinking 的角度寫——展示你不只是做出 hi-fi,還能規模化。這個混合最常見,適合想從中型公司往大公司跳的設計師。

故事驅動 + 案例驅動——你軌跡獨特,case 也夠強。首頁開場用一段短敘事當 hook(不超過 80 字),hook 結束立刻接 case 列表。這個混合的關鍵是——故事段一定要短,不能讓敘事擠掉 case 的位置。

不要做的混合也有兩種。

故事驅動 + 系統驅動——兩個 hook 都太重,讀者來不及處理。故事讓人慢下來讀,系統讓人需要消化邏輯——疊在首頁,讀者還沒讀懂故事就被系統嚇跑,還沒消化系統就被故事拖慢。

思考驅動 + 案例驅動——兩個方向相反。思考驅動的核心是「先別給視覺,讓讀者進到我的腦袋」,案例驅動的核心是「先給視覺衝擊,讓讀者快速判斷」。這兩個放在同一個首頁,讀者搞不清楚你在賣什麼。

混合的判斷準則——主軸只能有一個。一份作品集在一個方向上下重注,剩下三個方向最多是支撐,不能搶主軸。

混合做不好的作品集會變成「什麼都想證明」——結果什麼都沒證明。讀者離開首頁的時候,心裡的 takeaway 是模糊的。

CHAPTER 4 · YOUR PATTERN

怎麼挑你自己的模式

看完四種模式之後,最危險的反應是——挑「最厲害的那個」。

模式沒有最厲害。每一個都解決不同的 hiring 問題,每一個都需要不同的素材跟個人特質。挑錯模式比沒做作品集更慘——你會花一個月做一個埋掉自己優勢的網站。

用三個問題決定你該用哪個模式。

問題一:你最強的是什麼?

誠實回答。你的優勢是輸出(你做出來的東西好看、質量高)、軌跡(你的背景跟別人不一樣)、系統(你能規模化做事)、還是思考(你能拆問題、寫清楚)?對應到模式 01-04。優勢落在哪一塊,就用哪個模式。

問題二:你想去什麼樣的公司?

中小型公司、agency、freelance——案例驅動型最直接。早期 startup、想賣個人特色的職缺——故事驅動型有效。大公司、design system 取向團隊——系統驅動型對位。product strategy team、UX 取向——思考驅動型適合。

問題三:你手上有什麼素材?

這個問題很現實——你手上的素材決定了你能做什麼模式。沒有 4-6 個強 case 不能用案例驅動型。沒有獨特軌跡不能用故事驅動型。沒有系統化專案經驗不能用系統驅動型。沒有寫過幾篇深度文章不能用思考驅動型。素材不夠的時候不要硬撐——花時間去長素材,比包裝素材更值得。

這三個問題的答案要交集——你的優勢、目標公司類型、手上素材都指向同一個模式,才是對的選擇。

不交集的話——通常是你想去的公司跟你手上的素材不匹配。這不是模式選錯,是你還沒準備好去那種公司。那就花一年去長對的素材,不是包裝錯的素材。

你看完想模仿的作品集,不一定適合你。
你看完能拆出原理的作品集,才是你的老師。

常見問題

Q:UI/UX 設計師作品集應該放幾個 case?

A:3 到 5 個 case 最合適。8 個以上會稀釋——讀者注意力被切碎,每個 case 被認真看的機率下降。如果你有 8 個寫得不錯的 case,把另外 4 個放在「過往作品」區,不要混進主要選列。

Q:沒有業界經驗可以做 UI/UX 作品集嗎?

A:可以。重點不是「我做過什麼專案」而是「我能拆什麼設計問題」。挑你每天用、覺得有問題的真實產品,做完整的 reframe 跟改版,加上 case study,一個這樣的專案比 5 個仿 Dribbble 的視覺練習有用。

Q:設計師作品集首頁應該放什麼?

A:一句具體的 positioning(不要「UI/UX Designer based in Taipei」這種空話)+ 3 到 5 個精選 case 入口(每個 case 包含 hero 圖、具體標題、一句問題描述)+ 簡短聯絡資訊。不要放長版自我介紹、designer manifesto、雞湯金句。

Q:設計師作品集要不要寫 case study?

A:要,但不是流水帳。Case study 結構六段:題目來源、reframe、考慮過的方案、為什麼選這個、取捨了什麼、後續驗證。寫得出來的部分就是想得透的部分;寫不出來的部分就是還在偷懶的部分。

Q:作品集 case 應該以視覺為主還是以文字為主?

A:看你想證明什麼。視覺型作品集賣的是「做出來的東西好看」,文字型作品集賣的是「這個人怎麼想設計」。但兩個都不能完全偏廢——只有視覺會被認為是仿 Dribbble,只有文字會被懷疑「他真的會做設計嗎」。

Q:作品集應該模仿哪個設計師?

A:不要直接模仿,要拆解。看完別人作品集問三件事:他用哪個模式(案例 / 故事 / 系統 / 思考驅動)?他的優勢是什麼?這個模式適合他的素材嗎?拆出原理之後,反推你自己的作品集應該長什麼樣。模仿是稀釋,拆解是學習。

100 種 Figma 設計的方法 線上課程封面

COURSE · UI/UX

100 種 Figma 設計的方法

作品集只是這個課程的其中一塊。從 Figma 操作到 case study 寫法、從職缺判讀到設計師職涯思維——把每一個讓你卡住的環節,一次補齊。

100+ 個 Figma 操作技巧,從 Auto Layout 到 Variables

設計師求職與作品集 chapter(這篇就是其中一篇)

Junior 到 Senior 的設計師思維轉變