进度指示器

进度指示器用于传达已知或未知进程时间的状态。

设计元素应锚定到帧的底部。

原则

清晰的反馈:进度指示器可提供即时反馈。

一致:所有进度指示器都应采用相同的核心视觉语言,以便用户能够立即识别。

灵活:多种进度指示器和状态可灵活地传达进度。

用法与位置

进度指示器可实时显示进程的状态。

指示可以表示确定性进度,具有已知的进程时间,例如计时器。

或者不确定的进度,处理时间未知,例如加载。

使用不确定性进度指示来显示未知的处理时间,例如加载时间。
如果处理时间未知,请使用确定性指示器。这会给用户带来虚假的进度感。
当有足够的时间或进度可供传达时,一次只显示一个进度指示器。
过度使用进度指示器,或在没有足够的时间和进度可供传达时使用进度指示器。

解剖学

进度条结构

1. 确定进度停止 - 显示明确的终点。
2. 当前进度
3. 未来进度
4. 不确定的处理
5. 线性
6. 圆形

自定义

除了确定性和不确定性进度指示器之外,进度指示器还提供线性、圆形和波浪形变体。

进度条结构

1. 波浪形
2. 线性

所有波浪形和线性进度指示器的变体都具有相同的属性、自定义选项和默认值。下表介绍了这些详细信息。

线性

属性 自定义 默认值
厚度 6 dp
指示器颜色 主要
轨道颜色 轮廓
大小 360 dp

圆形

属性 自定义 默认值
厚度 6 dp
指示器颜色 主要
轨道颜色 轮廓
大小 40 dp