文档章节

用户体验设计----(进度指示器)

天机
 天机
发布于 2016/08/05 10:07
字数 3372
阅读 31
收藏 2

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

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

1、反馈的关键

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

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

(1)它们打消了用户对程序响应的疑惑,使他们能够确信程序是正常工作的。

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

2、进度指示器类型

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

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

1470041598626371.gif

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

bf74e8ad80032c24144a5731a61d1d4d.gif

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

1470041621926911.gif

3、 圆形进度指示器

f488854708fd07a4fba18179728e52a4.gif

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

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

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

1470041665400767.gif

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

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

1470041682506035.png

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

6、线性动画

1470041706161368.gif

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

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

1470041738897239.png

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

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

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

8、连续性动画

1470041762254224.gif

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

9、显示步骤

1470041800865266.gif

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

10. 轮廓图屏幕

QQ截图20160801165615.png

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

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

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

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

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

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

13、 处理无聊的等待过程

1470041825525950.gif

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

总结

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

本文转载自: http://www.cocoachina.com/design/20160802/17262.html

天机
粉丝 1
博文 22
码字总数 0
作品 0
部门经理
私信 提问
UIActivityIndicatorView、UIProgressView 活动与进度指示器-IOS开发

活动指示器(UIActivityIndicatorView)可以告知用户有一个操作正在进行中。进度指示器(UIProgressView )也具有同样功能,而且还可以告知用户离操作结束还多远。 这两个指示器都是派生自UIVie...

junwong
2012/03/05
1K
0
iOS进度指示器——NSProgress

iOS进度指示器——NSProgress 一、引言 在iOS7之前,系统一直没有提供一个完整的框架来描述任务进度相关的功能。这使得在开发中进行耗时任务进度的监听将什么麻烦,在iOS7之后,系统提供了N...

珲少
2016/05/22
2K
1
Android 控件之 ProgressBar 进度条

ProgressBar是Android的进度条。体验效果 源码下载 下面详细介绍ProgressBar 一、说明 在某些操作的进度中的可视指示器,为用户呈现操作的进度,还它有一个次要的进度条,用来显示中间进度,...

无鸯
2011/09/27
3.1K
2
Material Design学习之 ProgreesBar

转载奇怪注明出处:王亟亟的大牛之路 继续我们Material Design的内容,这一篇讲的是进度条,上一篇是Switch地址如下:http://blog.csdn.net/ddwhan0123/article/details/50592579 进度和动态 ...

ddwhan0123
2016/01/27
0
0
这可能是关于动态面板,最细致的讲解了

作者:拼搏的80后 全文共 2420 字 6 图,阅读需要 5 分钟 ———— / BEGIN / ———— 动态面板是Axure中使用频率最高的元件之一,动态面板专门用于设计原型中的动态功能,它可以包含一个或...

k7jz78gejj
2018/04/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

可见性有序性,Happens-before来搞定

写在前面 上一篇文章并发 Bug 之源有三,请睁大眼睛看清它们 谈到了可见性/原子性/有序性三个问题,这些问题通常违背我们的直觉和思考模式,也就导致了很多并发 Bug 为了解决 CPU,内存,IO ...

tan日拱一兵
13分钟前
2
0
网络七层模型与TCP/UDP

为了使全球范围内不同的计算机厂家能够相互之间能够比较协调的进行通信,这个时候就有必要建立一种全球范围内的通用协议,以规范各个厂家之间的通信接口,这就是网络七层模型的由来。本文首先...

爱宝贝丶
16分钟前
2
0
Jenkins World 贡献者峰会及专家答疑展位

本文首发于:Jenkins 中文社区 原文链接 作者:Marky Jackson 译者:shunw Jenkins World 贡献者峰会及专家答疑展位 本文为 Jenkins World 贡献者峰会活动期间的记录 Jenkins 15周岁啦!Jen...

Jenkins中文社区
34分钟前
8
0
杂谈:面向微服务的体系结构评审中需要问的三个问题

面向微服务的体系结构如今风靡全球。这是因为更快的部署节奏和更低的成本是面向微服务的体系结构的基本承诺。 然而,对于大多数试水的公司来说,开发活动更多的是将现有的单块应用程序转换为...

liululee
48分钟前
7
0
OSChina 周二乱弹 —— 我等饭呢,你是不是来错食堂了?

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @ 自行车丢了:给主编推荐首歌 《クリスマスの夜》- 岡村孝子 手机党少年们想听歌,请使劲儿戳(这里) @烽火燎原 :国庆快来,我需要长假! ...

小小编辑
今天
534
9

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部