晨星行銷|網路流量操盤手

一位女性企業主焦急詢問作品集真假,一位行銷顧問自信指著筆電回答,兩人在暖灰色調的行銷顧問辦公室裡對談,桌上有筆電、咖啡杯與書櫃

網頁設計作品別只看漂不漂亮:三層判讀法,抓出模板套殼與假案例

作者|晨星行銷 陳俊鳴執行長(網路流量操盤手.企業行銷顧問)

有些企業主在比較網頁設計公司時,看到一份作品集覺得「就是這種感覺」,當下就決定簽約。結果交出去之後,拿到的成品跟作品集裡展示的質感差了一大截——選單卡卡的、手機版排版跑掉、案例照片裡那種細緻的動畫效果,自己的網站上完全沒有。問題往往不是這家公司騙人,而是作品集本身給的資訊,讀者一開始就看錯了地方。

多數人判讀作品集,靠的是「這個感覺對不對」——說白了就是憑美感投票。但美感只是作品集裡最容易被操作、也最不能反映真實能力的一層。這篇文章要教你用三層判讀法,從「案例跟你相不相關」看到「版面骨架有沒有雷同」,把作品集背後看不到的資訊補上——包括這個案例到底是不是這家公司自己做的、除了作品集之外還能怎麼查證。

三階樓梯圖,第一階放著放大鏡與資料夾代表篩選相近案例,第二階放著手機與瀏覽器視窗代表點進內頁與切手機版,第三階放著網頁骨架與拼圖代表判斷是否套模板,箭頭從第一階指向第三階,底部寫著三層都通過才算真的看懂這份作品集
作品集判讀,分三層看

多數人看作品集,第一眼就看錯地方

北美幾家專做網頁設計顧問的機構做過一致的觀察:多數買家評估作品集時看的是視覺風格,而真正該看的是案例背後的策略思維。一份值得信任的作品集,不會只丟一堆漂亮的截圖給你看,它會交代這個案例當初解決了什麼問題、做了哪些調整、後來的成效怎麼樣。反過來說,如果一份作品集通篇只有截圖跟一句話形容詞(例如「時尚簡約」「質感提升」),沒有任何一句話講到「這個設計解決了什麼」,那份作品集能告訴你的資訊其實非常有限。

Nielsen Norman Group(國際知名的使用者體驗研究機構)對這件事也提出過類似的示警:如果案例裡塞滿了「使用者訪談」「旅程地圖」「共創工作坊」這些專業名詞,卻沒有誠實交代「為什麼要做這些」,這些內容很可能只是裝飾用的門面,不代表真的有紮實執行。這句話放到台灣的網頁設計市場一樣成立——術語堆得越滿,不代表做得越扎實,有時候反而是相反。

這種落差,有點像看房子時的「樣品屋」。樣品屋的燈光、傢俱、動線都是特別設計過的展示版本,交屋之後的實際格局跟採光,未必跟樣品屋一模一樣。作品集就是設計公司的樣品屋——你看到的是精心挑選、修飾過的呈現方式,不是你未來拿到的網站的保證書。

左右對照兩個相同格局的客廳,左邊是燈光美佈置精緻的樣品屋、掛著紅絨繩,右邊是搬家後真實居住的客廳、放著紙箱,中間有箭頭連接
作品集就是設計公司的樣品屋

💡 小提醒

看作品集的時候,先問自己一句:「如果拿掉這張截圖上的濾鏡跟修圖,這個網站現在打開來,還會是這樣嗎?」這個問句本身就能過濾掉一半只憑美感投票的判斷。

判讀第一層:先篩出跟你相近的案例,不是件數多的那家

第一步不是看這家公司做過幾個案子,而是先篩出跟你的產業、網站類型相近的案例。件數多不等於能力強——有些公司作品集裡放了上百個案例,但仔細看會發現大多是同一種類型(例如全部都是餐廳形象頁),一旦你的需求是電商或會員系統,這些案例能告訴你的資訊就很有限。

