Badge：徽章与标签
Badge 是附着在商品、卡片或图片上的简短文字标签，用一两个词说明对象的状态或属性，例如「新品」「售罄」「-20%」「Best seller」。它是展现，不是内容：标签内容要么来自运行时状态，要么来自可核验的规则，不能由设计师凭感觉贴上去。与 Trust Badges 的区别是：后者是带发证主体的认证事实，Badge 只是承载它的小标签样式之一。
适合与不适合
适合状态（售罄、预售）、时间性属性（新品）、价格事实（折扣百分比）、榜单类事实（畅销）。不适合传达需要解释的条件（改用正文或 Popover）、长句，以及没有规则来源的装饰性「热卖」「推荐」。可点击的筛选标签（chip）是交互控件，不是 Badge。
与相邻模式的区别
| 对象 | 判据 |
|---|---|
| Badge | 附着于某个对象的状态或属性简称，通常不可交互 |
| Overlay | 层叠关系；Badge 常以 Overlay 方式叠在图上，但也可以放在标题旁，不依赖叠图 |
| Cards | 卡片是承载单元，Badge 是卡片上的一个元素 |
| Trust Badges | 内容类型：发证主体、适用范围、有效期都要可核验，见该页 |
| 促销 Banner / Countdown | 承载活动规则与截止时间；Badge 只显示其中对某个对象生效的结果 |
优点与缺点
| 优点 | 缺点 |
|---|---|
| 在扫读列表时快速传达状态 | 越多越失去作用，也更容易互相矛盾 |
| 占位小，可复用于各类卡片 | 规则不透明时容易滑向误导 |
| 可由数据字段自动驱动 | 手动标签会过期，成为「永远的新品」 |
内容与规则要求
每种 Badge 必须能写出规则：由什么数据、在什么条件下、显示多久。
| 标签 | 规则来源（示例口径） | 失效处理 |
|---|---|---|
| 售罄 | 平台的可售状态。Shopify 的 product.available 表示至少一个变体可售，所以商品级「售罄」只能在所有变体都不可售时显示；部分变体不可售应在变体选择处说明 | 恢复可售即撤下 |
| 预售、缺货可订 | 销售计划或库存策略；与购买按钮文案一致 | 状态变化即更新 |
| 新品 | 时间窗，起点用明确字段（如发布时间），窗口长度由运营规则规定并写明 | 超出窗口自动撤下，不靠人工 |
| -20% | 当前价与对比价计算；对比价必须是真实的前价 | 价格或对比价变化时重算；对比价不高于现价时不显示 |
| Best seller | 写明指标（销量或销售额）、范围（全店或类目）、时间窗、是否扣除退货、刷新频率 | 榜单口径变化或数据过期即撤下 |
折扣百分比：Shopify 的 product.compare_at_price 是各变体对比价中的最低值，并有 compare_at_price_varies 标示是否不同（shopify.dev，核验于 2026-09-29）；变体折扣不同时不要用一个百分比概括，改为「最高可省」并写明范围。折扣码或自动折扣不等于划线价降价，Badge 显示的结果必须与购物车一致，见促销兑现。美国 FTC 的 Guides Against Deceptive Pricing 在 16 CFR 233.1 中把「前价」比较的合法基础定为该商品曾在一段相当长的时间内、以真实价格向公众正常标价出售的价格；为了事后大幅降价而人为抬高的前价属于虚假比较。欧盟委员会 2021/C 526 指南在 Price Indication Directive 第 6a 条的说明中，把宣布降价时要标示的「前价」定义为此前不少于 30 天内的最低价。FTC 的 Dark Patterns 报告也把「False Discount Claims」（虚构的折扣价）列为制造紧迫感的一种模式。各市场是否适用、如何适用，需要法务或合规确认。
比较级标签（Best seller、No.1、Most popular）属于对比性声明，必须保存计算口径与统计截图或导出数据；来源是第三方榜单时，转按数据证明与第三方评价处理，写明榜单名称与日期。无依据时不显示。这类声明的具体合规要求本文未核验，需要合规确认。
数量：每个对象默认最多 1 个，最多 2 个。定义优先级：状态类（售罄、预售）高于价格类，价格类高于属性类；售罄时隐藏折扣与新品。
响应式与无障碍
- 不能只靠颜色：WCAG 1.4.1 Use of Color（A）要求颜色不是传达信息的唯一视觉手段。「售罄」「折扣」必须有文字，图标类标签要有文字或名称；红、绿之间的差别不能是唯一的区分。
- 文字对比度：1.4.3 Contrast (Minimum)（AA）要求普通文字 4.5:1、大字号（18pt 或 14pt 粗体以上）3:1。Badge 字号通常偏小，按 4.5:1 设计。叠在图片上时使用实色底，不要依赖图片颜色，理由同 Overlay。
- 图形与边框：1.4.11 Non-text Contrast（AA）要求识别 UI 组件与传达信息的图形对象与相邻颜色对比不低于 3:1；纯装饰不在此列。
- 屏幕阅读器读出：用真实文本，不把文字烘焙进图片；DOM 顺序放在商品名附近，使读者知道标签属于哪个对象。「-20%」这类符号写法可能被读成减号，建议可见文字直接写「立减 20%」或「20% off」；用视觉隐藏的补充文本时，WCAG 技术 C7 说明该做法不用
display:none或visibility:hidden（否则辅助技术也读不到），并提醒重复使用会让读屏输出啰嗦。以上读法未在具体读屏软件中测试。 - 文本增长：翻译或放大后标签不得撑破卡片或遮住标题。
状态与退化
无匹配规则就不渲染；数据加载中先不显示，避免闪现后消失；数据读取失败时不显示，不要退回默认「热卖」。多个规则同时命中按优先级取舍。无 JavaScript 时，由服务端输出的状态标签仍可见。减少动态时不使用脉冲、闪烁效果。
常承载的内容与模块
商品卡片、精选商品列表、集合页、商品页标题区。折扣来自促销与折扣；认证类标志由信任标志负责，不在商品卡上用 Badge 仿造。本库现有的 Horizon 固定版本解读中未涉及徽章的实现，主题层做法未核验。
发布前检查
- 每个 Badge 有可查的规则、数据字段与撤下条件？
- 「新品」有时间窗，「-20%」与购物车一致，「Best seller」有保存的口径？
- 无颜色单独传达含义，文字对比度达标？
- 每个对象的标签数量与优先级已定义？
- 售罄标签没有把「部分变体可售」误写成整体售罄？
固定版本主题实现
- Dawn 订阅表单与徽章：Dawn 全仓库搜索未找到新品、畅销与百分比折扣徽章，商品卡徽章只有 Sale 与 Sold out 两类。
- Horizon 徽章、评价与订阅：Horizon 的商品徽章同样只有 Sold out 与 Sale，均为商品级。
固定基线为 Dawn v15.3.0 与 Horizon 4.2.0；结论限于这两个提交，均为静态源码分析，未运行验证。
待继续完善
- 固定版本主题的徽章实现见「固定版本主题实现」；其他主题与版本未核对。
variant.inventory_policy为 continue 时available的取值，官方对象页未直接说明，需实测。- 各市场对比较级标签和折扣标示的要求，需要合规确认。