进度指示器

进度指示器用于表达某个过程的进行状态,无论其所需时间是否已知。

Glimmer 进度指示器

设计原则

反馈清晰:即时提供反馈。

风格一致:所有进度指示器应共享一致的核心视觉语言,让用户立即认出。

表达灵活:通过多种形态与状态,适应不同的进度表达需求。

使用与布局

进度指示器实时显示任务状态。

当所需时间已知时,可以显示确定进度,例如计时器。

当所需时间未知时,可以显示不确定进度,例如加载过程。

对加载等耗时未知的过程,使用不确定进度指示器。
建议:对加载等耗时未知的过程,使用不确定进度指示器。
对耗时未知的过程使用确定进度指示器,以免向用户传递虚假的进展。
避免:对耗时未知的过程使用确定进度指示器,以免向用户传递虚假的进展。
在持续时间或进展足以值得展示时,每次只显示一个进度指示器。
建议:在持续时间或进展足以值得展示时,每次只显示一个进度指示器。
过度使用进度指示器,或在持续时间很短、没有足够进展可展示时使用它。
避免:过度使用进度指示器,或在持续时间很短、没有足够进展可展示时使用它。

组件构成

确定进度、不确定进度及线形、环形指示器的构成

1. 确定进度的终点标记:指明明确的结束位置。
2. 当前进度。
3. 尚未完成的部分。
4. 不确定进度。
5. 线形。
6. 环形。

自定义

除了确定与不确定两种进度模式,还提供线形、环形与波浪形等外观变体。

波浪形与直线形进度样式

1. 波浪形。
2. 直线形。

波浪形与直线形进度指示器使用相同的属性、自定义选项和默认值,具体如下。

线形

属性可自定义默认值
线宽是6 dp
进度颜色是Primary
轨道颜色是Outline
尺寸是360 dp

环形

属性可自定义默认值
线宽是6 dp
进度颜色是Primary
轨道颜色是Outline
尺寸是40 dp