<>Avatar là một thành phần cơ bản trong UI/UX design, dùng để hiển thị đại diện trực quan của người dùng, nhóm, thương hiệu hoặc danh tính nào đó trong hệ thống. Nó giúp cá nhân hóa trải nghiệm người dùng và tạo sự nhận diện thương hiệu.
/Các loại Avatar phổ biến
– Avatars có nhiều kiểu dáng và hình thức khác nhau, tùy thuộc vào mục đích sử dụng:
1. Theo hình thức hiển thị
✔ Image Avatar – Avatar là hình ảnh, thường là ảnh người dùng hoặc logo.
✔ Initials Avatar – Avatar chỉ hiển thị chữ cái đầu của tên người dùng.
✔ Icon Avatar – Avatar sử dụng biểu tượng thay vì hình ảnh.
✔ Anonymous Avatar (Default Avatar) – Khi người dùng chưa cập nhật ảnh đại diện, hệ thống hiển thị avatar mặc định (ví dụ: silhoutte người xám, icon user).
2. Theo hình dạng
✔ Circular Avatar – Avatar dạng tròn (phổ biến nhất trong UI/UX).
✔ Square Avatar – Avatar hình vuông, thường dùng trong các ứng dụng doanh nghiệp.
✔ Rounded Avatar – Avatar vuông nhưng có bo góc nhẹ.
3. Theo kích thước
✔ Small – Kích thước nhỏ, thường dùng trong danh sách tin nhắn hoặc bình luận.
✔ Medium – Kích thước trung bình, hay xuất hiện trong profile người dùng.
✔ Large – Kích thước lớn, dùng trong trang cá nhân hoặc profile mở rộng.
/Các thành phần bên trong Avatar
– Một avatar có thể chứa nhiều thành phần nhỏ bên trong để hiển thị thông tin bổ sung:
✔ Main Content (Nội dung chính) – Hình ảnh, chữ cái, biểu tượng đại diện.
✔ Status Indicator (Chỉ báo trạng thái) – Hiển thị trạng thái online/offline/dnd (Do Not Disturb).
✔ Badge (Huy hiệu) – Thêm dấu hiệu như số thông báo, vai trò người dùng (Admin, VIP).
✔ Border (Viền avatar) – Đánh dấu người dùng quan trọng hoặc trạng thái hoạt động.
✔ Background Color (Màu nền mặc định) – Khi không có hình ảnh, avatar hiển thị màu nền với chữ cái đầu.
/Cách sử dụng Avatar trong UI/UX
🔹 Danh sách người dùng (User Lists) – Hiển thị ảnh đại diện trong danh sách thành viên, tin nhắn.
🔹 Thanh điều hướng (Navbar) – Đặt avatar người dùng ở góc phải để truy cập hồ sơ.
🔹 Bình luận và bài viết (Comments & Posts) – Avatar giúp dễ nhận diện tác giả.
🔹 Bảng điều khiển (Dashboards) – Hiển thị avatar để cá nhân hóa trải nghiệm.
🔹 Trạng thái hoạt động (Status Indicator) – Kết hợp avatar với chấm xanh (Online) hoặc đỏ (Busy).
🔹 Thông báo và huy hiệu (Notifications & Badges) – Avatar có thể chứa biểu tượng thông báo.
