进度指示器与加载动画

Progress 分类提供两种元素类型——一种用于在多屏幕流程中显示步骤进度,另一种用于原位加载状态指示。

进度指示器

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

进度条样式

Progress indicator variants

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

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

将步骤与屏幕对应

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

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

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

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

步骤状态

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

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

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

加载动画

Loader variants

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

该分类提供三种模板:

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

加载器需要通过触发器来控制显示和隐藏。请打开 Interactions 标签页来设置相关逻辑——例如,在用户提交测验后显示加载器。