13个提高「进度条」用户体验的设计技巧

一个优秀的「进度条」能让用户等待过程变得不那么无聊，而这里面其实大有细节可言。今天这篇译文总结了13个能提高进度提示用户体验的设计方法，强烈建议阅读。

进度条界面设计教程：

1. Photoshop教程：《PS教程！手把手教你绘制一个金属质感的进度条》
2. Loading 动效形式：《科普文！设计师需知的LOADING进度条动效形式》

用户及其痛恨的一件事就是等待。如果你为了考验他们的耐心而让他们等的太久，那你就极有可能失去这些用户了，他们会毫不留情的放弃你的网站或应用程序转而投向更好的地方。虽然在技术上是有一定方法能够加快程序的响应速度的，但是更多的程序往往都需要用户在某些时候等待一段时间而别无他选。然而，如果能让用户意识到你的程序的加载速度要快于其他程序，那么他们就会感觉到你的加载速度还是蛮快的。如果在应用程序开始加载数据响应请求的时候，访问用户能在屏幕中看到一个进度条来指明程序的加载过程，那便是极好的。

现在，你必须要理解进度条的显示方式跟动画效果是能够影响到用户的心理感知的。 进度条的目的在于通过向用户反馈当前的响应进度和合理的时间消耗来让用户在等待过程中放松下来。用户不应该被傻傻的丢到一边自己去猜程序正在处理的事情。正是在这样的情境下，似乎进度指示器刚好能构建起连接用户和系统间的一条友好桥梁。在本文中，我们将探讨集中不同类型的进度指示器以及他们的使用方法：

1、反馈的关键

没错，我们当然都喜欢一个应用程序能够即时响应。但是有些时候你的程序确实不够快，缓慢的加载速度和延迟问题都可能降低你的程序性能。在这个时候，你就必须保证用户能清楚的知道程序正在按着他们的请求作出并在逐步完成响应动作。一个优秀的交互设计就是那些能通过视觉反馈向用户传达系统当前的状态（正在发生什么？），产生的结果（刚刚发生了什么？）以及未来的状态（下一步会发生什么？）。

如果一个进度指示器能够面向用户提供一些类型的即时反馈信息，那它就是发挥了有效的作用。想办法告诉用户程序确实需要一些更多的时间来响应他们发出的动作甚至告诉他们需要花费的大概时间，这对用户来说都是极其友好的。用户的等待时间一般开始于他们触发屏幕动作的那一刻，而理想上，系统应该在用户触发动作后立刻给予一些视觉上的反馈以告诉用户系统收到他们的请求了。这样做带来的积极一面就是：

1. 它们打消了用户对程序响应的疑惑，使他们能够确信程序是正常工作的。
2. 这种视觉信息向用户传达了一个有根据的等待原因，减少了他们对无聊的等待时间的感知。它能够从一定程度上分散转移用户对等待时间的注意力。其实，对于任何需要花费1秒钟以上的动作来讲，使用一个进度指示器都是合适的。不过对于更快的动作，如果还来使用这种动画效果，那只会适得其反激怒用户。

2、进度指示器类型

进度指示器整体上分为两大类： 1) 确定性的 2) 不确定性的

对于确定性的进度指示器而言，它们能够告诉用户当前动作需要多久时间方能完成，因为用户能从视觉上看到百分比。

而如果一个指示器要求用户在动作执行的全程中只能傻傻等待却没有告诉这个过程需要多久的话，那它就是不确定的进度指示器。

更进一步的，还有将这两类指示器组合起来一起使用的情况。

3、 圆形进度指示器

另外一种能确保用户知晓系统正在响应的方法是使用一个循环的环形动画，不过这种方法没有足够的信息告诉用户在当前动作完成之前他们还得等多久。以往的经验法则表明，只有在执行2-10秒钟内这种快速的动作时再考虑使用圆形进度指示器。如果让用户盯着这么一个圆环更久的话，用户可能就不会再有耐心转而放弃。另外，如果能通过文字向用户传达一些更明确的信息，比如告诉他们为何要等待，这时候使用“正在加载评论信息”这样的文字就能让用户变得更有耐心一点。

实际上，加载图标往往并没有传达出动作的真实意义。因为它们广泛应用于多种功能之间，比如运行系任务的时候，在系统引导时通知用户当前状态的时候，网络连接异常的时候以及数据加载的时候。这种一劳永逸的做法没有针对具体动作设置特定的加载方式，这就是为何人们讨厌看到一个环形加载动画的原因。另外请记住，若使用这种环形动画代表从服务器加载数据的过程，那是充满风险的，因为客户端跟服务器间的网络连接情况并不是掌握在开发人员的手里。 如果这样做，在糟糕的网络连接情况下等待时间可能要达到15秒钟，而正常情况下可能仅仅需要2秒钟，所以可控性很差。

4、整合后的圆形进度指示器

如果再进一步，你也可以将这种圆形的进度指示器动画跟现有的控件结合起来，尤其是按钮。比如在 Android 平台中，一个圆形的加载器可以将一个悬浮按钮整合进来。这种做法保证了能让用户看得到加载后的提交动作也确实完成了。它依靠圆形的逐渐闭合来代表了这个过程。

