R1.02.1production variant coverage设计

变体需覆盖真实使用的组合

别名: 变体覆盖 · 真实组合 · call-site coverage · variant matrix

概念解释

组件变体表要覆盖的不是设计师想象中的完备矩阵,而是产品里已经在用、即将合并的真实组合。结账页需要「小尺寸 + 图标 + 加载中」的主按钮,库里若只有「小」和「加载中」两列、没有它们的交点,使用方就会在调用点拼装私货。生产组合覆盖(production variant coverage)衡量的是调用点能否在库内表达,不是 Storybook 里有多少格子。

没人用过的理论组合可以缺;缺的是线上正在传的那一格,库就会被绕开。

机制

变体是对合法组合的预声明。调用点传入的是一组轴上的取值,组件按这组取值选择一条实现。交点不存在时,实现者只有三条路:放弃需求、把样式写在页面里、或给组件开一个只服务这一页的后门 prop。后两条都会让「官方变体」变成不完整的子集,真实外观以分叉的形式活在库外。

覆盖必须以调用点为样本,而不是以轴的笛卡尔积为样本。笛卡尔积会把从未共存的轴算进去,显得很满;调用点日志会暴露「图标与加载中在小尺寸上同时出现」这种设计稿没画过的格子。漏掉的是这些格子,不是没画满的空想格。

边界

尚未上线、调用点为零的新组件,没有生产样本,只能先覆盖设计里已经定稿的组合,并在第一次真实接入后回补。实验性页面的一次性组合不应倒逼进库——那会把覆盖目标从「重复出现的用法」换成「出现过一次的用法」。平台能力不同导致的组合(桌面有 hover、移动没有)要按平台分别覆盖,不能拿桌面矩阵去审判移动库。

怎么落地

  • 从主分支提取该组件过去一个发布周期的调用点,列出实际出现的轴组合,而不是打开设计文件数格子。
  • 把「出现两次及以上」的组合收进官方变体;只出现一次的先留在页面,观察是否重复。
  • 对每个官方变体在文档里给一条可运行示例,示例的 props 必须能在生产日志里找到对应。
  • 验证:抽十条高频调用,确认每一条都能只用公开变体表达,无需页面级覆盖样式。任何一条要靠私货才能还原,就是覆盖缺口。

延伸

  • 同组R1.02.2 变体数量爆炸意味着抽象错误 · R1.02.3 组件边界应按职责而非按页面划分
  • 相邻R1.03 组件状态的完备性 · R1.11 组件的可组合性
  • 站内检索production variant coverage · call site · variant matrix

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/R1.02.1