variant

变体

此技能会针对一段描述的 UI 构建三个有意设计得各不相同的版本。它们会置于实际页面的选择器后面，你可以在它们之间切换并作出选择。

它只生成候选方案，不进行排名。审查现有 UI 请用 interface-review 和 better-interface，压力测试单个组件请用 break，梳理组件的各个状态请用 state-machine。

不同的答案，而非不同的色调

每个变体都是对同一需求的不同回答，变化的维度属于本工具集负责的范围：

维度	负责人	变化内容
结构	better-layout	分组、顺序、列数、哪些内容折叠
密度	better-layout	间距尺度、能容纳多少内容
强调	better-colors	哪些位置使用填充色、哪些内容弱化显示
字体	better-typography	字号阶梯、字重对比、行宽
风格	better-writing	标签、语气、文案篇幅

选择一个主要维度，并让每个变体在该维度上各有不同取向。该维度名称就是选择器的分组标题。次要选择应由主要维度自然引出，而非自行变化。密集型变体可能需要较小的字号，这属于整体协调，而不是第二个维度。

每个变体都必须达到的底线

变体进入选择器前，必须通过 better-interface 的升级触发条件：

• 每个控件都有无障碍名称和可见的焦点指示器。
• 键盘可以访问指针能够访问的所有内容。
• 动效和自动播放的内容遵循 prefers-reduced-motion。
• 在 320px 宽度或 200% 缩放下，不会发生裁切、重叠或无法访问的情况。
• 正文和控件文本达到要求的对比度。
• 状态或含义不能只靠颜色表达，状态变化也不能只靠动效表达。
• 破坏性操作必须有确认、撤销功能或明确的区别处理。
• 被截断的内容必须提供查看完整内容的方式。
• 不得有内容隐藏在滚动边缘之后，或藏在没有可见提示的展开项中。
• 每条错误信息都必须说明如何恢复。
• 语义颜色不得用于与其含义相悖的场景，例如在非破坏性操作上使用危险色调。

所有变体都必须达到同一条底线。它不是一个可供权衡的维度。若某个设计方向只有违反底线才能实现，就应说明原因并舍弃该方向。

1. 界定单个对象

每次只处理一个 UI 对象。“仪表板”不是一个对象，指标卡才是。如果请求涉及多个对象，请列出候选项并询问要探索哪一个。

用一句话重述需求：该对象是什么、会在哪里呈现、需要完成什么任务。

2. 了解设计基础

变体应当看起来像是明天就能上线，因此要先了解它们所依托的基础：

• 样式系统、组件库和任何动效库。
• 设计令牌：颜色、间距、圆角、字号阶梯、缓动曲线。
• 产品的密度和风格。专业工具通常内容密集，这会限制最大胆变体的设计幅度。
• 对象的呈现位置：背景是什么、周围有哪些相邻元素、会出现在哪些宽度下。

如果没有项目可供查阅，请使用中性灰、一种强调色和系统字体栈，并说明你采用了这些设置。

3. 编写代码前先确定维度

默认创建三个变体。只有在收到要求时才增加到五个。

先列出这组变体，为每个变体指定名称和一个维度取向。名称应体现设计方向，例如 Quiet、Editorial、Dense，不要使用 Option A。

当没有两个变体取向相同，且你能用一个短语说明每个变体的维度取向时，这一步就完成了。

4. 将它放到实际页面中

在实际承载该内容的页面上展示各个变体，并使用真实的页面框架、周边内容和逼真的数据。

使用 ?__variant=quiet 这样的 URL 搜索参数进行选择，这样每个变体都是可以发送给别人的链接。内容旁边放置一个分组列表，用来切换变体。如果内容旁边没有空间，就将列表移到上方，改为使用包含相同分组的下拉菜单。picker.md 中有具体规范。

每次只渲染一个完整尺寸的变体。缩略图会扭曲间距和比例，而间距往往正是需要比较的内容。

变体文件可以导入生产组件。只有承载页面会导入变体，其他任何文件都不得从这个测试框架导入内容。

如果没有页面可以承载它，就构建一个独立的 HTML 文件，并保留相同的选择器。

为每个变体填入真实内容：符合产品场景的文案、合理的名称，以及页面实际会承载的项目数量。占位文本和三行内容会让任何结构看起来都不错。

5. 展示取舍，然后停下

使用手边已有的浏览器打开页面一次，逐个查看每个变体。确保每个变体都能渲染、每项交互都有响应，并且控制台没有错误。如果手边没有浏览器，就说明这一点，并把 URL 交给用户检查。

然后把决定权交给用户：

变体	轴上的位置	适用场景	代价
Quiet	视觉权重最低	页面每天都会使用	最不容易令人印象深刻
Editorial	字号最大、留白最多	这个时刻值得突出呈现	占用垂直空间

说明选择器运行的位置、用于切换的按键，以及评审时使用的页面宽度。375px 和 1440px 下的结论可能不同。

不要在表格中标出首选项。如果用户直接询问，就根据用户看到该内容的频率和产品的个性来回答，而不是根据你最喜欢构建哪个变体。

6. 确定一个方案，删除其余方案

用户选定方案后，按照项目自身的规范，在该方案应当归属的位置妥善实现。然后删除其他变体、选择器，以及承载页面对各个变体的导入。搜索变体名称和 __variant 参数，并检查差异，确认测试框架没有任何残留。

如果用户要求再来一轮，就保留测试框架，并再次执行 编写代码前先确定轴，围绕你倾向的方向选择新的位置。

完成之前

错误	修正方法
变体之间只有强调色或文案不同	将其中一个移到主要轴上的不同位置，或删掉它
所有轴同时变化	只改变一个轴；其他部分随之调整
在空白路由上评审	在实际承载该内容的页面上展示变体
占位文本、三行内容、“Jane Doe”	使用真实文案和页面实际会承载的项目数量
最大胆的变体缺少键盘操作或焦点支持	明确边界条件，或放弃该方向
在表格中标出首选项	说明每个变体的代价，让用户选择
使用项目的设计令牌重新设计选择器	让选择器明显处于设计系统之外
每个变体各占一个标签，排成一长行	在内容旁放置可独立滚动的分组列表；列表放不下时，在内容上方使用下拉菜单
确定方案后仍留有测试框架	删除它，并搜索相关名称和参数