徽标反馈
它用一个很小的标记显示数量、状态或是否有新内容,通常依附在另一个元素旁边。
- 图标角上那个小红点
- 右上角显示未读数字的小圆圈
- 名字旁边那颗状态小点
- 数字徽标
- 状态徽标
- 角标
示例
尚无经验证的示例
这条词条暂时只提供平台定义和出处,不用临时动画冒充正式内容。
Web / iOS / Android 对照
Web需自己实现
桌面与移动端现代浏览器
Badge
网页没有原生徽标组件,需要用文本和样式自行实现,并确保数字或状态能被读屏理解。
通常怎么做:把可读文本放在所属控件名称里,不要只靠颜色或一个无说明的小点。
iOS原生支持
iOS / iPadOS 的标签页和列表标签
Badge
SwiftUI: View.badge(_:)
系统徽标主要附着在标签页或列表标签,不是任意位置都能直接调用。
Android原生支持
Android 手机 / 平板
Badge
Compose Material 3: Badge / BadgedBox
使用规范
什么时候用
- 在导航入口或图标旁简短表示未读数量、新内容或状态
什么时候别用
- 需要解释原因、时间或下一步时,徽标承载不了完整信息
给 AI 的提示词
这条词条还没有经过验证的实现提示词。