创建基础付费墙页面

这是最常用的付费墙模板。可以将其作为独立页面使用，也可以放在多屏流程的末尾。

标准付费墙界面包含标题、价值描述、功能列表、产品列表、购买按钮，以及用于恢复购买、使用条款和隐私政策的页脚链接。

开始之前

• 在 Adapty 看板中创建产品。
• 将 Adapty 连接到 App Store 和 Google Play。

1. 设置可复用样式

可复用样式让你只需点击一次，就能在所有屏幕上统一应用相同的字体和颜色。每个新流程都内置了一套默认文字样式（H1、正文、按钮标签等），在开始添加元素之前，先根据你的设计调整好这些样式。同时，为整个屏幕中会用到的品牌色添加颜色样式。

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

设置样式的步骤：

1. 在左侧面板中，打开 Styles 面板。
2. 在 Text 选项卡上，点击现有样式以编辑其字体、字重、大小和颜色。仅在默认样式无法满足需求时才添加新样式。

3. 在 Colors 选项卡上，点击 Create style，添加您计划在整个屏幕中复用的颜色。

2. 设置页面布局

页面本身充当所有内容的容器。请先配置其布局、背景和内边距，以便后续添加的元素能正确排列。

有关页面属性的完整列表，请参阅页面与图层 — 页面设置。

配置页面的步骤：

1. 点击画布空白区域以选择屏幕，右侧面板将切换到屏幕设置。
2. 在 System UI 下，关闭 Safe area，使内容延伸至屏幕边缘。
3. 在 Layout 下，将方向设置为 Vertical ，分布方式设置为 Space evenly。

4. 在 Fill 下，选择背景类型——纯色、渐变或图片。本示例使用带有两个色标的 Gradient 。

3. 添加关闭按钮

关闭按钮用于关闭付费墙。Close 预设已预先配置好，无需额外设置操作。

1. 在画布上，点击 +。
2. 选择 Buttons > Close。

4. 添加标题并与关闭按钮配对

H1 标题位于屏幕顶部，紧靠关闭按钮。要让它们水平对齐，需要将两者包裹在一个水平容器中。

添加标题的步骤：

1. 点击 + > Text > H1。
2. 选中 H1 后，在右侧面板中打开 Design 标签页，在 Content 字段中编辑文字内容。

将标题与关闭按钮编为一组：

1. 在 Layers 面板中，点击关闭按钮图层的三点菜单 ，选择 Wrap > Wrap in Horizontal Container。

2. 将 H1 图层拖入新的水平容器中。

对齐两个元素：

1. 调整关闭按钮的大小和 H1 的字体大小，使它们在同一行内排列整齐。
2. 选中水平容器后，在右侧面板中设置对齐方式和分布方式，让元素正确对齐。

5. 添加价值描述

在标题下方添加一行简短的正文，向用户说明订阅所带来的权益。

1. 点击 + > Text > Body。
2. 选中正文元素后，在 Design 标签页的 Content 字段中编辑文本内容。

6. 添加功能列表

功能列表用于突出展示订阅解锁后所包含的权益。每一行包含一个图标、功能标题和简短描述。

完整的列表预设，请参阅元素 — 列表。

添加功能列表的步骤：

1. 点击 + > List，选择一个列表预设。Icon List 是付费墙中最常见的选择。
2. 选中每一行后，在 Content 字段中编辑标题和描述。
3. 若需添加或删除行，请选中列表，然后在 Layers 面板中使用行控件进行操作。

7. 添加产品列表

产品列表展示用户可选择的订阅选项。Products 元素会为分配给该屏幕的每个产品渲染一张卡片，其中一张卡片会自动标记为默认选项。

关于管理产品的更多信息，请参阅设置购买。

要添加和配置产品：

1. 点击 + > Products，选择一个布局预设，其中 Vertical List 最常用。
2. 在画布上选择每个产品卡片，然后在 Design 标签页的下拉菜单中选择对应产品。已添加到当前屏幕 Products 面板的产品会优先显示，其余商品目录中的产品则显示在 Other products 下方。
3. 如需修改默认选中项，选中目标卡片后在 Design 标签页中启用 Set as default。
4. 如需自定义折扣徽章，在 Layers 面板中展开产品卡片，选中徽章图层，并在 Content 字段中编辑其文本。点击其他卡片上各徽章图层旁的眼睛图标 可隐藏对应徽章。

8. 添加购买按钮

购买按钮会为用户当前选中的产品发起应用内购买。products.selectedProduct 变量始终指向当前页面上用户所选的产品。

添加购买按钮的步骤：

1. 点击 + > Buttons，选择一个按钮预设。
2. 选中该按钮后，在右侧面板中打开 Interactions 标签页。
3. 点击 Add trigger > On tap，然后点击 Add action。
4. 将 Action 设置为 Purchase，将 Product 设置为 products.selectedProduct。

9. 添加页脚链接

页脚包含服务条款和隐私政策的链接（应用商店要求），以及一个用于恢复历史购买的按钮。

添加页脚链接的步骤：

1. 点击 + > Buttons > Links，此操作会添加一行，包含 Restore Purchases、Terms of Use 和 Privacy Policy。
2. 在 Layers 面板中，选择 Terms of Use 按钮。打开 Interactions 标签页——Open URL 操作已自动附加。点击该操作并输入目标 URL。
3. 对 Privacy Policy 按钮重复以上步骤，输入您的隐私政策 URL。
4. 保留 Restore Purchases 按钮不变，其操作已预先配置好。

后续步骤

• 保存并发布您的流程。
• 将流程添加到版位，开始向用户展示。