WordPress 網站設計實戰：8 個讓版面更專業的排版與視覺原則

上週我幫朋友看他賣手作皂的 WordPress 網站。他花兩個月調版面，用了六種顏色、全站只有一種字級、首屏是一張滿版風景照壓上一行「歡迎光臨」。他問我為什麼沒人下單。問題不在美感，在版面沒有替讀者做任何決定——眼睛不知道該先看哪裡。下面是我做 WordPress 網站設計時反覆用得上的 8 個排版與視覺原則，每一條今天下午就能動手改。

版面的工作是排優先順序

很多人把網站設計理解成挑一個漂亮佈景主題。但版面真正的工作，是替讀者決定「先看哪裡、再看哪裡、最後點哪裡」。

我檢查頁面只做一件事：把眼睛瞇成模糊，看還剩幾個「重的區塊」。全部一樣重，代表沒有階層；只剩一張大圖最重、標題和按鈕都糊掉，代表主角搞錯了。下面 8 個原則全是為了讓瞇眼測試通過，多數在 WordPress 全域樣式裡就能改完。

原則 1、2：字級階層與行高留白

原則 1：全站至少要有四個明確字級，級距要看得出來。內文一個尺寸、H3 稍大、H2 明顯更大、頁面主標最大，級距用倍率而不是「加 1px」。差一兩個像素的階層等於沒有階層，讀者只會覺得整頁很平。

別忘了粗細與顏色也是階層。同一尺寸下把小標改粗體、次要說明改成較淺的灰，立刻浮出三層資訊，不必再加字級。這招在側邊欄、卡片、表格裡特別好用。

原則 2：行高要跟著行寬走，段落間距要大於行間距。中文方塊字密度高，行高太緊會整段黏成一團。我把內文行高調到 1.7 上下，段落間距約一行高，讀者掃讀時才能一段一段「跳」。

還有一個常被忘記的量：單行文字的寬度。桌機版把內文欄寬限制在 700 到 800 像素，比讓文字撐滿 1920px 螢幕好讀太多；多數現代主題都有「內容寬度」設定，調小它是花三十秒、效果最大的一次修改。

原則 3、4：配色上限與對比度（WCAG 標準）

原則 3：整站顏色控制在「一個主色 + 一個強調色 + 一組中性灰階」。我朋友那站用了六種顏色，每個區塊都在搶戲。主色用在導覽與標題，強調色只留給你最想被點的那顆按鈕，其餘交給灰階。強調色出現次數越少，說服力越強。

顏色可以憑感覺挑，但對比度不行，它有官方數字可查。W3C 的 WCAG 2.2 成功準則 1.4.3「最低對比度」（AA 級）規定：一般文字與背景對比度至少 4.5:1；大字級文字（至少 18pt，或 14pt 粗體，中日韓字型取等效大小）可放寬到 3:1（W3C WAI 官方說明，資料時間 2026-07）。

原則 4：按鈕和表單欄位也有對比度規定。同一份指引的準則 1.4.11「非文字對比度」（AA 級）要求：使用者介面元件與有意義的圖形物件，與相鄰顏色的對比度至少 3:1（W3C WAI 官方說明，資料時間 2026-07）。淺灰底加淺灰框的輸入框看起來很有質感，但在戶外用手機的人根本找不到它。

把色碼丟進任一對比度檢測工具，或用 Chrome 開發者工具檢查元素就能直接看到比值。這是全篇唯一一條有標準答案、不能靠美感辯解的規則。

原則 5：首屏訊息與 CTA 位置

原則 5：首屏必須回答三個問題——這是什麼、給誰、下一步做什麼。「歡迎光臨」「用心做好每一件事」一個都沒回答。改成「手工冷製皂｜台灣製造，敏感肌可用」，品類、產地、對象一次交代完。

主要行動按鈕我一律放在首屏標題正下方，而且只放一顆。兩顆同樣顯眼的按鈕等於零顆，讀者會停下來比較，然後兩顆都不點。次要動作做成文字連結、把視覺重量拉低就好。頁面很長時，CTA 要沿路重複，放在每個大段落結束、讀者剛被說服的那一刻——只在頁尾放一顆沒用，會捲到頁尾的人本來就想買了。

原則 6：圖片比例、壓縮與版面位移

原則 6：同一列表裡的圖片必須同比例，而且每張 img 都要寫寬高。文章列表、商品卡片、團隊介紹，只要比例不一致，整排卡片高度就參差，這是「業餘感」最大的來源之一。上傳前統一裁成 16:9 或 1:1，比事後用 CSS 硬撐可靠。

