在 Flow Builder 中添加和设置文字与列表样式

只需单击即可添加标题、段落或列表,按品牌风格自定义样式,并使用动态变量为每位用户个性化内容。

设置文字样式

Styles 面板包含预配置的文字样式:H1、H2、H3、Button Label、Body、Caption 和 Small Label。点击任意样式即可编辑其字体系列、字重、字号、对齐方式、装饰效果及其他属性。

当你添加文字元素时,可以从这里设置好的样式中选择一种。

对某个样式的修改会应用到所有使用该样式的文字元素,且对所有屏幕生效。

创建新样式的步骤:

  1. 点击 Palette 打开 Styles 面板。
  2. Text 标签页中,点击 Create style
New text style
  1. 输入名称并配置排版样式——字体系列、字重、对齐方式及其他属性

    自定义字体与内置字体的行为有所不同。请阅读相关指南——部分控件不适用,且每种字体变体需要单独的文件。

    Text style configuration options
  2. 点击 Create

添加文本

添加文本元素的步骤:

  1. 点击左上角的 +,选择 Text,然后从预设或自定义的文本样式中选择一种。
New text
  1. 点击新元素,在右侧 Design 面板的 Content 区域编辑其内容。
  2. 如有需要,在 Design 面板中调整排版属性。或者,在预览中选中文本,通过弹出的工具提示快速自定义样式。
  3. 可选操作:在 DesignInteraction 面板中,你还可以为流程中的组件应用其他可用配置。详情请参阅样式与外观

如果需要在多个屏幕上使用同一个文本元素,可以复制粘贴:选中该元素,按 Ctrl+C(Mac 上按 ⌘+C),切换到另一个屏幕,再按 Ctrl+V(Mac 上按 ⌘+V)粘贴。

文本元素设置

更改部分文本的样式

粗体斜体格式对使用自定义字体的文本无效。如需应用自定义字体的变体,请将每个变体作为单独的字体文件上传,并从 Font family 下拉菜单中选择。

如需仅更改文本元素中某些部分的样式:

  1. Content 部分选中文本元素的某一部分。
  2. 在弹出的工具提示中,更改文本颜色、应用粗体、下划线、斜体或删除线格式,或添加 URL。

预览会立即更新。

编辑文本部分

添加旧价格

旧价格元素会在产品实际价格旁显示一个虚高的”原价”,让折扣一目了然。它会将产品价格乘以你设定的倍数,并自动添加删除线效果。

该元素的内容无需手动编辑。其数值在运行时根据产品的商店价格动态计算,因此货币单位始终与实际价格保持一致。

添加旧价格的步骤:

  1. 点击左上角的 +,选择 Text,然后选择 Old Price
展开了 Text 类别的元素菜单,显示 Old Price 项目
  1. Layers 面板中,将元素拖入产品卡片内。该元素同样适用于已保存为可复用组件的产品卡片。

    Old Price 元素必须放在产品卡片内——价格取自该卡片对应的产品。若放在产品卡片之外,编辑工具将显示”Old price”占位符,而非实际价格。

  2. Design 面板的 Price 区域中,设置 Multiplier。Adapty 会将产品价格乘以该值。例如,默认倍数为 2 时,售价 $12.99 的产品会显示划掉的 $25.98。

    Design panel with the Price section and the Multiplier field for an Old Price element
  3. 如需调整,请设置排版属性。该元素支持与普通文本相同的样式。

画布上的产品卡片,显示旧价格被划掉并紧邻实际价格

如需划掉另一个产品的实际价格——例如在年度订阅卡片上显示月度计划的价格——请改用文本元素和变量来构建价格行。详见显示带折扣徽章的划掉价格

字体属性

每个文本元素和文本样式都共享同一套字体控制选项:

  • Font family:选择字体——内置字体或自定义字体

    不同设备预装的字体各不相同,同一字体在不同设备上的渲染效果也可能有差异。如果设备上没有所选字体,系统将使用默认字体(SF Pro / Roboto)。若要在所有设备上统一显示同一字体,请上传自定义字体

  • Weight:设置字体粗细。

WeightBoldItalic 控件不适用于自定义字体,无论是在 Styles 面板、Design 面板的排版部分、内联工具栏还是文本格式提示框中设置均如此。如需应用自定义字体的变体,请将每个变体作为单独的字体文件上传,然后从 Font 下拉菜单中选择对应的字体。

  • Size:设置字体大小(以像素为单位)。
  • Color:设置文字颜色。
  • Line height:设置行间距,或保持 Auto
  • Alignment:设置水平对齐(左对齐、居中、右对齐)和垂直对齐(顶部、居中、底部)。
  • Decoration:添加下划线或删除线。
  • Truncate:限制显示的行数,超出部分将被截断。当内容因动态变量或本地化而长度不一时,此功能非常实用。

流程支持两种将文本转为可点击链接的方式,根据文本的用途选择即可:

  • 内联链接 — 适用于正文中嵌入的 URL,例如段落中的”了解更多”引用。始终在应用内浏览器中打开。
  • Open URL 操作 — 适用于独立的点击目标,例如服务条款按钮。可在应用内浏览器或外部浏览器中打开。

将文本元素的部分内容转换为链接:

  1. Content 区域中选中文本。
  2. 在格式化工具提示中,点击链接图标。
  3. 将目标 URL 粘贴到弹出框中。
高亮显示链接按钮的格式化工具提示

打开 URL 操作

主要文章:操作

要将整个按钮变成链接:

  1. 添加一个 Button,或使用 Links 预设——这是一个包含 Restore / Terms of Service / Privacy Policy 按钮的现成行。

    The Links preset on canvas with Terms of use, Restore, and Privacy policy buttons
  2. Layers 面板中选中该按钮,然后在右侧面板中打开 Interactions 标签页。

Terms of Use button selected in the Layers panel, with the nested text element visible but unselected
  1. 设置 Open URL 动作的目标地址。

    空的 Open URL 动作会阻止预览和发布

    Open URL action configuration in the Interactions panel

添加条件文本

条件文本会根据条件改变文本元素的显示内容。例如,当用户选择年度套餐时,标题可以显示一条消息;选择月度套餐时,则显示另一条消息。条件文本的工作方式类似于条件可见性,但它会替换内容,而不是显示或隐藏元素。

设置条件文本的步骤:

  1. 在画布上选择一个文本元素。
  2. Design 面板的 Content 部分,选择 Conditional
在设计面板中将内容设置为'条件'
  1. 构建 if 条件。从 CustomProductsElements 标签页中选择属性,设置运算符,并输入要匹配的值。有关属性类型的详细信息,请参阅条件可见性
  2. then 下,输入条件为真时显示的文本。富文本格式的使用方式与普通文本相同。如需插入变量,点击 { } Add variable
  3. else 下,输入当没有条件匹配时显示的备用文本。
  4. (可选)点击 + Add else/if 添加更多条件,每个条件对应各自的文本。

要编辑其他语言的条件文本,请在编辑器底部切换当前语言环境。请先在 Localizations 面板中添加语言——详见在 Flow Builder 中添加语言环境

Setting up conditional text with if, then, and else branches

添加列表

列表元素是由各个条目组件组成的容器。如果只需要在正文中添加简单的项目符号列表或编号列表,请使用文本元素,并通过 Design 面板设置所需格式。

  1. 点击左上角的 +,选择 List,然后选择一个列表模板。

  2. 在右侧的 Design 面板中编辑列表条目,或上传图片作为条目标记。

Add list element