審查網頁設計

概述

一個只說「看起來不錯」的設計審查毫無價值。有用的審查會指出元素名稱、測量值以及應有的目標值。

核心原則：每一項發現都必須附上數值或選擇器。沒有證據就不要用形容詞，無法驗證的部分要明確說出來。

通過順序

依此順序執行。後面的通過在較早的通過失敗時是無意義的。

結構：每個區塊是否存在、順序是否正確、內容是否綁定
節奏：區塊連接處的間距、網格對齊、卡片高度、區塊系統
響應式：下方視窗矩陣，行動裝置與桌面
文字與顏色：對比度、階層結構、孤行、溢出、文字寬度是否符合設計
動態效果：請參閱 animating-web-pages 與 choreographing-scroll-stories
聲明與內容：請參閱 writing-claims-that-hold
可及性與效能：焦點、替代文字、LCP、版面偏移

視窗矩陣

測試頁面必須通過的寬度，而非代表性寬度。一組實際上線時通過測試的尺寸：桌面為 1024、1280、1440、1920 和 2560；手機為 320、360、390 和 430。

寬度	檢查重點
1440	文字行長超過約 75 個字元；本不該置中卻置中的區塊
992	三欄網格應變為兩欄；黏性元素沒有移動空間
768	平板版型未實作，導致桌面值套用到一半寬度
390	滿版媒體無法容納主體；深色文字在深色背景上；水平溢出
320	最小手機：標題斷行、按鈕被裁切
2560	圖片在 Retina 螢幕上模糊；內容在寬畫布中間遺失

值得指出的行動裝置失敗案例：全螢幕英雄區塊的媒體僅佔約 55% 的區塊高度，其餘顯示的是區塊背景。若區塊背景是深色，而文字已切換為淺色主題，則文字與按鈕會變得不可見。請在 390 寬度下檢查兩種主題狀態。

測量，不要用肉眼判斷

從即時頁面中讀取值，而不是從螢幕截圖判斷。這樣更快、能發現眼睛遺漏的問題，且在無法渲染時也能運作。

// 區塊節奏：重要的間距是每個連接處的總和
[...document.querySelectorAll('section')].map(s => {
  const c = getComputedStyle(s);
  return { cls: s.className, h: Math.round(s.getBoundingClientRect().height),
           padT: c.paddingTop, padB: c.paddingBottom };
});

// 溢出：最常見的隱藏錯誤
[...document.querySelectorAll('*')]
  .filter(e => e.scrollWidth > e.clientWidth + 1)
  .map(e => e.className);

// 水平頁面溢出
document.documentElement.scrollWidth > document.documentElement.clientWidth;

// 卡片在網格內的均勻度
[...document.querySelectorAll('.card')].map(c => Math.round(c.getBoundingClientRect().height));

此儲存庫中的 tools/page-measure.js 將上述腳本與後續檢查整合為一個程式碼片段。

其他經過實證的數值檢查：

區塊系統：每個內容區塊標題的計算字體大小相同；每個左邊緣與導覽標誌邊緣對齊。
文字大小下限：無文字小於 10px。
一個 h1。標題層級依序遞減，不跳級。
圖片：每張圖片都能解碼；在每個滾動位置與裝置像素比下，有效像素比低於或等於 1.0。
每個場景的對比度：在固定場景內，每個文字節點在該場景完成狀態下，與其第一個實色背景的對比度至少為 3:1（大字體）或 4.5:1（內文）。
英雄區塊：取樣八秒的畫面。若出現重複圖片、英雄矩形外的圖塊、重疊、文字下的圖塊，或介紹動畫結束後有任何變化，則視為失敗。
滾動手感：真實滾輪輸入，請參閱 choreographing-scroll-stories。
主控台乾淨。腳本啟動、介紹執行、無待處理錯誤。

當你無法截圖時

無頭模式與隱藏瀏覽器窗格會暫停渲染，因此螢幕截圖會是空白的，但 DOM 完全正常。這不是跳過審查的理由，也不是請使用者幫你檢查的理由。

改用數值驗證：計算樣式、邊界框、scrollWidth、資源擷取狀態與內容類型。在你的報告中清楚說明哪些發現是測量得到的，哪些是用肉眼看到的。

內容與聲明

設計審查涵蓋頁面所陳述的內容。

每個統計數據都必須有來源，且來源已獲准用於行銷
客戶標誌必須在已獲准的清單上，而非僅是「我們擁有的標誌」
替代文字需描述圖片內容，不能是檔名，且有意義的圖片不能留空
CMS 列表中不能有佔位文字；動畫背後不能有空白的卡片
無禁用詞彙；若公司風格指南禁止使用 em dash，則不使用

可及性底線

每個可互動元素上焦點環可見（:focus-visible，而非 outline: none）
內文對比度至少 4.5:1，大字體 3:1
觸控目標至少 44x44 像素
偏好減少動畫的使用者：頁面應完整且靜止
無 JavaScript 時：所有內容仍可見

效能底線

LCP 圖片設為 eager，其他圖片設為 lazy
英雄圖片寬度約為 CSS 寬度的 2 倍，非 4 倍
無因圖片未設定尺寸或無 aspect-ratio 包裝而導致的版面偏移
在手機上，影片應使用 1x 或輕量檔案，並附有海報

執行範圍

里程碑需要完整套件。小型修正只需執行涵蓋該變更的單一檢查、部署到預覽環境並提交報告。每次調整都執行完整套件會把一行修正變成一小時的任務。當有人說「完整 QA」時，才執行所有項目。

修正後，請部署到預覽環境並 QA 預覽環境，而非僅檢查本機建置。最終上線的是要檢查的對象。

驗證執行結果，而非記錄

在報告數值之前，請確認產生這些數值的執行已完成：狀態檔案是今天的、記錄結尾乾淨、視窗是你預期的。早先執行的過時記錄區塊看起來與新記錄一模一樣。

冷審查閘門

你自己的 QA 會存在盲點。對於里程碑，請將從未看過該工作的新審查員只提供成品：矩陣寬度的全頁截圖、390 工作表、動態捕捉與聲明清單。門檻：在階層、節奏、動態、圖像與文案各項上至少 8 分（滿分 10）。最多三輪，每輪更換新審查員。此方法在一個完成的影片專案上試行，整體得分 7 分，並發現了一個靜態掛鉤和一個晚出現的品牌名稱——這些都是我們自動化檢查通過的項目。

報告格式

一個表格。嚴重性、位置、測量值、修正。按最嚴重優先排序。

嚴重性	位置	測量值	修正
高	`.hero` 在 390	媒體在 812px 區塊內只佔 500px；複製區域是 `#0c0c0c`	依主題設定區塊背景
中	proof 到 info 連接處	120 + 120 = 240px 空白	收緊至 80，或在此處放置 CTA

最後列出你檢查過且未發現問題的項目，以及無法驗證的項目（例如：「我聽不到音訊」、「草稿無法在正式域名上預覽」）。一份沒有乾淨項目的報告給人的感覺是未完成而非詳盡。

紅旗

「在行動裝置上看起來不錯」但未指出寬度
報告修正完成時未重新測量
因為前一次通過是乾淨的就跳過後續檢查
要求使用者檢查你本可以測量的項目
報告來自未確認完成的執行結果
針對一行變更執行完整套件

網頁設計審查