【作品集範本】6大領域範例分析+4步驟製作教學|附排版技巧與免費工具比較

從作品集定義、必備內容清單、6 大領域範例分析到 4 步驟製作教學,搭配排版技巧與免費工具比較,讓你快速建立專業的個人作品集。
作品集範本 完整指南精選圖片

本文包含合作推廣連結,若您透過連結購買,我們可能獲得佣金,不會影響您的價格。

架站工具推薦
⭐ 編輯首選
全球 43% 網站的架站首選平台
  • 拖拉式編輯器——不需寫程式,直覺式建立專業網站
  • 數千款佈景主題——商業、作品集、部落格一鍵套用
  • 內建 SEO 工具——網站地圖、社群分享、搜尋優化
  • WooCommerce 電商——免費外掛即可開店收款
9.3 / 10 本站評分
全球 4.7 億網站使用 · 免費方案
免費建立網站 免費方案永久使用,隨時升級
月付 NT$80 起的 WordPress 主機
查看方案
視覺化設計 × 內建 CMS × 設計師首選
免費試用

作品集(Portfolio)是將個人專業技能、創作成果與工作經歷,以視覺化方式整合呈現的展示工具。 這篇文章涵蓋作品集的定義與用途、必備內容清單、6 大領域範例分析、4 步驟製作教學、排版技巧,以及 5 款免費工具的橫向比較,無論你是設計系學生準備備審資料,還是求職者製作面試作品集,都能找到實用的參考。

什麼是作品集?Portfolio 的定義與用途

作品集的定義

作品集(Portfolio)是一份系統化整理的專業展示文件或網站,用來呈現個人的技能、創作過程與工作成果。與單純列出經歷的履歷不同,作品集透過視覺化的方式——包括圖片、案例研究、設計稿、文字作品等——讓觀看者直接感受到你的專業能力和創作風格。

作品集的 4 大核心功能:展示專業技能、呈現創作過程、建立個人品牌、促成商業合作
▲ 作品集的 4 大核心功能:展示專業技能、呈現創作過程、建立個人品牌、促成商業合作

誰需要作品集?

作品集並非設計師的專利。以下幾種身份的人都能從一份好的作品集中受益:

求職者與轉職者:面試作品集範例能讓面試官在 30 秒內判斷你的實力。根據業界觀察,附上作品集的求職者在面試邀約率上明顯高於只附履歷的競爭者,尤其是設計、行銷、前端開發等需要「看成果」的職位。

設計系 / 美術系學生:無論是高中作品集範本(用於大學申請備審資料)還是大學作品集範本(用於研究所申請或實習),學生階段的作品集重點在於展示創作思維與學習歷程,而非商業成果。

自由工作者(Freelancer):個人作品集範本就是你的線上名片。潛在客戶通常會先瀏覽你的作品集,再決定是否發出合作邀請。WordPress.com 提供專門的作品集佈景主題,搭配拖放式編輯器,讓自由工作者不需要寫任何程式碼,就能快速建好包含相簿、預約表單和價目表的個人網站。

內容創作者與寫作者:文字工作者的作品集能展示不同風格的寫作能力,從品牌文案到深度報導,讓編輯或客戶快速評估你是否符合需求。

作品集 vs 履歷:什麼時候需要哪一種?

很多人會混淆作品集和履歷的用途。簡單來說:

  • 履歷(Resume / CV):以文字為主,條列式呈現學經歷、技能和成就,適合快速篩選。
  • 作品集(Portfolio):以視覺為主,展示實際作品和創作過程,適合深度評估。

選擇邏輯:如果你的工作成果「看得到」(設計稿、網站、攝影作品、影片),就需要作品集。如果你的工作成果主要是「數字」(業績、管理經驗),履歷可能就夠了——但即使如此,一份簡單的作品集仍能讓你脫穎而出。

PDF 作品集 vs 網站作品集

