创建基础付费墙页面
这是最常见的付费墙模板。你可以将其作为独立页面使用,也可以放在多页面流程的末尾。 标准付费墙页面包含标题、价值描述、功能列表、产品列表、购买按钮,以及页脚链接(用于恢复购买、使用条款和隐私政策)。
开始之前
- 在 Adapty 看板中创建产品。
- 将 Adapty 连接到 App Store 和 Google Play。
1. 设置可复用样式
可复用样式让你只需点击一下,就能在每个页面上应用相同的字体和颜色。每个新流程都自带一组默认文本样式(H1、正文、按钮标签等)——在添加元素之前,先根据你的设计调整好这些样式。同时为整个页面中会用到的品牌颜色添加颜色样式。
详细说明请参阅元素样式——可复用样式。
设置样式的步骤如下:
- 在左侧面板中,打开 Styles
Styles面板。 - 在 Text 选项卡中,点击已有样式来编辑其字体、字重、大小和颜色。只有在默认样式无法满足需求时,才需要添加新样式。
- 在 Colors 选项卡中,点击
PlusCreate style,添加计划在整个屏幕中复用的颜色。
2. 设置屏幕布局
屏幕本身是你所有添加内容的容器。先配置好它的布局、背景和内边距,后续添加的元素才能正确排列。
屏幕属性的完整列表,请参阅屏幕与图层 — 屏幕设置。
配置屏幕的步骤:
- 点击画布空白区域选中屏幕,右侧面板切换为屏幕设置。
- 在 System UI 下,关闭 Safe area,让内容延伸到屏幕边缘。
- 在 Layout 下,将方向设置为 Vertical
Vertical,分布方式设置为 Space evenly。
- 在 Fill 下方,选择背景类型——纯色、渐变或图片。本示例使用带有两个色标的 Gradient
Gradient。
3. 添加关闭按钮
关闭按钮用于关闭付费墙。Close 预设已预先配置好,无需额外设置操作。
- 在画布上,点击 +。
- 选择 Buttons > Close。
4. 添加标题并与关闭按钮配对
H1 标题位于屏幕顶部,紧靠关闭按钮。要让两者水平对齐,需将它们放入一个水平堆叠容器中。
添加标题的步骤:
- 点击 + > Text > H1。
- 选中 H1 后,在右侧面板中打开 Design 标签,在 Content 字段中编辑文本内容。
将标题与关闭按钮分组:
- 在 Layers 面板中,点击关闭按钮图层上的三点菜单
Context menu,选择 Wrap > Wrap in Horizontal Stack。
- 将 H1 图层拖入新建的水平堆叠中。
对齐两个元素:
- 调整关闭按钮的大小和 H1 字体大小,使它们在同一行中看起来协调舒适。
- 选中水平堆叠后,在右侧面板中设置对齐方式和分布方式,使各元素正确排列。
5. 添加价值描述
在标题下方添加一行简短的正文,向用户说明订阅所带来的权益。
- 点击 + > Text > Body。
- 选中正文元素后,在 Design 标签页的 Content 字段中编辑文本内容。
6. 添加功能特性列表
功能特性列表用于突出显示订阅解锁后包含的内容。每一行包含一个图标、一个功能标题和简短说明。
完整的列表预设,请参阅元素 — 列表。
添加功能特性列表的步骤:
- 点击 + > List,选择一个列表预设。Icon List 是付费墙最常用的样式。
- 选中每一行后,在 Content 字段中编辑标题和说明。
- 如需添加或删除行,选中列表并使用 Layers 面板中的行控件进行操作。
7. 添加产品列表
产品列表展示用户可选择的订阅选项。Products 元素会为分配到该页面的每个产品渲染一张卡片,其中一张卡片会自动标记为默认选项。
关于产品管理的更多信息,请参阅设置购买。
要添加和配置产品,请执行以下操作:
- 点击 + > Products,选择一个布局预设。垂直列表(Vertical List)是最常用的。
- 在画布上选中每张产品卡片,然后在 Design 标签页的下拉菜单中选择对应产品。下拉菜单会显示 Adapty 看板中配置的所有产品。
- 如需更改默认选中项,选中对应卡片,在 Design 标签页中开启 Set as default product。
- 如需自定义折扣标签,在 Layers 面板中展开产品卡片,选中标签图层,然后在 Content 字段中编辑文字。点击其他卡片上各标签图层旁的眼睛图标
Show可将其隐藏。
8. 添加购买按钮
购买按钮会为用户当前选中的产品发起应用内购买。products.selectedProduct 变量始终指向屏幕上当前选中的产品。
添加购买按钮的步骤:
- 点击 + > Buttons,选择一个按钮预设。
- 选中该按钮后,在右侧面板中打开 Interactions 标签页。
- 点击 Add trigger > On tap,然后点击 Add action。
- 将 Action 设置为 Purchase,将 Product 设置为
products.selectedProduct。
9. 添加底部链接
底部包含使用条款和隐私政策的链接(应用商店要求)以及恢复历史购买的按钮。
添加底部链接的步骤:
- 点击 + > Buttons > Links,此操作会添加一行,包含 Restore Purchases、Terms of Use 和 Privacy Policy。
- 选择 Terms of Use 链接。在 Interactions 标签页中,Open URL 操作已预先绑定——将您的条款 URL 粘贴到 URL 字段中。
- 对 Privacy Policy 链接重复上述操作,填入您的隐私政策 URL。
- Restore Purchases 链接保持默认即可,其操作已预先配置好。
如果某个元素的位置感觉偏高或偏低,或者想在任意位置增加间距,可以调整该元素的外边距和内边距。