Divi 作品集沒帶來詢問？四個斷點診斷與版型處方

視訊會議進到第二次，對方窗口順口問了一句：「你們做過我們這種產業的案子嗎？」你當場打開自己的作品集，滑過一批跟對方無關的作品，翻了好幾屏才找到那一件，會議的節奏就冷了下來（示意情境）。對方要的從來不是你的全部作品，是「跟他有關的那一件」，而頁面沒有在第一時間把它端出來。

這種冷場很少是作品不夠好，也多半不是版型不夠漂亮。Divi 的作品集模組說到底只是「讀資料的方式」：說服發生在一件件案例頁裡，列表頁做的只是目錄。頁面沒有替急著找案例的人安排路徑，資料層與路徑才是變因；這兩件事不動，換再漂亮的版型，都只是把同一批問題重新排列。

把訪客的旅程拆開看，會經過停留、對號、深入、行動四段，底層由 Projects 這個獨立內容模型撐著。四段各有一個檢測問題與一套對應的做法，先診斷，再動 Divi，力氣才會花在對的地方。

快速重點：作品集接不到詢問，先別急著換版型。訪客旅程可拆成停留、對號、深入、行動四段：停不下來用滿版格網、找不到相關作品用分類篩選、點不進去或沒故事用 Project 案例頁、看完沒下一步用三層引導；速度與手機排序先排除。資料層對了，版型才有意義。

先別急著換版型：用四個問題找出訪客在哪裡斷電

動手改版面之前，先替頁面做一輪健康檢查。四段旅程各配一個問題，對照自己的頁面誠實回答，斷點會自己浮出來：

• 停留：訪客進到第一屏，視線停得下來嗎？還是掃一眼就往下滑，滑兩下就離開？
• 對號：不同產業的客戶，找得到跟自己相關的那件作品嗎？還是在一堆無關的圖裡迷路？
• 深入：點開一件作品之後，有故事可以讀嗎？還是只得到一張放大的圖？
• 行動：看完之後，他知道下一步要找誰、按哪裡嗎？

四個問題答完，多數人會發現一件反直覺的事：版型很少是變因。作品集模組只是讀資料的方式，真正的骨架是 Projects 這個獨立的內容模型，作品的標題、內文、分類、精選圖片都記在這一層。作品沒有獨立的案例頁、分類不存在、圖片規格不一，任何版型都只是在重排同樣的問題；資料層修好之後，版型選擇常常自己就收斂了，因為可用的呈現方式，由資料的形狀決定。

常見的誤診路徑則是另一個樣子：頁面沒有帶來詢問，被直譯成版型不夠漂亮，於是換版型、改配色、加動效，一輪做完詢問沒有變多，再換一輪。先診斷再動手，省的就是這些白做的工；版面上的疑問，先回到資料層找答案，這個順序貫穿後面每一節。

診斷還有一個附帶好處：它把「版型」這個籠統的詞拆開了。停留對應格網與第一屏、對號對應分類與標籤、深入對應案例頁與內容模型、行動對應按鈕與表單，每一段都有自己的工具與材料。之後再看任何作品集範例，你比較的不會是「哪個好看」，會是「它把哪一段做得好、哪一段沒做」，眼光從風格移到結構，判斷會具體得多。

還在補地基的讀者可以先繞道：Divi 主題完整指南把主題的安裝與模組概念補齊；連 WordPress 都還沒就緒的，佈景主題安裝教學與 WordPress 頁面編輯器入門會把地板鋪好。地基穩了再回來對照四個問題，每一題都會更具體。

另一個可以先分辨的題目：你的作品屬於視覺陣列還是資訊陣列。圖片自己會說話的攝影與插畫，斷點常落在停留；需要講脈絡的品牌與網站服務，斷點常落在對號與深入。位置不同，後面幾節的閱讀重心也就不同，帶著自己的答案往下讀，效率會高很多。

