样式与外观
右侧面板中的 Design 标签页用于控制各元素的视觉外观。可用属性因元素类型而异，但大多数元素共享一些通用样式选项。
有关大小、间距和定位，请参阅布局与定位。
告诉 AI 编辑器”让付费墙呈现深色高端风格”，它会一次性重新调整所有元素的样式——填充、圆角、字体和间距。
可见性
Visibility 开关用于控制该元素是否显示在屏幕上。
- Show（默认）：元素始终可见。
- Conditional：仅在满足特定条件时元素才可见。详情请参阅条件可见性。
- Hide：元素始终隐藏。用于临时从流程中移除某个元素而不删除它。
填充
Fill 部分用于设置元素的背景。如需填充整个屏幕，请改为设置屏幕背景。
填充由一个或多个图层组成。每个图层具有以下类型之一：
- 纯色 ：使用取色器或输入十六进制色值。调整不透明度可使背景呈半透明效果。
- 渐变 ：两个或多个色标。拖动色标可调整过渡效果，使用方向滑块设置角度。若要修改某个色标，在 Stops 下编辑对应行；若要添加色标，点击渐变条或 Stops 旁的 。图层行中的滑块可同时调整所有色标的不透明度。
- 图片 或视频 ：以图片或视频作为背景。
要管理图层：
- 要添加图层，点击 Fill 旁边的 。
- 要更改图层类型，点击其色块并选择类型。
- 要调整图层顺序，拖拽对应行。
- 要删除图层，点击该行中的 。
上层会覆盖下层，因此位于图片上方的半透明层可以为其着色。输入框和日期/时间选择器仅显示最底层。
如需在其他元素中复用某个图层，或为其创建深色版本，请将其保存为颜色样式。如需将图片与其着色层一起复用，请创建一个包含多个图层的样式。
边框
边框默认关闭。点击右侧面板中 Border 旁边的 可添加边框。如需移除边框，点击 Border 标题旁边的 。
添加边框后，可配置以下选项：
若要为边框添加渐变效果，请将带有渐变图层的颜色样式应用于 Color。
圆角
圆角部分用于控制边框圆角半径。
- 圆角滑块：为四个角设置统一的圆角半径
- 单独设置切换 ：启用后可为每个角单独设置不同的圆角半径
效果
点击 Effects 旁边的加号按钮 可添加一个或多个视觉效果：
- Drop shadow：元素背后的阴影
- Inner shadow：元素边界内部的阴影
- Layer blur：对元素及其子元素进行模糊处理
你可以为同一个元素叠加多个效果。点击可见性图标 可临时禁用某个效果。
动画
点击 Animation 旁边的 按钮，即可添加动画效果。目前仅支持 Pulse 动画——元素会周期性地放大缩小，以吸引用户注意。
通过以下参数配置 Pulse 动画：
| 参数 | 说明 |
|---|---|
| Scale amount (%) | 元素相对于原始大小的缩放比例 |
| Duration (ms) | 单次动画循环的时长 |
| Delay between loops (ms) | 两次循环之间的停顿时长 |
| Shadow color | 脉冲阴影效果的颜色 |
| Shadow size (px) | 脉冲阴影的大小 |
预览动画
编辑工具默认显示静态界面——动画效果不会播放，需要手动开启。有两种方式：
- 点击设备预览上方的 Toggle animations 按钮，可以开启或关闭当前界面的动画效果。开启后动画会持续循环播放，再次点击即可停止。只有当前界面包含至少一个动画时，该按钮才会显示。
- 打开界面的上下文菜单（界面图层旁边的三点图标），选择 Play Animation。
外观
- Opacity：范围从 0%（完全透明）到 100%（完全不透明）
- Rotation：输入角度值来旋转元素
排版属性（文本元素）
文本元素会显示一个排版部分，包含以下控件：
字体
另请参阅：自定义字体
点击字体下拉菜单 可打开字体选择器。它有两个标签页：
- Styles：列出项目中已保存的文字样式。选择某个样式，即可一次性应用其全部排版设置。
- Fonts：列出所有可用的字体系列。可通过搜索或滚动找到所需字体。内置字体在不同设备上的渲染效果可能存在差异——如需保持一致的渲染效果，请上传自定义字体。
若要将当前字体设置保存为新的文字样式，请点击标签页旁边的 。该元素随即会使用新样式。
字号与字重
- Weight：从下拉菜单中选择字重
- Size：从下拉菜单中选择字号，或手动输入自定义值
文字大小在不同平台上的渲染效果有所不同：Android 会根据系统字体大小设置对流程文字进行缩放，而 iOS 则按照你设置的精确大小渲染。请在 Android 上以较大的系统字体尺寸测试你的布局——在 iOS 上显示正常的文字，在 Android 上可能会换行或溢出。
颜色
点击颜色色块，输入十六进制值或使用调色板。如需应用颜色样式，请在 Styles 标签页中选择。文本仅显示样式的纯色图层。
对齐方式
两组对齐控件：
- 水平方向：左对齐 、居中 、或右对齐
- 垂直方向：顶部对齐 、居中 、或底部对齐
装饰
- 无 ：无装饰（默认）
- 下划线 ：为文字添加下划线
- 删除线 ：为文字添加删除线
截断
启用截断功能，可在文本超出 Max Lines 设置时自动裁切。这在支持多语言时非常实用：如果译文比原文长，截断可以防止布局被撑乱。
选中文本元素后，画布上方会出现一个内联工具栏。通过它可以快速设置字体、字重、大小和对齐方式，无需在右侧面板中滚动查找。
状态专属设置（交互元素）
交互元素支持多种视觉状态。选中此类元素后，右侧面板会出现 States 区域。切换不同状态，即可为每个状态单独配置视觉属性。
每个状态都可以覆盖任意视觉属性——填充、边框、字体颜色、透明度等。
可选择状态
主要文章：可选择元素
属于可选组的元素（测验选项、产品、标签页、切换开关和复选框）默认提供两种状态：
- Default：元素的正常外观
- Selected：用户选中该选项时的外观。可覆盖填充色、边框颜色和文字颜色等属性，以高亮显示当前选中项
要在不可交互时为可选元素设置样式，需手动添加第三种状态。打开 States settings 并添加 Disabled state。
Disabled 状态由条件驱动。选中该状态后，点击 Set conditions 来定义元素在运行时何时变为禁用状态，例如当必填字段为空时。
输入状态
输入字段提供以下额外状态：
- Default：正常、未聚焦的外观
- Active：字段已聚焦，可以输入内容
- Invalid：输入的值未通过验证
- Disabled：字段不可交互
其他具有状态样式的元素
部分元素的状态样式不遵循标准的默认 / 已选中 / 已禁用模式：
- 进度指示器步骤 — 每个步骤有三种状态：Completed、Current 和 Upcoming。
- 轮播图圆点 — 两种颜色变体：Color 用于非活跃圆点，Active Color 用于当前幻灯片的圆点。
可复用样式
主要文章：可复用样式
为了在整个流程中保持文本和颜色属性的一致性，可以将它们保存为可复用样式。编辑某个样式后，所有使用该样式的元素和页面都会随之更新。