SuperAPI AI 工具集

badge-tag-chip

设计与创作

查看项目

更新于 10-15 21:12

技能介绍

用途:为界面中的徽章(Badge)、标签(Tag)、芯片(Chip)和状态指示器提供设计模式,帮助统一通知计数、内容分类、筛选选择与状态展示的视觉和交互。

主要能力: 徽章(通知计数):位于图标右上角;单位数用圆形,两位及以上用圆角胶囊;紧急用红色,中性用品牌色;最多显示“99+”或“9+”;尺寸需小到不遮挡图标。 标签(分类):用于对内容分类;样式为描边或浅色背景、圆角;用户可自行添加时带 X 按钮;同一类别使用一致颜色;文字简短(1-3 个词),采用句首大写。 芯片(选择/筛选):紧凑的可交互选择元素;状态分为未选中(描边)与选中(填充);可在有帮助时加头像或图标前缀;可带 X 取消选择;在一组中自然换行。 状态指示器:成功/活跃用绿色(如“Published”“Online”);警告/待处理用黄色/琥珀色(如“Under review”“Expiring”);错误/失败用红色(如“Failed”“Declined”);信息/中性用蓝色/灰色(如“Draft”“New”);非活跃用灰色(如“Archived”“Disabled”)。始终将颜色与文字标签配对,绝不只依赖颜色。

使用方式:资料未提供具体安装命令、代码示例或调用步骤,暂未提供。

适用场景:适用于需要展示通知数量、内容分类、筛选选择或状态标识的界面设计。

限制:资料未说明收费、价格、平台或效果,暂未提供。