Material Design——Progress indicators

#我是一个可爱的搬砖工系列# 尝试对照英文翻译学习MD的组件设计，借此加深各种组件的应用~

Material Design链接：Material Design——Progress indicators 

进度指示器表示未指定的等待时间或显示进程的长度。

CONTENTS（内容）

Usage 用法

Linear progress indicators 线性进度指标

Circular progress indicators 循环进度指标

Specs 规范

Implementation 履行

一、用法

进度指示器向用户通知正在进行的进程的状态，例如加载应用程序，提交表单或保存更新。 他们传达应用程序的状态并指示可用的操作，例如用户是否可以离开当前屏幕。

作为一个组来记录进度

显示一系列流程的进度时，指出总体进度而不是每个活动的进度

△ 原则

· 信息化  进度指标以反映流程状态的方式查看和制作动画， 它们不仅仅是装饰性的

· 动画  进度指示器使用动画来捕获注意力并告知用户活动的进度

· 一致  进度指标应以一致的格式（线性或循环）应用于过程的所有实例（例如加载）

二、类型

△ 线性和圆形

Material Design提供两种视觉上不同类型的进度指示器：线性和循环进度指示器。 只有一种类型应代表应用中的每种活动。 例如，如果刷新操作在一个屏幕上显示循环指示符，则该相同操作不应使用应用程序中其他位置的线性指示符。

1.Linear indicator；2.Circular indicator

△ 确定和不确定

进度指标可能是确定的或不确定的：

· 确定指标

确定指标显示流程需要多长时间。 当可以检测到过程完成率时，应该使用它们。

· 不确定指标

不确定的指标表示不确定的等待时间。 如果无法检测到进度，或者没有必要指出活动需要多长时间，则应使用它们。

随着有关进程的更多信息变得可用，进度指示器可以从不确定状态切换到确定状态。

加载屏幕时，线性进度指示器从不确定变为确定。

三、线性进度指标（Linear progress indicators ）

△ 分析

线性进度指标由两个必需元素组成：

1.跟踪

轨道是固定宽度规则，具有指示器行进的设定边界。

2.指标

该指示器沿着轨道的长度动画。

△ 行为

线性进度指示器通过沿固定的可见轨道长度设置指示器的动画来显示进度， 指标的行为取决于过程的进度是否已知。

△ 类型

线性进度指示器支持确定和不确定操作

· 确定操作显示指示符的宽度从轨道的0到100％的增加，与进程的进度同步。

· 不确定的操作显示指示器在轨道上不断增长和收缩，直到过程完成。

左：确定线性进度指标；右：不确定的线性进度指标。

△ 位置

线性进度指示器的放置可以指示过程的范围，例如：

· 屏幕中央的线性指示器可指示加载所有屏幕内容

· 附加到容器（例如卡）的线性指示符可以指示该过程适用于该特定项目（并且可以与UI的其余部分进行交互）

· 扩展项目可沿其扩展边缘放置线性指示符，以吸引用户注意新内容的显示位置

要指示加载影响整个屏幕，可以在背景中放置线性指示器。

为了引起用户注意，建议使用线性指示器将项目展开显示在较大的表面上，例如桌面。

四、循环进度指标（Circular progress indicators ）

△ 行为

循环进度指示器通过沿顺时针方向沿不可见圆形轨道制作指示器来显示进度，它们可以直接应用于表面，例如按钮或卡片。

在Android上，“滑动到刷新”手势会显示一个循环进度指示器，指示正在刷新UI。

△ 种类

循环进度指标支持确定和不确定的过程

· 当指示器从0度移动到360度时，确定圆形指示器用颜色填充不可见的圆形轨道。

· 不确定的圆形指标在沿着看不见的轨道移动时会变大和缩小。

左：确定进度指标；右：不确定进度指标。

△ 位置

定位循环进度指示器以指示它们所代表的过程。

· 当在屏幕上居中时，它们指示屏幕内容的初始加载

· 当放置在现有内容之上或之下时，它们会引起对新内容出现位置的注意

左：以屏幕为中心的圆形指示器指示初始加载过程；右：将出现一个指示符，显示当前项目网格末尾的新项目。

与行动整合

圆形指示器可以集成到按钮或可操作图标中，以表示交互和特定项目之间的连接。 它们通常用于表示何时无法进行交互（例如再次单击按钮）。

它们应该用于短期，不确定的活动（2-5秒之间）。 较长时间的活动可能需要其他通知方法，例如snackbars或通知。

使用循环指示器进行短期，不确定的活动（<5秒），需要用户注意。

不要将进度指示器应用于应用程序中的每个按钮， 它们可能会不必要地中断用户的任务。

---

END.THANKS FOR YOUR READING~

如有不当，还请多多指教~