界面图鉴
徽标Badge
你可能会问
徽标到底是什么？图标角上的小红点凭什么让人忍不住去点？
简单来说
挂在图标或标签角上的小数字或圆点，宣告「这里有新东西」。
01 · 拆开看看
这一块由什么组成
它是挂在别的元素身上的小信号：一个数字或一个点，宣告「这里有新东西」。它自己不能独立存在——总得挂在什么上面。组成：
宿主Anchor
徽标挂靠的对象：铃铛、头像、菜单项。
计数Count
数字说明有几条；只提示有无时用圆点。
颜色语义Color
红色催办、灰色中性、绿色在线——颜色即语气。
02 · 常见变体
同一个零件，几种摆法
未读几条一目了然，99+ 封顶。
只说「有新的」，不说有几条。
New、Beta 这类状态小标签。
03 · 火眼金睛
这个页面里，哪一个是徽标？
四个都和「状态」有关，找那个最小、最红的。
点一块试试，看看它叫什么
骨架屏Skeleton
不是它。灰块占位是骨架屏，内容在路上。
加载指示器Spinner
不是它。转圈的是 Spinner。
空状态Empty State
不是它。这是「加载完但没有内容」时的引导。
徽标Badge
就是它！挂在铃铛角上的小红点数字，宣告「有新东西」。
04 · 用与不用
什么时候该上它
适合
- 未读计数：消息、通知
- 新功能的 New 标记
- 状态标记：在线、测试版
先别用
- 到处都是红点——通胀之后等于没有
- 重要变更——徽标太轻，用横幅
- 当装饰贴纸用的时候
05 · 想一想
一道题，检查眼力
未读消息 328 条，徽标怎么显示最合理？
对。三位数之后数字失去意义，还会挤爆布局——99+ 是行业共识。
精确到个位的未读数没人在乎，圆形徽标也装不下四位数。
「有没有」和「有多少」是两种信息。消息这种量很大的场景，数量还是有用的。
06 · 说给 AI 听
让 AI 改它时，这样说
说清什么时候出现、什么时候消失——徽标的生命周期比样式重要。
铃铛图标加未读徽标，超过 99 显示 99+
侧边栏「更新日志」加一个 New 徽标
消息已读后徽标清零并消失
徽标改成不带数字的小红点
最容易踩的坑
红点会通胀：每个都想被点，结果是用户学会无视全部。省着用，让红点保住信用。