向付费墙添加条件文本

此模板使用条件文本为不同方案突出显示不同的功能列表。界面上展示两个产品——例如 Pro 和 Pro+——用户选择不同产品时会显示对应的功能列表。其中一个产品被标记为默认选项，因此界面初次加载时会显示该产品对应的条件文本。

开始之前

1. 设置屏幕布局

屏幕是所有内容的容器。在本示例中，背景使用的是图片，但纯色或渐变效果的设置方式完全相同。

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

配置屏幕的步骤如下：

  1. 点击画布空白区域以选中屏幕。
  2. 在 System UI 下，禁用 Safe area，使背景延伸到屏幕边缘。
  3. 在 Fill 下，选择背景类型并进行配置。本示例使用 Image Image，纯色或渐变的配置方式相同。
  4. 在 Layout 下，将方向设置为 Vertical Vertical，并配置间距和对齐方式，使元素从顶部向下排列，内容填充剩余空间。
包含图片填充和垂直布局的屏幕设置

2. 添加关闭按钮

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

  1. 在画布上，点击 +。
  2. 选择 Buttons > Close。
Close button added to the screen

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

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

添加标题的步骤：

  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。
Close button wrapped in a horizontal stack
  1. 将 H1 图层拖入新建的水平堆叠中。
Close button and H1 grouped in a horizontal stack

要对齐这两个元素：

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

4. 添加产品列表

添加用户可以选择的产品，并将其中一个设为默认，这样页面在首次加载时就有一个有意义的初始状态。

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

添加和配置产品的步骤：

  1. 点击 + > Products，选择一个布局预设。竖向列表适合这个模板。
  2. 在画布上选中每个产品卡片，然后在 Design 标签页的下拉菜单中选择对应产品。
  3. 选中你想默认选中的卡片（例如 Pro+），在 Design 标签页中启用 Set as default product。
Two products on the screen with one marked as default

5. 为第一个产品添加功能列表

第一个功能列表用于描述默认产品，仅在用户选中第一个产品时显示。

关于条件可见性的更多说明，请参阅条件可见性。

按以下步骤添加并配置功能列表：

  1. 点击 + > List，选择一个紧凑列表预设。Icon List 很适合用于付费墙。
  2. 选中每一行后，在 Content 字段中编辑标题，描述第一个产品的功能特点。
  3. 保持列表选中状态，打开 Design 标签页。在 Visibility 下，选择 Conditional Conditional。
  4. 设置条件，使该列表仅在第一个产品被选中时显示。匹配 products.selectedProduct.prod_title 变量。对于 Value，点击变量图标 {}，选择第一个产品卡片，再选择其 prod_title 属性——比较结果将解析为该产品的标题。
Image not found: paywall-features-list-1.gif

6. 为第二个产品添加功能列表

对第二个产品重复相同的操作。这两个列表是互斥的——同一时间只有一个可见，具体显示哪个取决于当前选中的产品。

添加第二个功能列表的步骤：

  1. 点击 + > List，选择相同的紧凑预设以保持视觉一致性。
  2. 编辑每一行，填写第二个产品的功能描述。
  3. 在 Visibility 下，选择 Conditional Conditional，设置与第 5 步相同的条件，但将 Value 变量选择器指向第二个产品卡片的 prod_title。
Second feature list with conditional visibility tied to the second product

7. 添加购买按钮

购买按钮会针对用户选择的产品发起应用内购买。按钮标签会显示所选产品的价格，因此当用户切换方案时，标签会随之更新。

关于”购买”动作的详细说明，请参阅动作 — 购买。

添加并配置购买按钮的步骤如下：

  1. 点击 + > Buttons，选择一个按钮预设。
  2. 选中按钮后，打开 Design 标签页，将光标定位到 Content 字段。点击变量图标 Variable icon，选择 products.selectedProduct，再选择 prod_price 属性——完整变量解析为 products.selectedProduct.prod_price。在标签的其他文字中包裹该变量，例如 Subscribe for {prod_price}。
Purchase button with the selected product price variable in the label
  1. 切换到 Interactions 标签页，点击 Add trigger > On tap > Add action。
  2. 将 Action 设置为 Purchase，将 Product 设置为 products.selectedProduct。
Purchase button with the selected product price variable in the label

使用条款、隐私政策和恢复购买按钮位于主内容下方。

添加页脚链接的步骤：

  1. 点击 + > Buttons > Links，这会在图层树末尾添加一行，包含 Restore Purchases、Terms of Use 和 Privacy Policy。
  2. 选择 Terms of Use 链接，打开 Interactions 标签页，将您的条款 URL 粘贴到 Open URL 字段中。
  3. 对 Privacy Policy 链接重复上述操作，填入您的隐私政策 URL。
  4. Restore Purchases 链接保持不变，其操作已预先配置好。
屏幕底部的页脚链接

后续步骤