稳定入口上有需要压缩的计数或状态:未读消息、购物车件数、同步结果。用户可以稍后处理,不被强打断。
界面与交互 · 内容与数据展示
徽标Badge
附着在入口或图标上的只读计数或状态信号——0 隐藏、超 99 收成 99+,含义靠文字与可访问名称双通道传递。
消息中心的徽标:从 0 累加到溢出,再清零
点「模拟收到 1 条消息」看徽标数字长在铃铛上;加到超过 99 看它收成 99+;清零看它隐藏。状态徽标用文字与中性色表达,错误才用 AA 红。
消息中心未读
入口可访问名称(读屏读这句):「消息中心,无未读」
状态徽标:
数量 0,徽标隐藏。原因:显示空徽标会让用户误以为有新消息;下一步点「模拟收到 1 条消息」看数字出现。状态徽标「未读」:用墨色中性,只表示「有新内容」,不是错误。
面板刚教会的事
把上面操作里看到的事实命名出来;徽标的每个判断都有文字证据,不只靠颜色。
- 0 隐藏清零后徽标消失——空徽标会误导,不如不显示。
- 1–99 显示精确数字数字与未读数一致,长在铃铛物件上。
- 超过 99 收成 99+视觉收口保护导航布局;真实数量走可访问名称。
- 可访问名称是第二通道读屏读「消息中心,126 条未读」,与视觉同步,不靠红点。
- 状态用文字与中性色未读、处理中走墨色;错误用 AA 红 #a83a44 文字加边框,并写「错误」二字。
徽标是系统给的只读标记(如未读数、同步状态);和用户输入、可关闭的「标签(tag)」不是同一件东西。
什么时候用,怎么用
徽标压缩信号,是为了让用户不必打开入口就知道「值不值得看一眼」。
用红点装饰标题、把关键告警只塞进徽标,或让大数字撑坏导航。需要立刻处理的紧急事项请改用通知或弹层。
最短路径:选一个稳定入口 → 定 0 与上限规则(如 99+)→ 数字和可访问名称双通道传递 → 状态用文字与中性色,错误才用 AA 红。
同一消息入口:正例与反例
目标都是告诉用户「有 126 条未读」。差别只在于徽标是否守规则。
0 隐藏;1–99 显示数字;126 显示 99+;可访问名称读出真实数量;状态徽标带文字,错误用 AA 红。
布局稳、读屏同步、颜色不独撑。0 条仍亮红点;126 把三位数硬塞进铃铛挤坏导航;只用红绿表达状态;读屏读不出任何数量。
用户不知道有多少、什么状态、要不要处理。快速自测
消息入口有 126 条未读,且同步发生错误。最稳的徽标做法是?
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。