版权申明：本教程出自“酒夏”原创，感谢“酒夏”的原创文章分享！

FEVTE编注：更多平面设计理论学习请访问飞特网平面设计理论知识栏目，地址：https://www.fevte.com/plan/shejililun/

它是什么？

进度指示器表示未指定的等待时间或显示过程的持续时间。使用活动指示器和进度条可以使人们知道您的应用没有停止，并让他们知道他们要等待多长时间。

在那些需要很长时间才能完成的操作中，为用户显示操作进度的一种模式。

它有什么作用？

1. 如果一个界面用户在操作以后，一动不动没有反馈，用户很容易就会失去耐心，一个操作等待耗时超过两秒就可以应用此模式来展示当前进度，让用户知道等待时间，降低焦虑，确保内心确认感。

2. 反之，会引起用户负面情绪，导致直接退出程序，引起疑惑，用户体验值偏低。

它的使用规范？

进度指示器向用户通知正在进行的过程状态，例如加载应用程序，提交表单或保存更新。它们传达应用程序的状态并指示可用的操作，例如用户是否可以离开当前屏幕。一个动态的指示器采用文字或者图形指示器都可以，它需要告诉用户以下几点基础信息：

• 当前操作内容

• 已经完成的比例

• 还需要多少时间完成

• 是否可停止这项任务

使用原则

此类模式需要尊从以下几点原则：

1. 功能优先，进度指示器可设计外观来反映流程状态，切勿视觉大于功能。

2. 动画效果，指示器始终是动态的，使用动画来吸引注意力并通知用户活动的进度。

3. 一致性，程序中一致的流程应以一致的格式来展示。

组件分类

载体展示方式层面

进度指示器分为两种，一种是线性进度指示器，一种是圆形进度指示器。在应用程序中同样的场景选择一种指示器来展示，比如首页的下拉刷新使用圆形进度指示器，则该应用的其他下拉刷新的场景也请使用一致的圆形进度指示器来展示。

• 线性进度指示器

• 循环进度指示器

交互层面

指示器的加载状态方式可以分为 2 种，一种是确定指示，一种是不确定指示。

• 确定指示：加载时间可量化，可以检测到过程完成率的情况下使用此类方式。

• 不确定指示：记载时间不可量化，无法检测到进度的情况下使用此类方式。

构成模式

线性进度指示器

线性进度指示器通过可见轨道的长度来提示进度信息，指标的行为取决于过程的进度是否已知。

加载进度条 

在 iOS 系统中此类指示器的一种组件被称为 Progress Bars，即加载进度条。常规用于可确定指示，比如组件-加载进度条，常用于 h5 页面的加载。

不确定线性进度指示

指示沿着轨迹进行增长或缩小来表现加载状态，直到加载完成。

规则

1. 始终准确地报告进度。线性指示器用于可量化的任务时，请准确地显示进度，切勿为了看起来很忙而显示不正确的信息。

2. 在导航栏和工具栏中隐藏轨道的未填充部分。默认情况下，进度条的轨迹包括填充和未填充部分。当在导航栏或工具栏中使用时（例如表示页面加载），进度栏应配置为隐藏轨道的未填充部分。

3. 可修改进度条外观来匹配应用。可以对跟踪和填充指定自定义色调或图像匹配产品品牌特性，增进灵活度。

场景

加载，整个页面加载，通常位于导航栏和工具栏的下方。

循环进度指示器

指示器沿不可见的圆形轨道进行顺时针方向移动来显示进度。它们可以直接应用于按钮或卡片等表面。

分类

在谷歌的系统中，此进度指示器支持可量化过程，也支持不可量化过程。

• 确定循环进度指示器：指示器通过颜色填充 0-360 度不可见的圆形轨道。

• 不确定循环进度指示器：指示器在沿不可见轨道移动时会增大和缩小。

场景

加载

不确定循环进度指示器在 iOS 系统中此类控件称为Activity Indicators（活动指示器），就是常见的「菊花转」。在执行无法量化的任务（例如加载或同步复杂数据）时，活动指示器会旋转。

滑动刷新  

在Android上，"滑动刷新"手势会显示一个圆形进度指示器，以指示正在刷新UI。

与其他组件结合

圆形指示器还可在其他控件，比如按钮中使用，代表动作反馈的交互状态。

不确定循环进度指示器

Airbnb 首页的走马灯和进度条相结合，让用户在浏览 banner 的时候知道下一张什么时候开始，给用户感知预期，便于用户对当前内容的专注。