badge-and-tag-system

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Badge and Tag System

Badge和Tag系统

Purpose

用途

The Badge and Tag System provides a methodology for designing and implementing small, informational components that provide quick context, status, or categorization. This skill ensures that these elements remain secondary to primary content while being instantly scannable, accessible, and logically organized across a website.

Badge和Tag系统提供了一套设计和实现小型信息组件的方法，这些组件可快速传递上下文、状态或分类信息。该规范确保这些元素始终作为次要内容存在，同时在整个网站中具备即时可扫描性、无障碍性和逻辑组织性。

Use Cases

使用场景

Status Indicators: Showing the state of an object (e.g., "Active," "Pending," "Sold Out").
Categorization: Labeling content by topic, type, or collection (e.g., "Productivity," "Tutorial," "New Arrival").
Quantity/Counts: Displaying numbers associated with an item (e.g., "12 Notifications," "5 Items in Cart").
Filter Visibility: Showing active filters that can be removed by the user.
Priority Signaling: Highlighting specific attributes like "Best Seller" or "Urgent."

状态指示器： 展示对象的状态（例如："Active"、"Pending"、"Sold Out"）。
分类标记： 按主题、类型或集合标记内容（例如："Productivity"、"Tutorial"、"New Arrival"）。
数量/计数： 显示与项目关联的数字（例如："12 Notifications"、"5 Items in Cart"）。
过滤器可见性： 展示用户可移除的激活状态过滤器。
优先级标识： 突出显示特定属性，如"Best Seller"或"Urgent"。

When NOT to Use

不适用于以下场景

Primary Actions: Do not use badges or tags as the main Call-to-Action (CTA); use buttons from the
```
interactive-state-system
```
.
Large Content Blocks: If the information requires more than 2-3 words, use a
```
card-ui-system
```
or standard typography.
Navigation: While tags can lead to filtered views, they should not replace the primary
```
site-navigation-system
```
.
Decorative-only Icons: If the element has no semantic meaning, it belongs in the
```
iconography-system
```
.

主要操作： 请勿将Badge或Tag用作主要的Call-to-Action (CTA)；请使用
```
interactive-state-system
```
中的按钮。
大内容块： 如果信息需要超过2-3个词，请使用
```
card-ui-system
```
或标准排版。
导航： 虽然Tag可引导至筛选视图，但它们不应替代主要的
```
site-navigation-system
```
。
纯装饰性图标： 如果元素没有语义含义，则属于
```
iconography-system
```
的范畴。

Inputs

输入项

Content Intent: Is it a status (state), a category (metadata), or a count (number)?
Interactive Requirement: Is the element static, or is it removable/clickable?
Hierarchy Context: What is the parent element? (e.g., a card, a header, a table row).
Color Tokens: Existing semantic color scale (Success, Warning, Error, Info).

内容意图： 它是状态（state）、分类（metadata）还是计数（number）？
交互需求： 元素是静态的，还是可移除/可点击的？
层级上下文： 父元素是什么？（例如：卡片、页眉、表格行）。
颜色令牌： 现有的语义色阶（Success、Warning、Error、Info）。

Outputs

输出项

Visual Anatomy Spec: Definitions for border-radius (pill vs. rounded), padding, and typography.
Semantic Color Matrix: Mapping of colors to specific meanings (e.g., Green = Success).
Interactive Specs: Visual treatments for hover, focus, and "remove" (X) actions.
Placement Rules: Guidelines for where these elements sit relative to titles and images.

视觉结构规范： 定义圆角（pill型vs圆角型）、内边距和排版规则。
语义颜色矩阵： 将颜色映射到特定含义（例如：绿色=Success）。
交互规范： 悬停、聚焦和“移除”（X）操作的视觉处理方式。
放置规则： 这些元素相对于标题和图片的位置指南。

Workflow

工作流程

1. Distinguish between Badge and Tag

1. 区分Badge和Tag

Define the functional role first:

Badges: Generally indicate Status (e.g., "Live") or Counts (e.g., "3"). They are usually non-interactive or link to a single state.
Tags: Generally indicate Categorization (e.g., "SaaS"). They are often interactive, allowing users to filter content or remove the tag.

首先定义功能角色：

Badges： 通常表示状态（例如："Live"）或计数（例如："3"）。它们通常是非交互式的，或链接到单一状态。
Tags： 通常表示分类（例如："SaaS"）。它们通常是交互式的，允许用户筛选内容或移除Tag。

2. Establish Visual Anatomy

2. 确定视觉结构

Define the base style to ensure they don't look like buttons:

Typography: Use a smaller, often all-caps or semibold font (e.g., 12px/0.75rem).
Border Radius:
- Pill (Full Round): Best for statuses and counts.
- Rounded (4-8px): Best for categorization and removable tags.
Sizing: Keep height consistent (e.g., 20px-24px) to ensure they align well with text.

定义基础样式以确保它们看起来不像按钮：

