作品集範本大全：模板與實際範例打造履歷作品集

想像一位用人主管或潛在客戶，短時間內要掃過多份作品集。他會先快速判斷是否值得繼續看。你的作品集範本要解決的，不只是「看起來漂不漂亮」，還要讓人能迅速理解你的角色與價值。

作品集範本的本質，是一套為「你這個人」設計的說服路徑，跟商品 Landing Page 有相似之處。你挑的範本要幫陌生人快速理解「你是誰、你能做什麼、證據是什麼、怎麼找你」。

先講結論：範本不能只看外觀，也要看讀者能否快速理解你的價值。挑範本前確認三件事：首屏有沒有講清楚你是誰、作品有沒有交代脈絡、聯絡方式是否容易找到。

把作品集範本當成「賣你這個人」的 Landing Page

很多人挑作品集範本的邏輯是：打開某個模板網站，看到一個視覺很炫、動畫很順的版型，覺得「這個有設計感」，就選了。這是裝潢思維，不是成交思維。換個方式想：你不會因為一間店面磁磚很漂亮就進去消費，你進去是因為櫥窗裡擺的東西讓你想要。

一份能帶來面試機會、帶來接案詢問的作品集範本，要完成三件事，而且有先後順序：

• 抓注意：首屏一眼就要讓人知道「這是做什麼的人」。一句話定位加一張代表性畫面，勝過五段自我介紹。
• 建立可信：用精選的案例證明你真的做過、而且做得好。重點在於每一個都能講出所以然，數量多反而稀釋焦點。
• 促成聯絡：讓對方在看完的當下，零摩擦地知道下一步該怎麼找你。

這三件事的順序不能顛倒。常見的毛病是把「關於我」寫了三大段，作品卻要往下捲三屏才看到，這等於把成交頁最該放上面的商品圖，藏到了頁尾。如果你對 Landing Page 的成交邏輯還不熟，可以先看把這套觀念講清楚的Landing Page 教學，觀念完全可以搬過來用。

拆解一份合格範本：五個不能少的功能區塊

不管範本外觀是極簡、是編輯式、還是 Bento 格狀，一份結構合格的作品集，底層都該有這五個功能區塊。你可以把這當成挑範本的體檢表：缺任何一塊，這個範本就不及格。

功能區塊	它要回答的問題	常見失誤
Hero 首屏	這是做什麼的人？最強的作品長怎樣？	放一句空泛的標語，沒有作品畫面
關於我	你是誰、做幾年、為誰做？	寫成履歷自傳，三段看不到重點
精選作品	你最拿得出手的東西是什麼？	把所有東西全塞進去，沒有挑選
創作過程	你是怎麼想的、怎麼解問題的？	只放成品圖，完全沒有思路
聯絡管道	看完之後，怎麼找你？	只留一個難記的郵箱，沒有 CTA

這裡頭最容易被漏掉的是「創作過程」。多數人作品集只放成品，但對一個要決定要不要用你的人來說，成品只能證明「你做得出來」，過程才能證明「你會想」。後者才是僱主或客戶真正在買的東西。挑範本的時候，你要問自己的問題是：這個版型有沒有給「過程」足夠的展示空間？如果一個範本只能放滿滿的成品圖、沒有任何可以放文字思路的位置，那它再漂亮也不該選。

你的職業決定範本骨架：六種角色對照表

範本沒有絕對的好壞，只有「適不適合你要呈現的內容」。一個攝影師用了 UI 設計師那種充滿流程圖的範本，會顯得累贅；一個工程師用了攝影師那種全版大圖的範本，反而放不下他該展示的程式碼。底下這張角色對照表依不同職業的內容特性整理，幫你快速判斷自己適合哪一種骨架。

