流程与付费墙编辑工具的主界面包含所有必要工具，可用于添加视觉元素、编辑其属性以及调整用户流程逻辑。本文介绍界面的各个区域：其功能及位置。

项目控制与常用快捷操作（顶部工具栏）

• 关闭 ：退出编辑工具并返回流程页面。
• 应用名称 ：显示该流程所属的应用。
• 所有流程 ：打开该应用的所有流程列表。
• 流程状态：流程名称左侧的图标表示当前的流程状态：
  • 草稿
  • 发布中（旋转加载图标）
  • 失败
  • 或 上线 。
• 重命名流程：点击流程名称即可重命名。多个流程可以同名——建议为每个新流程取唯一名称。
• 视图模式切换：在设计视图 与远程配置视图 之间切换。
• 撤销/重做：点击箭头图标可撤销 或重做 流程改动，也可使用 ⌘Z / Ctrl+Z 进行撤销。
• 保存草稿 / 发布：点击 Save draft 可保存当前进度而不上线（⌘ / Ctrl+S）。点击下拉按钮 可访问 Publish 按钮。只有发布后，才能将流程添加到版位。

预览区域（中央）

工作区中央区域模拟你的流程在移动设备上的实际显示效果。

• 点击某个元素即可选中并编辑其属性。若要选中容器内的子元素，请先点击容器，再点击子元素。
• 若要编辑页面本身的属性，请点击所有元素以外的空白区域，或在 Screens and Layers 面板中选择该页面。
• 若要调整元素的排列顺序，请在 Screens and Layers 面板中上下拖动对应条目。

设备预览上方的活动屏幕工具栏

• Screen name — 显示当前屏幕名称的标签。
• Toggle animations — 开启或关闭元素动画预览；开启后动画会持续播放，直到手动关闭。仅在当前屏幕包含至少一个动画时显示。不影响真机上的动画效果。
• Add element — 在当前屏幕打开元素库。等同于”屏幕与图层”面板顶部的 + 按钮——在面板折叠时尤为实用。

查看控件（底部工具栏）

底部工具栏中的工具用于控制预览效果。

• Device：选择可用的 iPhone 或 Android 手机型号，以更改视口尺寸和设备外框。
• Screen orientation：在竖屏 和横屏 模式之间切换，预览不同方向下的流程效果。
• Light theme 和 Dark theme：在各主题下预览流程。这两个按钮仅在已添加深色主题时显示。
• Locale：选择语言区域，以预览本地化内容下的流程效果。
• View options：开启或关闭设备边框及安全区域参考线。

屏幕与元素属性（右侧面板）

屏幕设置与布局

未选中任何元素时，右侧面板允许你调整当前流程屏幕的属性，包括以下内容：

• 与系统 UI 的交互（例如是否显示状态栏）
• 自动布局规则
• 背景（颜色、图片或视频）
• 内边距大小
• 垂直滚动行为

如果界面包含某些元素（例如互动问卷），此列表将扩展并显示相关属性。

元素属性

选中某个元素后，右侧面板允许你修改其样式和交互属性。

设计属性

Design 选项卡用于配置所选元素的视觉外观和布局：

• Visibility（可见性）：显示或隐藏元素。启用 Conditional 可见性可设置规则，决定元素在何时显示。
• Position（位置）：选择相对定位、绝对定位或固定定位。
• Content（内容）（仅文本元素）：编辑元素的文本内容、插入变量并管理本地化。
• Typography（排版）（仅文本元素）：配置字体、字重、字号、颜色、对齐方式、修饰效果和截断方式。
• Spacing（间距）：设置元素的外边距和内边距。
• Effects（效果）：添加投影、内阴影或图层模糊。
• Animation（动画）：添加动态效果（如脉冲动画），并配置其时长和强度。
• Appearance（外观）：调整不透明度和旋转角度。
• Layout（布局）：选择布局方向（垂直或水平），并设置子元素的分布方式。

交互属性

Interactions 选项卡用于定义用户与所选元素交互时发生的事件。每个交互由一个触发器和一个或多个动作组成：

• 触发器定义何时发生某件事——例如，On Tap（用户点击该元素）。
• 动作定义发生什么——例如，跳转到另一个页面或修改某个变量的值。可以为同一个触发器添加多个动作，使它们按顺序依次执行。

可以为同一个元素添加多个触发器，从而按顺序执行多个动作。

左侧面板

左侧面板的功能会根据当前激活的按钮而变化。你可以在以下选项之间切换：

• 屏幕与图层
• 添加元素
• 产品
• 样式
• 变量
• 本地化
• AI 编辑器

屏幕与图层

图层 按钮用于打开屏幕与图层面板（打开 Flow & Paywall Builder 时默认显示）。

该面板以树形结构展示每个屏幕的图层。屏幕上的每个元素都是一个图层，容器元素的子元素会嵌套在其内部。你可以通过拖放来调整图层的顺序。

元素选择

点击加号 按钮后，左侧面板会显示可用 UI 元素及其变体列表。点击某个条目，即可将其作为新图层添加到当前屏幕。

产品

产品 按钮用于打开产品列表，显示流程中每个屏幕分配了哪些产品。你可以在此视图中管理流程的产品和优惠。

样式

Styles 按钮可打开 Styles 面板。

创建样式以存储文本设置或填充内容（如颜色、渐变或背景图片），并在多个屏幕的元素中复用。该面板包含用于文本样式的 Text 标签页和用于颜色样式的 Colors 标签页。

变量

括号 按钮用于打开变量面板。

在这里，您可以为流程创建和管理变量。在运行时，SDK 会将变量占位符替换为实际数据：应用传入的自定义标签值、产品价格、本地化字符串等。

变量分为两个选项卡：

• 自定义：由您创建的变量，分为两种：
  • 普通变量：其值通过流程中的 Set variable 动作进行更改。
  • 自定义标签：其值来自您的应用，通过 Adapty SDK 传入。
• 元素：由用户交互决定的值——例如测验答案、开关状态或选项卡选择。

产品变量——价格、名称及其他产品数据——不会列在此面板中。请在编辑文本元素时直接引用它们。

使用变量可以：

• 绑定文本：显示动态内容，而不是静态字符串。
• 展示应用数据：通过自定义标签显示应用中的数据，例如玩家的金币余额。
• 控制可见性：根据条件显示或隐藏元素（例如，仅向符合免费试用资格的用户显示免费试用时间轴）。
• 与用户交互：获取用户输入字段中的数据，例如表单或问卷。

本地化

Localizations 面板将流程中所有可本地化的内容汇总在一张表格中，按页面组织，每种语言区域对应一列：

• 文本，包括条件文本的每个分支以及输入框的占位符。
• 每个 Show alert 动作的标题和消息内容。
• 每个 Open URL 动作的目标地址。
• 图片和视频，支持按语言设置不同文件。

在此面板中，您可以：

• 添加新语言区域并直接在页面上编辑本地化字符串。
• 使用 AI 进行翻译。
• 为你的流程选择默认语言区域。
• 跟踪翻译状态——每行都会标记为 Done、Missing，操作 URL 则标记为 Default。
• 按屏幕或状态筛选，或通过关键词搜索。
• Import 或 Export 内容，支持整个流程或单个语言区域，以便在 Adapty 外部批量翻译。

AI 编辑器

点击闪光 按钮可打开 AI 编辑器聊天窗口。

用日常语言描述你想做的改动，Adapty 会自动重写、重新排版或重新排列当前页面。Adapty 还会告诉你具体改了什么，一键即可还原。

如果想匹配某个已有设计，可以上传截图，无需文字描述。