AI写的前端很丑，但是不知道怎么说怎么改？
一天一个 vibe coding 术语课，今天就讲讲角标和徽标。
一、这四个小东西到底叫什么？
就拿一个你自己做的记账小应用来说。
你打开「我的」页面，头像右上角有一个小小的性别符号。
提醒铃铛边上有一个数字 3。
底部导航「我的」旁边有一个小圆点。
刚上线的预算分析入口，边角还贴着一个「新」字。
现在要把这个页面交给 AI 继续改，你得先说清自己指的是哪一个。
可你只会说「那个小东西」，AI 接下来改头像、改铃铛，还是改预算入口，只能靠猜。
它们长得不一样，补充的信息也不一样。
性别符号在补充人物资料，数字 3 在说未读数量，小圆点在提醒这里有变化，「新」在提示这是刚出现的入口。
它们有一个共同点：自己很小，却会被特意做得醒目，让用户不用打开详情，就能先扫到这一小条信息。
英文资料里，这类小型提示经常叫 Badge。
中文资料里的名字没有完全统一。
叠在头像、图标和入口边角上的，很多人会叫它角标。
有些组件资料会把整个 Badge 组件叫作徽标或者徽标数。
所以「角标」常常在说它摆在什么位置，「徽标」则可能覆盖更宽的一组用法。它们有很大一块重叠，不是两套边界分明的组件。
二、小地方里放什么，先看对象缺什么
先看底部导航里的「我的」。
这个入口只需要提醒用户里面有变化，并不需要告诉他具体有几条。放一个没有文字的小圆点就够了。
这叫圆点角标，英文 dot badge。
再看提醒铃铛。
这里的 3，表示里面有三条没看的提醒。用户不点进去，也能先知道还有多少条。
这叫数字角标。
数字表达的是能数清楚，而且值得提前告诉用户的数量。购物车旁边的 2，也是同一种用法。
预算分析刚上线，入口边角放一个「新」。
这是短文字角标。文字必须短，塞进一整句说明，只会把角标撑大，还会挡住原来的内容。
头像右上角的性别符号，则是在补充一项用户主动公开的资料。
认证标记或者会员小皇冠，也可以用同样的位置补充身份。
走到这里，圆点、数字、短文字和小图形都出现了。
它们不是一张所有产品都必须照搬的分类表。真正要看的，是旁边那个对象还缺哪一条信息，以及这条信息能不能在这么小的地方被快速看懂。
三、有的贴在边角，有的放在旁边
刚才那四个，都贴在另一个元素的边角上。
再点开「绑定账户」，进入银行卡账户列表，摆法就不一样了。
银行卡名称后面有一个绿色小点和「已同步」，表示这张卡的账单已经同步完成。
正在读取时，它变成「同步中」。同步失败时，再变成「同步失败」。
它没有盖在银行卡图标上，也没有挤到卡片右上角，而是和账户名称放在同一行。
在一些组件资料里，这种简短的状态提示也叫状态徽标，英文 status badge。
它放在账户名称旁边，用户一眼就知道「已同步」说的是哪张卡，不需要再用一根线把它们连起来。
这也是 Badge，只是没有采用叠在边角上的摆法。
Badge 可以覆盖在关联对象上，也可以放在它旁边。位置怎么选，要看用户能不能立刻看出这条数量、状态、变化或者简短属性在说谁。
同样是「已同步」这种小块，有些设计资料会把它叫 Badge，有些也可能叫 Tag，也就是标签。
行业里的名字没有完全统一。做具体项目时，跟着项目正在使用的那套组件说明走，别把某一家的叫法当成唯一答案。
四、信息变了，Badge 也得跟着变
你点开提醒，读掉一条，再回到「我的」页面。
铃铛边上的数字应该从 3 变成 2。全部读完，数字角标就该消失。
预算分析上线一段时间以后，用户早就知道这个入口了，「新」字也该拿掉。
用户把性别改成不公开，头像右上角的性别符号要一起隐藏。
银行卡开始同步时，状态变成「同步中」。同步结束以后，再按真实结果变成「已同步」或者「同步失败」。
如果真实数字已经大到放不下，可以考虑封顶显示。
比如这个位置只能放下两位数，超过 99 条就显示成 99+。这是数字角标处理大数量的一种常见办法，不是每一种 Badge 都要有 99+。
这个记账应用里的 Badge 都只负责提示。
用户真正点击的是头像、铃铛、预算分析入口或者银行卡账户，不是角落里那颗很小的圆点。
别为了让它能点，单独造一个手指很难点准的小按钮。
如果另一个产品真的需要让 Badge 自己响应点击，就要把它做成看得出能点、也确实点得准的控件，还要补齐聚焦、按下和读屏名称。
五、颜色能帮忙，但不能替它把话说完
银行卡同步成功、进行中和失败时，颜色和状态文字要一起变化。
绿色、黄色和红色能让用户更快扫到变化，旁边的「已同步」「同步中」「同步失败」负责把状态说清楚。
这样即使有人分不清颜色，也不会把同步失败看成已经完成。
读屏软件也需要听见完整的意思。
铃铛边上显示数字 3 时，提醒按钮应该能被读成「提醒，三条未读」，而不是只念一个没有上下文的「3」。
头像上的性别符号，也要把它代表的资料写进能被读出来的名称里。
必须处理的重要信息，还要在目标页面完整呈现。
比如某个月的预算已经超了，Badge 可以先把用户引到提醒页面，页面里再明确写清楚哪一项超了、超了多少。
看到一个 Badge，先问三件事。
它在补充什么信息，这条信息和谁有关，真实情况变化以后它会不会一起变化。