判讀作品集不是選美比賽,不是件數越多分數越高,而是找出跟你需求相近的實際案例,才有參考價值。如果一家公司作品集裡完全找不到跟你產業或功能需求相近的案例,那更該注意的問題是:這家公司真的處理過你這種需求嗎,還是你會是他們的第一次嘗試?第一次嘗試不一定不好,但那是你該知道、也該拿來談價格與時程的重要資訊,不是被作品集的美感蓋過去的細節。

一個漏斗,上方擠滿各種不相關產業的小圖示雜亂地流入漏斗,下方只留下兩三個跟需求相近的圖示落入托盤
先篩相近案例,不是件數多的那家

判讀第二層:點進內頁、切手機版,你要看的是「用起來」不是「看起來」

作品集頁面上的縮圖,幾乎都是精心挑選過的首頁截圖。光看首頁截圖,判斷不出這個網站實際用起來順不順、載入快不快、手機上會不會跑版。真正該做的動作很簡單:點進去,實際逛個兩三個內頁,再把瀏覽器切成手機版,看選單好不好點、文字讀不讀得動、頁面會不會等很久。

這一步花不到十分鐘,卻是多數人比較作品集時完全跳過的動作。原因也不難理解——大家在比較好幾家公司的時候,精力有限,很自然會用「掃過去、憑第一印象」的方式做決定。但這正是作品集最容易造成誤判的地方:首頁通常是整個網站裡被打磨最多次的一頁,內頁跟手機版才是真實使用經驗的縮影。

左邊是一個閃亮的瀏覽器視窗顯示精美首頁截圖,右邊是一隻手拿著手機顯示同一網站的內頁但版面跑掉並有紅色警告三角形,中間虛線連接兩者
首頁是精修過的臉,內頁才是真面目

⚠️ 注意

如果一家公司的作品集案例,連結點過去是 404、網域到期、或者網站早就改版成完全不同的樣子,代表這個案例已經失去查證的意義。這種情況本身不代表這家公司不好,但至少要知道——你現在看到的,只剩下截圖,不是真正可以驗證的作品。

判讀第三層:從版面骨架,抓出「同一套模板換照片」的痕跡

這是多數判讀教學文章沒有寫清楚的一塊——模板套殼跟真客製化,從作品集本身就看得出線索。國外一份分析模板結構特徵的文章講得很直接:一套經過重度美術指導的模板,通常只能服務一種品牌調性;但一套結構乾淨的模板,只要換個字體、換一批照片,就能變成看起來完全不同的客戶案例。換句話說,如果一份作品集裡,多個案例的選單位置、按鈕樣式、圖片區塊排列方式幾乎一模一樣,只是配色跟照片不同,這通常代表設計公司是用固定模板套用不同客戶,而不是逐案客製化設計。

這不代表用模板一定不好——對預算有限、需求單純的中小企業,模板本來就是合理的選項,重點是你要知道自己買到的是哪一種,而不是被作品集包裝成「客製化設計」卻拿到套版網站,價格卻是客製化的價碼。

左欄三個網頁線框圖排版完全相同只換了顏色與圖片,右欄三個網頁線框圖排版各不相同,左欄上方有複製圖示、右欄上方有尺規鉛筆圖示
模板套殼,還是真客製化?

模板套殼 vs 真客製化,五個對照點

對照點模板套殼的線索真客製化的線索
版面骨架多個案例選單位置、按鈕樣式幾乎相同每個案例的資訊架構依內容量與需求不同而調整
產業分佈案例橫跨完全不相關的產業,視覺卻高度相似案例會因產業性質(例如電商 vs 服務業)呈現明顯不同的動線設計
案例說明只有形容詞(時尚、質感、簡約),沒有講到解決了什麼問題會交代這個案例當初的需求、調整過程與成效
手機版表現手機版經常出現跟桌機版一致但比例失衡的排版手機版有針對內容重新安排過的動線
圖片與內容案例圖片風格統一到近乎模板示意圖圖片與文案明顯對應該產業、該客戶的真實內容

