01

先定義高價值畫面

不要一開始截取整個網站。優先涵蓋首頁、登入、主要轉換、表格錯誤、空狀態及最常使用的元件，並為每個畫面選擇能暴露斷點風險的 viewport。

每個基準都應記錄路由、資料狀態、語言、主題、viewport、瀏覽器引擎和建立日期。

02

消除會製造雜訊的變數

固定測試資料和時區，停用動畫，等待字體及圖片完成載入，並遮罩隨機 ID、時間、輪播和第三方廣告。若無法控制第三方內容，將它排除在比較區域之外。

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
03

同時保存局部與全頁證據

元件截圖適合精確比較按鈕、卡片和對話框；全頁截圖則能發現內容高度、固定元素及頁尾問題。對長頁面而言，兩者並用比只調高像素容差更容易定位問題。

04

把差異分類而不是一律接受

審核者應把差異標成預期設計更新、真正回歸、環境雜訊或需要產品決定。只有確認設計變更後才更新基準，避免錯誤畫面被直接變成新標準。

  • 字體或換行變化
  • 間距、對齊或層級變化
  • 內容缺失或意外出現
  • 顏色、對比及焦點狀態變化
05

把失敗結果連回可重現步驟

差異報告應附上基準、目前截圖、差異圖、測試網址、viewport、版本和重現步驟。修正後在同一尺寸及相鄰尺寸重測，避免只為單一截圖加入脆弱 CSS。