以徽标形式承载数字/符号信息。

适用：

  • 一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户关注和处理
  • 作为一个链接，快速查看详情的入口
  • 代表事件的状态，让用户提前知道事件的进展情况

不适用：

  • 无需通过视觉形式吸引用户注意，去关注/处理的任务

通用原则

  • 位置统一：徽标一般放置在 icon /字符的右上角；
  • 视觉统一：字符徽标，不可超出徽标背景图；

类型

类型 何时使用
数字徽标 需要准确计数的场景
点徽标 无需准确计数，仅做提醒的场景

数字徽标

  • 一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户关注和处理。
  • 数字本身不宜过大，建议超过 99，则显示 99+

image.png

点徽标

  • 徽标中无具体数字显示，只出现红色小点，为了吸引用户注意，了解到有未读信息/未处理的任务。
  • 徽标的颜色代表着任务的状态，例如成功（绿色），失败（红色），警告（黄色）；徽标作为状态标，可单独使用。

image.png

行为

徽标出现

当有信息推送时，徽标自动出现。

徽标消失

通常用户点击按钮后，徽标则消失；具体规则由业务决定

  1. <span class="badge">999+</span>