比較項目 PDF 作品集 網站作品集
適合場景 面試現場、email 附件、備審資料上傳 長期展示、持續更新、SEO 曝光
更新難度 每次修改需重新輸出 隨時登入後台即可更新
互動性 僅靜態頁面 可嵌入影片、動畫、互動原型
成本 免費(用 Figma 或 Canva 輸出) 免費方案可用,付費方案功能更完整
最適合 學生備審、特定面試場合 自由工作者、長期經營個人品牌

建議做法:兩者都準備。先建立網站作品集作為主要展示平台,再從中擷取精華輸出 PDF 版本,用於需要附件的場合。

作品集必備內容清單

一份完整的作品集不只是把作品丟上去,而是需要策略性地安排每個區塊。以下是作品集的 4 大必備內容,搭配具體的文案公式和網站設計建議。

首頁(Hero 區塊)

首頁是訪客的第一印象,必須在 3 秒內傳達「你是誰」和「你能做什麼」。

文案公式[你的名字] — [職稱] | [一句話價值主張]

範例:

  • 「王小明 — UI/UX 設計師 | 用數據驅動的設計提升產品轉換率」
  • 「李美玲 — 品牌攝影師 | 為中小企業打造有溫度的視覺形象」

首頁還應包含:

  • 簡潔的導航選單(作品、關於我、聯絡方式)
  • 一張專業頭像或代表性作品圖片
  • 明確的行動呼籲按鈕(如「查看作品」或「聯絡我」)
作品集首頁設計範例——WordPress Portfolio 佈景主題展示職稱與導航選單
來源:Portfolio WordPress Themes

作品展示頁

這是作品集的核心。根據評測經驗,展示 5-10 件精選作品是最佳數量——太少無法展現多樣性,太多會讓觀看者疲勞。

作品描述的 STAR 格式範本

  • S(Situation / 情境):這個專案的背景是什麼?客戶是誰?
  • T(Task / 任務):你負責什麼?要解決什麼問題?
  • A(Action / 行動):你具體做了什麼?用了什麼工具或方法?
  • R(Result / 成果):最終結果如何?有沒有可量化的數據?

範例:「為某電商品牌重新設計結帳流程(S),負責從用戶研究到 UI 設計的完整流程(T),透過 A/B 測試驗證 3 種結帳頁面方案(A),最終將購物車放棄率降低 23%(R)。」

作品集作品展示頁範例——清晰的作品分類與簡潔排版

來源:Portfolio WordPress Themes

關於我(About Me)頁面

這個頁面讓訪客認識作品背後的人。避免寫成流水帳式的自傳,改用以下結構:

150 字自我介紹結構範本
1. 背景(1-2 句):你的專業領域和年資
2. 專長(1-2 句):你最擅長解決什麼問題
3. 價值觀(1 句):你的設計 / 工作理念

範例:「擁有 5 年 UI/UX 設計經驗,曾服務金融科技與電商產業。擅長將複雜的業務流程轉化為直覺的使用者介面,透過數據驅動的設計方法持續優化產品體驗。相信好的設計不只是美觀,更是解決問題的最短路徑。」

頁面中也可以加入:

  • 核心技能清單(以標籤或進度條呈現)
  • 工作經歷時間軸
  • 專業證照或獲獎紀錄
作品集 About Me 頁面範例——專業形象照搭配自我介紹文案

來源:Portfolio WordPress Themes

聯絡方式

讓潛在客戶或雇主能輕鬆聯繫你。聯絡方式通常放在頁尾,但也建議獨立一個頁面提供更完整的資訊。

專業信箱格式建議:使用 名字@你的網域.com(如 hello@wangdesign.com),避免使用 cutegirl123@gmail.com 這類非專業信箱。如果還沒有自訂網域,至少使用 名字.姓氏@gmail.com 的格式。

社群連結建議

  • 設計師:Behance、Dribbble、LinkedIn
  • 攝影師:Instagram、500px、LinkedIn
  • 開發者:GitHub、LinkedIn、個人部落格
  • 寫作者:Medium、LinkedIn、個人部落格

在作品集中加入聯絡表單也是好選擇,讓訪客不需要離開網站就能留言。