排版： 使用更小的字体，通常为全大写或半粗体（例如：12px/0.75rem）。
圆角：
- Pill型（完全圆形）： 最适合状态和计数。
- 圆角型（4-8px）： 最适合分类和可移除Tag。
尺寸： 保持高度一致（例如：20px-24px），以确保与文本对齐良好。

3. Assign Semantic Logic (Color & Icons)

3. 分配语义逻辑（颜色与图标）

Use color to communicate meaning without forcing the user to read:

Success (Green): "Complete," "Active," "Verified."
Warning (Yellow/Orange): "Pending," "Low Stock," "Draft."
Error (Red): "Failed," "Critical," "Out of Stock."
Info/Neutral (Blue/Gray): "New," "Category," "Metadata."

Rule: Always pair color with text or an icon to ensure accessibility for colorblind users.

使用颜色传达含义，无需用户强制阅读：

Success（绿色）： "Complete"、"Active"、"Verified"。
Warning（黄色/橙色）： "Pending"、"Low Stock"、"Draft"。
Error（红色）： "Failed"、"Critical"、"Out of Stock"。
Info/Neutral（蓝色/灰色）： "New"、"Category"、"Metadata"。

规则： 始终将颜色与文本或图标配对，以确保色盲用户的无障碍访问。

4. Define Interactive States

4. 定义交互状态

If the tag is interactive:

Hover/Focus: Apply a subtle background shift or border change.
Removable: Include a clear "X" icon with a minimum hit area of 24x24px (WCAG 2.2 SC 2.5.8), sized up to 44x44px where layout allows for comfortable touch use.

如果Tag是交互式的：

悬停/聚焦： 应用细微的背景变化或边框更改。
可移除： 包含清晰的“X”图标，最小点击区域为24x24px（WCAG 2.2 SC 2.5.8），在布局允许的情况下可放大至44x44px以方便触摸操作。

5. Determine Placement and Hierarchy

5. 确定放置位置和层级

Overlay: Placing a "New" badge in the top corner of an image.
Inline: Placing a status badge immediately after a title in a
```
page-header-system
```
.
Grouped: Stacking multiple tags below a description in a
```
card-ui-system
```
.

叠加： 在图片的右上角放置"New" Badge。
内联： 在
```
page-header-system
```
中的标题后立即放置状态Badge。
分组： 在
```
card-ui-system
```
中的描述下方堆叠多个Tag。

Decision Rules

决策规则

The "Squint Test": If a badge is so bright it distracts from the H1, reduce its saturation or use an outline style.
Limit the Count: Never use more than 3 tags on a single card to prevent visual clutter.
Text Length: Keep labels to 1-2 words. Truncate or use tooltips if data is dynamic and unpredictable.
Button Distinction: Badges should have a different visual treatment (e.g., smaller size, different radius) than the primary "Submit" or "Buy" buttons.

“眯眼测试”： 如果Badge过于明亮以至于分散了H1的注意力，请降低其饱和度或使用轮廓样式。
数量限制： 单个卡片上的Tag数量不得超过3个，以避免视觉混乱。
文本长度： 标签文本保持在1-2个词。如果数据是动态且不可预测的，请截断文本或使用工具提示。
按钮区分： Badge应具有与主要"Submit"或"Buy"按钮不同的视觉处理方式（例如：更小的尺寸、不同的圆角）。

Constraints

约束条件

Accessibility: Text inside badges/tags must meet WCAG AA (4.5:1 contrast). Interactive tags must be keyboard navigable.
Responsiveness: Tags in a group should wrap to the next line (
```
flex-wrap: wrap
```
) rather than overflowing the container.
Touch Targets: Removable tags must have a large enough target for the "close" action (min 24x24px per WCAG 2.2 SC 2.5.8; 44x44px preferred).

无障碍性： Badge/Tag内的文本必须符合WCAG AA标准（4.5:1对比度）。交互式Tag必须支持键盘导航。
响应式： 分组中的Tag应换行到下一行（
```
flex-wrap: wrap
```
），而不是溢出容器。
触摸目标： 可移除Tag的“关闭”操作必须有足够大的目标区域（根据WCAG 2.2 SC 2.5.8，最小24x24px；首选44x44px）。

Common Failure Patterns

常见错误模式

The "Button Mimic": Making tags look exactly like buttons, leading users to expect a primary action.
Color Over-reliance: Using red/green/yellow without text labels, making it impossible for colorblind or screen-reader users to understand status.
Tag Soup: Crowding a card with 10+ tags, making none of them useful.
Inconsistent Radius: Mixing pill-shaped badges and square-cornered tags in the same UI.

“按钮模仿”： 使Tag看起来与按钮完全一样，导致用户期望主要操作。
过度依赖颜色： 使用红/绿/黄而不添加文本标签，使色盲或屏幕阅读器用户无法理解状态。
Tag堆砌： 在卡片上放置10个以上的Tag，导致所有Tag都失去作用。
圆角不一致： 在同一UI中混合使用pill型Badge和方角Tag。