寬高屬性關係到分數。Core Web Vitals 的良好門檻是 LCP 2.5 秒內、INP 200 毫秒內、CLS 0.1 內，以第 75 百分位數的載入表現判定（web.dev 官方說明，資料時間 2026-07）。圖片沒寫寬高，瀏覽器無法預留位置，圖一載入版面就往下跳，CLS 直接爆掉。

壓縮我的原則是：內文圖存 WebP、寬度不超過實際顯示寬度的兩倍、首圖以外一律 loading="lazy"。首圖絕對不要 lazy，它通常就是 LCP 元素。另外，圖表、流程示意、後台截圖往往比一張漂亮的免費素材照更能留住讀者，因為它們真的在傳遞資訊。

原則 7：行動版優先與斷點

原則 7：先把手機版排好，再回頭處理桌機版。這不是風格偏好，是索引方式決定的。Google 搜尋中心官方文件說明，搜尋使用以智慧型手機爬蟲抓取的行動版內容來做索引與排名（Google Search Central 官方文件，資料時間 2026-07）。

那份文件裡最容易被違反的幾條，我當成檢查清單在跑：行動版要有和桌機版相同的內容，手機版折疊掉大段文字、只留摘要，被索引到的就只有摘要；圖片的替代文字、標題與檔名兩邊要一致，解析度也不能為了省流量換小圖；主要內容不能靠使用者互動才載入，需要滑動、點擊或輸入才出現的內容，爬蟲不會去觸發；標題與 meta description 兩版必須等價。

斷點怎麼抓？我不背裝置尺寸，改用「內容什麼時候變醜」來決定：把瀏覽器慢慢拉窄，哪個寬度開始出現文字擠成兩三個字一行、卡片橫向溢出、導覽列換行，就在那裡設一個斷點，通常落在手機直式、平板、桌機三段。斷點是為內容服務，不是為機型服務。另外，手機版的點擊目標要夠大、彼此要有間距，選單和按鈕擠在一起會無聲流失轉換。想先把基礎架構釐清，可以參考這篇網站架設新手指南：主機、網域、平台全攻略。

原則 8：佈景主題與區塊編輯器怎麼選

原則 8：挑佈景主題不要看示範站多華麗，要看它把「全域樣式」開放到什麼程度。能在後台統一設定字級階層、色票、內容寬度、按鈕樣式的主題，遠比內建 30 種示範版型卻要逐個區塊調參數的主題好用。前者改一次全站生效，後者改到你想放棄。

區塊編輯器搭配區塊主題的全域樣式面板，已能覆蓋大部分排版需求。我的建議是先把全域樣式設定完，再開始排任何頁面，否則你會在每個區塊手動覆蓋顏色和字級，日後想改品牌色就得一頁一頁找。頁面建構器不是不能用，但代價是輸出的 HTML 較肥、樣式較難全站統一；內容型部落格我傾向用原生區塊編輯器加輕量主題，形象站才在少數落地頁用建構器。

選主題之前還有一件事影響更大：主機。版面再輕巧，主機回應慢一樣救不了 LCP。這部分整理在WordPress 虛擬主機推薦 2026：新手架站 5 大主機商比較與選擇指南。還在猶豫要自架還是用現成平台，可以先看選擇適合你的平台再決定。

三個常見錯誤 → 怎麼修

這三個是我看台灣中小型 WordPress 網站時出現頻率最高的問題。共同點是都不必重做網站就能修好。

錯誤一：全站只有一種字級。整頁文字一樣大，標題只是加粗，讀者掃讀時找不到落腳點。
怎麼修：在全域樣式定義四級字級（內文／小標／章節標／頁面主標），級距用倍率拉開，再把每個 H2、H3 套回正確標籤——很多網站的「標題」其實只是加粗段落，這對 SEO 和螢幕報讀器都是損失。

錯誤二：滿版彩色照片上直接壓深色字。照片是花的，文字在亮處看得見、在暗處消失，對比度隨捲動浮動，必然違反前面的 4.5:1 規定。
怎麼修：在圖與字之間加一層半透明深色遮罩，或把文字移到照片旁的純色區塊。改完用檢測工具量一次，確認一般文字達 4.5:1、大標達 3:1。

錯誤三：首屏放自動輪播 banner。輪播通常一次載入三到五張大圖，是拖慢 LCP 的常見元凶；更麻煩的是它會自己換頁，讀者還沒讀完就被切走。
怎麼修：換成一張靜態主視覺加一組明確標題與單一 CTA。真的有多個訴求，就改成往下排列的區塊，讓讀者用捲動控制節奏。更多容易踩到的版面地雷，可以看這篇網頁設計師崩潰！這5個網站地雷你踩了嗎？。

老實說，這三個修完，多數網站的業餘感就消掉一半。剩下那一半來自內容本身有沒有話要說——版面能讓好內容被看見，但救不了空洞的文案。