作品集聯絡方式頁面範例——聯絡表單與社群連結

來源:Portfolio WordPress Themes

各領域作品集範例分析(含排版技巧)

UX/UI 設計作品集範例

UX/UI 設計師的作品集不只是展示最終畫面,更要呈現設計思維和解題過程。一份優秀的 UX/UI 作品集範例通常包含:

互動原型連結的具體做法:在每個案例研究中嵌入 Figma 或 InVision 的互動原型連結,讓觀看者直接操作你的設計。具體步驟是在 Figma 中將設計稿設為「可分享」,複製原型連結後嵌入作品集頁面。

排版重點

  • 展示完整的設計流程:用戶研究 → 線框圖 → 視覺設計 → 原型測試 → 成果數據
  • 響應式設計展示:同時呈現桌面版、平板版和手機版的畫面
  • 量化成果:「轉換率提升 15%」比「改善了使用者體驗」更有說服力
  • 列出精通的設計工具(Figma、Sketch、Adobe XD 等)

如果你想系統性地學習 UX 設計方法論,可以參考 Google UX 設計課程,建立扎實的設計流程知識。

UX/UI 設計作品集範例——Figma 模板展示設計流程與互動原型

UI/U設計師作品集模板  來源:Figma

平面設計作品集範本

平面設計師的核心能力在於視覺傳達。你的作品集本身就是一件作品,排版和色彩搭配必須展現你的專業水準。

排版重點

  • 使用大型圖片作為視覺焦點,避免過多文字分散注意力
  • 運用色彩理論:對比色強調重點元素,和諧色營造整體氛圍
  • 展示創意解決方案:說明你如何針對客戶需求提出設計策略
  • 附上客戶反饋或成果數據,證明設計的商業價值

設計系學生備審注意事項:如果你是設計系學生準備備審資料,作品集中應特別強調「創作理念」和「設計過程」,而非只放最終成品。評審教授想看到的是你的思考方式,而不只是技術能力。

平面設計作品集範本——Squarespace 模板展示視覺焦點與色彩搭配

平面設計作品集範例  來源:Popular Website Templates  – Squarespace

攝影作品集範例

攝影作品集的核心是讓圖片說話。排版應該盡可能簡潔,讓訪客的注意力集中在照片本身。

排版重點

  • 使用高解析度圖片,確保在所有裝置上都能清晰展示
  • 根據攝影風格選擇統一的視覺主題(如黑白、自然風景、都市紀實)
  • 簡潔的介面設計,避免過多裝飾元素
  • 為每組作品提供拍攝背景故事或創作理念

攝影師特別適合使用提供大圖展示功能的平台。Squarespace 的作品集模板以設計美感著稱,內建的相簿排版功能讓攝影師不需要任何技術背景就能建立專業的線上作品集。

攝影作品集範例——Squarespace 模板展示高解析度圖片與簡潔排版

攝影作品集範例  來源:Popular Website Templates  – Squarespace

遊戲設計作品集範本

遊戲設計師的作品集應該體現互動性和沉浸感,讓訪客在瀏覽時就能感受到你的設計能力。

排版重點

  • 互動性設計:使用動態背景、互動式圖標或遊戲化的導航元素
  • 視覺層次:大膽的標題、鮮明的顏色,較暗的背景色增強可讀性
  • 個性化元素:自訂 Logo、特殊的滾動效果或獨特的頁面過渡動畫
  • 詳盡的項目展示頁:為每款遊戲設計專屬頁面,包括遊戲概述、技術細節和開發過程
遊戲設計作品集範本——Wix 模板展示互動性設計與視覺層次

遊戲設計作品集模板  來源:Wix

寫作作品集範例

寫作者的作品集需要在「展示文字能力」和「保持視覺吸引力」之間取得平衡。

排版重點

  • 分層次的文案展示:使用不同大小和粗細的字體區分標題、正文和說明
  • 模塊化設計:將作品按主題或類型分類,方便讀者快速找到感興趣的內容
  • 留白的藝術:合理運用負空間,避免版面過於擁擠
  • 一致的視覺風格:字體、顏色和布局方式保持統一