角色	適合的範本骨架	必備元素
UI/UX 設計師	案例研究導向，一個案例一個頁面	流程圖、Before/After、數據
平面、品牌設計師	高視覺密度的網格排列	大量作品圖、品牌應用情境
攝影師	全版影像、文字極簡	大圖、系列分類、拍攝資訊
前端、工程師	程式碼區塊與互動展示	可運行的 Demo、技術棧標示
行銷、文案	數據成果導向的編輯式版面	成效數字、前後對比、專案背景
學生、升學用	潛力與學習歷程並重	練習過程、老師回饋、自學紀錄

判斷的關鍵只有一個：你的專業，價值落在「視覺成品」還是「思考過程」？視覺強的，範本要懂得讓位，把畫面放大、文字壓到最少；思考強的，範本要提供足夠的排版結構，讓你能把一個案例的來龍去脈講清楚。多數人挑錯範本，就是因為搞反了這件事，明明該靠過程取勝，卻選了一個只適合放成品的版型。

五種版面排列的實際長相（附拆解）

功能區塊決定「要有什麼」，版面排列決定「怎麼擺」。下面整理五種常見排列邏輯，逐一拆解適用情境。

一、Bento Grid 模組化格狀

把頁面切成大大小小的方塊，每一塊裝一個單元：作品圖、自介、數字或聯絡按鈕。優點是資訊密度高，也適合同時呈現多種類型內容；缺點是方塊比例若沒設計好，容易顯得雜亂。想深入學這套排版，可以看Bento Grid 網頁排版教學。

二、雜誌編輯式

模仿雜誌的層次感：一個大標、副標、內文、配圖，排版有明顯的主從關係。這種排列特別適合行銷、文案、內容類工作者，因為它本身就在示範「你懂不懂資訊層次」。如果你連自己的作品集都排不出清楚的輕重緩急，用人方會合理懷疑你接手的專案也會一團混亂。它的風險是，做不好會像一份排得很擠的文件，所以留白要捨得給。

三、全版案例導向

一個螢幕只放一個案例，用大圖或大標把人吸住，往下捲才看到細節。這是 UI/UX 設計師、攝影師最愛用的方式，因為它給每個作品最大的舞台。代價很明確：你的作品數量不能多，三到五個是極限，再多讀者會捲到疲勞。也因為這樣，它倒逼你做出取捨，這本身對作品集的品質是好事。

四、極簡單頁捲動

整個作品集就是一條長長的往下捲動，用敘事節奏把「我是誰、我做過什麼、怎麼找我」串成一個故事。這種範本好看、有設計感，但非常吃文案功力。如果你的文字不夠好，單頁捲動會放大這個弱點，因為沒有其他視覺元素可以分散注意力，讀者的眼睛會一直停留在文字上。

五、水平橫向捲動

作品改成左右滑，視覺印象強烈，但讀者可能沒發現還能橫向捲動；手機上也要特別處理觸控、焦點順序與可及性。若使用這種排列，要提供明確提示，並在實際裝置上測試，而不是預設一定會跑版。

一頁式還是多頁式？先決定範本的結構骨架

在挑視覺排列之前，其實有一個更上層的決定會影響整本作品集的走向：你要做一頁式，還是多頁式？這兩種結構各有清楚的適用場景，選錯了，後面再怎麼調視覺都很難補救。

一頁式把內容放在同一個長頁面上，敘事順序集中。可以用錨點直接連到某件作品，但每個案例沒有獨立的 title、meta 與網址管理空間，搜尋與分享彈性較低。它適合作品數量不多、想用一條主線呈現的人。

多頁式則是每件作品有獨立的頁面，首頁扮演索引的角色，讀者點進去才看細節。它的優點跟一頁式剛好互補：SEO 友善，每件作品都能被搜尋引擎單獨收錄、被單獨分享。面試的時候，你可以直接把某一個最相關的作品連結丟給對方，對方一點就到。缺點是維護成本比較高，你要處理頁面之間的導覽、一致性的版型，還要確保每個頁面都完整、不會有半成品掛在上面。多頁式適合作品數量多、每一件都需要深度展開的人，像 UI/UX 設計師、攝影師、品牌顧問。

