右侧面板中的 Design 标签页用于控制每个元素的视觉外观。可用属性因元素类型而异，但大多数元素共享通用的样式选项。

尺寸与间距

可见性

Visibility 开关用于控制元素是否在屏幕上显示。

• Show（默认）：元素始终可见。
• Conditional：仅在满足特定条件时元素才可见。详情请参阅条件可见性。
• Hide：元素始终隐藏。当你想临时从流程中移除某个元素而不删除它时，可使用此选项。

尺寸

每个元素都有 Width 和 Height 控件，支持三种模式：

• Fill：拉伸以占满父容器的所有可用空间
• Hug：收缩以适应元素内容
• Fixed：为尺寸设置精确的像素值

间距

Spacing 部分以盒模型的形式展示两个层级：

• Margin：元素与相邻元素之间的间距。无论设置多大，都不会超出父容器的边界。
• Padding：元素边框与其内容之间的间距。

可以为每一侧单独设置数值。

填充

Fill 部分用于控制元素的背景。共有四种填充类型：纯色、渐变、图片和视频。

使用此属性可为整个屏幕设置主图或主视频。

• 纯色 。使用颜色选择器、输入十六进制值，或指定项目级颜色样式。调整不透明度可使背景呈半透明效果。
• 渐变 。添加包含两个或更多色标的渐变填充。拖动色标可调整过渡效果，修改渐变角度可控制渐变方向。

• Image 或 Video 。将图片/视频设置为元素的背景。

边框

边框默认关闭。点击右侧面板中 Border 旁边的 可添加边框。若要移除边框，点击 Border 标题旁边的 。

添加边框后，可配置以下选项：

• Color：使用拾色器、输入十六进制值，或指定项目级颜色样式。调整透明度可使边框呈半透明效果。
• Width：边框粗细，单位为像素。

圆角

圆角部分用于控制边框圆角半径。

• 圆角滑块：为四个角设置统一的圆角半径
• 单独设置切换 ：启用后可为每个角单独设置不同的圆角半径

效果

点击 Effects 旁边的加号按钮 可添加一个或多个视觉效果：

• Drop shadow：元素背后的阴影
• Inner shadow：元素边界内的阴影
• Background blur：模糊背景
• 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：从下拉菜单中选择字号，或手动输入自定义值

颜色

点击色块可打开颜色选择器。你可以输入十六进制值、使用调色板，或从可复用样式中选择。拖动不透明度滑块可让文字呈现半透明效果。

对齐方式

两组对齐控件：

• 水平方向：左对齐 、居中 、或右对齐
• 垂直方向：顶部对齐 、居中 、或底部对齐

装饰

• 无 ：无装饰（默认）
• 下划线 ：为文字添加下划线
• 删除线 ：为文字添加删除线

截断

启用截断功能，可在文本超出 Max Lines 设置时自动裁切。这在支持多语言时非常实用：如果译文比原文长，截断可以防止布局被撑乱。

状态专属设置（交互元素）

交互元素支持多种视觉状态。选中此类元素后，右侧面板会出现 States 区域。切换不同状态，即可为每个状态单独配置视觉属性。

每个状态都可以覆盖任意视觉属性——填充、边框、字体颜色、透明度等。

可选状态

属于可选组的元素（测验选项、产品、标签页、试用切换开关）默认提供两种状态：

• Default：元素的正常外观
• Selected：用户选中该选项后的外观。可覆盖填充色、边框颜色和文字颜色等属性，以突出显示当前激活的选项 要在不可交互时为可选元素设置样式，需手动添加第三种状态。打开 States settings 并添加 Disabled state。

Disabled 状态由条件驱动。选中该状态后，点击 Set conditions 来定义元素在运行时何时变为禁用状态，例如当必填字段为空时。

输入状态

输入字段提供以下额外状态：

• Default：正常、未聚焦的外观
• Active：字段已聚焦，可以输入内容
• Invalid：输入的值未通过验证
• Disabled：字段不可交互

其他具有状态样式的元素

部分元素的状态样式不遵循标准的默认 / 已选中 / 已禁用模式：

• 进度指示器步骤 — 每个步骤有三种状态：Completed、Current 和 Upcoming。
• 轮播图圆点 — 两种颜色变体：Color 用于非活跃圆点，Active Color 用于当前幻灯片的圆点。

可复用样式

左侧边栏中的 Styles 面板可让你定义适用于整个流程的可复用样式。目前支持两种样式类型：文本样式和颜色样式。若要启用深色模式支持，必须使用颜色样式。

文字样式

文字样式存储了一套完整的排版设置，包括字体系列、字重、字号、行高、对齐方式和装饰效果。每个流程模板都包含默认预设，你也可以创建自定义样式。

创建文字样式的步骤：

1. 打开 Styles 面板，选择 Text 标签页。
2. 点击 Create style。
3. 输入名称并配置排版设置。
4. 点击 Create。

如需应用文字样式，请选中一个文字元素，然后在 Typography 区域的字体下拉菜单中选择对应样式。

颜色样式

颜色样式是可以在整个流程中引用的命名颜色。每种颜色样式都有名称（如”Primary text”或”Brand”）、十六进制值，以及显示有多少元素引用了它的使用计数。

创建颜色样式：

1. 打开 Styles 面板，选择 Colors 标签页。
2. 点击 Create style。
3. 输入名称并选择颜色。 当你更新某个颜色样式时，所有引用该样式的元素都会自动更新。

深色模式

如有需要，你可以为每种颜色样式添加两个变体——一个用于浅色模式 ，一个用于深色模式 。SDK 会根据设备当前的配色方案自动应用对应的变体。 要在编辑工具中预览深色模式，请使用底部工具栏中的主题切换按钮 。