寫作作品集範例——Wix 模板展示分層次文案與模塊化設計

寫作作品集範例  來源:Wix

美術 / 設計系學生作品集範本

設計系作品集範例和美術作品集範本有其特殊的結構需求,因為評審教授關注的重點與業界客戶不同。

備審資料作品集的特殊結構

  1. 創作理念(Why):為什麼選擇這個主題?你想表達什麼?
  2. 過程記錄(How):從草稿、實驗到修改的完整歷程,展示你的思考演變
  3. 成品展示(What):最終作品的高品質呈現

高中作品集範本 vs 大學作品集範本的差異

比較項目 高中作品集(升大學) 大學作品集(升研究所/求職)
重點 創作潛力與學習熱情 專業深度與獨立思考能力
作品數量 8-12 件,展示多元嘗試 5-8 件,展示專業深度
過程記錄 必備,佔比 40-50% 選擇性呈現,佔比 20-30%
文字說明 簡短,著重創作動機 深入,包含研究方法與反思

實用建議:學生作品集中,個人專案和課堂作業都可以放入,但要確保每件作品都能展示你的成長軌跡。如果有參加比賽或展覽的經歷,務必標註出來。

學生作品集 vs 求職作品集:左欄「學生備審」重點為創作理念、過程記錄、學習歷程;右欄「求職面試」重點為解題能力、量化成果、商業價值
▲ 學生作品集 vs 求職作品集:左欄「學生備審」重點為創作理念、過程記錄、學習歷程;右欄「求職面試」重點為解題能力、量化成果、商業價值

作品集怎麼做?4 步驟完整教學

掌握了作品集的內容架構後,接下來進入實作環節。從規劃到上線,只需要 4 個步驟。

Portfolio 作品集製作 4 步驟流程圖
Portfolio作品集製作步驟

第一步:計劃與準備

在動手設計之前,先釐清兩個關鍵問題:

確定目標受眾:你的作品集是給誰看的?潛在雇主、客戶、還是學校評審?這會直接影響你的作品選擇和呈現方式。例如,面試作品集範例應該針對目標職位客製化,而非把所有作品都放上去。

作品篩選標準(用這 3 個問題過濾):
1. 能否量化成果? 「提升轉換率 20%」比「改善了使用者體驗」更有力
2. 是否展示解題過程? 光放成品不夠,要讓觀看者看到你的思考路徑
3. 是否與目標相關? 申請 UI 設計職位就不需要放大學時期的水彩畫

建議從過去的作品中挑選 5-10 件最能代表你能力的作品,確保涵蓋不同類型和難度。

作品集製作第一步——計畫與準備的核心要點
Portfolio作品集製作第一步:計畫與準備

第二步:選擇工具與設計排版

選對工具能讓製作效率翻倍。以下是不同背景的選擇建議:

不同背景選工具的判斷邏輯

  • 完全不會寫程式、想快速上線 → 拖放式架站平台(WordPress.com、Wix)
  • 有基本 HTML/CSS 知識、追求設計自由度 → Webflow
  • 只需要 PDF 格式、不需要網站 → Figma 或 Canva
  • 重視模板美感、願意付費 → Squarespace

排版具體規格建議

  • 每頁展示 1-3 件作品(避免資訊過載)
  • 圖文比例:圖片佔 60-70%,文字佔 30-40%
  • 作品圖片寬度至少 1200px,確保在大螢幕上不模糊
  • 每件作品之間留出足夠的間距(至少 40-60px)

如果你對網頁設計軟體的選擇還不確定,可以參考站內的完整比較指南。

作品集製作第二步——設計與排版的工具選擇
Portfolio作品集製作第二步:設計與調整

第三步:撰寫作品描述與自我介紹

內容撰寫是很多人忽略的環節,但好的文字能讓作品集從「好看」變成「有說服力」。

STAR 格式範例(完整版)

