用户体验设计----（进度指示器）

目前只是分享一下，用户等待的形式和目前一些常见类型，代码正在整理中，会在以后的博客中展现，欢迎你们指正和讨论用户体验的方式和实现，以及何为最优的用户体验。

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

一、反馈的关键

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

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

（1）它们打消了用户对程序响应的疑惑，使他们可以确信程序是正常工做的。

（2）这种视觉信息向用户传达了一个有根据的等待缘由，减小了他们对无聊的等待时间的感知。它可以从必定程度上分散转移用户对等待时间的注意力。其实，对于任何须要花费1秒钟以上的动做来说，使用一个进度指示器都是合适的。不过对于更快的动做，若是还来使用这种动画效果，那只会拔苗助长激怒用户。

二、进度指示器类型

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

对于肯定性的进度指示器而言，它们可以告诉用户当前动做须要多久时间方能完成，由于用户能从视觉上看到百分比。

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

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

三、 圆形进度指示器

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

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

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

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

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

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

六、线性动画

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

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

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

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

这种类型的动画帮助用户构建起一个关于动做执行速度的指望值。反过来，速度的变化又能够见证到底是哪一个阶段影响了用户的满意度。不管如何，若是指示器在接近完成的时候却停下来耽误过久，这种状况就很容易激怒用户（不信任你的指示器），这样的话进度指示器在用户内心彷佛也变得没有用。

八、连续性动画

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

九、显示步骤

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

10. 轮廓图屏幕

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

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

十一、避免静态的进度指示器

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

十二、避免有不可从新点击的警告

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

1三、 处理无聊的等待过程

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

总结

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