5、系统/自定义的循环动画

Facebook 通过使用不同风格的循环动画向用户传达出两种不同的体验感受。针对它们的加载指示器，如果用户看到是一个自定义的加载动画，他们会把这种延迟归咎于程序本身的原因，而当他们看到是系统自带的动画效果的话，他们也会理所当然的认为延时是系统的责任。

6、线性动画

一个确定线的线性进度指示器，其完成速度应该符合百分比的变化，并总是从0%到100%递增而不减少。如果一个指示器针对的是多个线性任务，应该只用一个指示器来标明任务的整体执行进度而不要针对每个任务都使用一个指示器。

7、显示完成百分比的动画

显示完成百分比的进度指示器是在有等待动画的指示器中最为有用的一种。它们突显出当前的处理状态，告诉用户系统已经完成了多少工作量以及还剩余多少。这种指示器能清楚的向用户解释当前动作的处理进度。就经验法则来看， 它适用于那些需要花费10秒钟或者更久的任务。其实，给用户一个预估的大概时间往往就够了，并不是非得精确。类似于“这会耽误您一分钟的时间”这样的文本描述就足够。

这种指示器也可以用在消耗时间少于10秒钟的情况下，例如系统正在加载一系列的文档或注册表文件的时候。此时最好包含诸如“ 已更新3/50”这样的文字解释。另外一点，对于那些消耗时间的动作，要给用户停止当前进程的选项，以免他们等的不耐烦想要退出。如果你忘了这么做，那你的设计将会让用户失去控制权，而没有能力根据自己的需求做出合适的选择。

这种类型的动画帮助用户构建起一个关于动作执行速度的期望值。反过来，速度的变化又可以见证究竟是哪个阶段影响了用户的满意度。无论如何，如果指示器在接近完成的时候却停下来耽误太久，这种情况就很容易激怒用户（不信任你的指示器），这样的话进度指示器在用户心里似乎也变得没有用。

8、连续性动画

进度条能代表一个动作还要多久才能完成，但通常情况并不总是准确的。你可以通过让你的连续性动画一开始较慢而接近完成时运行很快来把那些小的延迟隐藏起来。但是这里要注意的一点是进度条切不可停下来，这样的话容易误导用户以为程序冻结出故障了。

9、显示步骤

相比于仅显示完成的百分比进度，更好的方法是显示出加载进程中涉及到的多个步骤。这样做，用户虽然可能还判断不出每一步要花费多长时间，但是如果能看到总的步骤数，他们至少在心里会有一个评估值。

10. 轮廓图屏幕

长时间的等待会严重的影响到用户的体验过程，但还是有可能使得这个等待过程令人愉快而具有说服力的。轮廓图屏幕就正好可以派上用场。它能够让用户专注于数据加载的过程而非等待时间本身。

轮廓图屏幕其实还是一个空白页，只不过它在数据加载出来之前能够先向用户传达出页面究竟会有哪些数据类型以及各数据量如何。这种做法的好处就是能让用户理解到程序对动作的响应速度是正常的，只是页面中的具体信息尚需要一点时间陆续显示出来。 Medium 就是采用这种方法，在数据加载过程中先显示出一些数据的占位符， 这就将屏幕中的重点放到了这些正在加载的内容上而不是等待过程。

11、避免静态的进度指示器

静态的进度指示器就是那些没有任何动态图片只配有一些类似于“加载中…”、“请稍后…”这样的静态文本信息的指示器，它们只能告诉用户他们的动作请求系统已经收到了，却没有提供任何有价值的反馈信息。因此，这种做法必须被其他更有效的指示器取代。

12、避免有不可重新点击的警告

设计的最大失礼之处就是程序通过诸如“再次点击可能创建一个额外的订单”这样的信息来警告用户针对同一操作不能点击两次。这样的做法是极为不友好的因为不论在任何情况下你都不该威胁警告用户。 而且，用户基本不会有兴趣去阅读如此长的提示信息。

13、 处理无聊的等待过程

注意不要让用户在等待的过程中太过无聊，可以尝试一些能够分散他们在等待时间的注意力上的事情，让这个过程变得有趣而令人愉快，甚至给他们一些超出预期的惊喜吸引他们，从而诱使他们多点耐心等待加载的完成。比如你可以尝试使用一些精美的动画效果。

总结

进度条是使用户的等待过程变得清晰而流畅的最好方法。给与用户反馈信息将一定程度上提升他们的耐心，而且会促成一个积极有效的用户体验过程。反馈信息能够很好的处理不确定性并使用户更愿意花些时间来等待程序作出响应。一个优秀的进度指示器能够指引用户顺利的完成目标任务，甚至能在用户间，建立起对你的网站或应用程序的更好印象。

 

作者：惜可若己

来源：优设网

文章链接：http://www.uisdc.com/improve-progress-bar-ux-design#

版权：人人都是产品经理遵循行业规范，任何转载的稿件都会明确标注作者和来源，若标注有误，请联系主编QQ：419297645