專案名稱:某金融 App 結帳流程重設計
情境(S):該 App 的購物車放棄率高達 68%,客戶希望在 3 個月內改善。
任務(T):負責從用戶研究到 UI 設計的完整流程,帶領 2 人設計團隊。
行動(A):進行 15 場用戶訪談,發現主要痛點是結帳步驟過多。將原本 5 步驟簡化為 3 步驟,並設計 A/B 測試驗證 3 種方案。
成果(R):購物車放棄率降低 23%,月營收增加約 NT$150 萬。

自我介紹撰寫原則

  • 用第三人稱或第一人稱都可以,但全文保持一致
  • 避免空泛的形容詞(「熱愛設計」),改用具體的描述(「5 年來專注於金融科技產品的介面設計」)
  • 控制在 150-200 字以內
作品集製作第三步——內容撰寫的 STAR 格式範本
Portfolio作品集製作第三步:具體內容撰寫

第四步:發布、測試與定期維護

完成設計和內容後,不要急著發布。先跑完這份 checklist:

發布前 Checklist

  • ☐ 跨裝置測試:在手機、平板、桌機上分別瀏覽,確認排版正常
  • ☐ 連結檢查:每個作品連結、社群連結、聯絡表單都能正常運作
  • ☐ 載入速度:圖片壓縮後上傳,確保頁面在 3 秒內載入完成
  • ☐ 拼字校對:請朋友幫忙檢查錯字和語句不通順的地方
  • ☐ 瀏覽器相容性:至少在 Chrome、Safari、Firefox 上測試

維護頻率建議:每完成一個新專案就更新作品集,至少每半年全面檢視一次。移除過時或品質不夠好的作品,保持作品集的新鮮度。

作品集製作第四步——發布前 Checklist 與維護建議
Portfolio作品集製作第四步:發布與維護

作品集製作工具比較|免費模板平台推薦

平台 難易度 免費方案限制 付費起始價(價格僅供參考,以官網為準) 最適合對象 開始使用
WordPress.com ⭐⭐(容易) 有廣告、無自訂網域 約 $4/月(≈ NT$124/月) 想要最大擴充性的使用者 免費建站 →
Wix ⭐(最容易) 有廣告、500MB 儲存 約 $17/月(≈ NT$527/月) 完全不會程式的視覺創作者 Wix →
Squarespace ⭐⭐(容易) 無免費方案(14 天試用) 約 $16/月(≈ NT$496/月) 重視模板美感的攝影師/設計師 Squarespace →
Webflow ⭐⭐⭐(中等) 2 頁專案、webflow.io 子網域 約 $14/月(≈ NT$434/月) 有 HTML/CSS 基礎的設計師 Webflow →
Figma ⭐⭐(容易) 3 個專案檔案 約 $12/月(≈ NT$372/月) UI/UX 設計師(輸出 PDF)

Wix

Wix 是目前最容易上手的拖放式架站平台之一,特別適合完全沒有程式背景的視覺創作者。它的編輯器是真正的「所見即所得」——你在編輯畫面上看到什麼,發布後就是什麼。

作品集相關功能

  • 超過 800 個設計模板,其中作品集類別有數十個選擇
  • 支援高解析度圖片展示和多樣化的畫廊排版
  • 內建影片背景和動態效果功能
  • 社群媒體無縫整合

限制:免費方案會顯示 Wix 廣告,且儲存空間僅 500MB。對於作品圖片較多的攝影師或設計師,可能需要升級付費方案。

Wix 作品集模板介面——拖放式編輯器與畫廊排版
Wix作品集模板

WordPress.com

WordPress 是全球超過 43% 網站使用的內容管理系統,而 WordPress.com 是其官方託管平台。根據評測,WordPress.com 在擴充性和生態系完整度上獲得最高分——超過 10 萬個外掛和數千個佈景主題,幾乎能滿足任何需求。

作品集相關功能

  • 專門的作品集佈景主題,一鍵套用即可開始編輯
  • 拖放式區塊編輯器,不需要寫程式碼
  • 免費方案永久使用,不需要信用卡
  • 需要更多功能時可隨時升級,外掛生態系提供無限擴充可能

