徽标Badge
你可能会说
消息图标右上角那个红色小数字，显示有几条没读。
徽标是附着在其他元素旁、补充数量或状态的简短标记消息图标右上角的“3”可提醒未读数量。不能只用红点或颜色表达重要状态，读屏用户也需要获得完整说明。
什么时候用
- 未读消息数：铃铛、私信入口512
- 在线 / 离线状态小圆点林林小hu在线油阿油离开
- 标签页、菜单上的待办条数全部待付款 3待发货 12
- 头像右上角的新动态提示林3林小hu 有 3 条新动态
什么时候不用
- 大数字指标，如销售额、用户数：使用 统计数值 Statistic活跃用户12,846销售额¥ 86.4w
- 用红点作为分类标签：会混淆颜色语义前端任务设计任务红点是“有未读”，不是分类色
- 大量元素都显示红点：用户难以区分真正重要的提醒59274每项都显示红点，无法区分真正需要关注的内容
- 需要说明具体内容的提醒：使用 通知 Notification审核未通过 查看原因 →
组成结构 · Anatomy
🔔5
整体，通常附着在相关元素上
被标记的图标、头像或文字
数字或红点，超 99 一般显示 99+
常见变体 · Variants
数字徽标Count
🔔5
有几条未读要交代清楚时
小红点Dot
⚙️
只说“有新内容”,不必报数时
状态点Status
林油
标记在线、离开这类实时状态
封顶数字Overflow
✉️99+
未读数量超过显示上限时，使用封顶数字
典型使用场景
未读消息提醒
Vibe 图鉴
组件
教程
🔔5
✉️99+
在线状态
林小hu在线
油
阿油离开
构建机器人在线
菜单待办数
📦 我的订单3
🚚 待发货12
⭐ 我的收藏
购物车数量
好物商店
🛒3
无线耳机 Pro¥ 299
延伸阅读 · 权威出处