判斷的關鍵是：作品是否需要獨立連結、分享與搜尋呈現。需要各案例獨立標題與社群預覽時，多頁式更合適；只需一條完整敘事時，一頁式加錨點也能使用。

案例研究卡：作品集裡最值錢的一塊

這是整篇文章最關鍵、也最值得帶走的一個觀念。多數作品集都有一個共同問題：作品區清一色只放成品截圖，頂多加一行標題。這種作品集，不管範本多漂亮，說服力都很薄。真正能拉開差距的，是把每一件作品都做成一張「案例研究卡」。

案例研究卡的核心，是用一個固定的結構，把一件作品講成一個小故事。建議的結構是這四個欄位：

1. 問題背景：這個專案要解決什麼問題？為誰做？限制是什麼？
2. 我的角色：你在這個專案裡負責哪一段？是主導、還是協作？
3. 過程與決策：你試過哪些方向？為什麼選了現在這個？中間改了什麼？
4. 成果：做出來什麼？有沒有可以量化的成效、或具體的回饋？

這四個欄位的價值在於：它強迫你把「作品」從一張圖，升級成一個有脈絡的論證。看的人不再只是「嗯，這張圖做得不錯」，而是「這個人知道自己在做什麼，而且做選擇是有理由的」。後者才是僱主、客戶願意付錢買的東西。

實作上，每欄用幾句話交代即可。若寫「測試顯示放棄率下降」或「上線後完成率提升」，必須使用真實可說明的測試與數據；沒有量化證據時，改寫成觀察、回饋或尚待驗證的結果，不要用範例數字冒充成果。

於是，「範本」這件事，重點在於挑一個能穩定容納這個四欄結構的版型，而不是單純比外觀。你可以在設計工具裡先把這張卡的樣式定下來，再套用到每一件作品，整本作品集的質感會立刻拉開來。

說穿了，作品集真正在比的，從來不是誰的作品多，而是誰能把每一件作品講得最有份量。一張案例研究卡的說服力，往往勝過十張沒有說明的成品圖。

作品選擇的學問：放什麼、不放什麼，比你想的更關鍵

很多人以為作品集就是要「把做過的東西全秀出來」，這個觀念會害了你。一份塞了三十幾件作品、每一件都只有一張圖、一行字的作品集，看的人很快就審美疲勞，根本記不住任何一件。一份只放五件、每一件都講得透徹的作品集，殺傷力遠高於那份三十件的清單。寧缺毋濫是作品集內容策略的第一條鐵則。

那到底該放哪些、砍哪些？建議用這三個標準來篩選：

• 多樣性：挑出來的作品，要能展現你能駕馭不同類型的挑戰，讓看的人覺得「這個人能應付各種狀況」，而不是只會做同一件事。
• 成果感：優先放有明確結果的作品，不論是數據、客戶回饋、還是上線後的實際影響。有成果的作品，本身就是最好的推薦信。
• 相關性：把你最想被看見、跟目標職位或目標客戶最相關的作品，排在最前面。讀者的注意力是遞減的，最強的要放最前面。

被你砍掉的作品，不要直接刪掉。你可以準備一個「完整作品清單」的頁面或 PDF，當作備用資產。多數時候看的人不會翻到，但當對方主動想看更多、或面試時被問到「還有沒有別的」，你隨時能拿出來，這種「有底牌」的感覺會讓你顯得準備充分。

作品集會過期。定期檢查內容是否仍代表現在的能力，並在求職方向、服務或成果有重大變化時更新；不必硬套半年一次。舊作品若能清楚呈現重要決策與成長，也不一定要撤下。

履歷加作品集怎麼合體，才不會打架

很多人會糾結一個問題：到底要做履歷，還是做作品集？答案是：兩個都要，但要分清楚各自的工作。履歷負責給資格，作品集負責給證據。履歷是別人快速篩選你的依據，它要的是好掃描、好分類；作品集是別人決定要不要進一步認真看你的依據，它要的是好故事、好證明。

