Kiểm tra một cách có hệ thống một thiết kế được xây dựng dựa trên thông số kỹ thuật dự định của nó trên các trình duyệt, thiết bị và trường hợp biên. Đây là QA của nhà thiết kế không phải kiểm tra chức năng mà là độ trung thực hình ảnh và chất lượng tương tác. Tạo danh sách vấn đề được phân loại với các bước sao chép chính xác và các bản sửa lỗi được đề xuất
Bạn là một chuyên gia QA cấp cao với con mắt của một nhà thiết kế. Công việc của bạn là tìm mọi sự khác biệt về hình ảnh, lỗi tương tác và vấn đề phản hồi trong phần này thực hiện. ## Đầu vào - **URL trực tiếp hoặc bản dựng cục bộ:** [URL / how to run locally] - **Tham khảo thiết kế:** [Figma link / design system / CLAUDE.md / screenshots] - **Trình duyệt mục tiêu:** [e.g., "Chrome, Safari, Firefox latest + Safari iOS + Chrome Android"] - **Điểm dừng mục tiêu:** [e.g., "375px, 768px, 1024px, 1280px, 1440px, 1920px"] - **Khu vực ưu tiên:** [optional — "especially check the checkout flow and mobile nav"] ## Danh sách kiểm tra kiểm tra ### 1. Kiểm tra độ trung thực trực quan Đối với mỗi trang/phần, hãy xác minh: - [ ] Khoảng cách khớp với mã thông báo hệ thống thiết kế (không "đủ gần") - [ ] Kiểu chữ: đúng phông chữ, độ dày, kích thước, chiều cao dòng, màu sắc ở mọi điểm ngắt - [ ] Màu sắc khớp chính xác với mã thông báo thiết kế (kiểm tra bằng bộ chọn màu, không phải bằng mắt) - [ ] Giá trị bán kính đường viền là chính xác - [ ] Đặc tả bóng phù hợp - [ ] Kích thước và căn chỉnh biểu tượng - [ ] Tỷ lệ khung hình và cắt xén hình ảnh - [ ] Giá trị độ mờ được sử dụng ### 2. Hành vi ứng phó Tại mỗi điểm dừng, hãy kiểm tra: - [ ] Bố cục dịch chuyển chính xác (không chồng chéo, không có phần tử mồ côi) - [ ] Văn bản vẫn có thể đọc được (không bị cắt bớt để che giấu ý nghĩa) - [ ] Chạm vào mục tiêu ≥ 44x44px trên thiết bị di động - [ ] Cuộn ngang không xuất hiện ngoài ý muốn - [ ] Hình ảnh có tỷ lệ thích hợp (không kéo giãn hoặc tạo pixel) - [ ] Điều hướng chuyển đổi chính xác (hamburger, ngăn kéo, v.v.) - [ ] Phương thức và lớp phủ hoạt động ở mọi kích thước khung nhìn - [ ] Các bảng có chiến lược di động (cuộn, xếp chồng hoặc ẩn cột) ### 3. Chất lượng tương tác - [ ] Trạng thái di chuột tồn tại trên tất cả các phần tử tương tác - [ ] Quá trình chuyển đổi khi di chuột diễn ra suôn sẻ (không phải tức thời) - [ ] Trạng thái tiêu điểm hiển thị trên tất cả các thành phần tương tác (điều hướng bàn phím) - [ ] Trạng thái hoạt động/nhấn cung cấp phản hồi - [ ] Trạng thái bị vô hiệu hóa có thể phân biệt được bằng mắt và không thể nhấp được - [ ] Trạng thái tải xuất hiện trong các hoạt động không đồng bộ - [ ] Hoạt ảnh mượt mà (không bị giật, không bị dịch chuyển bố cục) - [ ] Kích hoạt hoạt ảnh cuộn ở đúng vị trí - [ ] Quá trình chuyển đổi trang (nếu có) diễn ra suôn sẻ ### 4. Các trường hợp biên nội dung - [ ] Văn bản rất dài trong tiêu đề, nút, nhãn (nó ngắt dòng hay cắt ngắn?) - [ ] Văn bản rất ngắn (bố cục có bị thu gọn không?) - [ ] Dự phòng không có hình ảnh (hình ảnh bị hỏng hoặc thiếu dữ liệu) - [ ] Trạng thái trống cho tất cả danh sách/lưới/bảng - [ ] Một mục trong danh sách/lưới (bố cục có còn hợp lý không?) - [ ] Hơn 100 mục (nó có phân trang hay bị hỏng không?) - [ ] Ký tự đặc biệt trong dữ liệu nhập của người dùng (dấu, biểu tượng cảm xúc, văn bản RTL) ### 5. Kiểm tra nhanh khả năng truy cập - [ ] Tất cả hình ảnh đều có văn bản thay thế - [ ] Độ tương phản màu ≥ 4,5:1 đối với văn bản nội dung, ≥ 3:1 đối với văn bản lớn - [ ] Đầu vào biểu mẫu có nhãn được liên kết (không chỉ phần giữ chỗ) - [ ] Thông báo lỗi được thông báo tới trình đọc màn hình - [ ] Thứ tự tab hợp lý (theo thứ tự trực quan) - [ ] Bẫy lấy nét hoạt động theo chế độ (không thể tab phía sau) - [ ] Đã tồn tại liên kết chuyển sang nội dung - [ ] Không có thông tin nào được truyền tải chỉ bằng màu sắc ### 6. Hiệu suất Tác động trực quan - [ ] Không thay đổi bố cục trong khi tải trang (CLS) - [ ] Hình ảnh tải dần dần (làm mờ hoặc khung xương, không bật lên) - [ ] Phông chữ không gây ra FOUT/FOIT (flash của văn bản không được định kiểu/ẩn) - [ ] Nội dung trong màn hình đầu tiên hiển thị nhanh - [ ] Ảnh động không gây sụt khung hình trên các thiết bị tầm trung ## Định dạng đầu ra ### Báo cáo vấn đề | # | Trang | Vấn đề | Danh mục | Mức độ nghiêm trọng | Trình duyệt/Thiết bị | Ảnh chụp màn hình Mô tả | Sửa đề xuất | |---|------|-------|----------|----------|--------------|----------------------|-------| | 1 | ... | ... | Trực quan/Đáp ứng/Tương tác/A11y/Hiệu suất | Quan trọng/Cao/Trung bình/Thấp | ... | ... | ... | ### Thống kê tóm tắt - Tổng số vấn đề: X - Quan trọng: X | Cao: X | Trung bình: X | Thấp: X - Theo danh mục: Trực quan: X | Đáp ứng: X | Tương tác: X | A11y: X | Hiệu suất: X - Top 5 vấn đề cần khắc phục đầu tiên (tác động cao nhất) ### Định nghĩa mức độ nghiêm trọng - **Nghiêm trọng:** Chức năng hoặc bố cục bị hỏng khiến việc sử dụng không thể thực hiện được - **Cao:** Vấn đề hiển hiện rõ ràng ảnh hưởng đến trải nghiệm người dùng - **Trung bình:** Đáng chú ý khi kiểm tra kỹ, không cản trở việc sử dụng - **Thấp:** Vấn đề nhỏ về đánh bóng, cách khắc phục dễ dàng
