构建个性化用户引导流程
流程编辑工具中的多屏幕流程，是一系列通过导航动作串联起来的屏幕。流程可以保持线性，也可以根据用户在早期屏幕上的输入进行分支。本教程以四屏用户引导流程为示例，完整演示整个操作过程——创建屏幕、构建内容、配置导航，以及添加条件分支。
示例包含：
- 一个姓名输入，将用户姓名作为变量用于个性化内容。
- 一个单选测验，根据答案决定用户接下来看到哪个页面。
- 两条分支路径，针对不同目标受众提供定制化文案。
- 一个付费墙作为最终页面。
同样的模式适用于任何根据用户输入来个性化内容的流程。
偏好视频格式？这个快速入门教程将带你完整走一遍整个流程：
开始前的准备
- 在 Adapty 看板中创建产品。示例流程使用两个产品——年度订阅和月度订阅。
- 将 Adapty 连接到 App Store 和 Google Play。
1. 设置可复用样式
可复用样式让你只需点击一下，就能在所有界面上应用统一的字体和颜色。颜色样式同时包含浅色和深色两个变体，因此流程会自动支持两种主题。
详细说明请参阅元素样式 — 可复用样式。
设置样式的步骤如下：
- 在左侧面板中，打开 Styles 面板。
- 在 Colors 标签页，点击 Create style 添加需要复用的颜色。每种颜色需选择一个 Light 值，然后切换到 Dark 标签页，再选择一个 Dark 值。
- 在 Text 标签页，点击已有样式可编辑其字体、字重和字号；点击 Create style 可添加自定义预设。
2. 创建屏幕
流程是一系列屏幕的集合。先配置好第一个屏幕的共享基础——布局、背景和安全区域——然后复制它来创建其余屏幕。这样，每个屏幕都共享相同的基础，你只需设置一次。
有关管理屏幕的更多信息，请参阅屏幕与图层 — 管理屏幕。
按以下步骤设置屏幕：
- 点击第一个屏幕画布的空白区域，打开屏幕设置。
- 在 System UI 下，关闭 Safe area，让背景和对齐边缘的元素可以延伸到屏幕边缘。
- 在 Fill 下，选择背景类型并进行配置——例如，设置一张 Image ，作为整个流程每个屏幕的底层背景。
- 在 Layout 下，将方向设为 Vertical ，并选择适合你设计的排列方式。
- 在左侧面板的 Screens 区域，点击第一个屏幕的三点菜单 ，选择 Duplicate。重复此操作，直到共有四个屏幕——第二条分支路径稍后通过复制第一条来添加。
- 为每个屏幕重命名以反映其用途——在本示例中依次为：
Welcome、Quiz、Rock path和Paywall。
3. 构建引导介绍页面
第一个页面通常奠定整体基调——包含标题、功能列表以及引导用户进入后续流程的行动按钮。在我们的示例中，这就是欢迎页面。
在 Screens 面板中点击 Welcome 页面，然后添加以下元素：
- 添加主图。点击 + > Media > Image，上传图片，并根据需要调整边距。
- 添加标题：点击 + > Text，从已保存的文字样式中选择一种标题样式，然后编辑 Content 字段。
- 添加功能列表。点击 + > List > Icon Cards，然后编辑每张卡片中的图标和标签。
- 在底部添加一个主导航按钮。该按钮将在导航步骤中绑定对应的操作。
4. 构建输入和问答界面
第二个界面用于收集用户输入。在我们的示例中，它会询问用户姓名，以及一道单选题，用户的选择将决定后续展示哪条路径。
在 Screens 面板中点击 Quiz 界面，然后添加元素。界面上的每个内容组——介绍、问题+输入框、问题+单选题——都放在各自的垂直容器中，以便相关元素在视觉上保持整齐。
- 添加引导标题和正文。点击 + > Text > H1 添加标题，点击 + > Text > Body 添加说明文字。
- 将引导内容分组。点击 + > Layout > Vertical Container 新建一个容器，将其拖到图层树的顶部，再把 H1 和正文拖入其中。
- 添加第一个问题和输入框。点击 + > Text 添加问题标题，再点击 + > Inputs > Text 添加输入字段。
- 在 Design 标签页中为输入框设置 Element ID——本示例中为
name。设置后，其他屏幕可通过变量引用该值。
- 将标题和输入框用垂直容器组合起来，方式与简介部分相同。
- 添加第二个问题和问答题。点击 + > Text 添加标题，再点击 + > Quiz 并选择一个布局预设，例如 Icon Options。配置选项——在本示例中为
Rock和Hip hop。 - 用同样的方式将标题和问答题用垂直容器组合起来。
- 设置选项 ID。选中每个问答题选项，打开 Interactions 标签，为其设置 Element ID。这些 ID 将在后续的条件导航中引用。
- 将测验切换为单选模式：点击画布空白区域打开 Screen settings，向下滚动找到 Selectable Groups，点击测验组的名称，然后将类型设置为 Single choice。
- 在底部添加一个主按钮——这是触发分支跳转的”下一步”按钮。
5. 构建第一个分支路径
每条路径屏幕都会针对特定目标受众定制内容。在我们的示例中，摇滚路径会展示以摇滚为主的内容——播放列表、艺人和推荐。
如需了解更多变量相关内容，请参阅变量。
要构建屏幕：
- 在 Screens 面板中，点击 Rock path 屏幕。
- 添加标题。将光标置于 Content 字段中需要插入个性化内容的位置，点击变量图标
，然后打开 Elements 标签页。选择包含输入框的屏幕——在本例中为 Quiz——然后选择该输入框的值变量。选择器会将其解析为 <elementId>.value——在本例中为name.value。运行时，标题会随用户输入的内容动态更新。
- 将正文内容作为附加文本元素添加，并根据该路径对应的目标受众进行调整。
- 在底部添加一个主要按钮。
6. 构建第二个分支路径
路径页面通常共用同一个布局，只有文案内容不同。复制第一个路径页面，然后更新其内容即可。
复制并更新的步骤如下：
- 在 Screens 面板中，选中第一个路径页面，按 ⌘D / Ctrl+D 进行复制。副本会出现在页面列表的末尾。
- 重命名副本——在本示例中命名为
Hip hop path——然后将其拖到页面列表中的正确位置，使其紧邻被复制的那个页面。
- 为另一个目标受众更新正文内容。个性化标题仍然有效——变量会自动沿用。
7. 构建付费墙
最后一个界面是付费墙——用户可以在此订阅。关于付费墙机制的完整说明，请参阅创建基础付费墙界面。以下是该说明的精简版本。
在 Screens 面板中点击 Paywall 界面，然后添加以下元素：
- 在顶部添加一个 Horizontal Container，并在其中添加一个 Close 按钮。Close 预设已预先配置好。
- 添加主图片、标题（使用与路径界面相同的个性化变量），以及作为辅助文案的副标题。
- 添加产品：点击 + > Products，选择 Vertical List。在 Design 标签页的下拉菜单中为每张卡片分配产品。
- 点击默认产品的卡片，启用 Set as default product，这样页面加载时该产品会被预先选中。
- 添加购买按钮。点击 + > Buttons，选择一个预设。在 Interactions 标签页中，点击 Add trigger > On tap > Add action，将 Action 设置为 Purchase，Product 设置为
products.selectedProduct。
- 向屏幕添加 Button > Links 模板。该模板包含三个页脚链接：Restore Purchases、Terms of Use 和 Privacy Policy。 恢复链接已预配置好。如需配置其他链接，请选中按钮元素，打开 Interactions 标签页，然后为 Open URL 操作设置目标地址。
8. 连接各屏幕之间的导航
屏幕之间不会自动建立连接。使用 On tap 触发器和 Navigate to 动作，将每个屏幕的主按钮与其下一个屏幕关联起来。如果某个屏幕需要根据用户输入进行分支，则使用条件动作代替。
有关导航和条件动作的更多内容，请参阅导航与交互和动作——条件动作。
按照以下步骤为示例流程连接导航：
- 从介绍页面进行静态导航。 打开 Welcome 页面，选择主按钮，切换到 Interactions 选项卡。点击 Add trigger > On tap > Add action，将 Action 设置为 Navigate to，然后选择下一个页面——在本示例中为 Quiz 页面。
- 从测验页面进行条件跳转。 打开 Quiz 页面，选中 Next 按钮，添加 On tap 触发器并设置 Conditional action。配置 IF/ELSE 规则：
- 在变量选择器中打开 Elements 标签页，选择 Quiz 页面，然后选中
quiz.selectedOptionId。 - 使用 Equals 运算符，与其中一个选项的 ID 进行比较——本例中为 Rock 选项。
- IF 条件匹配，则触发 Navigate to 并选择第一个路径页面。
- ELSE，触发 Navigate to 并选择第二个路径页面。
- 在变量选择器中打开 Elements 标签页，选择 Quiz 页面，然后选中
- 从每个分支路径到付费墙的静态导航。 在每个路径页面上重复步骤 1 的操作，将付费墙设为目标页面。
