丁丁在前面讲交互设计的文章里有提到过进度条的设计，一个优秀的「进度条」能让用户等待过程变得不那么无聊，今天来详细讲讲如何设计进度条来保证良好的用户体验原文戳这里。
1、反馈的关键
我们都喜欢一个应用程序能够即时响应，但有些时候你的程序确实不够快，缓慢的加载速度和延迟问题都可能降低你的程序性能。这个时候，你就必须保证用户能清楚的知道程序正在按着他们的请求作出并在逐步完成响应动作。
一个优秀的交互设计就是那些能通过视觉反馈向用户传达系统当前的状态（正在发生什么？），产生的结果（刚刚发生了什么？）以及未来的状态（下一步会发生什么？）。
进度条
想办法告诉用户程序确实需要一些更多的时间来响应他们发出的动作甚至告诉他们需要花费的大概时间，这对用户来说都是极其友好的。这样做带来的积极一面就是：
1）它们打消了用户对程序响应的疑惑，使他们能够确信程序是正常工作的。
2）这种视觉信息向用户传达了一个有根据的等待原因，减少了他们对无聊的等待时间的感知，它能够从一定程度上分散转移用户对等待时间的注意力。其实，对于任何需要花费 1 秒钟以上的动作来讲，使用一个进度指示器都是合适的。不过对于更快的动作，如果还来使用这种动画效果，那只会适得其反激怒用户。
减少用户心里等待时间
2、进度指示器类型
进度指示器整体上分为两大类：
-
确定性的
-
不确定性的
对于确定性的进度指示器而言，它们能够告诉用户当前动作需要多久时间方能完成，因为用户能从视觉上看到百分比。
确定性的进度条
而如果一个指示器要求用户在动作执行的全程中只能傻傻等待却没有告诉这个过程需要多久的话，那它就是不确定的进度指示器。
不确定性的进度条
更进一步的，还有将这两类指示器组合起来一起使用的情况。
混合使用
3、 圆形进度指示器
圆形进度条
另外一种能确保用户知晓系统正在响应的方法是使用一个循环的环形动画，不过这种方法没有足够的信息告诉用户在当前动作完成之前他们还得等多久。以往的经验法则表明，只有在执行 2-10 秒钟内这种快速的动作时再考虑使用圆形进度指示器。如果让用户盯着这么一个圆环更久的话，用户可能就不会再有耐心转而放弃。
实际上，加载图标往往并没有传达出动作的真实意义。因为它们广泛应用于多种功能之间，比如运行系任务的时候，在系统引导时通知用户当前状态的时候，网络连接异常的时候以及数据加载的时候。这种一劳永逸的做法没有针对具体动作设置特定的加载方式，这就是为何人们讨厌看到一个环形加载动画的原因。
4、整合后的圆形进度指示器
整合后的圆形进度指示器
如果再进一步，你也可以将这种圆形的进度指示器动画跟现有的控件结合起来，尤其是按钮。比如在 Android 平台中，一个圆形的加载器可以将一个悬浮按钮整合进来。这种做法保证了能让用户看得到加载后的提交动作也确实完成了。它依靠圆形的逐渐闭合来代表了这个过程。
5、系统/自定义的循环动画
自定义动画
Facebook 通过使用不同风格的循环动画向用户传达出两种不同的体验感受。针对它们的加载指示器，如果用户看到是一个自定义的加载动画，他们会把这种延迟归咎于程序本身的原因，而当他们看到是系统自带的动画效果的话，他们也会理所当然的认为延时是系统的责任。
6、线性动画
线性动画
一个确定线的线性进度指示器，其完成速度应该符合百分比的变化，并总是从 0% 到 100% 递增而不减少。如果一个指示器针对的是多个线性任务，应该只用一个指示器来标明任务的整体执行进度而不要针对每个任务都使用一个指示器。
7、显示完成百分比的动画
显示百分比
显示完成百分比的进度指示器是在有等待动画的指示器中最为有用的一种。它们突显出当前的处理状态，告诉用户系统已经完成了多少工作量以及还剩余多少。这种指示器能清楚的向用户解释当前动作的处理进度。就经验法则来看， 它适用于那些需要花费10秒钟或者更久的任务。其实，给用户一个预估的大概时间往往就够了，并不是非得精确。
这种指示器也可以用在消耗时间少于 10 秒钟的情况下，例如系统正在加载一系列的文档或注册表文件的时候。此时最好包含诸如「 已更新 3/50」这样的文字解释。另外一点，对于那些消耗时间的动作，要给用户停止当前进程的选项，以免他们等的不耐烦想要退出。
8、连续性动画
连续性动画
进度条能代表一个动作还要多久才能完成，但通常情况并不总是准确的。你可以通过让你的连续性动画一开始较慢而接近完成时运行很快来把那些小的延迟隐藏起来。但是这里要注意的一点是进度条切不可停下来，这样的话容易误导用户以为程序冻结出故障了。
9、显示步骤
显示步骤
相比于仅显示完成的百分比进度，更好的方法是显示出加载进程中涉及到的多个步骤。这样做，用户虽然可能还判断不出每一步要花费多长时间，但是如果能看到总的步骤数，他们至少在心里会有一个评估值。
10. 轮廓图屏幕
轮廓图屏幕
长时间的等待会严重的影响到用户的体验过程，但还是有可能使得这个等待过程令人愉快而具有说服力的。轮廓图屏幕就正好可以派上用场。它能够让用户专注于数据加载的过程而非等待时间本身。
轮廓图屏幕其实还是一个空白页，只不过它在数据加载出来之前能够先向用户传达出页面究竟会有哪些数据类型以及各数据量如何。这种做法的好处就是能让用户理解到程序对动作的响应速度是正常的，只是页面中的具体信息尚需要一点时间陆续显示出来。 Medium 就是采用这种方法，在数据加载过程中先显示出一些数据的占位符， 这就将屏幕中的重点放到了这些正在加载的内容上而不是等待过程。
11、避免静态的进度指示器
静态的进度指示器就是那些没有任何动态图片只配有一些类似于“加载中…”、“请稍后…”这样的静态文本信息的指示器，它们只能告诉用户他们的动作请求系统已经收到了，却没有提供任何有价值的反馈信息。因此，这种做法必须被其他更有效的指示器取代。
12、避免有不可重新点击的警告
设计的最大失礼之处就是程序通过诸如「再次点击可能创建一个额外的订单」这样的信息来警告用户针对同一操作不能点击两次。这样的做法是极为不友好的因为不论在任何情况下你都不该威胁警告用户。 而且，用户基本不会有兴趣去阅读如此长的提示信息。
13、 处理无聊的等待过程
有趣的动画减少用户心里等待时间
注意不要让用户在等待的过程中太过无聊，可以尝试一些能够分散他们在等待时间的注意力上的事情，让这个过程变得有趣而令人愉快，甚至给他们一些超出预期的惊喜吸引他们，从而诱使他们多点耐心等待加载的完成。比如你可以尝试使用一些精美的动画效果。
总结
进度条是使用户的等待过程变得清晰而流畅的最好方法。给与用户反馈信息将一定程度上提升他们的耐心，而且会促成一个积极有效的用户体验过程。一个优秀的进度指示器能够指引用户顺利的完成目标任务，甚至能在用户间，建立起对你的网站或应用程序的更好印象。
「庖丁开发」公众号每天晚上十点分享设计、产品、开发的干货，更多精彩尽在庖丁开发！
网友评论