组件与实例

组件和实例是什么

组件组件是 UI 设计和开发中的一种基础元素，它们可以被视为设计中的“模块化积木”。在Ardot 中，组件指可复用设计元素——可以是一个简单的按钮、图标，也可以是一张复杂的卡片或一个完整的弹窗。把它们做成组件，就相当于放进了一个"可复用的工具库"。

每当你把一个组件拖到画布上使用时，你放进去的其实是它的实例。实例长得和组件一样，但它们不是各自独立的副本——它们和组件之间有一根"看不见的线"连着：

• 你更新了组件，所有实例会自动跟着更新
• 你可以对某个实例做一些个性化修改（比如换文字、换颜色），这些修改不会反过来影响组件，也不会影响其他实例；

这就是组件的价值：一次设计，处处使用；一处更新，全部生效。

创建组件

选中图层并创建

把你想要复用的元素（比如一个按钮）画好，选中它。然后用下面任一方式创建组件：

• 点击顶部工具栏中的 "创建组件" 按钮
• 右键菜单选择 "创建组件"
• 使用快捷键：
  • Mac：Option + Command + K
  • Windows：Ctrl + Alt + K

创建成功后，你会在图层面板中看到这个图层变成了紫色的组件图标——这是 Ardot 对组件的标识。

选中不同类型的图层会发生什么

根据你选中的图层类型，Ardot 会用不同的方式帮你包装组件：

• 选中一个容器（比如 Frame）：Ardot 直接把这个容器变成组件，保留里面所有的内容和设置
• 选中一个非容器图层（比如矩形、文本）：Ardot 会先创建一个容器把它装起来，再转为组件
• 选中多个图层：Ardot 创建一个容器把它们都装进去，然后转为组件。名称会自动命名为"组件 1""组件 2"等（在当前文件中不重名）

批量创建多个组件

如果你一次选中了多个相互独立的图层（比如 5 个不同的图标），希望它们分别成为 5 个独立的组件，而不是合并成一个组件——这时候用"批量创建组件"。

每个被选中的图层（或容器、组、布尔组、路径）都会被单独转为一个组件。

哪些图层不能创建组件

• 已经是组件的图层（没必要再套一层）
• 组件或实例的子图层（组件结构要保持独立）

一个小提醒

组件创建之后是不能"取消"回普通容器的，只能通过 Command+Z 撤销。所以如果你只是想临时打个组，用普通编组（Command+G）就好。

创建实例

组件做好之后，有三种方式把它放到设计稿上使用：

方式 1：直接复制组件（最快）

选中组件，Command+C 复制，Command+V 粘贴，就会得到一个实例。

其他复制方式也一样管用：

• Command+D 快速复制副本
• 按住 Option（Mac）/ Alt（Windows）拖拽组件

小提醒：组件不能在自己内部放自己的实例（避免无限嵌套）。

方式 2：从组件面板拖拽

左侧边栏有一个 "组件" 选项卡（快捷键 Mac Option+2 / Windows Alt+2），里面列出了文件中所有的组件。

从面板中找到你要的组件，直接拖到画布上。拖动时，Ardot 会高亮目标位置的容器或 Section，松手后实例就会放到对应层级里。

用组件面板管理组件

当文件里有很多组件时，组件面板是最快的查找方式。

打开组件面板

• 点击左侧边栏的 "组件" 图标
• 或使用快捷键：Mac Option + 2 / Windows Alt + 2

宫格 vs 列表

面板右上角可以切换两种显示模式：

• 宫格模式（默认）：以缩略图展示，适合一眼看出组件样子
• 列表模式：文字列表，适合组件特别多的时候

自动分组

组件面板会根据组件所在位置和命名自动分组，层级是这样的：

1. 文件分组：先分"本地组件"（当前文件）和"启用的库"
2. 页面分组：按组件所在的页面分组（如果只有一个页面，这层会跳过）
3. 容器分组：同一个顶层容器或 Section 里的组件归为一组
4. 名称分组：组件名称中每个 / 都会形成一层子分组

命名技巧：用 / 给组件分类，比如把按钮系列命名为 Button/Primary、Button/Secondary，它们会自动归到 Button 分组下。

管理组件

给组件起名字

组件的名称就是它的图层名。建议：

• 用有意义的命名，方便团队找到
• 配合 / 做层级分类（参考上面的命名技巧）
• 同一个文件内名称不要重复

给组件写描述

描述是给其他设计师看的说明书——告诉他们这个组件什么时候用、怎么用。

操作：选中组件 → 右侧属性面板 → 打开描述弹框 → 输入描述

描述会在两个地方展示：组件面板的组件预览里，以及实例面板（其他人用到实例时能看到）。

删除组件

直接选中组件按 Delete 就好。删除主组件不会影响已经使用的实例——实例会继续保持当前外观，只是失去了和主组件的同步能力。

如果后续又想恢复这个组件，选中任何一个实例，就能在实例面板找到"恢复组件"按钮（见下文）。

管理实例

实例面板

当你选中一个实例时，右侧面板顶部会出现实例面板，显示这个实例的关键信息：

• 组件名称：这个实例是从哪个组件生成的（显示的是主组件的名字，不是图层名）
• 组件来源：本地组件 / 团队库 / 企业库
• 组件描述：组件作者写的使用说明
• 前往组件 按钮
• 更多操作 菜单（解绑、重置等）

前往主组件，快速回来

编辑实例时突然发现需要改主组件？点实例面板里的 "前往组件" 按钮，画布会直接跳转到主组件并选中它。

改完之后，画布左上角会出现 "返回实例" 按钮，点一下就回到你原来编辑的位置。

嵌套实例也支持——选中实例内部的实例时，也可以前往它对应的组件。

恢复被删除的组件

选中被删除组件的任意一个实例，实例面板里原来的"前往组件"按钮会变成 "恢复组件"。点击后，组件会回到被删除时的画布位置（忽略原来的层级，就放在根目录）并自动选中。

把实例换成别的组件

有时候你用了一个组件，后来发现另一个组件更合适——不用删了重做，可以切换实例：

1. 选中实例
2. 点击实例面板里的组件名称
3. 在弹出的组件列表中选择新组件

切换过程中，你之前在实例上做的修改（比如改了文字、换了颜色）会按"图层名匹配"的规则尽量继承到新组件上，避免重复操作。

如果你尝试把一个嵌套实例换成它自己的父组件，会报错"组件不能包含自身的实例"——这是为了避免无限嵌套。

解绑实例（断开与组件的关系）

如果你希望某个实例完全自由、不再跟随主组件更新，可以"解绑"它：

• 入口：实例面板 → 更多操作 → "解绑实例"
• 快捷键：Mac Option + Command + B / Windows Ctrl + Alt + B

解绑后，实例变成普通容器，跟原组件再也没有关系。

注意：此操作只能通过撤销恢复。如果实例嵌套在另一个实例里，解绑时需要同时解绑所有父实例；但不会自动解绑子级或同级的嵌套实例。

实例内部能做什么，不能做什么

实例不是完全自由的——它要保持和主组件的结构一致。所以在实例内部有一些限制：

你可以： 改变实例的整体大小和位置； 修改实例的颜色、文字、显示隐藏等等属性（这些修改叫做“覆盖”，详细内容可以参考下一章） 从实例内部复制图层出来

你不可以： 调整实例内部子图层的大小、旋转角度； 移动实例内部的子图层； 往实例内部粘贴新图层

如果你需要完全自由地改实例内部的结构，可以先解绑实例把它变成普通容器。