恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
【译】由加载动画联想到进度指示器
0.0°
2016-12-16 自译外文 经验/观点 原作者: Nick Babich 举报 1830 19 18 0

曾经看过一个例子,说一个人买了一个咖啡机。但是第一次使用的时候没有煮出咖啡来,因为他在匆忙中没有将“开”的按钮按到底。咖啡机在打开的时候,没有任何迹象显示它确实被打开了:没有指示灯,没有声音,连按下去的阻力感都没有。你以为你的咖啡机正在煮咖啡,其实没有。这个例子很具有代表性。

当用户在App上完成一个操作的时候,比如在支付宝上点击“付款”按钮,用户最理想的情况是立即弹出付款成功页面。然而在一些情况中,比如网速不行或者这个操作本身就要耗费很长时间如更新操作系统,用户不得不等待。我们应该让用户知道你的请求已经成功提交到系统,不过现在需要一些时间来处理,这样会消解用户心中的不确定性。因此当用户完成一项操作的时候,我们应该给用户一个反馈。这个时候我们就需要进度指示器(Progress Indicator)来实现这个反馈。

Image title



进度指示器适用条件


用户完成操作后就会进入“等待时间”,当等待时间在0.1秒到1秒时,用户会觉得这是系统正常的反应时间,处于用户的承受范围之内。甚至有些用户没有意识到他们在等待。而当“等待时间”超过1秒的时候,用户心中就会产生疑惑了。因为这已经超过了他们心中认为系统的自然反应时间,这时候他们会思考:为什么这么长时间新的页面还没有加载出来或者交易结果没有返回?是网络断了吗?还是我刚才根本没有点击成功,要不要再重新点击一次?大部分的重复操作都是因为用户对操作结果不确定。所以我们建议在系统处理时间小于1秒的时候,不建议使用进度指示器。因为在这个情况下,动画只是在屏幕中一闪而过,用户根本反应不过来。这样起不到进度指示器应该有的作用,有的时候反而会分散用户的注意力。


进度指示器的种类


进度指示器目的就是告诉用户系统需要一些时间来处理你的请求。最简单的进度指示器就是底下这种非确定性指示器,这种指示器告诉了用户他们需要等待但是没有说明究竟要等多久。

Image title


另一种进度指示器告诉我们系统需要多长时间来处理我们的请求。这种类型的指示器我们称之为确定性指示器,他们显示了当前完成了多少,剩下多少。因为用户了解了系统当前的处理进展,他们会心里有底,更愿意等待下去。

Image title


百分数指示器是一种确定性指示器,从1%到100%用户可以了解详细处理进程。

Image title

Image title


线性和环形指示器都可以做成百分数指示器。


进度指示器设计Tips


尽量少用圆形动画

大部分的圆形动画(类似底下这种的)都是属于非确定性指示器。这种动画主要会在页面出现数据加载延迟的时候出现,比如Iphone手机上网络连接出现故障就会出现这个动画。用户想听歌,但是迟迟缓冲不了,只看到这种圆形的图标不停的转动,也不知道什么时候会好。用户对这种圆形动画可谓深恶痛绝。所以为了降低对你产品的负面影响,我不建议你们使用这种类型的指示器。

Image title


告诉用户剩余等待时间

用户讨厌无止尽的等待下去,所以告诉他们预计等待时间,会让他们更愿意等待下去。不用太过于精确,类似“预计剩余时间5分钟”这样的就可以了。

Image title


有些操作过于复杂,简单的使用百分数无法表示处理进度。在这种情况下,我们可以直接提供绝对工作量的完成度给用户。这种情况中,用户无法直接知道剩余时间,但是可以通过步骤的处理情况得到一个近似的估计。

Image title


提高用户对速度的感知度

让用户“觉得”快可能比直接给系统提速更加重要。比如我们在做此类的加载动画的时候,让加载速度由慢到快,当即将完成的时候速度达到峰值。这样会提高用户对速度的感知度。

Image title


分散用户的注意力

如果我们将进度指示器设计的很有创意,让用户在等待的过程中对进度指示器产生了兴趣,这样就会忽视时间。比如你将加载进度条做出一个俏皮的高尔夫球入洞的动画,使用户不再感到无聊,时间也会感觉过得快一点。

Image title


或者做一个萌萌哒动画,这种设计对妹子来说简直是必杀技。

Image title


也可以做成这种酷炫的效果。只要让用户忘记时间,忘记他们在等待就可以。

Image title


不要停

确定性指示器可以告诉我们剩余等待时间。比如当我们在下载一个软件的时候,用户会根据加载速度来知晓下载速度进而估计剩余时间。如果突然加载停止会给用户情绪上带来很大的波动。最惨的情况就是,你花了一整天下了一部电影,结果最后卡在99%一直不动,那种情况下你会不会有砸电脑的冲动。所以我们要尽量使指示器运行的平稳,不要出现巨大的波动,更不要让它停下来。

Image title


总结

进度指示器在手机应用交互设计有着很重要的地位,将来也会一直重要下去。因为无论手机运行速度怎么提升,总是会有用户需要等待的情况出现。用户需要一个让他们等待下去的理由,而进度指示器就是那个答案。

微信公众号:王M争

更新:2016-12-16

收藏

19人已收藏

王M争

微信公众号:王M争

  • 63

    作品

  • 9257

    粉丝

  • 78

    关注

  • 苹果 or 谷歌,到底谁的设计更好?
  • 盘点那些容易让用户上瘾的产品设计
  • iPhone如何改变手机的交互方式
  • 为什么甲方不喜欢极简主义
相关标签
经验用户体验

    猜你喜欢

      2016-12-16 自译外文 经验/观点 原作者: Nick Babich 举报 1830 19 18 0

      【译】由加载动画联想到进度指示器

      0.0°

      你确定要举报【译】由加载动画联想到进度指示器

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年12月14日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      18
      19
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录