进度指示器与加载器

Progress 分类提供两种元素类型——一种用于在多屏流程中显示基于步骤的进度,另一种用于显示原地繁忙状态。

进度指示器

屏幕顶部的进度指示器,设置面板已打开

进度条样式

Progress indicator variants

Progress 元素用于显示用户在多屏流程中的当前位置。该类别提供三种视觉样式:

  • Linear — 单条进度条,随用户前进而填充。
  • Segmented — 每步对应一段独立的进度条,逐步填充。
  • Connectors — 带标签的圆圈通过连线串联(例如,依次显示 Step 1、Step 2、Step 3)。

将步骤与屏幕对应

进度指示器设置面板,包含变体选择器、每屏一段开关和屏幕下拉菜单

默认情况下,进度指示器会追踪流程中的每个屏幕。若只想追踪其中几个屏幕,可在 Screens 下拉菜单中选择。也可以打开想要排除的屏幕,取消勾选 Include screen in progress indicator 复选框。

如果需要更精细地控制步骤数量,可以关闭 One segment per screen 开关。

Warning

步骤位置取决于屏幕列表中的顺序,而非用户实际浏览的顺序。在非线性流程中,指示器显示的步骤编号可能会跳跃或倒退。

步骤状态

Step-level settings panel with ID, Screens, and Completed/Current/Upcoming state tabs

每个步骤都有三种状态——Completed、Current 和 Upcoming。在进度指示器中选择某个步骤,即可在右侧面板中编辑该状态的样式。使用 Apply changes to all states 可将当前编辑同步到另外两种状态。

修改某个步骤会影响同一指示器内的所有步骤。

布局与定位

进度指示器是一个全局元素,因此无法将其放置在容器内,也无法设置其位置——它默认使用绝对定位。当用户滚动屏幕时,指示器保持固定不动,内容在其下方滚动。

要控制指示器周围的间距,请使用 Spacing 区域中的 Margin 和 Padding 控件,而不是直接移动元素。如果布局显示不正确,可以同时调整指示器及其相邻元素的外边距或内边距。

加载动画

Loader variants

加载动画(Loader) 是一种动态元素,用于提示用户当前正在处理某项任务,例如:正在分析用户的问卷答案以生成个性化方案。

该分类提供三种模板:

  • Spinner — 圆形旋转加载动画。
  • Spinner with label — 带说明文字的圆形旋转加载动画(例如:“Loading…”)。
  • Loader — 随进度填充的横向进度条。
Warning

对于加载动画,唯一可用的操作触发器是 On Screen Appear。如果要在用户点击某个元素时显示加载动画,请将加载动画的 Visibility 设置为 Hide。然后,选择应触发加载动画的元素,并添加一个在 On Tap 时运行的 Show element 操作。

加载器的Duration设置控制其填充或旋转动画的时长,而非页面的显示时长。On screen appear触发器配合Navigate to screen动作会立即跳转,不会等待加载器完成。若要让加载页面最多显示 5 秒,可在该动作的页面跳转中添加Delay。若需要更长的等待时间,可添加一个Timer,并配置On timer end触发器跳转至下一页面。Timer 时长以整秒为单位设置。

将计时器上的 Visibility 保持为 Show,以便触发其 On timer end 事件。若想隐藏计时器,可将其文字颜色设为完全透明,或与背景颜色保持一致。