设计规范完全自学指南：进度指示器（附超多优秀案例）

本文梳理了设计规范中进度指示的相关组件，包括分类和使用规则，还列举大量市面上优的上案例，更深一步探究对组件的使用。

基础组件

1. 组件定义

它是什？

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

那些需很时间能完的操作中，用户显示操作度的一种模式。

它什么作用？

• 如果一个界面户在操作后，一没有反馈，户很容易就会失耐心，一个操作等待耗时超过两秒就可应此模式来展示当前进，户知道等待时间，降低焦虑，确保心确认感。
• 反之，会引起用户负面情绪，导致直退出程序，引起疑惑，用户体验值偏低。

它使用规范是什么？

进度指示用户知正在进过程状态，例如加载应用程序，提交表单或保存更新。它们传应用程序状态并指示可用操作，例如用户是否可以离开前屏幕。个动态指示采用文或者图形指示都可以，它需要告诉用户以下几基础信息：

• 当前操内容
• 已经完成比例
• 还需要多时间成
• 是否可停止这项任

2. 使用原则

此类模需要遵从以下几原则：

• 功能优先，进度指示器设计外观来反映流程状态，切勿视大功能。
• 动画效，指示始终是动态，使用动画来吸引注意力并知用户活动进度。
• 一致性，程序中一致的流程应一致的格式来展示。

3. 组建分类

载体展示方式层面

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

• 线性进度指示器
• 循环度指示器

交互层

指示加载状态可以分为 2 ，是确定指示，是不确定指示。

• 确定指示：加载时间量化，以检测到程完成率的情况下使用此类方式。
• 不确定指示：记载时不可量化，法检测到进度情况下使用此类。

构成模式

1. 线性进度指示器

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

加载进度条

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

不确线性度指示，指示沿轨迹行增或缩小表加载状态，直到加载完。

规则

• 始终准确地报告进。线性指示器于可量的任务时，请准确地显示进，切勿为了看起来很忙而显示正确的信息。
• 在导航栏和工栏中隐藏轨道的未填充部。默认情况下，进度条的轨迹包括填充和未填充部。当在导航栏或工栏中使用（例如表示页面加载），进度栏应配置为隐藏轨道的未填充部。
• 可修改度条外观匹配应用。可以对踪填充指自义色调或图匹配产品品牌特性，增灵活度。

场景

载，整个页面载，通位于导航栏和工具栏的方。

2. 循环进度指示器

指示沿不可见圆形轨进时针移动来显示进度。它们可以接应用于按钮或卡片等表。

在谷歌的系统中，此进指示器支持可量过程，支持可量过程。

• 确定循环进度指示：指示过颜色填充 0-360 度不可见圆形轨。
• 确定循环进指示器：指示器在可见轨道移时会增大和缩小。

确定循指示器—场景

载：确定循环进指示器在 iOS 系统中此类控件称为Activity Indicators（指示器），就是见的「菊转」。在执行无法量的任务（例如载或同步复杂数据）时，指示器会旋转。

滑刷，在 Android 上，「滑刷」手势会显示一个圆形进指示器，指示正在刷界面。

与他组件结合：圆形指示器还可在他控件，如按钮中使，代表作反馈的交互状态。

不确定循环进度指示

Airbnb 首页走灯和进度条相结合，让用户在浏览 banner 时候知下张什么时候开始，用户感知预期，便于用户前内容专注。

如何在产品中应用？

控件结合产品的品牌定位进行视上的整，增加情感化设计，提升用户验。现在很 app 在进度指示的控件设计上有很推陈出新的设计，给大家总结几种。

什么是情感化设计？本能 – 为 – 反思。

诺曼的情感设计，认为在任何设计中，本，行为和反思这个同层面相互作，影响情绪和认知。

在和产品的交互过程中，包含了功能、性能和可用性的体验，如果在本能-视觉层给予足够吸引力和染力，那将会在行为层响用户对产品的操作，最终的目的是促使反思层的反馈是正面的，积极的情绪，愉悦。足用户需求，从而最终触发用户对产品的情绪依赖。

1. 结合吉祥物设计

作为产品品牌的推广和宣传，将产品品牌素融进去，比如吉祥物的形状，颜色，插画等。

美外

美在加载和下拉刷新中都融入了吉祥物，并且计得非常有趣。吉祥物骑着动车在送外的景和实际美外送外的景非常相似，一致的认知模型让用户对品牌印象更加深刻，也让 app 多了一趣味性。

飞猪旅

飞猪 app 也是运用了祥物飞猪，结合旅游场景来做有趣动画设计。

在做画的时候对物体作的把控和场景心智模的符合要求较，简单的载画呈现背后需要对产需求有深刻的解。

闲鱼

闲鱼品牌升级以后，也 app 的不同场景中融入了品牌形象，并且不断迭中也对形象行升级。加载的待过程的确不会让人，但如果这过程中提供动趣的设可以帮用户转移注意力，提升好感。

2. 结合产品logo设计

产品的 logo 也非常适融入在活动指示的计中。简洁了的展示品牌息，加深品牌印象。

马蜂窝

马蜂窝的产品 logo 呈现线性，计运用了线性进度指示器结循环展示的动画效果来展示 logo，进度展示的同展现产品 logo，简了的凸显品牌力量。

大众评

大众评在设计活动指示时候，结合自身 logo 时，也将用户在使用大众评时所期望有惊喜感，融入其，使简单 logo 瞬饱满，简单有趣。

还有一比淘票票，京东购物，网易考拉也做得很。

3. 结合产品理念设计

品过自身品定位，在加载刷新组件融入，满足用户本身使用品需求目标，并品价值进强化，完美传递了品理念，另也让品显更有趣味。

饿了么

饿了么 logo 也是属于简约型，单纯母和线条结合，在下刷新和加载设计上，融入了时概念，品 logo 和时效性相结合，动画做常有趣，也生动传递了品理念。

网易严选

网易严选的 logo 属于文字 logo，文字表力会比图形稍微弱一点，那么结合自身产品理念展示形象的处理方式也非常好，深入人。

有钱

有钱通过字母 logo 和金融类的产属性「钱币」相结合，直观简约，再上画效果表现使产带来的利益惊感，展现「日进斗金」的效果，户体验分。

KEEP

keep 产品的加载使用一个秒表的样式来现运动 app 的特，也是让人耳目一新。

总结

最后总结一下以上所梳理的内容，首先是对计规范中进度指示相关组件的类和了解，以及使用规则。然后再列举了大量市面上优秀的线上案例，更深一步探究对组件的使用。

欢迎关注作者的公众号：「夏」