檢測不必憑感覺。找兩三位沒看過你網站的朋友，各給三十秒，只問一個問題：這個網站在做什麼、你記得哪件作品；他們的回答，就是停留與對號兩段的現況。深入與行動的檢測自己來：從作品列表點進一件作品，讀完，再去找聯絡入口，任何猶豫超過幾秒的位置就是斷點。數據不必精確，能定位就夠用。

停留斷點：讓格網陣列在三秒內留住視線

停留斷點的處方是滿版格網陣列：等比例的縮圖、整齊的欄距，桌面三到四欄、行動端一到兩欄，欄數是經驗值，依作品比例與手機寬度調整。欄與欄之間留細縫，作品會產生群體感，整面牆像一個整體在說話。承載工具有兩個選擇：Divi 內建的 Fullwidth Portfolio 模組，或 Gallery 模組的 Grid 模式；前者是同一份 Project 資料的另一種版面讀法，後者讀的是媒體庫圖片，兩者骨架類似、資料來源不同，這個差異的影響會在深入斷點一節展開。

比例統一是資料層的工作，不是版面上的補救。縮圖在進 Divi 之前，就依卡片實際顯示的尺寸裁切好；同一個分類內嚴格統一，跨分類可以放寬。這是「版型之前」的紀律，也是前面提到的底盤：資料整齊，版面才省力，格網也才排得出一面牆的氣勢，事後在編輯器裡喬半天，喬不回拍攝時就該定好的比例。

第一屏的組成也要刻意安排。等比例格網的三秒考題是：訪客還沒讀任何文字之前，對你的水準有沒有形成印象？把最強的作品放在視線起點（多數版面的左上區塊），其餘依強度遞減，比平均散置更有效；掃視路徑多半從左上往右下走，格網的欄數與間距順著這條路徑鋪，第一屏就會自己導覽，不需要文字幫忙。

選圖寧少勿濫。格網的說服力取決於平均水準，一件弱作品會把整面牆拉垮，訪客的眼睛特別容易被不協調的那一格吸走；八件強作勝過十二件填充。判斷標準很素：這件作品敢不敢放在第一屏、接受最直接的檢視？不敢的，先收起來，等頁面更強了再上。

手機上的欄數另有一套判斷：一到兩欄是經驗值，關鍵在單張縮圖佔螢幕的比例。佔比太小，作品的細節看不見；佔比太大，一格就吃掉整個畫面，掃視的節奏感消失。用自己最常被問起的那件作品實測，看它在單欄與雙欄下哪個版本先被看懂，就知道該用幾欄。

hover 上只放最低限度的資訊，半透明遮罩加作品標題即可。原因是輸入方式的物理限制：手機沒有滑鼠懸停，鍵盤使用者移動的是 focus，資訊掛在懸停狀態上，這兩種訪客就拿不到。所以 hover 是增強，不是資訊的載體，重要內容要預設可見。想再加質感，圖片懸停特效的調法有細節可以挖，但動效是調味，主菜仍是作品本身。

適用判斷：作品屬於「用看不用讀」的類型，這個斷點優先處理，格網三秒內就能建立風格印象；服務需要解釋脈絡的，格網只能當開場，後面要接分類篩選與案例頁補強，單靠一面作品牆，撐不起完整的說服。

對號斷點：分類標籤把對的作品送到對的客戶面前

對號斷點的症狀很具體：客戶明明逛完了作品集，卻說不出你做過跟他產業相關的案子。作品都在，只是沒有被送到對的人面前；什麼都做的綜合工作室特別容易犯這個問題，每一種訪客都被迫先看完其他人的作品，耐心在找到自己的那一件之前就用完了。

分類篩選的完整動線是三段接起來的：頁面頂部一排類別標籤，訪客點下其中一個，下方的作品格網即時收斂成該類別的項目；接著點入選中的作品，直接落到該案例的專案頁。Divi 內建的 Filterable Portfolio 模組就能做出這整條動線，不必另外安裝外掛。

