在 Flow Builder 中添加文本和列表并设置样式
只需单击即可添加标题、段落或列表,设置样式以匹配您的品牌,并使用动态变量为每位用户个性化内容。
设置文本样式
Styles 面板包含预配置的文本样式:H1、H2、H3、Button Label、Body、Caption 和 Small Label。点击任意样式可编辑其字体族、字重、大小、对齐方式、装饰及其他属性。
当你添加文本元素时,可以从这里设置的样式中进行选择。
对某个样式的修改会应用于所有使用该样式的文本元素,包括所有屏幕。
创建新样式的步骤:
- 点击
打开 Styles 面板。 - 在 Text 标签页中,点击 Create style。
添加文本
添加文本元素的步骤:
- 点击左上角的 +,选择 Text,然后从预配置或自定义的文本样式中选择一种。
- 点击新元素,然后在右侧 Design 面板的 Content 区域编辑其内容。
- 如需调整,可在 Design 面板中修改排版属性。或者,在预览中选中文本,通过弹出的工具提示快速自定义样式。
- 可选操作:在 Design 和 Interaction 面板中,还可以对流程中的组件应用其他可用配置。详情请参阅样式元素。
如果需要在多个屏幕上使用相同的文本元素,可以复制粘贴:选中元素,按 Ctrl+C(Mac 上按 ⌘+C),切换到另一个屏幕,再按 Ctrl+V(Mac 上按 ⌘+V)粘贴。
更改部分文字的样式
粗体和斜体格式对使用自定义字体的文字无效。如需应用自定义字体的不同字重或变体,请将每个变体作为独立字体文件上传,然后从 Font family 下拉菜单中选择。
如需仅更改文字元素中部分内容的样式:
- 在 Content 区域中选中文字元素的某一部分。
- 在弹出的工具提示中,更改文字颜色,或应用粗体、下划线、斜体、删除线格式,也可以添加 URL。
预览会立即更新。
字体属性
每个文本元素和文本样式都共享同一套字体控制选项:
-
Font family:选择字体——内置字体或自定义字体。
不同设备内置的字体各不相同,同一字体在不同设备上的渲染效果也可能存在差异。如果设备上没有所选字体,系统将使用默认字体(SF Pro / Roboto)。若要在所有设备上保持字体一致,请上传自定义字体。
-
Weight:设置字体粗细。
粗细、加粗和斜体控件不适用于自定义字体,无论是在 Styles 面板、Design 面板的排版部分、内联工具栏还是文本部分格式化提示中设置均如此。要应用自定义字体的变体,请将每个变体作为单独的字体文件上传,然后从 Font 下拉菜单中选择合适的字体。
- Size:以像素为单位设置字体大小。
- Color:设置文本颜色。
- Line height:设置行间距,或保持 Auto。
- Alignment:设置水平(左对齐、居中、右对齐)和垂直(顶部、中间、底部)对齐方式。
- Decoration:应用下划线或删除线。
- Truncate:限制显示的行数,超出限制的文本将被截断。当内容长度因动态变量或本地化而不同时,此选项非常实用。
添加链接
流程支持两种方式将文本转换为可点击的链接,请根据文本的用途选择:
- 内联链接 — 适用于正文中嵌入的 URL,例如段落里的”了解更多”引用。始终在应用内浏览器中打开。
- Open URL 操作 — 适用于独立的可点击元素,例如服务条款按钮。可以在应用内或外部浏览器中打开。
内联链接
将文本元素的一部分变为链接:
- 在 Content 部分选中文本。
- 在格式化工具提示中,点击链接图标。
- 将目标 URL 粘贴到弹出框中。
打开 URL 操作
主要文章:操作
要将整个按钮变成链接:
-
添加一个按钮——或使用 Links 预设,这是一个包含 Restore / Terms of Service / Privacy Policy 按钮的现成行。
-
在 Layers 面板中选择该按钮,然后在右侧面板中打开 Interactions 标签页。
添加条件文本
条件文本可以根据特定条件改变文本元素的显示内容。例如,当用户选择年度计划时,标题显示一条消息;当用户选择月度计划时,则显示另一条消息。条件文本的工作原理与条件可见性类似,区别在于它是替换内容,而不是显示或隐藏元素。
设置条件文本的步骤如下:
- 在画布上选中一个文本元素。
- 在 Design 面板的 Content 部分,选择 Conditional。
- 构建 if 条件。从 Custom、Products 或 Elements 标签页中选择一个属性,设置运算符,并输入要匹配的值。有关属性类型的详细信息,请参阅条件显示。
- 在 then 下,输入条件为真时显示的文本。富文本格式的使用方式与常规文本相同。要插入变量,请点击 { } Add variable。
- 在 else 下,输入当没有条件匹配时显示的备用文本。
- (可选)点击 + Add else/if 添加更多条件,每个条件可设置各自的显示文本。
要编辑其他语言的条件文本,请在编辑器底部切换当前语言环境。请先在 Localizations 面板中添加语言,详见在 Flow Builder 中添加语言环境。
添加列表
列表元素是由各个条目组件组成的容器。如果只是在正文中添加简单的项目符号列表或编号列表,请使用文本元素,并通过 Design 面板设置所需格式。
-
点击左上角的 +,选择 List,然后选择一个列表模板。
-
在右侧的 Design 面板中编辑列表条目,或上传图片作为条目标记。