跳到主要内容

Badge 徽标

一般出现在图标或文字的右上角,提供及时、重要的信息提示,来引起用户对内容的关注。


开发说明
  • 多了一个在文本后面加数字徽标的样式。
  • 样式上的变化。
  • 圆点徽标

    没有特定数量,弱化视觉强度。用于提醒内容,功能,状态或动态更新。

    数字徽标

    有具体的数量,或强调具体的数量。最大值根据场景通常显示为 99+999+

    文字徽标

    展示具体的提示文案,吸引或强调用户注意,文案简单易懂,尽量少于 4 个字。

    不同位置

    徽标可以放在元素的右上角和右侧。

    何时使用

    • 圆点徽标一般出现在消息图标的右上角,提醒用户有新的消息内容,吸引用户关注和处理。
    • 数字徽标一般出现在头像的右上角,用来提醒用户有新的信息,或具体的信息条数,吸引用户处理。
    • 圆点徽标出现在 tab 的右上角,或出现在导航栏文字右侧,表示页面内有新内容更新。

    何时不使用

    • 徽标不要大量遮盖用户信息,避免与其他信息重叠。

    文案指南

    • 数字型徽标内数字,建议不超过四个数字,超过可用 999+new 表示。

    交互规则

    • 徽标常用于反映计数和新内容提醒,不可点击,当内容变更或用户的操作变更时,徽标状态自动刷新。
    • 当消息处理后徽标消失或数量减少。