更新时间：2026年10月09日

Pixso里，几个元素只需要一起选中、移动，用组合；需要独立边界、裁切和布局区域，用画板容器；需要在多个页面反复使用，并从一个源头统一维护，用组件。组件的使用副本叫实例，普通组合复制后则彼此独立。三者可以嵌套：一张商品卡片可以有容器结构，内部包含标签组合，整体再做成组件。

确定要复用之后，再按Pixso创建和使用组件的方法操作。先明确哪些内容需要一起移动、哪些规则需要统一修改，比一开始就把每个图层都做成组件更有用。

用同一张商品卡片，分清三种需求

假设你正在设计商城里的商品卡片，内容包括商品图、标题、价格和“新品”“包邮”两个标签。先不要讨论快捷键，先看你希望这几个元素之间保持什么关系。

当前需求	适合的对象	它不负责什么
让“新品”和“包邮”两个标签一起移动	组合：把相关图层作为一组操作。	不会让其他页面的同名标签自动同步。
限定卡片宽度，安排图片和文字区域	画板容器：建立清楚的边界，并按需要设置布局。	创建容器本身不等于建立跨页面的复用关联。
多处使用同一套卡片样式，统一改圆角和排版	组件与实例：保留共同来源，又允许具体内容不同。	不代表实例所有改动都回写主组件，也不是所有属性永远强制同步。

“用了组件就不需要容器”和“组合比组件低级”都是误解。它们解决的问题不同，选哪一种由当前任务决定，不由页面看起来是否复杂决定。

组合：把相关元素收在一起，仍然是独立图层

先选中两个标签，再创建组合。这样移动商品卡片里的标签区时，可以一次选中它们；需要改其中一个标签，仍可在左侧图层面板展开组并单独选择。Pixso的组合说明也指出：内部对象位置变化时，组合边界会随内容调整。

这很适合临时整理，例如一个标题及其装饰线、两个相邻的状态标记。组合并不会把内部文字和形状变成一张图片，也不会自动生成统一的布局规则。把“包邮”移动得更远，组的边界会跟着扩展；如果你的要求是“无论标签多少，都保持固定间距和内边距”，就需要进一步考虑容器与自动布局。

复制这个标签组合到另一个页面，得到的是另一组独立对象。以后修改原组里的字号或颜色，不应期待所有副本一起变化；给它们取同一个名字，也不会建立组件关联。

把图片、标题、价格和标签放进卡片容器，给它设定宽度和需要的背景，就能把“卡片范围”与“内部内容”分开。当前Pixso帮助中使用“容器”称呼这类对象，很多旧教程则称它为画板。操作时看当前面板中的名称，不要把它与画布上的普通矩形混为一谈。

在现有对象外创建容器，可以选中这些对象，在右键菜单选择“创建为容器”。下图的同一菜单里同时列出了“创建编组”“创建为容器”和“创建组件”，它们是不同操作。

容器可以嵌套。例如图片区域是卡片里的一个容器，商品卡片又在列表容器中。需要裁切溢出内容、设置内边距或让标题变长后重新排布，应分别设置相关属性；“放进容器”不会自动完成这些设计决定。

还要区分调整容器尺寸与把整个设计缩放。拉宽卡片时，内部图层如何变化与约束或自动布局有关；如果只是想把包含字体、描边的整套对象等比例变大，则应理解缩放工具的用途。容器与形状工具说明分别介绍了这些行为，因此不能简单记成“画板永远不缩放内容、组合永远会缩放内容”。

当首页推荐、搜索结果和收藏页都使用相同结构的商品卡片，组件的价值才变得明显。先把卡片中稳定的部分整理好，例如圆角、标题层级、价格位置和标签区域，再创建主组件；其他页面使用它的实例，分别填入商品名称、价格与图片。

需要统一改卡片圆角时，应修改主组件，而不是挨个找副本。若不知道当前实例来自哪里，可以在实例的属性区域使用“跳转到主组件”。不要根据图层名猜来源，名称相似的两张卡片也可能属于不同组件。

这并不意味着每张卡片内容都必须相同。实例可以有自己的文字、颜色或其他允许修改的属性；这些本地修改通常称为覆盖。比如商品标题应各不相同，而卡片圆角希望统一维护。设计组件时就应区分业务内容和公共规则，不要把所有变化都当成同步故障。

同一文件中的关联更新，与跨文件使用团队组件库也不是同一步。跨文件复用涉及资源库的发布与更新流程，不能把“保存主组件”理解为所有团队文件已经立刻采用新版。遇到未更新，先检查关联、覆盖以及资源库更新状态；Pixso的组件帮助对这些机制有具体说明。

回到商品卡片：临时一起挪动标签，用组合；安排卡片边界与内容排布，用容器；多个页面长期共用一套卡片规则，再做组件。等复用规模扩大后，可以继续整理组件库的命名和维护方式。从明确的重复需求开始，结构会比“所有内容一律组件化”更容易维护。