← 返回 Web 词条

徽标

Web需自己实现

Web 原生没有这个

网页没有原生徽标组件,需要用文本和样式自行实现,并确保数字或状态能被读屏理解。

通常怎么做:把可读文本放在所属控件名称里,不要只靠颜色或一个无说明的小点。

适用范围:桌面与移动端现代浏览器

社区一般叫它 Badge

它用一个很小的标记显示数量、状态或是否有新内容,通常依附在另一个元素旁边。

  • 图标角上那个小红点
  • 右上角显示未读数字的小圆圈
  • 名字旁边那颗状态小点
  • 数字徽标
  • 状态徽标
  • 角标

其他平台的相似实现

iOS原生支持
Badge本平台没有对应叫法

系统徽标主要附着在标签页或列表标签,不是任意位置都能直接调用。

看 iOS 视角 →

使用规范

什么时候用

  • 在导航入口或图标旁简短表示未读数量、新内容或状态

什么时候别用

  • 需要解释原因、时间或下一步时,徽标承载不了完整信息

Web 出处

查看 Web / iOS / Android 完整对照 →