適合對象:想要長期經營個人品牌、未來可能擴充部落格或電商功能的使用者。WordPress.com 的優勢在於你不會「長大後換平台」——從個人作品集到企業官網,它都能勝任。

WordPress.com 作品集模板——佈景主題與區塊編輯器
WordPress作品集模板 來源:WordPress.com Themes
⭐ 全球逾 42% 網站都用 WordPress ⭐ 4.6 / 5

WordPress.com|從部落格到企業官網的架站首選

🎁 免費方案永久使用、不會到期——50,000+ 外掛生態系,不論部落格、品牌官網或電商都能彈性擴充
  • 🌐 全球逾 42% 網站用 WordPress——最成熟穩定的架站生態系
  • 🎨 數百種佈景主題——免費 + 付費,各行業模板都有
  • 🔌 50,000+ 外掛——SEO、電商、表單、社群整合一鍵安裝
  • 📈 從免費到企業——隨業務成長彈性升級方案

免費方案永久使用 · 不需信用卡 · 自訂網域可升級

Webflow

Webflow 結合了視覺化設計和程式碼層級的控制能力。它的編輯器讓你用拖放方式操作,但背後會自動產生乾淨的 HTML、CSS 和 JavaScript——你可以直接編輯 CSS 和 HTML,實現幾乎沒有限制的排版自由度。

作品集相關功能

  • 設計自由度最高,幾乎沒有排版限制
  • 支援複雜的互動動畫效果
  • 內建 CMS 系統,方便管理大量作品
  • 響應式設計可精確控制每個斷點的排版

限制:學習曲線較陡,完全沒有網頁基礎的人可能需要花 1-2 週熟悉介面。免費方案限制 2 個頁面專案,且使用 webflow.io 子網域。

適合對象:有基本 HTML/CSS 知識、追求設計自由度最高的設計師。如果你想讓作品集本身就成為一件展示技術能力的作品,Webflow 是最佳選擇。

Webflow 作品集模板——視覺化設計器與互動動畫
Webflow作品集模板  來源:Webflow Templates

Squarespace

Squarespace 以設計師級的模板品質聞名。如果你不想花太多時間在排版上,只想快速建立一個「看起來就很專業」的作品集,Squarespace 的模板能讓你事半功倍。

作品集相關功能

  • 模板設計美感在所有平台中名列前茅
  • 操作直觀,內建 SEO 和行銷工具
  • 支援電子商務功能(如果你需要販售作品)
  • 14 天免費試用,不需要信用卡

限制:沒有永久免費方案,試用期結束後必須付費。自訂彈性不如 WordPress.com 或 Webflow。

適合對象:攝影師、藝術家和重視視覺美感的創作者。Squarespace 的作品集模板特別適合以圖片為主的展示需求。

Squarespace 作品集模板——設計師級模板與圖片展示

Squarespace作品集模板  來源:Popular Website Templates – Squarespace

Figma

Figma 嚴格來說不是架站工具,而是介面設計工具。但對於 UI/UX 設計師來說,用 Figma 製作作品集有獨特的優勢:你可以在同一個工具中設計作品和製作作品集,並且直接嵌入互動原型。

作品集相關功能

  • 支援多人即時協作,方便與團隊成員或客戶討論
  • 可直接嵌入互動原型連結
  • 輸出高品質 PDF,適合面試現場或 email 附件
  • 免費方案提供 3 個專案檔案

限制:Figma 製作的是靜態 PDF 或簡報格式的作品集,不是網站。如果你需要一個可以被搜尋引擎找到的線上作品集,還是需要搭配架站平台使用。

適合對象:UI/UX 設計師,以及需要 PDF 格式作品集的學生(備審資料上傳)。

Figma 作品集模板——介面設計工具與互動原型展示

Figma作品集模板  來源:Figma

