Dùng ngôn ngữ hình nhất quán
Tên biểu tượng nên mô tả hình; ý nghĩa thao tác nằm ở nhãn điều khiển.
Icon Design system
Giữ biểu tượng dễ nhận biết và có ý nghĩa ở mọi kích thước.
Nội dung checklist
Tiến độ kiểm tra
01
Cấu trúc và ý nghĩa
Đối chiếu thông tin và cách trình bày trong ngữ cảnh sử dụng.
02
Tương tác và khả năng sử dụng
Thử thao tác, thay đổi trạng thái và đường tiếp tục công việc.
03
Hoàn thiện trải nghiệm
Kiểm tra những chi tiết dễ bỏ sót khi đưa thiết kế vào sử dụng.
Tiến độ được lưu tự động trên trình duyệt này.
HƯỚNG DẪN
Cách kiểm tra
VÍ DỤ
Ví dụ áp dụng
Dùng ngôn ngữ hình nhất quán
Cùng hình “trash” có nhãn “Xóa bản nháp” hoặc “Xóa thành viên” theo ngữ cảnh.
Các biến thể và tình huống
Phong cách biểu tượng
Dùng một hệ đường nét hoặc khối cho các icon cùng vai trò và cùng màn hình.
Đặt icon mới cạnh icon cũ ở cùng cỡ; độ đậm và khoảng trống cần đồng đều.
Ví dụ Nút mail, video và tài liệu dùng cùng bộ SVG nét 1.6px.
Cỡ và vùng tương tác
Tách kích thước nét vẽ khỏi vùng bấm; icon nhỏ vẫn cần vùng chạm phù hợp.
Thử icon 16px trong nút mobile; người dùng không phải chạm chính xác vào nét vẽ.
Ví dụ Biểu tượng 18px nằm giữa vùng bấm 44px.
Tên theo ý nghĩa
Đặt tên theo chức năng rõ và tránh để người dùng đoán ý nghĩa từ hình vẽ.
Screen reader cần đọc được tên hành động; icon trang trí không lặp lại nhãn.
Ví dụ Icon chuông của nút có tên “Mở thông báo”, icon cạnh chữ ẩn khỏi cây truy cập.
Thông báo
Tài khoản
Tìm kiếm