iT邦幫忙

2026 iThome 鐵人賽

DAY 30
0

昨天講的是「工具拍不到」。今天講一個更難處理的問題:

工具拍到了,但指標會騙你。

而且它會用兩個方向騙你。同一個指標,既會漏報,也會誤報。

誤判 A:99.9% 一致,實際上壞了

情境是遷移之後比對 UI。用的指標是「相同像素百分比」。

某兩個專案的對話框圓角,從 8px 掉到 4px。

而比對結果:

裁切範圍 放大倍率 差異像素 判定
全圖 1440×1000 ×1 相同像素仍 > 99.9% ❌ 腳本判定「一致」
26 px ×10 5.8% ❌ 被標題文字蓋住
14 px ×22 17.3% ✅ 清晰可辨

**幾個像素的差異,在一百四十萬像素的百分比裡會被完全稀釋。**圓角差 4px,影響的是四個角落各幾十個像素。除以整張圖,小數點後三位都看不出來。

這就是漏報:指標說一致,實際上壞了。

誤判 B:92% 一致,實際上完全正常

同一個指標,反過來也會騙你。

另一次升級的對話框比對出現 92.254% / 97.161%。看起來像嚴重跑版。追查的過程很值得看:

步驟 發現
目視 一度以為「背景遮罩不見了」
取樣頁面背景 前後 RGB 完全相同 → 目視判斷是錯的,遮罩還在
量測面板外框 位置與尺寸完全相同(位移 0、寬高差 0)
看差異熱區 紅色全部集中在面板四周的陰影環,面板內容零差異
逐點取樣陰影 每個通道差 1
統計差異 > 2 的像素 一張 0 個、一張 2 個(一百四十四萬像素中)

結論:新版的陰影漸層有 1–3/255 的捨入差異,肉眼完全不可辨。

一片差 1 的柔和陰影,就能把百分比打到 92%。

這是誤報:指標說有問題,實際上沒事。

注意那個「目視判斷是錯的」

追查表的第二列我想特別停一下:

目視:一度以為「背景遮罩不見了」
取樣頁面背景:前後 RGB 完全相同 → 目視判斷是錯的

**人眼看了一張有 92% 差異的比對圖,得出的結論是錯的。**這件事很重要,因為我們的直覺是「機器不準的時候,人眼可以救」。

但這裡的順序是反過來的:機器給了一個誤導性的數字 → 人眼被那個數字引導去找問題 → 找到了一個不存在的問題。

先入為主的數字會污染目視判斷。

真正解決問題的是第三步之後。量位置、量尺寸、看熱區分布、逐點取樣。每一步都是在把「感覺」換成「數字」。

三個互補指標

那個回顧的結論是:不能只看一個指標。

三個指標各有各的盲區,必須併看:

指標 偵測什麼 什麼時候會騙你
相同像素百分比 整體有沒有大範圍變動 小面積的差異會被稀釋(誤判 A)
最大色差 有沒有「差很多」的點 大面積的微小差異看不出嚴重度(誤判 B)
裁切放大 差異到底長什麼樣 要先知道該裁哪裡

三個的關係大概是:

  • 百分比回答「有沒有變」
  • 最大色差回答「變得嚴不嚴重」
  • 裁切放大回答「變成什麼樣子」

誤判 A 是因為只看第一個(小差異被稀釋)。
誤判 B 是因為只看第一個(大面積微差被誇大)。

兩次誤判方向相反,但原因相同:只用了一個指標。

https://ithelp.ithome.com.tw/upload/images/20260926/20178262qJhaW79Pq1.png

這件事的一般形式

我想把它從 UI 比對推廣出去,因為這個 pattern 到處都是。

任何單一的聚合指標,都會同時漏報和誤報。

  • 測試覆蓋率:80% 可能是套套邏輯測試堆出來的(漏報),也可能因為某個大檔沒測而低估了真實品質(誤報)
  • 問題單數量:Day 03 那一輪 35 張單其實是 18 個 bug(誤報:同一個原因被記了七次),而沒被測到的頁面完全不會產生單(漏報)
  • 一次通過率:Day 25 講過,如果檢查設計得鬆,通過率就會虛高

聚合的本質是丟資訊。 而丟掉的那部分,就是它騙你的空間。

所以 Day 25 我才會強調「一次通過率」要配「人工修正量」一起看。一個指標量產線的順暢度,另一個量產出的真實品質。

單看任何一個都會被騙。

一個實務建議

如果你要建立比對機制,我建議從一開始就設計成「多指標 + 可下鑽」:多指標:至少兩個方向不同的數字。一個看整體、一個看極值。

可下鑽:當指標異常時,要能一層一層往下查。

那個案子的下鑽路徑很值得抄:

百分比異常
  → 看差異熱區圖(差在哪個區域)
  → 量位置與尺寸(是位移還是變形)
  → 逐點取樣(差多少)
  → 統計超過閾值的像素數(有幾個真的差很多)

每一層都在縮小範圍,而且每一層都是數字,不是感覺。

沒有這條路徑,你看到 92% 就只能猜。

小結

  • 同一個指標會同時漏報和誤報:小差異被稀釋、大面積微差被誇大
  • 先入為主的數字會污染目視判斷——人眼看了 92% 之後找到了不存在的問題
  • 三個互補指標:整體百分比(有沒有變)、最大色差(嚴不嚴重)、裁切放大(長什麼樣)
  • 一般形式:任何單一聚合指標都會騙你,因為聚合的本質是丟資訊
  • 建立比對機制時要設計成多指標 + 可下鑽,每一層都是數字

上一篇
Day 29 - 截圖驗證的盲區:三個版本錯誤,但報告都說一致
下一篇
Day 31 - 綠燈的假象,沒有驗證,就不會有失敗
系列文
綠燈不等於做對:AI 開發的驗收工程 ——從兩個失敗的案子,到驗收交付 共 33 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言