作品集與履歷可以互相補充，不必把兩份內容糊成一團。常見做法是以主頁展示作品，再提供精簡 PDF 履歷或可展開版本，讓用人方先快速掃讀作品，需要時再查看經歷細節。

要特別提醒的是，這份履歷的內容，不要跟作品集的「關於我」重複到一字不差。履歷適合放可以量化、可以核對的東西：學歷、經歷、技能、證照、年資；「關於我」則適合放性格、工作方式、合作過什麼樣的團隊。一份講數字，一份講風格，兩邊才會互相補強，讀者也就不會看到兩遍重複的話。

配色與視覺一致性：作品集的無聲自我介紹

一個常被低估的事實：你的作品集配色，在你還沒開口介紹自己之前，就已經先替你說了一段話。一個偏冷色、低彩度的版面，會讓人直覺聯想到嚴謹、專業、科技感；一個高彩度、暖色調的版面，會傳達活潑、創意、親和力。問題在於，多數人挑配色的時候只憑「我喜歡這個顏色」，完全沒想到它傳遞出去的訊號，跟自己的專業定位搭不搭。

建議很簡單：你的作品集主色，要跟你想被記住的標籤一致。如果你主攻金融科技、企業內訓這類講究信任感的領域，藍灰、墨綠、深咖這類沉穩色系會幫你加分；如果你做的是生活風格、餐飲、娛樂類的設計，適度的暖色和高彩度反而能讓人記住你。判斷的方法是閉上眼睛想一下：你這個人，給人的第一印象是冷靜還是熱情？配色就照著這個方向走。

一致性比花俏更重要。不少作品集的通病是首頁一個色系、作品頁又一個色系、聯絡頁再換一個，看起來就像三個不同的人做的。好的範本應該讓你定義一組主色、輔色、強調色，然後套用到全站。這套從顏色到排版都遵守同一套規則的做法，本質上就是把品牌識別系統的邏輯套到你自己的作品集上。這組顏色一旦定下來，請從一而終，包含按鈕、標題、分隔線、連結的顏色，全部遵守同一套規則。視覺一致的人，會被讀成「做事有條理的人」，這個印象的價值遠超過任何一個漂亮的漸層。

字體排版的細節，決定作品集的專業感

字體是作品集裡最容易被忽略、卻最能瞬間洩底的地方。一個用了太多字體、行距太擠、中英混排沒對齊的作品集，就算內容再強，第一眼也會被歸類成「不夠專業」。反過來說，把字體排版做到乾淨俐落，會讓人還沒細看內容，就先對你產生好感。

字體設定可以先守三個原則：字體家族不要過多；正文字級與行距要在實際裝置、縮放與長文情境下保持可讀；中英文混排時檢查基線、字重與行高。十六像素可當常見起點，不是所有字型與讀者都適用的固定門檻。

字體的選擇也在傳遞訊號。襯線字體（像明體）給人古典、編輯、有質感的感覺，適合內容導向、文案導向的作品集；無襯線字體（像黑體）給人現代、乾淨、科技感的感覺，適合 UI、產品、工程類的作品集。如果你對字體挑選還沒有清楚的判斷標準，可以先從排版的基本觀念打好底，這篇排版設計實戰技巧把字體選擇、行距、視覺層次都講得很完整，強烈建議搭配著讀。

還有一個很多人會踩的雷：過度依賴特殊字體來「做效果」。把標題用各種花俏的展示字體、手寫字體堆疊，短期看起來很有設計感，長期反而顯得雜亂、不專業。字體的功能是讓內容好讀、好理解，任何會犧牲 readability 的字體選擇，都要再三考慮。一個經得起時間考驗的作品集，字體通常都很節制，靠的是結構和留白在撐質感，靠的是內容本身在說話，這個原則不管過幾年都不會變。

七個讓客戶秒關頁面的地雷

