在 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。

预览会立即更新。

编辑文本部分

字体属性

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

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

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

  • Weight:设置字体粗细。

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

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

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

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

将文本元素的一部分变为链接:

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

打开 URL 操作

主要文章:操作

要将整个按钮变成链接:

  1. 添加一个按钮——或使用 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