Pixso创建组件和样式：完整操作指南

在Pixso创建可复用界面时，先把颜色、文字、效果和网格保存为样式，再把需要一起复用的结构做成组件；同一种组件的尺寸或状态可以用变体管理。共享到其他文件时，还需要发布资源库，并在使用文件中接收更新。样式、组件和资源库各有职责，不能把保存一次样式理解成所有页面已经自动统一。

如果尚未区分主组件与实例，可以先阅读Pixso创建和使用组件的基础说明。下面按样式、组件、变体与发布的顺序完成操作，并以一组消息提示条说明如何选择复用方式。

1. 什么是组件和样式

原子设计用从小到大的结构理解界面：基础元素组成有意义的组合，多个组合形成更大的区域，再组织成页面。这种层级思路有助于拆分可复用对象，但不需要把每一种设计元素都严格对应成化学名词。

UI组件是一组可以重复使用的界面元素。它可以很小，例如按钮或图标，也可以包含完整的卡片、菜单或消息提示条。主组件规定公共结构与属性，实例则是在页面中使用的关联副本。样式保存的是一组视觉属性，可以独立应用到不同图层上。

例如，“操作成功”提示条包含状态图标、消息文字和关闭按钮。文字用正文样式，图标和背景用相应颜色样式，三个对象的结构组成提示条组件；页面上的“保存成功”和“上传完成”则可以是不同实例。这样改公共间距与改一段消息文字就不会混成同一种操作。

组件库通常同时包含基础样式、控件以及说明文档。常见样式有颜色样式（填充、描边等）、文本样式（字体、字号、行高、字距）、效果样式（阴影、模糊等），以及布局网格样式（行、列、网格）。

2. 为什么要创建组件和样式

2.1 减少重复绘制，让相同规则可追踪

设计师可以从组件库中使用已有元素，无需每次重新画按钮、提示条或卡片。这也有助于开发识别可复用结构。不过，设计组件不会自动替代前端实现，开发仍需要将其对应到项目中的代码组件与业务条件。

一致性是另一项价值。若不同页面分别保存一组近似的颜色和字号，后续很难知道哪一组才是约定规则。共享样式与组件让颜色、尺寸、字体和结构有明确来源，适合多人共同维护页面。特殊情况仍要先判断原因，不应为了保持一致而忽略真实内容差异。

2.2 在Pixso中共享时，分清更新范围

Pixso允许创建样式和组件，发布到团队资源库供其他文件使用。主组件修改后，同一文件中保持关联的实例会跟随更新，但实例已经覆写的相应属性可能不会跟随；跨文件的使用者需要在源库发布后接收更新。

组件可以按用途命名并通过组件面板搜索。消息提示条可用“反馈/消息提示条”这样的结构名称，而颜色样式用“反馈/成功/背景”这样的属性角色名称；不必把所有对象都命名为绿色或16号字，否则换主题或调整字号后名称就失去意义。

3. 如何用Pixso创建组件和样式

3.1 创建颜色样式

页面颜色通常包含品牌色、中性色和反馈色，用来表达视觉层级、品牌识别和状态差异。Pixso颜色样式可用于填充、描边和文字，也可保存渐变等设置。对于消息提示条，先分别确定文字、背景与边框的用途，不因为看起来接近就把它们全部绑定到一个任意色值。

1. 选中已经设置好颜色的对象，例如成功提示条的背景。
2. 在右侧属性面板中，单击对应属性旁的样式图标。
3. 在颜色样式面板中点击“+”，创建新样式。
4. 用用途命名，例如“反馈/成功/背景”，然后创建样式。
5. 选中另一处同类对象，从样式选择器应用该样式，确认它仍与来源保持关联。

品牌色、成功色和选中状态色即便暂时数值相同，也可能有不同使用规则。先依据团队规范决定是否共享同一角色，不为了减少样式数量而把不同语义强行合并。渐变样式也包含方向和角度，使用后要结合对象形状检查效果。

3.2 创建文本样式

文本样式包含字体、字号、字重、行高和字距等属性，可以应用于整个文本图层或部分文本。选择字体时，需要考虑团队成员能否使用以及实际文字的显示；字号取决于页面任务，不应把某个固定区间当成所有项目的标准。

1. 选中已设置好字体、字号与行高的文本。
2. 在右侧面板的文本区域单击样式图标。
3. 点击文本样式面板中的“+”。
4. 用内容角色命名并创建，例如“反馈/消息正文”。

文本对齐方式需要在文本块上单独设置，不能通过文本样式统一。消息提示条还要放入“文件已上传，请等待处理完成”这样的长句，检查能否换行、关闭按钮是否被挤开。文字变长导致的容器问题，应通过结构与布局处理，不能用不断缩小字号来掩盖。

3.3 创建效果样式

内阴影、外阴影、高斯模糊和背景模糊等效果可以保存为样式，以便在相同层级的对象上复用。页面内嵌提示条未必需要阴影，悬浮在内容之上的提示条则可能需要与背景拉开层次；先确定用途，再决定效果。