要注意的是，篩選讀的仍是同一份 Project 分類。分類在資料層打好，視圖層才有東西可篩；分類不存在或掛錯，模組給出的只是一個空框架，標籤點了沒反應，比沒有篩選更尷尬。

標籤的互動方式也影響成敗。標籤要點得動、點了要有立即反應，格網收斂的過程越即時，訪客越願意多按幾次；反應慢或需要整頁重載的設計，第一次點擊就會讓人放棄。被選中的標籤要在視覺上清楚跳出來，訪客才知道現在看到的是哪一類，逛到一半不會迷路。

模組給得了機制，給不了內容。Divi 5 的官方文件把 Filterable Portfolio 定位為可篩選的作品集模組，同時也看得出：作品內容與分類要由站方自備，篩選不會無中生有案例。若篩選條件要比單一類別更複雜，Divi 5 原生的 Loop Builder 與 Post Filter 值得先測，確認原生能力的邊界之後，再評估是否真的需要 Divi 篩選外掛；功能變強的代價是設定變重，有實際需求再上。

分類的紀律寫成判斷流程，比寫成數字教條有用。數量依作品規模與訪客需求決定，判準有兩條：標籤一行排得完，且每個分類都撐得起一個畫面；先用少量清楚的分類在手機寬度實測，會擠成兩行就該合併。命名用客戶搜尋時會打的詞，「包裝設計」好過「結構包裝與刀模工程」；標籤是給訪客看的溝通介面，不是展示專業深度的地方。名稱可以放心用中文，分類在後台另有網址代稱（slug），以英文短詞命名較穩（如 branding），兩邊互不影響；代稱一旦對外存在就別輕易更動，改了會讓舊的分類連結指向失效的位址。

分類之外的排序也值得排一次。篩選解決「找得到」，排序解決「先看到誰」；同一個分類裡，代表作排在前面，仍在進行或剛結案的近期專案可以往前放，年代久遠但具代表性的留在後段。訪客對單一分類的耐心有限，每一類的前兩件往往是該類給人的全部印象，把這個位置當精選區來用，而不是按時間流水帳排。

服務線多元的工作室還有另一條路：為每條服務線各開一頁聚焦的作品頁，再用選單或頁間連結串起來，每頁只對一種搜尋意圖說話，比單頁塞滿分類更精準。要快速起跑，從 作品集範本挑一個骨架、換上自己的分類結構，省下從零排版的時間，也讓「先資料後版型」的順序不被工具綁架。

深入斷點：作品點不進去，源頭在資料模型

深入斷點的症狀有兩種：點了作品，多數只換到燈箱放大的一張圖，或者卡片根本點不進去。訪客想讀故事的時候，頁面只給他一張圖；深度要從哪裡建起，答案不在版面配置，在資料來源。Gallery 讀媒體庫的圖，Portfolio 讀 Project 這個內容模型，這條分野直接決定訪客點下去之後會發生什麼事。

卡片點不點得進去，取決於背後讀的是哪種資料。Divi 的 Project 是獨立的內容類型，官方文件說明它具備標題、內文、分類與精選圖片，四個欄位各有去處：標題變卡片上的作品名，分類變篩選標籤，精選圖片變格網縮圖，內文就是案例頁裡的故事主體。Gallery 呈現的則是媒體庫裡的圖片；官方文件雖然也提供連結設定，能為單張圖片另指目的地，但那得逐張手動指，資料層終究不會自動把圖片長成案例頁；把 Gallery 當作品集主體用，正是「點不進去」最常見的根源。

一句話自我檢測：作品需不需要被「讀」？需要，就建成 Project，讓每張卡片自帶案例頁入口；純視覺的創作，Gallery 圖牆已經足夠，不必為了深度硬做案例頁，把時間留給作品本身。

用錯資料來源的後果不會馬上出現，通常要到想加功能時才爆發：想為卡片補標題摘要、想讓點擊進到案例頁、想按分類篩選，回頭才發現手上只有媒體庫的圖，一切都要重來。先決定作品要不要被讀，再決定資料放哪層，這個順序換來的是之後每一次擴充都不必打掉重練。

