English 中文TürkçeРусскийFrançaisTiếng ViệtEspañol日本語

可复用样式

创建样式，用于存储文字设置或填充内容（如颜色、渐变或背景图片），并在多个屏幕的元素间复用。编辑样式时，所有使用该样式的元素和屏幕都会同步更新。

每个流程都有自己独立的样式集合。

打开 Styles 面板，可以创建、浏览和编辑流程样式：

  • Text styles：排版设置（字体、字重、字号）。
  • Color styles：填充效果，如纯色、渐变和图片。单个颜色样式可以分别为浅色模式和深色模式设置不同版本。

文字样式

主要文章：文字内容

The Text tab of the Styles panel with the default text styles H1, H2, H3, Button Label, and Body

文字样式存储一组排版设置——字体系列、字重、字号、行高和字间距。每个流程模板都包含默认预设，你也可以创建自定义样式。

要创建文字样式：

  1. 打开 Styles 面板。
  2. 在面板标题栏中，点击 Create style。
  3. 将 Type 设置为 Text，输入名称，并配置排版设置。
  4. 点击 Create。

如需将文本元素的当前排版设置保存为新的文本样式，点击字体选择器选项卡旁边的 ，该元素将自动应用新样式。

如需应用文本样式，选中文本元素，然后在 Typography 部分的字体下拉菜单中选择对应样式。

要编辑文本样式，请在 Styles 面板中点击对应条目，修改设置，然后点击 Save。

H2 文本样式的编辑表单，包含名称字段、排版设置以及 Delete style、Cancel 和 Save 按钮

颜色样式

The Colors tab of the Styles panel with four color styles, each with a light and a dark swatch

颜色样式是一种已保存的填充：可以是纯色、渐变、图片、视频，或它们的组合。如果你启用了深色主题，还可以为每种主题单独设置版本。样式条目中的数字表示当前使用该样式的元素和页面数量。

创建颜色样式

创建颜色样式的步骤如下：

  1. 打开 Styles 面板。
  2. 在面板标题栏中，点击 Create style。
  3. 将 Type 设置为 Color，并输入名称。
  4. 配置样式。你可以修改图层的颜色或填充类型，也可以在其上方添加更多图层。
  5. 点击 Save。
The Create style form with Type set to Color and a white solid color in the Light and Dark sections

要将填充图层或颜色的当前值转换为样式，请点击其色板，然后点击 Custom 与 Styles 标签页旁边的 图标，再点击 Save。填充图层或颜色现在将使用该样式。

编辑颜色样式

编辑颜色样式的步骤如下：

  1. 打开 Styles 面板。
  2. 选择 Colors 标签页。
  3. 点击某个样式条目。
  4. 每个版本可包含多个图层。点击色块，根据填充类型设置图层：
The Edit style form of a color style with an image layer in the Light and Dark sections

纯色

  1. 设置颜色：输入十六进制值，或点击色块进行选择。
  2. 用滑块设置不透明度。
  3. 点击 Save。
The Edit style form with a different solid color in the Light and Dark sections, and the color picker of the Dark color

渐变色

  1. 选择 Gradient 填充类型。
  2. 设置色标、色标颜色及 Direction。
  3. 点击 Save。
Tip

若要让背景图上方的文字元素更易于阅读，可将图片边缘调暗。在图片上方添加渐变图层，从该边缘的不透明色标渐变至另一侧的透明色标。

The Edit style form with a gradient in the Light and Dark sections, and the gradient picker of the Dark gradient with the Direction slider and the Stops list

图片与视频

Image 或 Video 元素无法为深色主题使用不同的文件。请改为创建一个容器，并将其背景设置为颜色样式。在样式的每个版本中，设置图片或视频图层：

  1. 选择 Image 或 Video 填充类型。
  2. 为底部工具栏中选定的语言环境上传源文件。如果已有文件，可点击 Replace 进行替换。
  3. 点击 Save。
Tip

要为图片或视频添加色调效果，请在其上方叠加一个半透明颜色图层。

The Edit style form with a different image in the Light and Dark sections, and the image picker of the Dark image

多层样式

The Edit style form with an image layer in the Light section, and a semi-transparent color layer over an image layer in the Dark section

每个颜色样式版本都可以包含多个图层。你可以使用多层样式来创建更复杂的视觉效果，例如带色调的图片。

要添加图层，请点击样式条目。然后在 Properties、Light 或 Dark 区域中，点击 按钮。新图层会显示在现有图层的上方。如需调整图层顺序，拖动对应行即可。设置好新图层后，点击 Save。

并非所有图层在应用该样式的所有位置都会显示。某些图层仅在将样式应用于特定属性或元素时才可见：

  • 填充（输入框和选择器）：仅底层生效，其他层忽略。
  • 填充（所有其他元素）：每一层均生效。
  • 边框（输入框和选择器）：仅支持单一纯色或渐变色，图片和视频层忽略。
  • 边框（所有其他元素）：支持纯色和渐变色，图片和视频层忽略。
  • 文字颜色：仅纯色层生效，渐变、图片和视频层忽略。如果某个版本没有纯色层，该模式下文字将无颜色，不可见。
  • 图标、阴影及其他颜色：不支持多层样式，只能应用单层纯色样式。

应用颜色样式

要将颜色样式应用于某个元素，请点击其填充层、文本颜色、边框颜色或图标颜色的色块。通过点击 Styles 标签页并选择对应样式条目，将静态值替换为样式。如果没有符合需求的样式，请将当前值保存为样式。

要将某个样式应用到页面上的多个元素，可以向 AI Editor 发起请求，例如：Apply the Card background style to all cards。若需要统一设置样式并将其应用到整个流程，请使用 flow-generator skill。

您无法将颜色样式应用于图片或视频元素，因为这些元素没有填充属性。请改为创建一个容器，并设置其背景。

管理样式

在 Styles 面板中：

  • 要重命名样式，点击对应条目，修改 Name 字段，然后点击 Save。
  • 要复制样式，右键点击对应条目并选择 Duplicate。
  • 要删除样式，点击对应条目，然后点击 Delete style。当删除某个元素正在使用的样式时，需选择一个替代样式。
  • 要调整样式的排列顺序，直接拖动条目上下移动即可。
  • 要将样式复制到另一个流程，选中对应条目（按住 Shift 点击可多选），然后按 ⌘C / Ctrl+C。在另一个流程中打开相同的标签页（Text 或 Colors），按 ⌘V / Ctrl+V 粘贴。

深色模式

主要文章：深色模式

A screen previewed in light and dark mode

颜色样式可以为深色模式单独设置一个值。当用户的设备切换到深色模式时，流程会使用该值。

要使用深色值，请先为流程添加深色主题，然后修改深色值，使各样式在深色模式下呈现不同的效果。