1. 选中作用对象。
2. 如果对象还没有所需效果，先添加并调整阴影或模糊。
3. 在右侧面板的效果区域单击样式图标。
4. 点击“+”创建效果样式。
5. 命名后创建，并在实际背景上检查可见效果。

3.4 创建布局网格样式

布局网格可以帮助页面内容按约定的列、边距和间距组织。它与组件内部的自动布局不是同一个设置：网格辅助规划画板，自动布局负责对象之间的排列与尺寸行为。

1. 在画布中创建或选中一个画板。
2. 在右侧属性面板为画板添加布局网格。
3. 设置行或列的数量、类型、宽度、边距和间距。
4. 在布局网格区域单击样式图标。
5. 点击“+”创建新样式。
6. 命名并保存，应用到使用同一网格规则的画板。

3.5 创建单个或多个UI组件

组件的维护不仅涉及外观，还要考虑类型、状态和规格。例如按钮可能有主要、次要、危险等用途，以及默认、悬停、焦点、按下、禁用等状态。不同项目需要的组合不同，不必把所有尺寸与状态机械相乘，先支持实际使用场景。

创建单个组件时，先把提示图标、消息文字和关闭按钮组织成正确结构，避免把页面背景或无关文字一起选入：

1. 选中需要复用的图层或容器。
2. 在上方工具栏创建组件，或右键选择“创建组件”；Windows也可以使用Ctrl+Alt+K。
3. 检查图层面板中的组件标识与层级，确认整个提示条成为一个组件。

可以在右侧面板为组件添加说明，让协作者和开发人员在标注相关位置了解用途。提示条的说明可写“用于页面内的操作反馈；消息可换行；关闭只移除此提示，不撤销操作”，比“这是提示组件”更有帮助。

如果多个独立对象各自需要成为组件，使用批量创建：

1. 选择需要分别创建为组件的对象或容器。
2. 点击工具栏组件按钮旁的下拉入口。
3. 选择“创建多个组件”，再检查生成结果与对象边界。

3.6 组合变体，用属性描述差异

变体适合管理同类组件的不同状态或规格。消息提示条的成功、提示和警告可以采用共同结构，通过“类型”属性区分；每条消息的具体句子通常属于内容，不必为“保存成功”和“上传成功”各建一个变体。

先理解两个概念：属性是变化维度，例如类型、尺寸或状态；值是该维度的选项，例如类型中的成功、提示、警告。组件名称中的斜线可以帮助组织层级，但有层级名称不等于已经设置好变体属性。

1. 选中希望组合的相似组件，先在画布中整理它们的顺序与间距。
2. 使用“创建组件变体”将其放入同一组件集。
3. 为组件集的差异维度命名，例如“类型”和“尺寸”。
4. 给每个变体设置对应值，确认没有两项使用完全相同的属性组合。
5. 创建一个实例，在右侧切换属性，检查能否找到需要的状态。

实例中的文本修改、图标替换或显隐，可以结合组件属性处理。若需要在两个状态之间制作原型交互，还要考虑独立对象与事件连接；不要把视觉上的显隐变化直接当成已经配置好可播放交互。

3.7 发布资源库，在使用文件中接收更新

样式与组件可以发布到团队资源库。可以只发布样式，也可以与组件一起发布；发布前检查名称、说明与试用结果，确保团队成员知道这些资源适用于什么场景。

1. 打开左侧组件面板，进入团队资源库。
2. 找到当前文件的发布入口。
3. 检查待发布样式和组件列表及其变化，填写必要说明。
4. 发布后，在另一份试用文件中启用该库，从组件面板拖入实例，并为图层应用相应样式。

已有资源发生变化时，先在源文件修改主组件或样式，再发布更新。使用文件收到提示后，可在资源库的更新区域查看变化，选择应用相应项目或全部更新；未接收前，不能仅因源文件已改就认为其他文件也同步了。

给提示条做一次小范围试用：源文件将公共左右间距增加，在同文件实例中观察变化，再发布到资源库，让试用文件接受更新。检查长消息的换行、关闭按钮的位置和已修改的消息内容是否符合预期，之后再推广到更多页面。

4. 样式或组件没有更新，先分清这三种情况

资源没有按预期变化时，反复复制组件往往会增加来源混乱。先定位问题属于“未收到更新”“已局部修改”还是“已失去关联”，再处理。

重置实例可能丢失当前局部调整，操作前先确认哪些差异是有意保留的。删除源库资源也不是让所有旧实例自动消失：团队需要明确替换方案，不能用删除按钮代替组件迁移。

一套能用的组件与样式，应当让另一位设计师找到它、理解用途、放入真实页面，并知道怎样接收更新。先用消息提示条完成这条路径，再扩展到按钮、输入框和卡片，比只追求组件数量更容易保持规则清楚。