卡片上的標題與摘要另有一段力學。坊間常見的做法是把專案名稱與摘要寫進 Image 模組的 Overlay，但依 Divi 5 官方文件，Overlay 屬於圖片顯示樣式的設定，不是能輸入文字的容器；專案文字應由 Heading 或 Text 這類內容模組供給，或直接由 Project 資料帶出，懸停時的外觀狀態則交給 Hover Options 調整。資訊要放在預設可見的層，這條原則在懸停特效上同樣成立。

Project 與一般文章也要分清楚：文章餵部落格，Project 餵作品集，混用會讓兩種頁面互相污染，導覽與搜尋都會亂掉。把案例故事寫完整的寫作基礎，可以延伸 WordPress 文章發佈教學；同樣的敘事功課，換個地方練習而已。

四個欄位的寫作也有輕重。標題下客戶能懂的專案名，不用內部代號；精選圖片選最能代表成果的一張，不是過程花絮；分類在建檔時就選好，事後補的分類最容易漏；說明文字留給案例頁的敘事，不要塞進標題裡。欄位各司其職，版面才有乾淨的資料可用。

卡片數量大、想改用滑動列呈現時，再評估 Divi 輪播外掛。輪播會拉高行動端的操作複雜度，訪客能否自己掌控節奏、看詳情的入口會不會被藏起來，先想清楚再上；多數作品集用格網加篩選已經足夠，滑動列留給真正需要連續瀏覽的內容型態。

案例頁才是說服現場：一件作品的五段敘事

訪客點進單一作品之後，該看到什麼？一個微型案例研究。格網與篩選都只是目錄，信任是在案例頁裡一寸寸建立起來的；列表頁贏得點擊，案例頁贏得詢問，兩者的分工無法互相取代。

五段的次序可以依專案微調，先後的邏輯不動：先讓人知道這是什麼、為誰而做，再交代怎麼做、做出了什麼，然後把興趣接到下一步。每個專案頁都是一則微型案例研究，一件件累積起來，就是別人抄不走的競爭力；作品集網站設計裡談的「用專案說故事」，說的就是這件事。

五段各有說服功能。背景讓潛在客戶對號入座，他看見別人碰過同樣的麻煩，才會相信你懂他的處境；角色界定你的責任範圍，功勞歸屬清楚，信任才有基礎；做法證明你會思考，呈現取捨與理由，讓人看到執行背後的判斷；成果給出證據，數字必須真實可查，做不到量化就改用質性描述，例如上線時間與應用範圍；下一步把累積的興趣接回詢問，別讓故事講完就散場。

圖片在案例頁的角色也要重新想。列表頁的縮圖求一致，案例頁的圖求證據力：草稿與成品的對照、實際應用的場景照，各自證明不同的事。一張上線後的實際畫面，勝過三張精修示意圖，因為它證明專案真的被使用；圖說寫清楚每張圖在證明什麼，訪客的閱讀會有節奏，不會陷入無盡的圖片滑動。

案例頁的長度以說完為準，不以字數為準。五段各自一到三段文字，搭配適量的圖，多數專案一頁講得完；內容真的豐富，再用分段標題協助導讀。要避免的是另一種極端：把結案報告整份貼上來，細節完整但訪客讀不完，等於把說服材料寫成內部文件，對象弄錯，深度就白費。

深度勝於數量。與其十件只有標題配一張圖的空殼，不如把每一個專案頁做到位；空殼頁比缺頁更傷信任，訪客點開三次都是殼，第四次就不點了，連帶對其他作品失去興趣。

標題的下法直接影響點擊意願。「品牌識別｜某連鎖餐飲」交代類型與對象，好過只有作品名的「某某專案」；資訊在標題就位，訪客在目錄層就能對號，不必點進去才知道這是哪種案子，篩選與排序的效益也才接得上。