你適合哪種架站方案?

  • 想快速上線、最大外掛生態系 → WordPress.com(全球 43% 網站使用,免費方案永久使用)
  • 完全不會程式、重視拖放體驗 → Wix(免費方案可用)
  • 設計師或重視視覺的品牌 → Webflow(設計自由度最高)
  • 注重模板設計美感 → Squarespace(14 天免費試用,不需要信用卡)
  • UI/UX 設計師需要 PDF 作品集 → Figma(免費方案 3 個協作檔案、無限草稿)

如果你想瀏覽更多架站平台的選擇,可以參考9 大免費作品集網站推薦的完整比較。

作品集排版技巧:讓作品集脫穎而出的 5 個關鍵

作品集排版 5 大關鍵:視覺層次、色彩搭配、留白運用、響應式設計、一致性
▲ 作品集排版 5 大關鍵:視覺層次、色彩搭配、留白運用、響應式設計、一致性

視覺層次

視覺層次決定了訪客的閱讀順序。透過字體大小、粗細和顏色的差異,引導觀看者的視線從最重要的資訊開始。

具體規格建議

  • 頁面標題(H1):32-40px,粗體
  • 段落標題(H2):24-28px,粗體或半粗體
  • 內文:16-18px,正常字重
  • 說明文字 / 圖片標題:14px,淺灰色

色彩搭配

遵循 60-30-10 法則:60% 主色(通常是背景色,如白色或淺灰)、30% 輔助色(用於區塊背景或強調元素)、10% 點綴色(用於按鈕和連結)。

如果你對配色沒有把握,可以參考站內的配色網站推薦,找到適合你風格的色彩組合。

留白運用

留白(Whitespace)不是「浪費空間」,而是讓內容呼吸的關鍵。

具體間距建議

  • 每個作品區塊的上下間距:60-100px
  • 圖片與文字之間:20-30px
  • 段落之間:16-24px
  • 頁面左右邊距:桌面版至少 80px,手機版至少 20px

響應式設計

超過 60% 的網頁流量來自行動裝置。如果你的作品集在手機上看起來很糟,等於失去了一半以上的潛在觀看者。

手機版作品集的常見錯誤

  • 圖片沒有自動縮放,需要左右滑動才能看完
  • 字體太小(手機上內文至少要 16px)
  • 按鈕太小或太密集,手指難以準確點擊
  • 橫向排列的作品在手機上沒有自動轉為縱向

使用前面推薦的架站平台(WordPress.com、Wix、Squarespace、Webflow)都內建響應式設計功能,但發布前仍需要在實際手機上測試。

一致性

一致性是專業感的來源。整份作品集應該遵循統一的視覺規範:

  • 字體:最多使用 2 種(一種用於標題,一種用於內文)
  • 配色:最多 3 色(主色 + 輔助色 + 點綴色)
  • 圖片風格:統一的裁切比例、濾鏡風格和邊框處理
  • 排版格式:每件作品的描述結構保持一致(都用 STAR 格式,或都用「問題→解決方案→成果」格式)

如果你需要免費素材來搭配作品集的視覺設計,站內有完整的素材網站推薦。

結論

  • 明確目標受眾:求職、接案、升學的作品集側重點不同,先釐清再動手
  • 內容比數量重要:精選 5-10 件作品,每件都用 STAR 格式撰寫有說服力的描述
  • 排版決定第一印象:遵循視覺層次、60-30-10 配色法則和留白原則
  • 選對工具事半功倍:根據你的技術背景和預算,從 WordPress.com、Wix、Squarespace、Webflow 或 Figma 中選擇
  • 持續更新是關鍵:每完成一個新專案就更新作品集,保持內容的新鮮度

想現在就開始建立你的作品集?前往 WordPress.com,選擇一個作品集佈景主題,拖放編輯器讓你 10 分鐘就能看到網站雛形——不需要任何程式碼,免費方案永久使用。

⭐ 全球逾 42% 網站都用 WordPress ⭐ 4.6 / 5

WordPress.com|從部落格到企業官網的架站首選

