这是在流程编辑工具中构建多屏幕流程的完整教程。流程编辑工具中的多屏幕流程是通过导航动作相互连接的一系列屏幕。流程可以保持线性结构，也可以根据用户在早期屏幕上的输入进行分支。本教程将以一个四屏幕的用户引导流程为实例，完整讲解整个过程——创建屏幕、构建内容、配置导航，以及添加条件分支。

本示例使用：

• 一个姓名输入控件，将用户姓名作为变量用于个性化展示。
• 一个单选测验，根据答案决定用户下一步看到哪个页面。
• 两条分支路径，分别针对不同目标受众展示定制化文案。
• 一个付费墙作为最终页面。

同样的模式适用于任何根据用户输入进行个性化内容展示的流程。

更喜欢视频形式？这个快速入门教程将完整演示上述所有步骤：

开始前的准备

• 在 Adapty 看板中创建产品。示例流程使用两个产品——年度订阅和月度订阅。
• 将 Adapty 连接到 App Store 和 Google Play。

1. 设置可复用样式

可复用样式让你只需一次点击，就能在所有屏幕上统一应用字体排版和颜色。颜色样式包含浅色和深色两种变体，因此流程可自动支持两种主题。

详细操作说明请参阅元素样式——可复用样式。

设置样式的步骤如下：

1. 在左侧面板中，打开 Styles Styles 面板。
2. 在 Colors 标签页中，点击 Plus Create style 添加可复用的颜色。对每种颜色，先选择 Light 值，再切换到 Dark 标签页，选择 Dark 值。

3. 在 Text 标签页中，点击已有样式可编辑其字体、字重和大小；点击 Plus Create style 可添加自定义预设。

2. 创建屏幕

流程是由一系列屏幕组成的序列。先配置第一个屏幕的共享基础——布局、背景和安全区域——然后复制该屏幕用于其余部分。这样，每个屏幕都共享相同的基础，只需设置一次即可。

关于屏幕管理的更多内容，请参阅屏幕与图层 — 管理屏幕。

配置屏幕的步骤：

1. 点击第一屏画布的空白区域，打开屏幕设置。
2. 在 System UI 下，关闭 Safe area，让背景和边缘对齐的元素可以延伸至屏幕边缘。
3. 在 Fill 下，选择背景类型并进行配置——例如，设置一张显示在流程每个屏幕后方的 Image Image。
4. 在 Layout 下，将方向设置为 Vertical Vertical，并选择适合你设计的布局方式。

5. 在左侧面板的 Screens 区域，点击第一个屏幕上的三点菜单 Context menu，选择 Duplicate。重复此操作，直到共有四个屏幕——第二条分支路径稍后通过复制第一条来添加。
6. 将每个屏幕重命名以匹配其用途——在本示例中依次为：Welcome、Quiz、Rock path 和 Paywall。

3. 构建引导页面

第一个页面通常决定整体基调——一个标题、一组功能列表，以及一个用于进入后续流程的行动按钮。在本示例中，这就是欢迎页面。

在 Screens 面板中点击 Welcome 页面，然后添加以下元素：

1. 添加主图片。点击 + > Media > Image，上传图片，并根据需要调整边距。

2. 添加标题：点击 + > Text，从已保存的文字样式中选择一种标题样式，然后编辑 Content 字段。

3. 添加功能列表。点击 + > List > Icon Cards，然后编辑每张卡片的图标和标签。

4. 在底部添加一个主导航按钮。该按钮的跳转动作将在导航步骤中配置。

4. 构建输入与测验页面

第二个页面用于收集用户输入。在我们的示例中，它会询问用户姓名，并提供一个单选题，根据用户的作答决定后续跳转路径。

关于输入框和测验的更多内容，请参阅输入与表单和调查与测验。

在 Screens 面板中点击 Quiz 页面，然后添加各元素。页面上的每组内容——介绍、问题 + 输入框、问题 + 测验——各自放在一个垂直堆叠容器中，使相关元素在视觉上保持整体感。

1. 添加引导页的标题和正文。点击 + > Text > H1 添加标题，点击 + > Text > Body 添加说明文案。
2. 将引导页内容分组。点击 + > Layout > Vertical Stack，将新建的堆叠组拖到图层树顶部，再将 H1 和正文拖入其中。

3. 添加第一个问题和输入框。点击 + > Text 添加问题标题，然后点击 + > Inputs > Text 添加输入框。
4. 在 Design 标签页中设置输入框的 Element ID——在本示例中为 name。这样该值就会作为变量暴露出来，供其他屏幕引用。