作品還是個位數的階段，一頁式長版敘事反而更有說服力：作品即段落，一篇講完一個案例，敘事的密度掩過數量的稀疏，避免格網暴露量能不足。先確認業務結構，再決定要不要上格網；版型是隨著作品量長出來的，不是追著別人的網站抄來的。

五段敘事還能反過來用在接案前期。提案階段就把「背景、角色、做法、成果、下一步」的骨架寫成草稿，專案進行中照著累積素材，結案時案例頁幾乎是順手完成的；多數人結案後才回頭憑記憶補故事，細節與數字早就散了。很多案例頁做不深，原因不是不會寫，是材料沒有留在現場。

案例頁的結尾要接回兩個地方：上一層的作品列表，與頁面的聯絡入口。列表、案例、詢問形成迴路，訪客在任何一層被說服，都找得到下一步；這條迴路怎麼收口，就是下一節的主題。

行動斷點：三層引導把興趣收成詢問

行動斷點的症狀最隱形：訪客被作品打動了，頁面卻沒有給他開口的地方，他只好安靜地關掉分頁，機會也跟著流失。解法是把引導做成三層接力，讓興趣在任何一段都有地方去：

1. 卡片層：作品卡上的「看詳情」連到專案頁，讓想深入的人有路可走，這一層負責引起興趣。
2. 中段層：作品列表之後放一段軟性服務說明與次要按鈕，回答「我能怎麼幫你」，這一層負責建立關係。
3. 頁尾層：一個文字具體的主按鈕，把人送往聯絡表單，這一層負責收單。

三層的文字都要具體。「開始聊聊你的專案」好過「了解更多」，因為它告訴訪客按下之後會發生什麼事，降低開口的門檻；按鈕的視覺與版面細節，CTA 設計指南有完整的整理。判斷標準只有一條：每個版面元素都答得出自己為何出現，答不出來的就拿掉。

中段的軟性說明也有講法。放一段你怎麼工作、常跟誰合作、案子怎麼進行，三到五句就夠，位置在作品列表之後，讀完作品的訪客正好帶著印象經過；次要按鈕給還在觀望的人一個輕的下一步，例如「看看服務內容」。不是每個人都準備好直接開口聊專案，路徑要有重有輕，重的收單、輕的養關係。

整頁的收單邏輯與 Landing Page 製作教學裡的漏斗觀念相通，一層層收攏，而不是到處放按鈕稀釋注意力。若希望作品集更主動地拉高詢問量，系統性的做法整理在 提升網站詢問量的方法，這裡先點出入口不展開。

聯絡方式也留備援。表單之外，直接的信箱與慣用的社群連結放在頁尾，有些訪客就是習慣用自己的管道開口；入口多一條，就少一個默默離開的理由。前提是每條路都要有人回，掛著沒人理的入口，比沒有入口更傷信任。

三層引導的密度也有上限。同時出現太多按鈕，每個的分量都被稀釋，訪客反而全部跳過；每一屏留一個主要動作就夠，次要動作用文字連結呈現，視覺上讓路。引導的強弱分配，本質上是在替訪客做決定：此刻你希望他做什麼，就讓那一個動作最顯眼。

換版型前先排除：三個偽裝成版型問題的兇手

有些症狀看起來像版型問題，源頭卻在別處。以下三個兇手先逐一排除，再考慮換版型；順序錯了，版換了、問題原封不動，還多花一輪工。三個兇手有共同的特徵：症狀都在版面上看得見，病因卻在輸出管線、詮釋資料與裝置差異裡，所以怎麼調版面都不會好。

兇手一：載入速度，被誤診成版面不吸引人

訪客「滑不到第二屏」，常是載入問題而不是美學問題。機制面的解法是讓圖檔依實際顯示寬度輸出，交給瀏覽器的響應式機制挑最合適的那張；格式（WebP、AVIF 或 JPEG）按素材實測的畫質與大小決定，沒有一體適用的像素上限或固定格式。可能成為 LCP 的首屏主圖，不宜一律延遲載入，它出現的時間就是訪客對速度的第一印象。速度對留人與操作的影響，web.dev 的說明寫得直接；頁面速度也自 2018 年 1 月起列入 Google 的行動搜尋排名，不過它在整套排名機制裡只算輕微訊號，不能當成保證，也無須為了它犧牲作品的呈現品質。

