UI/UX

Badge là gì?

badgebadge uinotification badgechấm thông báochấm đỏ thông báohuy hiệu số

Badge là phần tử nhỏ gắn lên một icon, avatar hoặc mục menu để báo trạng thái hoặc số lượng, ví dụ chấm đỏ có số tin nhắn chưa đọc trên biểu tượng ứng dụng.

Hiểu kỹ hơn

Có hai dạng chính: chấm nhỏ không số chỉ báo 'có gì mới', và badge có số cho biết số lượng. Khi số quá lớn, nên rút gọn thành '99+' để badge không phình to. Ngoài ra còn badge dạng nhãn chữ như 'Mới', 'Bán chạy', 'Beta' đặt cạnh tên sản phẩm hay tính năng. Màu đỏ hoặc màu nhấn giúp badge nổi bật, nhưng nếu mọi thứ đều có badge thì người dùng sẽ bỏ qua tất cả. Về tiếp cận, không chỉ dựa vào màu: số lượng cần được đọc lên cho trình đọc màn hình, ví dụ 'Tin nhắn, 3 chưa đọc'. Trong Figma, badge nên là component riêng có biến thể chấm, số và chữ.

Thuật ngữ liên quan

01Avatar (ảnh đại diện trong giao diện)

Avatar là thành phần giao diện hiển thị hình đại diện cho một người dùng hoặc tổ chức, thường là ảnh cắt tròn hoặc vuông bo góc, có phương án dự phòng là…

02Tab bar (thanh tab dưới đáy ứng dụng)

Tab bar là thanh điều hướng cố định ở đáy màn hình ứng dụng di động, chứa từ ba đến năm mục chính để người dùng chuyển nhanh giữa các khu vực cấp cao nhất…

03Thông báo đẩy (push notification)

Push notification là thông báo ứng dụng gửi tới thiết bị của người dùng kể cả khi họ không mở ứng dụng, hiện trên màn hình khoá, thanh thông báo hoặc biểu…

04Chip (thẻ lựa chọn nhỏ)

Chip là phần tử nhỏ, thường có dạng viên thuốc bo tròn, dùng để hiển thị lựa chọn, bộ lọc, thẻ nhập liệu hoặc gợi ý nhanh, có thể bấm chọn hoặc xoá.

05Biểu tượng ứng dụng (app icon)

Biểu tượng ứng dụng (app icon) là hình đại diện của một ứng dụng trên màn hình điện thoại, máy tính và cửa hàng ứng dụng, thường là logo hoặc biểu tượng…