5. 将标题和输入框按照与介绍部分相同的方式组合到垂直堆叠中。
6. 添加第二个问题和测验。点击 + > Text 添加标题，然后点击 + > Quiz 并选择一个布局预设，例如 Icon Options。配置选项——在本示例中为 Rock 和 Hip hop。
7. 以相同的方式将标题和测验组合到垂直堆叠中。
8. 设置选项 ID。选择每个测验选项，打开 Interactions 选项卡，并设置其 Element ID。这些 ID 将在后续的条件导航中被引用。

9. 将测验切换为单选模式：点击画布空白区域打开 Screen settings，向下滚动到 Selectable Groups，点击测验组的名称，并将类型设置为 Single choice。

10. 在底部添加一个主按钮——这是触发分支跳转的”下一步”按钮。

5. 构建第一个分支路径

每个路径页面都为特定目标受众定制内容。在我们的示例中，摇滚路径包含以摇滚为主的内容——播放列表、艺人和推荐。

关于变量的更多内容，请参阅变量。

构建页面的步骤：

1. 在 Screens 面板中，点击 Rock path 屏幕。
2. 添加标题。将光标定位到 Content 字段中需要显示个性化内容的位置，点击变量图标 ，然后打开 Elements 标签页。选择包含输入框的屏幕——在本示例中为 Quiz——再选择输入框的值变量。选择器会将其解析为 <elementId>.value——在本示例中为 name.value。运行时，标题将根据用户输入的内容动态更新。

3. 将正文内容作为额外文本元素添加，并针对该路径的目标受众进行调整。
4. 在底部添加一个主按钮。

6. 构建第二个分支路径

路径屏通常共用同一套布局——只有文案不同。复制第一个路径屏并更新内容即可。

操作步骤：

1. 在 Screens 面板中，选中第一个路径屏，按 ⌘D / Ctrl+D 复制。副本会出现在屏幕列表末尾。
2. 重命名副本——在本示例中命名为 Hip hop path——并将其拖到列表中的正确位置，使其紧邻被复制的屏幕。

3. 为另一个目标受众更新正文内容。个性化标题仍然有效——变量会自动保留。

7. 构建付费墙

最后一个界面是付费墙——用户可以在此订阅。有关付费墙机制的完整说明，请参阅创建基础付费墙界面。以下是该说明的精简版本。

在 Screens 面板中点击 Paywall 界面，然后添加以下元素：

1. 在顶部添加一个 Horizontal Stack，并在其中添加一个 Close 按钮。Close 预设已预先配置好。
2. 添加主图、标题（使用与路径界面相同的个性化变量），以及作为辅助文案的副标题。

3. 添加产品：点击 + > Products，选择 Vertical List。在 Design 标签的下拉菜单中为每张卡片分配一个产品。
4. 点击默认产品的卡片，启用 Set as default product，这样页面加载时该产品会自动预选。

5. 添加购买按钮。点击 + > Buttons，选择一个预设。在 Interactions 标签页中，点击 Add trigger > On tap > Add action，将 Action 设置为 Purchase，Product 设置为 products.selectedProduct。

6. 添加底部链接。点击 + > Buttons > Links——该行包含 Restore Purchases、Terms of Use 和 Privacy Policy。Restore 链接已预配置。对于 Terms 和 Privacy，在 Content 字段中选中各链接文本，点击格式工具栏中的链接图标，然后粘贴 URL。

8. 连接各屏幕之间的导航

屏幕之间不会自动互相连接。使用 On tap 触发器和 Navigate to 动作，将每个屏幕的主按钮与其下一个屏幕关联起来。若屏幕需要根据用户输入进行分支，则改用 Conditional action。

有关导航和条件动作的更多信息，请参阅导航与交互和动作 — 条件动作。

以下是为示例流程连接导航的操作步骤：

1. 从引导页面进行静态导航。 打开 Welcome 界面，选中主按钮，切换到 Interactions 标签页。点击 Add trigger > On tap > Add action，将 Action 设置为 Navigate to，然后选择下一个界面——在本例中为 Quiz 界面。

2. 测验的条件跳转。 打开 Quiz 界面，选中 Next 按钮，添加 On tap 触发器并设置条件动作。按如下方式配置 IF/ELSE 规则：
   • 在变量选择器中，打开 Elements 标签页，选取 Quiz 界面，然后选择 quiz.selectedOptionId。
   • 使用 Equals 运算符，与某个选项的 ID 进行比较——在本示例中为 Rock 选项。
   • IF 条件匹配，触发 Navigate to 并选择第一条路径界面。
   • ELSE，触发 Navigate to 并选择第二条路径界面。

3. 从每个分支路径到付费墙的静态导航。 在每个路径页面上重复步骤 1 的操作，将付费墙设为目标。

后续步骤

• 保存并发布你的流程。
• 将流程添加到版位，开始向用户展示。
• 如需针对不同目标受众使用不同流程（而非在流程内部分支），可创建目标受众的市场细分，并在版位页面为其分配不同流程。