兇手二：圖片搜不到，被誤診成作品不夠多

第二個兇手是圖片的可搜尋性。對視覺創作者，圖片搜尋是高價值的入口，而機器讀的線索是檔名、alt 與專案描述，三樣都不歸版型管，換版型自然無解。完整做法延伸 圖片 SEO 優化指南；圖多頁面的壓縮與延遲載入基礎，看 WordPress 圖片優化指南。線索補齊之後，作品才有機會在圖片搜尋裡被需要的人看見。

檔名的改法很具體：把相機預設的編號換成描述內容的名字，例如作品類型加上專案名稱；alt 寫圖片實際呈現的內容，不是把關鍵字塞滿。這兩件事在整理素材時順手做完，比日後回頭補省力，也讓每張圖在搜尋與無障礙兩邊都拿到該有的線索。

兇手三：手機排序錯位，被誤診成格網不好

第三個兇手只出現在小螢幕上。Statista 的統計（2026 年 4 月）顯示全球約六成流量來自行動裝置，但這只是背景：裝置占比要以自家 Analytics 或 Search Console 為準，不必拿全球平均推定本站訪客。實際的修法是排序重整：桌面四欄擠成單欄後，精華作品前移、篩選鈕置頂方便切換，且要確認置頂元素不遮住內容。CSS 調整的細節，Divi 手機版排序教學有步驟可循。

把診斷寫成一張症狀處方對照表

診斷做完，把結論壓成一張規格表。照症狀找處方，比背模組名稱快得多，也方便跟一起維護網站的夥伴對焦：

↔ 左右捲動檢視完整表格

訪客行為症狀	斷點	處方	關鍵模組	驗收標準
滑兩秒就離開	停留	滿版格網陣列	Fullwidth Portfolio 或 Gallery（Grid）	第一屏全是代表作
找不到相關作品	對號	類別標籤篩選	Filterable Portfolio	幾次點選內縮到目標類別
點進去只有圖	深入	Project 案例頁	Project 與內容模組	讀得到背景與成果
看完沒有動作	行動	三層引導	按鈕與連結設定	詢問信會引用具體案例

作品量夠且跨領域時，處方可以疊：格網當開場、分類篩選當主體、Project 案例頁承接每一件，卡片資訊層處理目錄裡的每個入口。組合的代價是維護節奏變重，每新增作品都要想它屬於哪個分類、案例頁寫到什麼深度；值不值得，由作品更新頻率決定，更新慢的站，組合越簡單越好。

複合症狀的判讀有個先後：先修深入，再修對號。訪客點得進、讀得到，格網的吸引力才有兌現的地方；順序顛倒，會一直覺得版面好像少了什麼，卻說不出問題在哪，因為缺的不是版面，是版面要呈現的內容深度。

這張表用來快速排除，不是鐵律，症狀常有複合成因。還在選工具階段的讀者，WordPress 頁面編輯器比較提供 Divi 與其他方案的橫向視角，工具定了再回來對表，順序不要顛倒。

先建作品資料，再組版型，收在手機實測

決定要做之後，順序比技巧重要。順序顛倒的代價很具體：版型組完了，才發現作品沒有案例頁、分類不存在、圖片比例不一，整頁重來。三個階段照著走：

1. 資料層：盤點一到兩年的作品並淘汰弱作，把留下的每一件建成有故事的 Project，定好分類與縮圖的裁切規格。
2. 視圖層：圖片批次處理（統一比例、壓縮、寫 alt）完成後，才進 Divi 組版型骨架，先結構後細節，資訊預設可見。
3. 驗收層：拿起手機，從首屏一路走到按下聯絡按鈕；任何一個讓你猶豫「接下來呢」的位置，都是待修處。

