Badge 徽标
一般出现在图标或文字的右上角,提供及时、重要的信息提示,来引起用户对内容的关注。
开发说明
圆点徽标
没有特定数量,弱化视觉强度。用于提醒内容,功能,状态或动态更新。
数字徽标
有具体的数量,或强调具体的数量。最大值根据场景通常显示为 99+
或999+
。
文字徽标
展示具体的提示文案,吸引或强调用户注意,文案简单易懂,尽量少于 4 个字。
不同位置
徽标可以放在元素的右上角和右侧。
何时使用
- 圆点徽标一般出现在消息图标的右上角,提醒用户有新的消息内容,吸引用户关注和处理。
- 数字徽标一般出现在头像的右上角,用来提醒用户有新的信息,或具体的信息条数,吸引用户处理。
- 圆点徽标出现在 tab 的右上角,或出现在导航栏文字右侧,表示页面内有新内容更新。
何时不使用
- 徽标不要大量遮盖用户信息,避免与其他信息重叠。
文案指南
- 数字型徽标内数字,建议不超过四个数字,超过可用
999+
、new
表示。
交互规则
- 徽标常用于反映计数和新内容提醒,不可点击,当内容变更或用户的操作变更时,徽标状态自动刷新。
- 当消息处理后徽标消失或数量减少。