用变体管理组件的不同状态
一个按钮可能有"默认/悬停/禁用"三种状态，三种尺寸，主色和次色两个色调——加起来就是 18 种组合。难道要做 18 个组件吗？变体功能就是为了解决这个问题。
什么是变体
变体让你把同一组件的多个版本组织到一起，用属性来区分它们。
举个例子，你的按钮有以下版本：
- 默认状态、悬停状态、禁用状态
- 大、中、小三种尺寸
- 主要按钮、次要按钮两种风格
如果不用变体，你需要做 18 个独立组件。用了变体之后，你只需要做一个"按钮"组件集，里面包含 18 个变体，每个变体用三个属性来标识：状态=默认, 尺寸=中, 风格=主要。
设计师在使用时，直接从一个按钮实例的属性面板下拉选择就能切换，不用从组件库里找另一个组件。
几个会经常听到的词
| 名词 | 是什么 |
|---|---|
| 组件 | 我们之前介绍过的可复用元素。一个按钮、一张卡片，都是组件。 |
| 变体 | 同一组件的不同版本。比如"主要按钮的悬停态"是一个变体。 |
| 组件集 | 装着所有变体的"盒子"，画布上以紫色虚线框标识 |
| 变体属性 | 区分变体的维度，比如"状态""尺寸"。每个属性下有不同的"值"，比如"默认""悬停""禁用" |
创建变体的两种方式
方式 1：从一个组件开始扩展
适合从零开始：你刚做完一个按钮组件，想把它扩展成多个变体。
- 选中一个组件
- 在上方工具栏点击 "添加变体"
Ardot 会自动帮你做这些事：
- 把单个组件升级成组件集（用紫色虚线框包起来）
- 原来的组件成为第一个变体，标记为
属性 1=默认 - 复制出第二个变体，标记为
属性 1=变体 2，输入框自动激活方便你重命名
接下来你只需要修改第二个变体的样式（比如改成悬停态），属性名也按需改一改（比如"属性 1"改成"状态"，"变体 2"改成"悬停"）。
方式 2：把已有的多个组件合并
适合你已经有了一堆相似的组件，想合并它们：
- 选中多个组件
- 在右侧属性面板点击 "合为组件变体"
调整变体属性
变体属性就像 Excel 的列头——它定义了你要从哪几个维度来区分变体。
添加新属性
选中组件集，在右侧面板找到"变体属性"，点 "+" 添加。
直接在框里改名字，按 Enter 确认，按 Esc 取消。
修改属性名
两个地方都能改：
- 选中组件集时：在变体属性区域点击属性项 → 弹出二级面板可以编辑
- 选中某个变体时：直接点击变体的属性名编辑
调整属性顺序
属性的排序会影响实例使用时右侧面板里属性的排列顺序。建议把最重要、最常切换的属性放在最前面（比如"状态"放在"尺寸"前面）。
操作：鼠标悬停在属性项左侧，出现拖拽手柄，拖动即可。
删除属性
鼠标悬停在属性项上，右侧出现 "-" 按钮，点击删除。删除一个属性会从所有变体中移除它。
调整属性的"值"
属性是维度，"值"是这个维度下的具体选项。比如"状态"属性下，"默认/悬停/禁用"就是三个值。
重命名值
打开某个属性的二级编辑面板，点击要改的值，直接输入新名字。所有用到这个值的变体都会同步更新。
调整值的顺序
值的顺序决定了实例的下拉菜单里这些选项的排列顺序。比如把"默认"放在第一个，用户切换变体时一眼就能看到默认状态。
操作和属性排序一样：在二级面板中拖拽。
快速预览每个值对应的变体
在二级面板中悬停某个值，画布上对应的变体会高亮显示。点值右侧的"定位"按钮，可以直接选中那个变体跳过去。
在变体上修改值
选中一个变体，可以直接在它的属性区域用下拉菜单选择已有的值，也可以输入新值。
真 / 假这种属性会自动变开关
如果一个属性的所有值都符合"真假"特征，Ardot 会自动把它显示成开关样式，更直观。识别的关键词（不区分大小写）：
- 真 / 假
- True / False
- 开 / 关
- On / Off
- 是 / 否
- Yes / No
添加更多变体
新建变体的几种方式：
| 方式 | 说明 |
|---|---|
| 复制粘贴 | 选中变体复制（Command+C），在组件集内粘贴 |
快速复制（Command+D） | 复制并偏移 10px |
| 拖拽复制 | 按住 Option（Mac）/ Alt（Windows）拖拽 |
| 变体下方的 "+" 按钮 | 选中变体后，点击下方的 + 号，复制选中的变体作为新变体 |
| 组件集下方的 "+" 按钮 | 选中组件集后，点击下方的 + 号，以主变体为模板创建新变体 |
把外部组件拖进组件集
如果有现成的组件想加入组件集，直接拖进去就行。Ardot 会按它的名字（用 / 分隔）自动分配到对应的属性值。
把变体拖出组件集
不想要某个变体了？拖出组件集，它会变回普通组件，名字默认采用它的"显示值"。
给组件集和变体写描述
组件集和每个变体都可以写描述：
- 选中组件集时显示的是组件集的描述（建议写组件的整体说明）
- 选中变体时显示的是变体的描述（建议写这个变体的特殊用途）
- 别人选中实例时，优先显示对应变体的描述
在实例中使用变体
在组件面板里只看到一个缩略图
为了避免变体太多让面板变得拥挤，组件集在组件面板里只显示一个缩略图（以主变体为准）。
通过下拉菜单切换变体
选中一个变体的实例后，右侧面板会出现这个组件集的所有变体属性。每个属性是一个下拉菜单，选不同的值就能切换到对应的变体。
布尔类型的属性会显示成开关，更方便。
跳到主组件
点击实例面板的 "前往组件"，会跳到当前对应的那个变体，而不是整个组件集。
如果你想管理整个组件集（比如调整属性），点击实例面板里的"组件集"图标按钮，可以快速选中外层的组件集。
多选操作能做什么
| 你选中了 | 可以做什么 |
|---|---|
| 多个组件 | 合并为变体 |
| 同一组件集内的多个变体 | 批量修改属性值 |
| 多个实例 | 切换实例 |
| 同一组件的多个实例 | 所有实例操作 |
遇到错误怎么办
变体重名
如果两个变体的所有属性值完全一样（比如都叫 状态=默认, 尺寸=中），Ardot 会提示冲突：
- 选中组件集时：提示"多个变体的属性值相同，请修改以避免冲突"，可以点击按钮跳到冲突的变体
- 选中冲突的变体时：提示"此变体的属性值和其他变体有冲突，请修改以避免冲突"
修复方式：把其中一个变体的属性值改掉，让组合不一样就行。
注意：有冲突的组件集不能发布到团队库。
变体名称格式不对
变体的图层名必须是 属性1=值, 属性2=值 的格式。如果格式不对，Ardot 会提示错误。点击 "重置图层名" 可以一键修复。
同样，格式有错的组件集不能发布到团队库。
变体缺少某个属性
某个变体的名称里少了一些属性？Ardot 会提示"此变体丢失部分属性，请补充"，并在变体旁打个图标提醒。
多个错误同时出现时的优先级
如果一个组件集同时有多种问题，按下面的顺序显示提示（解决一个再看下一个）：
- 变体名称格式不对（最高优先级）
- 变体重名
- 变体缺少属性