每層一個驗收問題：資料齊不齊、視圖讀不讀得到、無滑鼠時拿不拿得到資訊、案例頁說不說得完一個故事、手機上走不走得通。五問全過，這次改版才算完工；缺一問，就回到對應的層補齊，不要急著上線。

階段之間允許停下來。資料層做完可以先不組版面，把分類與案例頁放著養幾天，回頭看敘事還站不站得住；視圖層組完，找一位不熟你作品的朋友看三分鐘，問他記得哪一件、下一步會按哪裡。外部眼睛抓內部盲點，通常比自查快，也便宜。

工具地圖照各層取用：區段與欄的結構邏輯，回頭翻 Divi 架站全攻略；已升級 Divi 5 的讀者先看 Divi 5 介面指南，新面板的選項位置與舊版有差異，先認路再動手。想加速起跑，Divi 佈局版型與 質感版型庫有現成的作品集骨架可套，換上品牌設定即可用。需要更進階的篩選、輪播或動畫時，必裝 Divi 外掛清單是起點，Divi Supreme 模組的評介這類擴充能補內建模組照顧不到的細節；先問資料層撐不撐得起，再問工具強不強。

字體、配色與留白，守住視覺統一的三條線

版型對了之後，質感由三條線決定。作品集看起來像幾個人做的，問題多出在這三條線沒守住；質感不來自模組，來自紀律，模組只提供骨架，骨架上穿什麼衣服是自己的事。

字體線：一個展示字體配一個正文字體，上限兩種。中文字體依黑體、明體、圓體的氣質對照挑選，中文字體設計指南有依分類的整理；字型檔的載入範圍照 Divi 自訂字體教學控制，只載用得到的字重與字集，不要讓字體拖垮頁面速度。

配色線：背景白或淺灰，文字深灰而非純黑，品牌色只留給分類標籤與 CTA 這類強調點。系統化的做法延伸 網站配色指南與 配色工具；每多一個顏色，都要答得出它存在的理由，答不出來就收回中性色。

留白線：區段與格網的間距，替手機、平板與桌面各開一組數值，行動端略寬於桌面，小螢幕更需要呼吸感。版面層次與視覺節奏的進階觀念，排版設計技巧與 網頁版面設計指南有更系統的整理。三線守住，作品當主角、頁面當畫布，視覺自然統一，訪客的注意力才會留在作品上。

三條線的檢查有一個共同的笨方法：把作品集頁面截圖存檔，隔週再看。字體跑掉、顏色變多、間距不一致，在截圖的整體視角裡比在編輯器裡顯眼得多；編輯器讓你貼近細節，截圖讓你看見全貌，兩種視角交替用，統一性才守得住。

上線之後，怎麼判斷改對了

改版上線後，先看質性訊號：詢問信開始引用具體案例了嗎？視訊會議裡，客戶會自己說「你們做過某某那種案子」嗎？被問到相關經驗時，還需要現場翻找嗎？給自己四到八週的觀察窗，這是經驗值而非保證，讓訊號有時間累積出趨勢。

觀察窗內不要反覆改動。訊號需要穩定的環境才有意義，這週換按鈕、下週改分類，看到的變化就無法歸因；固定版本、固定觀察期，把想改的先記下來，期滿一起評估，判斷會冷靜得多，也更容易看出哪些改動真的有效。

數字類的訊號可以看，但別當唯一依據；以自家 Analytics 與 Search Console 回看裝置占比與頁面表現，比任何全球平均都準，也比單週的起伏可靠。

作品集是活的業務資產。有可公開的新專案就更新；沒有時，回頭補足舊案例的角色與成果描述，把過時的下架，頻率依實際業務決定，不必硬設季度門檻。每半年拿起手機重走一次動線，把「當時合理、現在卡住」的位置修掉，頁面就會一直處於堪用狀態。

下次會議再被問「有做過我們這種的嗎」，答案不必由你當場翻找出來；頁面替你回答，對方自己就能在你的作品集裡看見它。