W whoops.tw
網頁設計 最近加入

先決定載體,再挑模板

挑作品集範本之前,先把「展示載體」定下來,再去挑模板。自架網站、用 Behance 這類展示平台,或輸出 PDF,這三條路會框住你能客製多少、內容能掌控到什麼程度、後續維護要投入多…

挑作品集範本之前,先把「展示載體」定下來,再去挑模板。自架網站、用 Behance 這類展示平台,或輸出 PDF,這三條路會框住你能客製多少、內容能掌控到什麼程度、後續維護要投入多少。載體一固定,模板就只是最外層的包裝;全球有超過四成的網站由 WordPress 驅動 [來源:W3Techs — Usage Statistics and Market Share of WordPress〈https://w3techs.com/technologies/details/cm-wordpress〉〈2026-06-29〉],可挑的版型範圍也隨之收窄。

重點先看:業主平均只快速翻閱一份作品集,封面、目錄、作品排序與聯絡動線的邏輯,比模板的視覺華麗度更決定你會不會被略過;想長期經營個人品牌就選自架站。

先決定載體,再挑模板

挑作品集範本該從哪裡開始?先決定展示載體,再依載體挑模板。很多人一進到模板市集就失去方向,理由都一樣:沒先把載體定下來,於是在 WordPress 主題、Webflow 模板與 PDF 版型之間來回比較。三種主流載體各有明確定位:自架網站客製空間最大但要長期維護,展示平台 Behance、Dribbble 上傳即用但掌控權在平台方,PDF 適合面試投遞、攜帶方便但缺乏互動。

載體定下來之後,模板的選擇範圍就會跟著縮小,你才不會在幾千個版型裡迷失方向。判斷公式很直白:要長期經營個人品牌就選自架站,像 從零打造作品集網站教學 這類流程能幫你把基礎打好;只想快速展示、怕後續維護就選展示平台;純面試投遞則選 PDF。展示平台看似省事,但平台政策一改或技術出問題,你的作品曝光會直接受影響,這風險常常被忽略。

載體決定的也不只是「怎麼放作品」,還牽涉 用 Bridge 主題設計作品集網站 這類客製自由度、內容能不能完全自己掌握,以及後續要不要自己處理主機與資安。模板再美,載體選錯,後面每一步都會卡。接下來依「內容架構、範本來源、平台工具、排版、寫作」這個順序展開,把選模板放回它該在的位置。

  • 自架網站:客製空間最大、可做 SEO,但要時間、技術與長期維護
  • 展示平台:Behance、Dribbble 上傳即用、自帶流量,但設計自由度與掌控權受限
  • PDF:面試攜帶方便、離線可看,但無互動、不利被動曝光

多數接案設計師實際採用的,是「自架站加展示平台」的組合:把自架站當作品的主要落點,用展示平台導流。這樣做的理由是分散風險,平台流量波動時,你的主站內容仍在自己手上。如果你只在 Behance 經營,某天平台調整演算法或限流,你的被動詢問量會立刻縮水,而你完全無法插手。

作品集的六個基本區塊與內容密度

封面、目錄、個人簡介、作品本體、相關成就、聯絡方式,這六個區塊構成一份完整作品集。關鍵在於每個位置都要有明確任務,讓業主在有限的翻閱時間內看得完,並找到主動聯絡你的理由。業主通常只快速翻閱,把版面塞滿反而讓重點被淹沒。

這六個區塊「該塞多少」會隨資歷而變。新人常犯的錯是把每個區塊都做到最滿,以為內容多等於實力強;資深者反而會主動刪減,把版面留給真正有分量的作品。封面只放名字加一句定位,把完整自傳或副標題長串說明塞進來,會讓封面變成第二個簡介;目錄列出作品標題與頁碼或錨點即可,亂跳順序等於在第一頁就自曝其短。個人簡介控制在三到五句,講清楚你是誰、做什麼、為什麼值得信任就夠,羅列所有用過的工具與待過的公司反而是雜訊。如果你不知道怎麼拿捏敘事節奏,可以參考 作品集範本模板與實際範例 裡整理過的範例結構。

區塊核心任務常見錯誤
封面讓人一眼知道這是誰的作品集過度裝飾、搶走資訊焦點
目錄呈現順序邏輯與整理能力分類混亂、順序跳針
個人簡介快速建立專業印象與人格像 AI 生成、長篇大論
作品本體展示思考過程與解題能力只貼成品、沒有故事
相關成就佐證專業能力與可信度放獎盃照片、破壞排版
聯絡方式讓業主能立刻找到你漏掉、放得太隱密

作品本體是核心,每件都要帶挑戰、過程、成果三段,搭配實際成果圖,展示思考過程而不只是貼成品。相關成就用列點呈現得獎、參展、認證即可,不必放獎盃照片;聯絡方式以 Email 為主、補一個公開社群帳號,放最後但絕對不能漏。刪減的原則只有一條:留下的每一項,都要能回答「這幫助業主更快做決定嗎」,回答不出來的內容,無論多精彩都是雜訊。模板的價值在於它強迫你把內容塞進固定欄位,欄位裝不下的,往往就是該被刪掉的。

每個區塊之間的留白與分隔,是模板品質的試金石。判斷一個模板好不好,最快的方式是看它預設的段落間距是否一致、標題層級是否清楚。一款連「作品標題」和「作品描述」都分不出層級的模板,套上去再多內容也會糊成一團。挑模板時,先把示範內容想像成你的真實作品,看訊息層級能不能一眼讀懂。

作品集製作的流程與排序判斷

作品集從零開始,大致依序走過挑選作品、選擇呈現方式、設計排版、撰寫內容四個環節。其中挑作品的排序邏輯,比模板本身更影響業主的第一印象。很多人把心力全花在找漂亮模板,卻在最關鍵的作品排序上隨便擺,結果第一眼就失分。

挑作品要選最具代表性、能展現個人特色又符合目標業主需求的案例,涵蓋不同類型才能全方位展現實力。如果你鎖定科技業,就多放科技相關作品;如果想走 Figma UIUX 設計完整教學 對應的介面設計路線,就提高 UIUX 案例的比例。每件作品都要帶故事:遇到的挑戰、你的解法,這比單純展示成果更能證明問題解決能力。呈現方式則回頭呼應前面講的載體決策,要不要做 響應式網頁設計 RWD、需不需要互動效果,都跟載體綁在一起;排版與文字細節留到後面兩節再深入。

挑作品的隱性判斷:故事性重於完成度

很多設計師挑作品時只看「哪張圖最好看」,這是完成度導向的思維。業主翻閱時在乎的是故事性:這件作品有明確的問題嗎?你的介入帶來了什麼改變?過程中你做了哪些取捨?一件完成度普通、但過程清晰的練習作品,往往比一件精美卻講不出脈絡的商業稿更能說服人。

篩選時值得問自己三件事:這件作品解決了什麼具體問題、我在裡面負責的環節是什麼、如果重做一次我會怎麼改。三個問題都答得出來的作品,通常就值得放進作品集。答不出來的,再漂亮也先擱著。

作品排序的故事線設計

作品排序的依據是「業主想看到的順序」,時間軸或你自己的偏好都只能當次要參考。一個常見且有效的結構是:開頭放一件能立刻建立專業印象的代表作,中段放三到五件呈現廣度與多樣性的案例,結尾放一件你最有熱情、最能展現個人風格的作品。這條線讓業主翻完時對你的印象是完整的,而不是零散的案例拼貼。

另一個常被忽略的細節是作品之間的轉場。在自架站上,可以用一段過渡文字串接兩件作品的脈絡,例如「從品牌識別延伸到落地頁設計」;在 PDF 裡,則靠頁面之間的留白與標題層級維持節奏。沒有轉場的話,作品集會變成投影片,翻完只記得最後一張。

找範本與靈感的五個參考網站

Awwwards、Siteinspire、CSS Nectar、Best Website Gallery、Designnokoto 這五個平台各有所長,從競賽級網頁到日系設計都有。評選方法論很簡單:鎖定你想參考的風格與技術深度做挑選,沒有必要把五個全逛一遍。如果你還在摸索風格,網頁設計靈感網站推薦 整理了更完整的清單可以交叉參考。

平台定位優點缺點
Awwwards網頁設計競賽平台依官方評分機制,評分涵蓋設計、實用性、創意、內容,並列配色、字體、SEO、響應式等開發指標案例多為高預算大作,新手難直接複製
Siteinspire網頁設計展示平台以簡潔乾淨為評選原則,篩選功能強,更新頻率約數日一次只附預覽與連結,細項說明少
CSS Nectar網站評比平台每日選一案例放首頁,連程式碼品質都列入官方評分投稿需付費,案例數量較少
Best Website Gallery設計書籤起家2008 年成立,可依技術篩選(如 WordPress、jQuery),附 CSS 程式碼資源資訊較舊,部分案例已下線
Designnokoto日本網頁作品平台可切換電腦版手機版預覽,適合參考日系排版與互動細節以日本國內案例為主,語言門檻較高

挑選的切入點依你的需求而定。想了解 最新網頁設計趨勢解析 的人,Awwwards 會把配色、字體與開發指標一併列出,是首選;工程師轉設計、同時關心程式碼品質的人,CSS Nectar 把程式碼也納入評分,比純視覺平台更對胃口;正在研究 WordPress 佈景主題完整推薦 的人,能在 Best Website Gallery 用技術篩選只看 WordPress 站;做響應式設計的人,Designnokoto 的電腦版手機版預覽切換參考價值很高。這五個平台挑兩三個固定逛就夠,貪多反而失焦。

使用靈感網站有一個重要紀律:該搜集的是結構與互動手法,整體視覺抄襲則要嚴格避開。看到喜歡的版面,先問自己「這個排列方式解決了什麼閱讀問題」,再把那個解法吸收進自己的模板。直接把別人的配色、字體、排版整組搬過來,會讓你的作品集失去辨識度,也可能引發版權爭議。

架站 vs 展示平台:作品集載體完整比較

自架網站勝在客製空間與內容掌控權,但需要時間與技術;展示平台勝在上傳即用與自帶流量,但設計自由度與掌控權都受限。要長期經營品牌選自架,只想快速展示選平台,這條判斷線很少出錯。

自架站的優點很清楚:排版能自由客製、可以加入動態互動強化品牌、內容完全自己管理、也能自行做 SEO。代價是要花時間製作、需要一定的架站技術、後續得自己維護。如果你打算長期經營,品牌官網設計全攻略品牌官網架設實戰指南 能幫你把定位先想清楚,再回頭選模板。

展示平台的優點是上傳即完成、平台自帶大量用戶有助曝光、不用自己維護。但風險也明確:無法完全照自己風格排版、掌控權在平台方、SEO 優化能力有限。一旦平台營運政策改變或技術出問題,你的作品曝光會直接受影響。比較穩妥的做法是兩者並用:用展示平台導流,再把自架站當作品的主要落點。

比較項目自架網站展示平台(Behance、Dribbble)
設計自由度高,可完全客製低,受版型限制
內容掌控權完全自己掌握掌控權在平台方
維護成本高,需自行處理主機與更新低,平台代為維護
SEO 能力高,可自行優化有限,依賴平台機制
曝光來源需自行累積流量平台自帶大量用戶
適合對象長期經營個人品牌者想快速展示、怕維護者

這通常不是二選一,而是主從的問題。把自架站當作品的主要落點、展示平台當曝光渠道,是不少接案設計師實際在用的組合。如果你還在猶豫,可以先讀 14 個作品集網站平台推薦網頁製作平台優缺點評比,把選項看清楚再決定。

載體選擇的二維決策矩陣

如果你在自架、展示平台、PDF 三者之間還拿不定主意,可以用兩個維度做判斷:橫軸是「你想投入的維護時間」(低到高),縱軸是「你對內容掌控權的要求」(低到高)。把三個載體放進這個象限,適合你的位置就會浮現。

維度低維護投入高維護投入
高掌控權要求難兩全(少見,例如付費靜態站代管)自架網站(首選)
低掌控權要求展示平台、PDF(快速上線)不建議(投入高卻不要求掌控,效益低)

落在「高掌控權加高維護」象限的人,自架站是唯一解,因為你既要能改程式碼,也接受長期經營的投入。落在「低掌控權加低維護」象限的人,PDF 或展示平台都能勝任,差別只在你要不要被動曝光:要就選平台,不要就選 PDF。最該避免的是「高維護卻不要求掌控」,也就是花一堆時間架站卻把內容決策交給模板,這種組合投入大、回報低。

多數設計師會在生涯不同階段切換象限。學生期落在低維護區,用 PDF 或平台應付求職;接案穩定後往高掌控區移動,自架站長期累積品牌。理解這個矩陣的用處,是幫你在當下選對工具,避開「自架站一定比較強」這類迷思的干擾。

三款主流作品集架站工具:WordPress、Squarespace、Webflow

WordPress 適合要完全掌控資料與長期經營的人;Squarespace 適合追求時尚模板與高品質圖庫的設計師;Webflow 適合介面偏好接近 Figma、想精細控制響應式斷點的設計師。三者各有明確的目標用戶,沒有絕對的贏家。

WordPress 是免費開源軟體,全球有超過四成的網站使用它 [來源:W3Techs — Usage Statistics and Market Share of WordPress〈https://w3techs.com/technologies/details/cm-wordpress〉〈2026-06-29〉],擁有上萬個佈景主題與外掛,可一鍵套用作品集範本,資料完全自己掌控。它不會因為某個平台結束營運就讓你的內容消失,這點對長期經營的人很重要。想快速套用質感主題,可以看 Astra 一鍵匯入精美模板Divi 高質感版型庫套用Betheme 700 多種行業版型,選擇非常多。

Squarespace 發源於紐約,服務眾多國家,模板時尚、內建高品質圖庫與功能區塊,還有 Blueprint AI 建站工具。它的短板是中文支援與編輯器順手度,對非英語使用者不太友善。如果你的作品集高度依賴視覺,又願意花時間適應介面,Squarespace 的成品質感確實不錯。想了解同類工具,可以參考 AI 網站建立工具實測Kadence AI 自動生成網站

Webflow 於 2013 年成立,擁有數百萬用戶,介面接近 Illustrator 與 Figma,可精細設計響應式斷點,對設計師來說很直覺。它的免費模板較少,多為付費,但品質都很高。小缺點是沒辦法自由拖曳區塊,對新手會有點卡,不過這種結構化編輯也確保網頁不會跑版。對頁面編輯器有興趣的人,可以讀 WordPress 頁面編輯器比較Bricks Builder 視覺化編輯器

工具中文友善度學習曲線模板數量適合誰
WordPress中等極多(上萬)要掌控資料、長期經營者
Squarespace中等中等追求時尚模板與圖庫的設計師
Webflow偏陡較少,多付費介面偏好像 Figma 的設計師

附上一個選擇建議:新手求快選 Squarespace,要掌控資料選 WordPress,設計師求細節選 Webflow。如果你決定走 WordPress 路線,Astra 作品集展示類型教學Divi 作品集專業展示樣式Elementor Pro 作品集頁面設計 都有針對作品集的具體做法,可以直接套用。喜歡用 Divi 全家桶的人,還能延伸到 Divi 主題終極教學Divi 佈局版型快速排版

工具選擇評分卡:六個維度幫你打分

當三個工具都符合你部分需求時,可以用評分卡的方式量化。底下六個維度,針對你的處境各打一到五分,總分最高者就是當下最適合你的工具。分數沒有絕對標準,重點是強迫你把直覺拆成可比較的項目。

評分維度WordPressSquarespaceWebflow
內容掌控權524
模板選擇廣度532
中文與在地支援523
設計精細度445
上手速度342
長期維護成本(分數高代表省心)253

從評分卡可以看出,WordPress 在掌控權、模板與中文支援三項拿滿分,但長期維護最費心;Squarespace 維護最省心、上手快,掌控權與中文支援是弱項;Webflow 設計精細度最高,模板少且上手慢。這三組分數對應三種典型人格:技術派選 WordPress、視覺派選 Squarespace、設計控選 Webflow。分數只是輔助判斷,最終仍要回到你自己最在意的那一兩項。

不同職業的作品集,模板需求完全不同

一個常見誤解是「作品集模板可以一體適用」。實際上,視覺設計師、前端工程師、產品經理、行銷人員要展示的證據完全不同,模板的版面重點也該跟著調整。用錯職業的模板,會讓你的核心能力被埋沒在不對的版位裡。

職業核心證據模板該強調的版位該避免的版位
視覺/平面設計師成品圖、品牌系統、配色與字體運用大圖滿版、留白、作品並排長段文字欄
UIUX 設計師流程、線框、原型、使用者研究結論過程區、研究摘要、前後對照純圖片牆、無脈絡的成品
前端工程師程式碼片段、效能數據、技術選型理由程式碼區、技術標籤、連結到 demo過度裝飾的動畫搶走技術焦點
產品經理專案成果指標、決策邏輯、跨部門協作指標卡片、流程圖、角色與貢獻只有截圖沒有脈絡
行銷/內容活動成效、內容作品、轉換數據數據圖、案例連結、前後比較純文字堆砌、無可量化成果

從這張表可以歸納出一個原則:模板的版位要呼應你最想被評估的能力。視覺設計師需要大圖承載質感,所以模板的圖片區要夠大、留白要夠多;前端工程師需要被看見的是技術判斷,所以程式碼區與技術標籤反而比動畫更重要。挑模板時先問自己「業主會用什麼證據判斷我的能力」,再把那個證據放進模板最顯眼的版位。

跨領域設計師的處境比較特殊,因為能力光譜橫跨視覺與技術。這時與其用單一模板,不如用模組化的版型,讓你可以依每件作品的屬性切換「圖優先」或「文優先」的呈現。模組化的好處是彈性,代價是設計一致性需要自己把關,否則整份作品集會看起來像不同人做的。

以這類跨領域或職業定位還在摸索的作品集站為例,常見的狀況是模板選了視覺導向的大圖滿版版型,卻把前端或產品類作品也硬塞進同樣的圖片牆。依這類站的典型表現,業主在前三件作品的停留時間往往會比預期縮短約一至兩成,因為版位沒有呼應作品真正該被評估的能力。比較穩的做法是依主力職業挑主版型,再用模組化區塊放次要能力的案例,例如前端工程師以程式碼區與技術標籤為主骨架,品牌或視覺作品另開一個縮圖區收納。要誠實提醒的是,模組化在作品件數偏少(大約四到六件)時,反而容易讓版面看起來零散,這時寧可收斂成單一版型、把次要作品移到頁面較後方,也不要勉強撐出多區塊而稀釋主軸。判斷的決策角度是:業主翻完後能不能用一句話講出你最強的能力是什麼,講不出來就代表版位配置還沒到位。

排版與文字,讓業主讀得下去

排版維持清晰留白與配色一致,文字簡潔明瞭、帶個人語氣;過度裝飾與機器人式用詞,是兩大讓業主秒退的地雷。排版再美、文字像 AI,第一頁就被略過。

排版要避免過度裝飾搶焦點,選合適的字體與字元間距,圖文之間留足夠呼吸空間。色彩維持一致性,選用舒服不刺眼的配色,可借助配色工具挑選。網頁配色工具網站推薦色彩學配色技巧全解析網站色彩計畫四步驟 都能幫你把配色這關顧好。字體方面,中文字體推薦與設計排版設計字體行距技巧 提供了從選字到行距的完整方向。

文字表達決定業主對你個性的判斷。內容要簡潔、抓重點,不要長篇大論。個人簡介用詞要自然有溫度,避免像 AI 生成的冷硬語氣。寫完後念出來一遍,凡是念起來像機器人講話的句子就改掉。如果你對排版結構沒把握,網頁版面響應式排版網頁排版設計範例Bento Grid 創意版面配置 都有現成的版面思路可以參考。可參考成功作品集範例找靈感方向,但不要直接套用他人的敘事結構,否則會失去你自己的辨識度。

模板客製化:哪些能改、哪些絕對不要動

很多人把模板買回來之後,恨不得把每個欄位都改一遍,結果反而把模板原本合理的結構改亂。模板的價值來自設計師已經測試過的層級與節奏,過度改動等於丟掉這份經驗。比較穩的做法是分清楚「安全可改」與「動了會出事」兩類。

類型可以放心改盡量不要動
顏色主色替換成你的品牌色(保持明暗對比一致)同時引入第四、第五個強調色,破壞色彩階層
字體換成同等級的字體(襯線換襯線、黑體換黑體)把正文字體換成裝飾性字體,犧牲易讀性
圖片換成你的作品圖,維持原本的長寬比裁切成不同比例,導致版面錯位
段落順序微調作品之間的排列刪掉封面或聯絡區等核心區塊
區塊新增加一個「服務項目」或「合作流程」區塞入與作品集無關的部落格、電商功能

一個判斷基準是:動任何一個設定之前,先問「這個改動會不會影響訊息層級」。會的話就停手。訊息層級是模板的骨架,骨架一鬆,再多的裝飾都撐不起來。安全可改的多半是表面材質(顏色、字體、圖片),碰不得的是結構(層級、順序、比例)。

另一個常見陷阱是「裝到滿」。模板裡的每個預留位置都填上內容,看似充實,實際上每個位置都被弱化。寧可保留一兩個區塊空著或刪除,也不要用次級內容硬填。

自架站作品集的進階技巧:追蹤與 A/B 測試

自架站相對於展示平台的最大優勢,是你能裝上流量分析與轉換追蹤,把作品集從「展示工具」升級成「接案漏斗」。當你知道哪一件作品被點閱最多、哪一頁的跳出率最高,你就能用數據回頭調整作品排序與內容,這是平台帳號做不到的。

流量分析的裝設門檻不高,多數自架站都能嵌入追蹤碼,全球也有近半數網站採用同類分析工具 [來源:W3Techs — Usage Statistics and Market Share of Google Analytics〈https://w3techs.com/technologies/details/ta-googleanalytics〉〈2026-06-29〉]。裝好之後值得觀察的指標有四個:作品頁的瀏覽量、平均停留時間、從作品頁點到聯絡頁的比例、聯絡頁的跳出率。前兩個告訴你哪些作品受歡迎,後兩個告訴你轉換動線順不順。

有了數據之後,就能做簡單的 A/B 測試。把作品首頁的排序換成另一種版本,觀察一兩週內聯絡頁的點擊有沒有變化。這種測試不需要複雜工具,只要固定時間記錄數字、比較前後差異即可。注意樣本要夠,幾天的波動可能是隨機噪音,至少觀察一個完整的流量週期再下結論。

舉一個接案設計師常見的情境幫你抓感覺。假設你的自架作品集每月穩定進來約幾百次瀏覽,其中三成停留在首頁,從首頁點進聯絡頁的比重大概只有個位數百分比。你發現首頁的第一件作品是三年前的舊稿,跳出率明顯偏高,於是把它移到第三位、改放近期最受歡迎的代表作。觀察一到兩個月後,聯絡頁的點閱比重如果從個位數爬升到一成多,就代表排序調整起了作用;如果沒有變化,問題可能出在聯絡入口不夠顯眼,或作品本身的故事沒寫清楚。只有你自己的站能拿到逐頁轉換數字,這也是自架站相對於展示平台最關鍵的槓桿。這些都是概略推估,實際結果會因你的流量規模與產業而不同。

這些進階技巧的前提是載體選自架站。如果你用的是展示平台或 PDF,這一節的方法都用不上,這也是為什麼前面強調載體決定一切。對想把作品集當成接案引擎的人,自架站的長期回報明顯高於其他選項。

手機瀏覽:作品集不可忽略的第二螢幕

業主看作品集的地點比你想的更分散,通勤、午休、會議空檔都可能用手機打開連結。如果你的作品集只有桌面版排得好看,手機一開就錯位、圖片超出螢幕、文字擠成一團,業主多半直接關掉。行動裝置已是全球網路流量的主力來源 [來源:Statista — Share of mobile web traffic worldwide quarterly 2015-2026〈https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/〉〈2026-04-28〉],作品集沒有理由例外。

檢查手機呈現時要看的細節:圖片是否需要橫向捲動、標題是否換行成奇怪斷點、按鈕是否大到能用拇指點擊、聯絡資訊是否一指能撥號或寄信。這些都是模板挑選階段就該驗證的,不要等到上架才發現。響應式設計的完整做法,可以參考 響應式網頁設計 RWDRWD 響應式作品集網頁設計

一個務實的測試方法是「單手測試」:用單手操作你自己最不順的那隻手,看能不能在三秒內找到聯絡入口。過得了這關的模板,才算真正通過手機考驗。過不了的,再漂亮也換一個。

什麼情況不該用現成模板

模板能幫你快速上線,但也有它不適用的場景。硬套模板的代價,是作品集失去你獨有的辨識度,甚至傳達錯誤的專業形象。底下幾種情況,建議跳過現成模板,走客製或半客製路線。

  • 你的核心賣點就是設計能力本身:當你要說服業主「我很會設計」,套用別人設計的模板會自相矛盾,業主會懷疑作品到底是你做的還是模板的功勞。
  • 你的作品有大量互動或動態呈現需求:沉浸式滾動、3D 模型、互動敘事這類需求,現成模板多半不支援,硬改反而容易出 bug。
  • 你需要高度特殊的內容結構:例如每件作品要附研究報告、數據儀表板、程式碼區,這些客製欄位在通用模板裡找不到對應版位。
  • 你長期經營個人品牌且已有視覺系統:當你已經有 logo、配色、字體規範,套用模板會破壞品牌一致性,這時從自己的設計系統出發更合理。

這幾種情況的共同點是「模板會稀釋你想傳達的訊息」。模板的價值在於它替沒有設計資源的人提供合理結構;當你自己就是那個設計資源,模板反而變成限制。半客製是一個折衷:用模板當骨架,但把視覺系統、互動細節、特殊欄位全部換成自己的。這樣既保留模板的結構穩定性,又能保有辨識度。

模板上線前的最終檢查清單

作品集要上架前,照著這份清單逐項確認,能避開八成常見問題。建議列印出來或在手機備忘錄留一份,每上架或更新一次就跑一遍。

  • 封面只放名字與一句定位,沒有過度裝飾
  • 目錄順序與作品實際排列一致,沒有跳針
  • 個人簡介在三到五句內講完,語氣自然不機械
  • 每件作品都有挑戰、過程、成果三段,而不只有成品圖
  • 作品圖的長寬比與模板預設一致,沒有裁切變形
  • 聯絡方式放在顯眼處,Email、電話、社群帳號齊全
  • 手機版單手可操作,按鈕與連結大到能用拇指點
  • 配色維持三到四個主色以內,沒有臨時加入的突兀色
  • 字體層級清楚,標題、副標、內文三層一眼可分
  • 所有內部連結都能正常跳轉,沒有 404
  • 圖片已壓縮,頁面載入不會讓人等超過幾秒
  • SEO 基本欄位(標題、描述)已填寫(自架站適用)

這份清單不是一次性的,而是每次更新作品集都該重跑一次。作品集是活文件,新增一件作品的同時,很可能動到排版平衡或連結結構,定期用清單檢查能確保它維持在可對外展示的狀態。圖片壓縮的工具與細節,可以參考 圖片壓縮工具實測推薦

作品集常見問題 FAQ

作品集要放幾個作品才夠?

重質不重量。挑最具代表性與多樣性的案例,建議控制在能讓業主在短時間內看完的數量,通常 6 到 10 件是比較穩的區間。放太多反而讓重點被稀釋。

學生作品集和接案作品集範本差在哪?

學生作品集重學習歷程與潛力,可以放課堂專案與練習;接案作品集重成果與可驗證的效益,業主想看的是你幫客戶解決了什麼問題。兩者的敘事重點完全不同。

免費模板和付費模板差在哪?值得花錢嗎?

免費模板適合測試版面邏輯、快速上線;付費模板通常在更新維護、技術支援、設計細節與授權保障上更完整。判斷要不要付費的依據是「這份作品集要用多久」。只用一次的面試投遞,免費就夠;長期經營的自架站,付費模板的穩定性與支援能省下後續大量除錯時間。付費不等於一定比較好,關鍵是模板作者的更新頻率與使用者評價。

作品集放舊作品會扣分嗎?

要看舊到什麼程度與呈現方式。能反映你技術演進的舊作品,放進來反而有加分效果,讓業主看到你的成長軌跡。完全過時、技術或風格已經被淘汰的作品,留著會讓業主誤判你現在的能力水準。判斷標準是「這件作品還能代表現在的我嗎」,不能就下架或移到頁面較後方。

模板裡的示範圖片可以直接用嗎?

不能。示範圖片屬於模板作者或其授權來源,直接當成自己的作品放上線,除了涉及版權問題,更嚴重的是業主會誤以為那是你的作品,一旦被識破,信任會徹底破產。模板套用後第一件事,就是把所有示範內容換成你自己的。需要合法圖源的人,可以參考 商用免費圖庫網站總整理

整篇的重點可以收斂成一句話:選作品集範本時先決定載體,再把內容架構、作品排序與聯絡動線顧好,模板美醜反而是相對次要的事。載體一固定,可選的模板範圍跟著收窄,你才能把心力花在真正影響業主判斷的地方。如果你打算走自架路線,WordPress 架站新手教學WordPress 自架網站費用拆解網站架設費用完整解析 能幫你把預算先算清楚。

最後補幾個延伸資源,把作品集前後的環節串起來。設計前的靈感與素材:設計參考網站與架站推薦網頁設計從零到一指南網頁設計必備關鍵元素UIUX 自學資源完整地圖UI 原型設計與 Wireframe 差異。素材與圖片處理:商用免費圖庫網站總整理免費 Icon 圖示網站圖片壓縮工具實測推薦。上架前的設定:RWD 響應式作品集網頁設計Divi 一頁式網頁模板一頁式網頁設計攻略Landing Page 銷售頁製作

品牌與轉換層面:品牌網站設計關鍵建議自架網站常見設計錯誤Avada 主題打造品牌形象網站Astra Pro 主題深度評測。網域與上架:網域申請購買全攻略Namecheap 網域註冊教學30 分鐘架好 WordPress

相關文章