這五個對照點不是要你逐一打分數,而是拿它們去檢查你手上正在比較的作品集,只要有兩三個項目同時出現「模板套殼的線索」,就足以讓你在跟廠商談的時候多問一句:這個案例,是套用你們固定的架構,還是真的重新規劃過?

作品集裡看不到的事:這個案例是不是真的自己做的

作品集本身有一個結構性的盲點——它不會主動告訴你這個案例的實際分工範圍。有些設計公司承接案子後,實際只完成了視覺設計,前端切版與後端系統另外外包給別人;也有些接案的其實是業務窗口,實際執行完全交給配合的自由接案者。這些情況不算欺騙,委外分工在這個行業很常見,問題出在作品集通常不會說明這一層,讀者光看作品集,判斷不出眼前這個漂亮案例,到底是這家公司真正的核心能力,還是他們外包出去的成果。

這不只是一般人的擔心,連國際上正式的設計專業組織都把它寫進了倫理準則。美國平面設計協會 AIGA(American Institute of Graphic Arts,成立超過百年的平面設計專業組織)在《專業實務標準》裡明訂:設計師若不是某件作品的唯一完成者,必須清楚標示自己實際負責的範圍,這類作品不可以在沒有清楚標示分工的情況下用於宣傳、展示或作品集。這代表「展示作品時要不要交代分工」不是讀者個人多疑,而是設計這個專業本身早就有明文規範的倫理底線——只是實務上很少有公司會主動遵守。

一扇藍色大門微微打開,門外掛著漂亮的作品集截圖框,門內露出三個不同顏色的工作站小圖示分別代表設計、前端程式、後端伺服器,門鎖上插著一把發光的金色鑰匙
作品集看不到的事:誰真的做了這個案子?

⚠️ 注意

如果同一份作品集裡,不同案例的設計語言差異很大(有的偏歐美極簡、有的偏日系細膩、有的偏台灣傳統企業風),這有可能代表團隊風格多元,但也可能代表案例是由不同的外部接案者完成、公司本身只負責業務對接。兩種情況需要不同的判斷,單看作品集分辨不出來,直接問清楚比較實在。

真的想知道分工範圍,最直接的方法就是問——「這個案例,你們公司內部負責到哪個環節?」一家公司如果對這個問題答得清楚、不迴避,通常代表他們對自己的能力邊界有掌握;如果被問到就開始模糊帶過,那本身就是一個該留意的訊號。

效果圖是不是用 AI 直接生成出來的

這是一個近一兩年才開始浮現、中文市場目前幾乎沒人討論的判讀難題。AI 生成圖像工具已經可以做出相當逼真的網頁「效果圖」——構圖、光影、介面細節都做得像模像樣,但那張圖對應的網站,實際上可能從來沒有真正被建置、上線過。如果作品集裡某個案例只有一張精美的示意圖,卻找不到任何可以點擊、實際運作的網址,這張圖到底是真實上線過的截圖,還是純粹用來展示設計提案的生成圖,單靠看圖本身是分不出來的。這不代表用生成圖做提案有什麼問題(很多公司本來就會用效果圖跟客戶溝通設計方向),重點是讀者要清楚分辨「這是提案階段的示意圖」還是「這是已經完成、正在運作的網站」,判斷方法跟前面第二層一樣:能不能點進真實網址、實際操作看看。

中央一張半透明虛線框的網頁效果圖上方有大問號,左邊路徑通往雲朵與AI生成圖示,右邊路徑通往有真實網址列與綠色上線圓點的瀏覽器視窗
這張效果圖,是提案示意,還是真的上線過?

除了作品集,你還可以怎麼查證一家公司

