创建基础付费墙页面

这是最常见的付费墙模板。你可以将其作为独立页面使用,也可以放在多页面流程的末尾。 标准付费墙页面包含标题、价值描述、功能列表、产品列表、购买按钮,以及页脚链接(用于恢复购买、使用条款和隐私政策)。

开始之前

1. 设置可复用样式

可复用样式让你只需点击一下,就能在每个页面上应用相同的字体和颜色。每个新流程都自带一组默认文本样式(H1、正文、按钮标签等)——在添加元素之前,先根据你的设计调整好这些样式。同时为整个页面中会用到的品牌颜色添加颜色样式。

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

设置样式的步骤如下:

  1. 在左侧面板中,打开 Styles Styles 面板。
  2. Text 选项卡中,点击已有样式来编辑其字体、字重、大小和颜色。只有在默认样式无法满足需求时,才需要添加新样式。
Editing a default text style in the Styles panel
  1. Colors 选项卡中,点击 Plus Create style,添加计划在整个屏幕中复用的颜色。
Color styles in the Styles panel

2. 设置屏幕布局

屏幕本身是你所有添加内容的容器。先配置好它的布局、背景和内边距,后续添加的元素才能正确排列。

屏幕属性的完整列表,请参阅屏幕与图层 — 屏幕设置

配置屏幕的步骤:

  1. 点击画布空白区域选中屏幕,右侧面板切换为屏幕设置。
  2. System UI 下,关闭 Safe area,让内容延伸到屏幕边缘。
  3. Layout 下,将方向设置为 Vertical Vertical,分布方式设置为 Space evenly
Screen settings with Safe area off and Vertical / Space evenly layout
  1. Fill 下方,选择背景类型——纯色、渐变或图片。本示例使用带有两个色标的 Gradient Gradient
屏幕设置中的渐变填充配置

3. 添加关闭按钮

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

  1. 在画布上,点击 +
  2. 选择 Buttons > Close
Adding the Close button to the screen

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

H1 标题位于屏幕顶部,紧靠关闭按钮。要让两者水平对齐,需将它们放入一个水平堆叠容器中。

添加标题的步骤:

  1. 点击 + > Text > H1
  2. 选中 H1 后,在右侧面板中打开 Design 标签,在 Content 字段中编辑文本内容。
H1 added to the screen with the Content field on the right

将标题与关闭按钮分组:

  1. Layers 面板中,点击关闭按钮图层上的三点菜单 Context menu,选择 Wrap > Wrap in Horizontal Stack
Three-dot context menu on the close button layer showing Wrap in Horizontal Stack
  1. 将 H1 图层拖入新建的水平堆叠中。
Dragging the H1 layer into the new horizontal stack

对齐两个元素:

  1. 调整关闭按钮的大小和 H1 字体大小,使它们在同一行中看起来协调舒适。
  2. 选中水平堆叠后,在右侧面板中设置对齐方式和分布方式,使各元素正确排列。
关闭按钮和 H1 在水平堆叠中对齐

5. 添加价值描述

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

  1. 点击 + > Text > Body
  2. 选中正文元素后,在 Design 标签页的 Content 字段中编辑文本内容。
Body text added below the title row

6. 添加功能特性列表

功能特性列表用于突出显示订阅解锁后包含的内容。每一行包含一个图标、一个功能标题和简短说明。

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

添加功能特性列表的步骤:

  1. 点击 + > List,选择一个列表预设。Icon List 是付费墙最常用的样式。
  2. 选中每一行后,在 Content 字段中编辑标题和说明。
  3. 如需添加或删除行,选中列表并使用 Layers 面板中的行控件进行操作。
带有三行功能列表的图标列表

7. 添加产品列表

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

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

要添加和配置产品,请执行以下操作:

  1. 点击 + > Products,选择一个布局预设。垂直列表(Vertical List)是最常用的。
  2. 在画布上选中每张产品卡片,然后在 Design 标签页的下拉菜单中选择对应产品。下拉菜单会显示 Adapty 看板中配置的所有产品。
  3. 如需更改默认选中项,选中对应卡片,在 Design 标签页中开启 Set as default product
  4. 如需自定义折扣标签,在 Layers 面板中展开产品卡片,选中标签图层,然后在 Content 字段中编辑文字。点击其他卡片上各标签图层旁的眼睛图标 Show 可将其隐藏。
添加产品元素并配置产品卡片

8. 添加购买按钮

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

添加购买按钮的步骤:

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

底部包含使用条款和隐私政策的链接(应用商店要求)以及恢复历史购买的按钮。

添加底部链接的步骤:

  1. 点击 + > Buttons > Links,此操作会添加一行,包含 Restore Purchases、Terms of Use 和 Privacy Policy。
  2. 选择 Terms of Use 链接。在 Interactions 标签页中,Open URL 操作已预先绑定——将您的条款 URL 粘贴到 URL 字段中。
  3. Privacy Policy 链接重复上述操作,填入您的隐私政策 URL。
  4. Restore Purchases 链接保持默认即可,其操作已预先配置好。

如果某个元素的位置感觉偏高或偏低,或者想在任意位置增加间距,可以调整该元素的外边距和内边距。

Footer links with the Open URL action configured

后续步骤