懂了該做什麼之後，更要懂什麼絕對不能做。從大量作品集歸納出來的這七個「勸退地雷」，共同點是：設計者通常覺得很酷、很個人化，但對看的人來說，每一個都會妨礙閱讀。

地雷	為什麼會勸退	好範本怎麼處理
自動播放音樂或影片	多數人是在安靜的環境看，被嚇到就直接關掉	預設靜音，讓人主動點開
頁面載入過慢	等待會增加放棄瀏覽的機會	圖片先壓縮，非首屏影片再評估 lazy load
字體小到看不清楚	為了排版美觀壓縮字級，反而不耐讀	以 16px 作為常見起點，再測試字型、裝置與縮放
找不到聯絡方式	看完想找你卻找不到，等於白看	聯絡資訊放頁首與頁尾，重複出現
作品只有圖沒有說明	看不懂這件作品厲害在哪	每件作品配一張案例研究卡
手機版跑版	可能阻礙閱讀與操作	挑 RWD 範本，並在多種實際尺寸測試
過度的進場動畫	第一次看驚豔，第二次看嫌煩	動畫點到為止，不擋住內容

這七個裡頭，「手機版跑版」這一項特別值得點出。這幾年行動裝置的瀏覽比例只增不減，你作品集的讀者，很可能是在通勤的捷運上、用一支手機看完你全部的作品。如果你的範本在桌面上很漂亮、到手機上卻字疊字、圖跑位，那前面所有努力都歸零。挑範本的時候，務必把手機版的呈現當成第一優先的驗收條件，觀念可以從響應式網頁設計這篇先建立起來。

作品集也要懂 SEO，才能被搜尋引擎找到

這一節可能是多數設計師最忽略、卻最有長期價值的一塊。很多人把作品集上線之後，就等著別人主動來看，卻從沒想過：你的名字、你的專長，早就有人在 Google 上搜了。一個懂 SEO 的作品集，會在有人搜「你的名字加設計師」「某個城市加 UI 設計」的時候，自動把你推到第一頁，這等同於一份二十四小時不休息的自我推薦。

WordPress 在已知 CMS 的網站中占有很高比例，相關佈景主題、外掛、文件與開發社群也很完整（依 W3Techs 的市佔統計，2026 年 6 月）。這是生態優勢，不代表搜尋引擎因為網站使用 WordPress 就給排名加分。

搜尋結果裡，標題與摘要的寫法會影響點擊率，可參考 Backlinko 對四百萬筆搜尋結果的統計（2025 年 4 月）。翻成白話就是：就算你的作品集排在第一頁，如果標題寫得像「Welcome to my website」這種沒有人會點的句子，還是沒有人會進來。你的首頁標題，可以直接寫成「你的名字加你的專長」，例如「王小明｜UI/UX 設計師，專做 SaaS 產品介面」，通常比空泛的標語清楚。

頁面體驗也要照顧。Google 會使用包括 Core Web Vitals 在內的多種頁面體驗訊號，但相關性與內容品質仍優先，這些指標不是單一排名門檻，依據是 Google 官方對頁面體驗的說明。作品集常有大圖和影片，圖片壓縮與穩定版型最直接改善的是使用者體驗。

如果你想把這套站內優化做到位，強烈建議照著這篇站內 SEO 終極攻略走一遍，從標題、描述、圖片到結構化資料都有清楚步驟。圖片這關尤其重要，作品集動輒幾十張圖，沒做好命名跟壓縮，不但拖慢速度，還浪費了被圖片搜尋帶來流量的機會，這對一個以視覺為核心的作品集來說，等於白白丟掉一個最自然的流量入口。

四條建置路徑：範本到底從哪裡拿

觀念都講完了，接下來是最實際的問題：範本要去哪裡找？依你的技術背景，把路徑分成四條，你可以對號入座。這四條路沒有絕對的優劣，差別在於你願意投入多少時間、想換來多少掌控權和長期累積。便宜的方案省時間但限制多，需要動手的方案花心力但回報最久。先誠實評估自己的狀況再選，比盲目跟風哪一條都來得重要。

