QA thiết kế ở tỉ lệ 1:1

Hai màn hình có thể trông y hệt nhau khi liếc qua, mà lệch nhau tới hai mươi phần trăm ở mọi phép đo đáng kể. Cỡ chữ, line height, nhịp giãn cách, tương phản. Cái liếc mắt là dụng cụ đo kém tin cậy nhất trong cả tòa nhà, vậy mà suốt nhiều tháng nó lại là thứ duy nhất chúng tôi dùng.

Đo bản gốc, đừng đo cái mình nhớ về nó

Khi yêu cầu là "làm sao cho ra cảm giác giống bản tham chiếu này", bước đầu tiên không còn là dựng mood board nữa. Nó là một đoạn probe chạy trong console của cả hai trang:

const probe = (sel) => {
  const cs = getComputedStyle(document.querySelector(sel));
  return [sel, cs.fontSize, cs.lineHeight, cs.letterSpacing,
          cs.fontWeight, cs.color].join('  ');
};
['h1', 'h2', 'p', 'nav a', 'button'].map(probe).join('\n');

Chạy trên bản tham chiếu, chạy trên bản của mình, rồi diff hai bảng kết quả. Câu chuyện thiết kế đổi hẳn khi cả hai phía cùng nhìn vào con số. "Trông nó nhẹ hơn" biến thành "h1 của họ là 88/0.94 ở weight 900, còn của mình là 72/1.1 ở 800", tức là một cái ticket chứ không phải một cuộc cãi vã.

So vùng cắt, đừng so cảm giác

• Cắt cùng một vùng từ bản của mình và của họ, xếp chồng ở tỉ lệ 1:1, rồi nhìn cả cặp. Những khác biệt biến mất khi để hai thumbnail cạnh nhau sẽ lộ ra rõ mồn một.
• Làm trên mobile trước. Desktop giấu đi những tội lỗi mà một viewport 390 pixel sẽ khai ra ngay lập tức.
• Tự động hóa nửa phần máy móc: một script duyệt qua trang và đánh dấu text overflow, thanh cuộn ngang bất ngờ, và những phần tử cao hơn container của chúng, trước khi con người phải bỏ gu thẩm mỹ vào đó.
• Ghi lại cả hành vi scroll. Đường cong easing và thời lượng pin là những quyết định thiết kế, và chúng đo được trên performance timeline chứ không chỉ cảm nhận suông.

Gu thẩm mỹ vẫn là người quyết

Chẳng có gì trong số này thay thế được sự phán đoán. Nó chỉ nuôi phán đoán bằng dữ kiện. Các phép đo cho biết chỗ nào mình lệch khỏi bản tham chiếu. Còn độ lệch đó là bug hay là một lựa chọn có chủ đích thì vẫn do con người quyết, và biết rõ mình đang quyết cái gì mới chính là toàn bộ khác biệt giữa một trang "gần đúng" và một trang thật sự đúng.