作品集能告訴你的事有限,它終究是廠商自己端出來、精心挑選過的版本。國際上做 B2B 服務商查證的平台 Clutch,做法可以參考——每一則評論在上架前都會經過人工查證身份與案子真實性,根據該平台的統計,有六成五左右的 B2B 買家會透過第三方評論來查證廠商,不完全只看廠商自己提供的資料。這個邏輯放到選網頁設計公司一樣成立:作品集是第一層篩選,第三方能查證的資訊,才是最後把關的那一道。

兩階樓梯,第一階放著打開的作品集資料夾圖示,第二階更高放著盾牌勾選圖示與一疊帶星級評分的評論卡片
作品集只是第一關,查證才是最後把關

以我自己操盤 SEO 與網路行銷代操這行的經驗來說,我們談成案子後,交付網站或內容成果時,習慣直接把 Google Search Console 的後台權限開給客戶自己看——曝光、點擊、排名這些數字,不靠我們單方面說有效,客戶自己登進去就看得到。這種「你可以自己查」的心態,其實比作品集本身更值得放進你的評估清單:問一家設計公司,除了作品集,能不能提供實際客戶的聯絡窗口讓你側面了解合作經驗,或是有沒有第三方平台的評價可以查證。願意讓你查證的公司,通常也代表他們對自己的成品有信心。

左右兩間小店面對照,左邊店面窗簾緊閉只掛著模糊招牌上頭飄著問號,右邊店面有透明大玻璃窗可看見裡面的成效數據圖表
誰能被查證,誰就更值得信任

兩個最常見的判讀誤區,先破解掉

在這行做久了,我發現多數人判讀作品集時,最常掉進兩個誤區。

左邊一個閃亮的瀏覽器首頁截圖搭配眼睛圖示,右邊兩個長條圖比較件數多但打叉與件數少但打勾,中間有一個大叉叉劃掉錯誤的等號
兩個最常見的判讀誤區

第一個誤區是只看首頁截圖就下判斷。前面第二層判讀已經講過,首頁是整個網站裡被打磨最多次的一頁,單看首頁,你看到的其實是這家公司「最好的一面」,不是「平均水準」。

第二個誤區是用案例件數多寡當作實力指標。件數多可能代表這家公司接案量大、經驗豐富,但也可能代表他們大量套用同一套模板、快速複製案例出貨。案例件數本身不是壞事或好事的判斷依據,重點永遠是「有沒有跟你需求相近的案例」,以及「這些案例的骨架看不看得出真的客製化過」。

除了這兩個誤區,實際判讀時還有幾個具體訊號值得留意。下面整理成一份簡單的紅旗清單,看到符合的項目越多,越值得在簽約前多問幾句。

常見紅旗,看到打個問號

訊號可能代表的意思
作品全是概念稿,找不到任何一個可實際點擊的上線網址可能是提案示意圖,不是真正完成過的作品
最新案例的時間明顯停留在很多年前團隊可能長期沒有新案源,或作品集沒有更新習慣
電商案例做得漂亮,企業官網卻明顯陽春團隊風格單一,不一定具備處理你這種類型網站的能力
案例遍及完全不相關的產業,視覺卻高度相似較可能是模板套用不同客戶,而非逐案客製化
對方一開場只顧展示作品好看,不問你的產業與目標較可能是把設計當成賣視覺,而不是解決你的商業問題

這份清單不是要你逐條打勾扣分,而是拿來提醒自己:看到兩三項同時出現,先別急著被作品集的美感說服,多花十分鐘問清楚,通常比事後才發現不合適,省下更多時間與金錢。如果因為看錯這幾個地方而選錯廠商,事後才發現網站要重做,通常不只是多花一筆設計費,還包含原本網站上線的時間往後拖延、舊網站的流量與排名等於重新歸零累積。這種重複投入,大約是原本預算的一倍以上,而且時間成本往往比金錢成本更難補回來——這也是為什麼判讀作品集這一步,值得多花十分鐘,而不是憑第一印象就簽下去。

