流程编辑工具中的多屏幕流程是由导航动作连接的一系列屏幕。流程可以保持线性，也可以根据用户在前面屏幕上的输入进行分支跳转。本教程将以一个四屏幕用户引导流程为例，完整演示整个过程——创建屏幕、构建内容、连接导航以及添加条件分支。

示例包含以下内容：

• 一个姓名输入，将用户姓名作为变量用于个性化内容。
• 一个单选测验，根据答案决定用户进入哪个下一屏。
• 两条分支路径，分别为不同目标受众定制文案。
• 一个付费墙作为最终屏幕。

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

更喜欢视频格式？以下快速入门教程从头到尾演示了相同的流程：

开始前的准备

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

1. 设置可复用样式

可复用样式让你只需单击一次，即可在每个屏幕上统一应用排版和颜色。颜色样式包含浅色和深色两种变体，因此流程可自动支持这两种主题。

详细说明请参阅样式与外观——可复用样式。

设置样式的步骤：

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

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

2. 创建屏幕

流程是一组屏幕的序列。先为第一个屏幕配置共用基础（布局、背景和安全区域），再通过复制来生成其余屏幕。这样每个屏幕都能共享同一基础，只需设置一次即可。

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

按以下步骤设置屏幕：

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

5. 在左侧面板的 Screens 部分，点击第一个屏幕上的三点菜单 ，选择 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 Container，将新容器拖到图层树顶部，再把 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 Container，并在其中放入 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. 将 Button > Links 模板添加到屏幕中。该模板包含三个页脚链接：Restore Purchases、Terms of Use 和 Privacy Policy。 Restore 链接已预配置完成。如需配置其他链接，请选中相应按钮元素，打开 Interactions 选项卡，并为 Open URL 操作设置目标地址。

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

屏幕之间不会自动建立连接。使用 On tap 触发器和 Navigate to 动作，将每个屏幕的主按钮与下一个屏幕关联起来。如果某个屏幕需要根据用户输入进行分支跳转，则使用条件动作替代。

有关导航和条件动作的详细说明，请参阅导航与交互和动作 — 条件动作。

以下是示例流程的导航连接方式：

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

2. 从测验进行条件导航。 打开 Quiz 页面，选中 Next 按钮，添加 On tap 触发器并设置 Conditional action。配置 IF/ELSE 规则：
   • 在变量选择器中，打开 Elements 标签，选择 Quiz 页面，并选中 quiz.selectedOptionId。
   • 使用 Equals 运算符，与其中一个选项的 ID 进行比较——在本示例中为 Rock 选项。
   • IF 条件匹配，触发 Navigate to 并选择第一条路径页面。
   • ELSE，触发 Navigate to 并选择第二条路径页面。

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

后续步骤

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