🎁 免費方案永久使用、不會到期——50,000+ 外掛生態系,不論部落格、品牌官網或電商都能彈性擴充
  • 🌐 全球逾 42% 網站用 WordPress——最成熟穩定的架站生態系
  • 🎨 數百種佈景主題——免費 + 付費,各行業模板都有
  • 🔌 50,000+ 外掛——SEO、電商、表單、社群整合一鍵安裝
  • 📈 從免費到企業——隨業務成長彈性升級方案

免費方案永久使用 · 不需信用卡 · 自訂網域可升級

常見問題(FAQ)

作品集要放幾件作品?

建議放 5-10 件精選作品。質量永遠重於數量,每件作品都應該能展示你的核心技能。如果你是學生準備備審資料,可以放到 8-12 件以展示多元嘗試,但每件仍需精心挑選。

作品集要用中文還是英文?

取決於你的目標受眾。如果是應徵台灣本土企業,中文為主即可;如果目標是外商或國際客戶,建議使用英文或中英雙語。一個折衷做法是:作品描述用英文,自我介紹提供中英雙版本。

沒有工作經驗可以做作品集嗎?

完全可以。學生和轉職者可以放入課堂專案、個人 Side Project、比賽作品、志工設計案例,甚至是重新設計(Redesign)現有產品的練習。重點是展示你的思考過程和解題能力,而非作品的商業規模。

在作品集中加入個人項目好嗎?

非常好。個人項目(Side Project)能展示你在工作或課業之外的主動性和創造力。對於還沒有豐富工作經驗的學生來說,個人項目更是填充作品集的重要來源。選擇時注意挑選能展示你核心技能的項目,並像對待正式專案一樣撰寫完整的描述。

是否應該包括推薦信或評價?

建議加入。客戶推薦信或同事評價能有效增加作品集的可信度,尤其能從第三方角度說明你的專業能力和合作態度。你可以在作品展示頁中嵌入相關專案的客戶評語,或在「關於我」頁面設置獨立的推薦區塊。即使只有 2-3 則簡短的推薦語,也比完全沒有更有說服力。

我應該如何選擇作品集的封面?

封面是訪客的第一視覺印象,應該選擇你最具代表性、視覺衝擊力最強的作品作為封面圖。如果是網站作品集,首頁的 Hero 區塊就扮演封面角色——確保它能在 3 秒內傳達你的專業定位。如果是 PDF 作品集,封面應包含你的名字、職稱和一張精選作品圖,保持簡潔有力,避免放太多文字或裝飾元素。

作品集要多久更新一次?

理想情況下,每完成一個重要專案就更新。至少每半年全面檢視一次,移除過時或品質不夠好的作品。保持作品集的時效性,讓觀看者看到你最新的能力水準。

如何處理機密或 NDA 保護的作品?

不要在公開作品集中放任何保密資訊。替代做法:將專案描述為匿名案例研究,去除所有可識別的企業資訊;只展示設計流程和方法論,不展示最終成品;或者在獲得前雇主明確書面許可後再展示。

作品集要用 PDF 還是網站?

建議兩者都準備。網站作品集作為主要展示平台,方便持續更新和被搜尋引擎找到;PDF 版本用於面試現場、email 附件或備審資料上傳。先建好網站版,再從中擷取精華輸出 PDF。

如何為作品集撰寫有效的項目描述?

使用 STAR 格式:情境(Situation)→ 任務(Task)→ 行動(Action)→ 成果(Result)。每個描述控制在 100-150 字,突出你的具體貢獻和可量化的成果。避免空泛的描述如「負責設計工作」,改為「主導 App 結帳流程重設計,將購物車放棄率降低 23%」。

個人作品集要包含教育背景嗎?

如果教育背景與你的專業相關,或你是剛畢業的新人,應該包含。對於有多年工作經驗的人,教育背景可以簡要帶過,把空間留給更有說服力的專案成果。相關的專業證照、線上課程(如 Coursera 的 UX 設計課程)也值得列出。

更多精彩內容

WordPress.com
用 WordPress.com 免費建立你的網站
拖拉式編輯 · 數千款主題 · SEO 工具 · 免費方案