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

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

• 关闭 ：退出编辑工具并返回流程页面。
• 应用名称 ：显示该流程所属的应用。
• 所有流程 ：打开该应用的所有流程列表。
• 流程状态：流程名称左侧的图标表示当前的流程状态：
  • 草稿
  • 发布中（旋转加载图标）
  • 失败
  • 或 上线 。
• 重命名流程：点击流程名称即可重命名。多个流程可以同名——建议为每个新流程取唯一名称。
• 视图模式切换：在设计视图 与远程配置视图 之间切换。
• 撤销/重做：点击箭头图标可撤销 或重做 流程改动，也可使用 ⌘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：在竖屏 和横屏 模式之间切换，预览不同方向下的流程效果。
• Color scheme：在浅色 和深色 模式之间切换，查看设计在不同主题下的适配效果。
• Locale：选择语言区域，预览本地化内容下的流程效果。
• View options：开启或关闭设备边框和安全区域参考线。

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

屏幕设置与布局

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

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

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

元素属性

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

设计属性

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

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

交互属性

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

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

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

左侧面板

左侧面板的功能会根据当前激活的按钮而变化。可选项包括：

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

屏幕与图层

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

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

元素选择

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

产品

产品 按钮用于打开产品列表，显示流程中每个屏幕分配的产品。

此列表为只读。如需为某个屏幕分配产品，请添加一个产品元素并在右侧面板中进行配置。如需创建或编辑产品，请使用 Adapty 看板中的 Products 页面。

已保存样式

样式 按钮可打开已保存样式面板。

在这里，您可以编辑和管理全局样式。如果流程中有多个元素使用了相同的字体排版或颜色，可以将其保存为全局样式，之后只需单击即可复用。

目前，流程与付费墙编辑工具支持两种全局样式——字体样式和颜色样式。每种颜色样式均可选择为深色模式单独设置一个值。

变量

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

在这里，你可以创建和管理流程中的变量。在运行时，SDK 会将变量占位符替换为实际值——包括用户属性、产品价格、本地化字符串等内容。

变量分为两个标签页：

• Custom（自定义）：通过操作创建和控制的变量。
• Elements（元素）：由用户交互决定的值——例如测验答案、开关状态或标签页选择。

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

变量的用途：

• 绑定文本：显示动态内容，而非静态字符串。
• 控制可见性：根据条件显示或隐藏元素（例如，为高级用户隐藏升级按钮）。
• 与用户交互：访问用户输入字段中的数据，例如表单或测验。

本地化

本地化视图用于管理流程中的可翻译内容。它以表格形式展示所有文本字符串和媒体元素，按屏幕分组，每列对应一种语言。在此视图中，您可以：

• 直接在界面中添加新语言区域并编辑本地化字符串。
• 为你的流程选择默认语言区域。
• 追踪翻译状态——每行均标记为 Done 或 Missing。
• 按屏幕筛选，或仅显示缺失的翻译。
• 使用 Import 或 Export 功能批量导出/导入内容，在 Adapty 外部进行翻译。

AI 编辑器

点击闪光图标 按钮，即可打开 AI 编辑器对话框。

用自然语言描述你想做的修改，Adapty 会自动重写、重新排版或重新排列当前屏幕的内容。Adapty 还会告诉你具体改了什么，一键即可撤销。