路徑一：零程式、要最快

用文件或視覺設計平台的現成範本，通常不必寫程式，上線速度取決於素材是否備妥。缺點是版型、網址、SEO 與匯出能力受平台限制，適合先做最小可行版本；使用前要查自訂網域與資料匯出規則。

路徑二：用 WordPress 佈景主題

這是最推薦大多數人走的路。WordPress 的佈景主題生態非常成熟，從免費到付費、從極簡到多功能的作品集專用主題都有，而且前面講過，它的 SEO 友善度跟長期擴充性都是最好的。你只要挑一個作品集導向的主題，套上自己的內容，就能得到一份既專業又能持續累積的作品集。想知道有哪些主題值得考慮，可以看這份WordPress 佈景主題推薦，免費跟付費的比較都有。如果你想進一步把整個站從零搭起來，這篇作品集網站製作實戰教學會帶你一步一步做完。

路徑三：設計師自架、完全掌控

如果你本身就是設計師，想在自己的設計工具裡把作品集的每一吋都自己刻出來，再交給開發或用視覺化編輯器落地，那你的範本就是你自己。這條路自由度最高，也最吃工。好處是做出來的東西本身就是你能力的證明，因為作品集網站本身就是你的一件作品。很多拿到頂級 offer 的設計師，作品集都是完全自製的，這本身就是最強的說服力。

路徑四：平台託管、衝曝光

把作品放到 Behance、Dribbble 這類設計社群平台。這條路的邏輯跟前三條不同：你借用的是別人已經聚集好的設計圈流量，等於把站寄放在別人家。優點是曝光快、容易遇到同溫層；缺點是它不是你的資產，平台改規則、演算法一變，你的能見度就會跟著波動。實務上建議把這條定位成「補充」，主場還是要放在自己擁有的站上。如果你正在比較到底該用哪個方向，作品集網站平台推薦這篇把十四個主流工具橫評過一次，可以省下你大量試錯的時間。

動手前的六步檢查清單

下面把觀念濃縮成一份檢查清單。順序可以依現有素材調整，但定位、篩選作品、內容結構、版型與裝置測試都要完成，避免只調視覺而沒有證據。

1. 先寫一句話定位：在碰任何範本之前，先用一句話講清楚「我是誰、做什麼、為誰做」。這句話會決定你的首屏、你的標題、你的 SEO。
2. 挑出三到五件代表作：不要貪多。把每一件都用前面講的案例研究卡四欄結構寫好，這比再多十張沒有說明的圖都有用。
3. 選一個符合你職業骨架的範本：回頭對照前面的六種角色表，選一個會讓你的內容類型發光的版型，別只挑看起來最炫的。
4. 把手機版當成第一驗收標準：範本上線前，一定用手機、平板、桌機三種尺寸都看一遍，字疊字、圖跑位、按鈕點不到，都要先修掉。
5. 把 SEO 基礎設好：標題寫成「名字加專長」、圖片做好壓縮跟命名、裝好 SEO 設定，讓你的作品集會被搜到。
6. 在顯眼處放一個明確的聯絡 CTA：讓任何一個看完想找你的人，都能在兩秒內知道下一步。一個清楚的「與我聯絡」按鈕，價值勝過再多裝飾。

一份好的作品集範本，從來不是最華麗的那一個，而是最懂「讓對的人、在對的時機、做出對的行動」的那一個。把你這個人的價值，放進一套清楚的說服路徑裡，剩下的，時間會替你證明。

如果你在架站的過程中，想要更系統性地把 SEO 跟轉換一起做起來，讓網站發揮實質的業務價值，Whoops SEO 提供從網站健檢到內容策略的完整顧問服務，想找人一起把網站的轉換撐起來，隨時可以來找我們聊聊。