Material Design 设计语言（十）进度指示器

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

原则

1、信息化

2、动画

进度指示器使用动画捕捉注意力并告知用户活动的进度。

3、统一

进度指示器应以一致的格式（线性或循环）应用于正在进行的流程（例如加载）

类型

             

1、线性进度指示器

              

线性进度指示器支持固定时间和不固定时间的两种操作。

• 时间确定的进度条宽度从轨道的0到100％增加，与流程/任务的进度同步。
  
• 时间不确定的进度条宽度在轨道上不断增长和缩小，直到流程/任务完成。
  
  

             

2、圆形进度指示器

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

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

圆形进度指示器支持固定时间和不固定时间的两种操作。

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

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

– 推 荐 阅 读 –

iOS平台设计规范-精简总结篇

Material Design 设计语言-概述

产品设计之用户体验地图

UIKit，让团队协作事半功倍