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。