徽章与标签系统
目的
徽章与标签系统提供了一套方法论，用于设计和实现小型的信息组件，以快速提供上下文、状态或分类信息。本技能确保这些元素始终次要于主要内容，同时保持高度可扫描性、可访问性，并在整个网站中逻辑清晰。
使用场景
- 状态指示器： 展示对象的状态（例如："Active"、"Pending"、"Sold Out"）。
- 分类： 按主题、类型或集合对内容进行标记（例如："Productivity"、"Tutorial"、"New Arrival"）。
- 数量/计数： 显示与某个项目关联的数字（例如："12 Notifications"、"5 Items in Cart"）。
- 筛选可见性： 显示用户可以移除的已激活筛选器。
- 优先级信号： 突出显示特定属性，如 "Best Seller" 或 "Urgent"。
何时不使用
- 主要操作： 不要将徽章或标签用作主要行动号召（CTA）；请使用
interactive-state-system中的按钮。 - 大块内容： 如果信息需要超过 2-3 个词，请使用
card-ui-system或标准排版。 - 导航： 虽然标签可以导向筛选视图，但它们不应取代主要的
site-navigation-system。 - 纯装饰性图标： 如果元素没有语义含义，它属于
iconography-system。
输入
- 内容意图： 是状态、分类还是计数？
- 交互需求： 元素是静态的，还是可移除/可点击的？
- 层级上下文： 父元素是什么？（例如：卡片、标题、表格行）
- 颜色令牌： 现有的语义颜色尺度（Success、Warning、Error、Info）。
输出
- 视觉解剖规范： 定义圆角（胶囊形 vs. 圆角矩形）、内边距和排版。
- 语义颜色矩阵： 颜色与特定含义的映射（例如：绿色 = 成功）。
- 交互规范： 悬停、聚焦和“移除”（X）操作的视觉处理。
- 放置规则： 关于这些元素相对于标题和图像位置的指南。
工作流程
1. 区分徽章与标签
首先定义功能角色：
- 徽章： 通常表示 状态（例如："Live"）或 计数（例如："3"）。它们通常不可交互，或链接到单一状态。
- 标签： 通常表示 分类（例如："SaaS"）。它们通常可交互，允许用户筛选内容或移除标签。
2. 建立视觉解剖
定义基础样式，确保它们看起来不像按钮：
- 排版： 使用较小、通常全大写或半粗的字体（例如：12px/0.75rem）。
- 圆角：
- 胶囊形（全圆角）： 最适合状态和计数。
- 圆角矩形（4-8px）： 最适合分类和可移除标签。
- 尺寸： 保持高度一致（例如：20px-24px），以确保它们与文本对齐良好。
3. 分配语义逻辑（颜色与图标）
使用颜色来传达含义，而无需用户阅读：
- 成功（绿色）： "Complete"、"Active"、"Verified"。
- 警告（黄/橙色）： "Pending"、"Low Stock"、"Draft"。
- 错误（红色）： "Failed"、"Critical"、"Out of Stock"。
- 信息/中性（蓝/灰色）： "New"、"Category"、"Metadata"。
规则： 始终将颜色与文本或图标配对使用，以确保色盲用户的可访问性。
4. 定义交互状态
如果标签是可交互的：
- 悬停/聚焦： 应用微妙的背景变化或边框变化。
- 可移除： 包含一个清晰的 "X" 图标，最小点击区域为 24x24px（WCAG 2.2 SC 2.5.8），在布局允许的情况下，可放大至 44x44px 以获得舒适的触控体验。
5. 确定放置位置与层级
- 叠加： 在图片的顶角放置一个 "New" 徽章。
- 内联： 在
page-header-system中标题之后立即放置一个状态徽章。 - 分组： 在
card-ui-system中描述下方堆叠多个标签。
决策规则
- "眯眼测试"： 如果一个徽章过于明亮以至于分散了针对 H1 的注意力，请降低其饱和度或使用轮廓样式。
- 限制数量： 单张卡片上不要使用超过 3 个标签，以防止视觉杂乱。
- 文本长度： 将标签控制在 1-2 个词内。如果数据是动态且不可预测的，请截断或使用工具提示。
- 按钮区分： 徽章应具有与主要 "Submit" 或 "Buy" 按钮不同的视觉处理（例如：更小的尺寸、不同的圆角）。
约束条件
- 可访问性： 徽章/标签内的文本必须满足 WCAG AA（4.5:1 对比度）。可交互的标签必须可通过键盘导航。
- 响应式： 分组标签应换行显示（
flex-wrap: wrap），而不是溢出容器。 - 触控目标： 可移除标签的“关闭”操作必须有足够大的目标（最小 24x24px，符合 WCAG 2.2 SC 2.5.8；推荐 44x44px）。
常见失败模式
- "按钮模仿"： 使标签看起来完全像按钮，导致用户期望进行主要操作。
- 过度依赖颜色： 使用红/绿/黄而没有文本标签，使得色盲或屏幕阅读器用户无法理解状态。
- 标签泛滥： 一张卡片上聚集超过 10 个标签，使所有标签都失去作用。
- 圆角不一致： 在同一 UI 中混合使用胶囊形徽章和方角标签。
验证标准
- 徽章和标签在视觉上区别于按钮。
- 语义颜色使用一致（例如：绿色始终表示成功）。
- 所有颜色变体的对比度比率均符合 WCAG AA（4.5:1）。
- 可交互的标签具有聚焦状态和至少 24x24px 的触控目标（WCAG 2.2 SC 2.5.8）。
- 元素在移动视口上优雅地换行。
- 对于关键状态指示，图标与颜色一同使用。