返回知识库

界面与交互 · 内容与数据展示

徽标Badge

附着在入口或图标上的只读计数或状态信号——0 隐藏、超 99 收成 99+,含义靠文字与可访问名称双通道传递。

消息中心的徽标:从 0 累加到溢出,再清零

入口当前有 12 条未读。点「同步未读(126 条)」看徽标收成 99+;模拟失败后,数量仍留在铃铛上而错误文字出现;修复或重置都能回到稳定态。

消息中心未读

入口可访问名称(读屏读这句):「消息中心,12 条未读」

数量 12,徽标显示同样数字。原因:1–99 内精确可读;下一步点「同步未读(126 条)」看上限收口,或标为已读清零。

面板刚教会的事

把上面操作里看到的事实命名出来;徽标的每个判断都有文字证据,不只靠颜色。

  1. 0 隐藏清零后徽标消失——空徽标会误导,不如不显示。
  2. 1–99 显示精确数字数字与未读数一致,长在铃铛物件上。
  3. 超过 99 收成 99+视觉收口保护导航布局;真实数量走可访问名称。
  4. 可访问名称是第二通道读屏读「消息中心,126 条未读」,与视觉同步,不靠红点。
  5. 状态用文字与中性色未读、处理中走墨色;错误用 AA 红 #a83a44 文字加边框,并写「错误」二字。

徽标是系统给的只读标记(如未读数、同步状态);和用户输入、可关闭的「标签(tag)」不是同一件东西。

什么时候用,怎么用

徽标压缩信号,是为了让用户不必打开入口就知道「值不值得看一眼」。

适合

稳定入口上有需要压缩的计数或状态:未读消息、购物车件数、同步结果。用户可以稍后处理,不被强打断。

不建议

用红点装饰标题、把关键告警只塞进徽标,或让大数字撑坏导航。需要立刻处理的紧急事项请改用通知或弹层。

最短路径:选一个稳定入口 → 定 0 与上限规则(如 99+)→ 数字和可访问名称双通道传递 → 状态用文字与中性色,错误才用 AA 红。

同一消息入口:正例与反例

目标都是告诉用户「有 126 条未读」。差别只在于徽标是否守规则。

正例

0 隐藏;1–99 显示数字;126 显示 99+;可访问名称读出真实数量;状态徽标带文字,错误用 AA 红。

布局稳、读屏同步、颜色不独撑。
反例

0 条仍亮红点;126 把三位数硬塞进铃铛挤坏导航;只用红绿表达状态;读屏读不出任何数量。

用户不知道有多少、什么状态、要不要处理。

快速自测

消息入口有 126 条未读,且同步发生错误。最稳的徽标做法是?

继续查证

术语的技术定义和行为以这些一手或权威资料为准。

下一步学

和本知识点经常一起出现的概念。