直列清單五排,每排左邊是紅色警示小旗、右邊是對應的小圖示,代表連結打不開、案例老舊、風格落差、模板套用、不問需求五個訊號
看到這幾個訊號,先打個問號

作品集判讀只是第一關,不是決賽

看懂作品集,能幫你篩掉明顯不合適的選項,但它終究只是評估流程的第一關。接下來還有費用結構怎麼拆解、合約條款怎麼談、網站完成後的權限歸屬,這些都是作品集本身回答不了的問題,也是多數人簽約之後才後悔沒問清楚的地方。把這一關的判讀方法練熟,你在跟廠商對話時,問的問題會更精準,對方也會知道自己面對的是一個懂得怎麼看的客戶——這本身就是談判時最好的位置。

四顆石頭墊腳石排成一列,第一顆發光並蓋著綠色勾選代表作品集判讀已完成,第二顆放著錢幣與價格標籤代表費用結構,第三顆放著簽名文件代表合約條款,第四顆放著鑰匙與鎖頭代表權限歸屬
作品集判讀之後,還有三關要過

常見問題

先看跟你產業或功能需求相近的案例,再點進內頁、切換手機版實際操作,而不是只看首頁截圖。首頁通常是整個網站裡被打磨最多次的一頁,能反映的資訊有限;內頁的動線、手機版的排版與載入速度,才是使用者實際會遇到的體驗。

作品集本身通常不會主動說明分工範圍,最直接的方法是直接問對方「這個案例你們公司內部負責到哪個環節」。答得清楚、不迴避的公司,通常代表對自己的能力邊界有掌握;被問到就模糊帶過,值得留意。國際設計專業組織 AIGA 的專業倫理準則也明訂,非獨立完成的作品應清楚標示實際負責範圍。

有可能。如果多個案例的選單位置、按鈕樣式、圖片區塊排列幾乎相同,只是配色跟照片不同,通常代表設計公司採用固定模板套用不同客戶,而不是逐案客製化設計。這不代表一定不好,但要確認自己付的價錢,買到的是哪一種。

偶爾發生不算異常,網站改版、網域到期都可能發生。但如果案例連結打不開,代表這個案例已經失去可以驗證的意義,你看到的只剩下截圖,無法確認它現在是否仍在運作、完成度如何,可以直接跟對方確認是否有其他還在線上的案例可看。

沒有固定數字,重點不是數量,而是有沒有找到跟你需求相近的案例。與其看十個不相關的案例,不如認真看兩三個產業或功能貼近你需求的案例,更有參考價值。

有可能是提案階段的示意圖,不一定代表這個網站真的已經上線運作。判斷方法很簡單:能不能點進一個真實網址、實際操作看看,而不是只看那張漂亮的圖。示意圖本身不是問題,重點是讀者要能分清楚這是提案構想還是已完成的作品。

可以詢問對方能不能提供實際合作過的客戶聯絡窗口,或查詢是否有第三方平台的評價紀錄。願意讓你查證、不迴避側面了解的公司,通常對自己的成品比較有信心——這個判斷邏輯跟評估任何專業服務都是相通的:不能只聽廠商自己怎麼說,要看有沒有可以查證的管道。

參考資料

陳俊鳴

陳俊鳴

網路流量操盤手.企業行銷顧問

操盤SEO與網路行銷實戰逾15年,2014年創辦晨星事業有限公司(晨星行銷),從SEO網站架設、關鍵字策略到銷售漏斗與變現模式一手包辦。現為智信科技、瞻新資訊等多家企業的常年行銷顧問,也獲頒過亞洲十大卓越名師金像獎,把每一次流量成長都當成自己的事業在打。曾是馬來西亞象棋、圍棋國手,拿過亞洲盃第二名。