Cho nhận ra người hoặc nhóm
Ảnh đại diện không nên là dấu hiệu duy nhất để xác định người dùng.
Avatar Design system
Hiển thị danh tính và cho cập nhật ảnh có kiểm soát.
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.
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
Cho nhận ra người hoặc nhóm
Danh sách thành viên hiển thị cả avatar và tên “Linh Nguyễn”.
Các biến thể và tình huống
Hình dạng ảnh đại diện
Chọn hình dạng thống nhất cho cùng loại đối tượng và giữ vùng ảnh quan trọng khi cắt.
Thử ảnh chân dung sát mép và logo ngang; không cắt mất phần giúp nhận ra đối tượng.
Ví dụ Người dùng có ảnh tròn; tổ chức có khung vuông bo góc.
Thang kích thước
Đặt kích thước cho danh sách, bình luận và hồ sơ thay vì co giãn tùy từng màn hình.
So sánh avatar ở hàng dày và đầu hồ sơ; ảnh nhỏ không làm hàng cao bất thường.
Ví dụ Danh sách dùng 32px, hồ sơ dùng 80px với cùng cách cắt.
Dấu trạng thái
Đặt trạng thái bên cạnh ảnh và bổ sung tên trạng thái để người dùng không cần đoán màu.
Kiểm tra ở theme sáng, tối và khi ẩn màu; dấu online vẫn có nghĩa.
Ví dụ Chấm xanh có nhãn “Đang trực tuyến” trong thông tin người dùng.
Khi không có ảnh
Giữ kích thước và danh tính khi URL ảnh lỗi, thiếu hoặc đang tải.
Chặn request ảnh; hàng không được nhảy và vẫn nhận ra người dùng.
Ví dụ Ảnh lỗi chuyển thành chữ AN cho tài khoản Anh Nguyễn.
AN
Ảnh dự phòng