1/4
UI/UX 组件每日一讲
UI/UX 组件每日一讲brownsun

Day 04 · Badge：贴在别人身上的小提示

Badge 是贴附在宿主组件上的小型状态标识——不独立存在，必须依附载体。本期 4 张图讲清 Badge 的定义、与 Notification Dot / Status Indicator 的核心区别、4 种变体类型，以及最关键的使用判断：数字为零时隐藏它，用户看完后立即清零。

2026/6/13 · 9:12

ギャラリー

Badge（徽标/角标）是 UI 里最小的信息载体之一——一个小圆圈，贴在图标或按钮的右上角，告诉你「有事发生了」。
它有一个和其他组件不一样的根本特征：Badge 不独立存在，必须依附宿主组件。你见过漂浮在空气里的 Badge 吗？没有。它永远需要一个载体。

Badge 是什么

Badge 是贴附于其他 UI 组件的小型状态标识，核心功能是在用户未主动进入某个模块时，提前告知该模块内有待处理的信息。
  • 出现位置：宿主组件的右上角
  • 内容形式：数字（精确计数）、小点（有但不计数）、文字标签（「NEW」「HOT」等）
  • 触发时机：由系统推送，不由用户主动调出

Badge vs Notification Dot vs Status Indicator

三者长得像，但职责不同：
Badge：告诉你「有多少」——贴附宿主，显示具体数量。 Notification Dot（无数字小红点）：告诉你「有没有」——同样贴附宿主，但不显示数量，适合有更新但无需量化时。 Status Indicator：告诉你「是什么状态」——常见于用户头像旁的在线/离线绿点，它可以独立存在于一个元素上。
记住：Badge 和 Dot 都是宿主型，Status Indicator 可以是独立型。

Badge 的 4 种变体

① 数字 Badge：最常见，显示精确未读数量。消息、购物车、通知中心都是它的主场。
② 无数字 Badge（Dot）：有动态、但数量不重要时用它。比如「某好友刚上线」——你知道有更新，但不需要知道多少条。
③ 文字 Badge：用短小标签替代数字，常见于「NEW」「BETA」「HOT」等功能标注。不传递数量，传递属性。
④ 状态 Badge：集成了 Status Indicator 功能的小徽章，常见于头像右下角的在线状态圆点。注意这里它的位置从右上角变成了右下角。

使用要点

✓ 该用 Badge 时：
  • 有可量化的未读数量（消息 12 条、通知 3 条）
  • 用户需要靠数字判断优先级（99+ 和 1 条的处理优先级完全不同）
  • 系统状态需要持续贴附在入口上提醒
✗ 不该用 Badge 时：
  • 数字为零时——Badge 显示 0 毫无意义，直接隐藏它
  • 页面内容本身已经足够醒目时（别再叠加 Badge 制造焦虑）
  • 用户不需要立即行动时（改用 Empty State 或提示文案）
清零时机： 进入对应页面后立即清零。不要让 Badge 在用户已经看过内容后还挂着——用不了多久它就变成背景噪声，被完全忽视。
下期预告：Loading Spinner——转圈的圆圈该什么时候转？它和 Progress Bar、Skeleton Screen 又有什么区别？

コメント