(干货)关于进度指示器,这一篇就够了!

1

当前状态的可视性 是UI设计规范中最重要的一点之一,这样是为了最大程度的减少用户的紧张感。当用户在操作一个APP的时候,你需用告诉他们在操作后的一段时间内会发生什么事情,而不是让用户去猜想。对于这种反馈,最常用的一种方式就是进度指示器了。

在这篇文章中,我们来看看主要的进度指示器都有哪些以及他们各自的使用案例。

优秀的交互设计给用户提供及时的反馈

如果一个APP能够在用户操作后即时响应得出结果,这样当然是最好的情况。但是很多时候,应用并不能及时展示出结果。无论是缓慢的加载时间还是其他潜在的问题,都会导致这种延迟。在这种情况下,你必须让用户知道,应用正在正常运行,等一会就好了。

关于反馈设计,主要有以下三个方向:

  • 当前状态:现在正在干什么?
  • 结果通知:刚刚发生了什么?
  • 未来状态:接下来会发生什么?

什么是好的进度指示器?

一个好的进度指示器通常都能给用户即时的反馈。他们一方面告诉用户应用需要等待一段时间以完成一个操作,另一方面还告诉用户这个过程大概需要多长时间。这样有两个优点:

  • 减小用户的不确定感觉(告诉用户应用程序在正常运行)
  • 提供一个让用户等待的理由,并且降低用户对于等待时间的感知。(应用程序通过提供一些有趣的小动画给用户观看,进而让整个等待过程感觉不那么漫长难熬)

对于任何需要等待超过一秒的操作,都需要使用进度指示器。(至于等待时间少于一秒的操作,滥用进度指示器会打断用户的注意力,影响用户体验)

指示器的种类

进度指示器分为确定性和不确定性两种类别。

  • 确定性进度指示器可以明确的告诉用户完成某一个操作的进度情况
  • 不确定性进度指示器引导用户等待,但是并没有明确告诉用户等待时间或者进度。

2

 

3

当然,这两种进度指示器有时也可以结合到一起。

4

转圈加载动画

通过一些转圈的加载动画效果告诉用户应用程序正在运行,但是对于等待时间却没有给予提示。

作为惯例,转圈加载动画一般只用于等待时间较短的操作(大约2-10S)。如果等待时间超过这段时间,小圆圈加载动画会导致用户不耐烦,并且关闭应用。

5

有的时候还可以通过一些文字提示等信息来告诉用户为什么需要等待,这样可以有效消除用户的焦虑感。

用户预期

默认的加载图标(如IOS系统中的灰色“菊花转”)常常蕴含着消极的含义。它们出现在各种操作功能中,如手机启动、连接网络出错、数据加载等等。因此,用户并不希望看到一个只是在转动的进度指示器,而是希望能够知道等待时间或者加载进度情况。

6

转圈加载动画优化

你可以将加载动画与已存在的操作按钮Icon相互结合。在安卓应用中,转圈加载常常和悬浮按钮箱结合。

7

系统加载与自定义加载动画

Facebook的加载动画非常有趣,Rusty Mitchell在谈论Facebook的加载指示器时,着重强调了这样一段话“当用户在面对左边的加载动画时,常常反应应用太慢了。但是,当他们面对右边的加载动画时,用户更倾向于吐槽系统太慢。”

8

线性加载动画

确定性线性进度指示器通常都是从0%加载到100%。对于多线程任务,你应该用一个进度指示器代表总的进程,而不是给每个小任务都提供一个进度指示器。

9

百分比加载动画

不确定的等待让用户感觉更加漫长,而百分比进度指示器是信息最多的加载动画之一。他们清晰地展示的当前的进度,已完成多少,未完成还剩多少,一目了然。百分比进度指示器还让用户感知到加载的速度,从而降低等待的不确定性。

作为惯例,百分比进度指示器一般用在加载时间在10 S以上的操作上。

10

提供一个预计加载时间

并不需要告诉用户准确的等待时间,你只要说“这可能需要几分钟”就足以让用户放心,并且鼓励他们进行等下去。

11

动态加载动画

进度条可以告诉用户等待的时间,但是他们其实并非真的精确。你可以通过一些小动画来掩饰真实的情况,比如说:你可以让加载动画一开始走得慢一些,等到快要加载完成的时候再走快一些。切记要保持进度条的运动状态,否则用户可能会以为应用程序卡住了。

12

展示加载步骤

除了展示进度百分比外,我们还可以尝试展示加载的步骤数。用户虽然不知道加载每一步需要多长时间,但是通过剩下的步骤数可以大致预估出预估一个时间。

你可以通过经典的步骤描述形式来展示进度:

13

或者采用其他更有创意的方式:

14

屏幕模板预加载

如果你不能够缩短加载时间,那么就要努力优化等待过程。屏幕模板预加载另一个专注于加载过程而不是加载时间的方式。屏幕模板其实是一个空白的页面框架,各种信息在框架内逐渐加载出来。这种方式可以让用户感觉页面瞬间就加载完成了,其实信息是逐渐加载出现的。

Medium使用的就是这种方式,先加载出简单的线框图,然后其他信息逐渐加载完成。通过这种方式,用户的焦点将放在加载出的内容上面,而不是无趣的加载过程本身。

15

不要使用静态的进度指示器

静态进度指示器通常由“Loading...”,“请等待”等文字信息来表示操作正在进行。虽然 有反馈 总比什么都没有好,但是静态进度指示器不能提供足够的信息,用别的进度指示器更加合适。

16

最后一件事

为了让用户在等待是不会无聊,可以通过一些小动效来吸引他们的注意。这可以是有趣的东西,或者让用户感到惊奇的元素,只要是能够吸引用户注意力知道加载完成的任何方式都可以。一个精彩的动画可以帮助用户轻松的度过漫长的加载时间。

结论

提供反馈对于良好的用户体验来说是至关重要的。及时的反馈可以减少用户的不确定感,并且延长用户等待的时间。

 

原文:Progress Indicators in Mobile UX Design

编译作者:黄韦

原创文章,作者:黄韦,如若转载,请注明出处:https://www.iamue.com/13748/

(0)
黄韦黄韦
上一篇 2016-03-31 11:13
下一篇 2016-04-04

相关推荐

  • 职场趣事 | 70、80、90后同坐一个办公室,竟然是这样

    随着90后渐入职场,70后、80后、90后同坐一个办公室也越来越普遍。70后们有的正在向事业巅峰冲刺,有的甚至开始规划退休的生活;80后一边感慨青春已逝,一边拼命工作养家糊口;90后此时已经带着独有的个性和不被70、80后理解的文化杀入职场。都说三岁就会有代沟,更何况十岁?小编带你看看这三代人在生活方式、聊天话题等方面都有哪些区别↓↓↓大家对号入座看看,有没有戳中内心?(来源:中国新闻网)部落窝教育推出的原创Word、Excel、PPT...

    2018-03-13
  • 还有不知道锤子ROM新特性的吗?Smartisan OS v2.0.0 更新日志

    Smartisan OS v2.0.0 开始公测,本次更新新增功能 10 项。主要有:1.丑颜相机;2.超大图标;3.透明桌面;4.桌面人脸识别功能;5.欢喜云查岗。今天我们会将该版本随机推送给 520 位 Smartisan T1 手机用户。欢迎收到…

    2015-08-05
  • 解析「交互设计七大定律」在设计中的应用(上篇)

    交互设计之父阿兰·库珀说过这样一句话:“除非有更好的选择,否则就遵从标准”;在交互设计领域中,有很多被时间和前人验证过的设计法则,这些法则是从用户的行为逻辑中总结出来的,掌握这些法则能让我们迅速有效的完成自己的设计,接下来,笔者通过一些实例来解析下这些原则在设计中的应用~由于文章有点长,影响阅读体验,本文将分为上下两篇来发~一费茨定律(Fitts’ Law)1、费茨定律(Fitts’ Law)简介费茨定律是由保罗·费茨(Paul M. ...

    2018-02-03
  • 界面设计之尺寸

      作者:Musen_xiong 下载地址:http://pan.baidu.com/s/1kTGEPbp  

    2015-01-22
  • 界面交互动效核心知识的分类与总结

    这篇文章是基于我自己的理解对界面交互动进行了分类整理和总结。

    2017-05-02
  • 设计师要懂心理学の视而不见

    著名的“数传球视频”,先做个小测试:你能数出来,白队一共传了几次球吗? 这个视频是“无意视盲”和“变化视盲”典型的例子,揭示一个现象:用户经常对重大变化视而不见。 眼动跟踪技术可以跟踪记录人眼观察的方向,确…

    交互设计 2014-11-20
  • 场景是如何应用到交互设计的?

    我想在互联网领域,大家对“场景”这个概念并不陌生,但组成场景的关键因素有哪些?场景是如何应用到交互设计的?在工作之余,整理下相关知识,相信对大家的产品日常工作有一定的帮助,感谢大家抽出时间阅读,欢迎批评指正。1.场景的基本概念场景是指用户在一定的时间、地点等特定的情景下为了满足某种需求而触发的使用某种方法解决需求的行动画面。其关键因素包括用户、情景、需求、方法。产品的应用场景就是用户使用产品来解决需求的实际应用场景,比如上班族小张在午餐...

    2018-03-02
  • 一年多的时间中经历2次爆发,Faceu在运营方面的过人之处在哪?

    作者:思达维琦   1. 产品介绍 1.1 产品形态与定位 faceu激萌是一款主要面向年轻用户(15-35岁女性为主)的自拍P图工具、视频社交工具,在app store中的官方描述为“Faceu激萌—动态贴纸、美颜自拍、视频聊天、卖萌神…

    交互专题 2017-08-07
  • 2018年用户体验趋势(一)

    2017年,我们见证了很多。在与全世界的189489位设计师策划并分享了1926条链接后,我们从行业内的所写、所说和所想中,预见了几个趋势。以下就是2018年用户体验的预期。#1UX的死亡和重生作为设计师,我们一直致力于能够参与早期的战略决策。如今,我们获得了一席之地,接下来要怎么做呢?APP关掉了新手体验怎么办?这有一份最好的实践清单;不确定网站适合哪种菜单?就用这个模板库吧;首页的标题不够吸引人?咱们来做做A/B测试...与此同时,...

    2018-02-28
  • 国际用户体验设计论坛邀请函

    点击上方蓝字关注我们国际用户体验设计论坛暨中国工业设计协会用户体验产业分会第一届理事会预备会!  开始报名啦  !官方海报如下👇报名方式一👇长按识别下方二维码,通过报名页面报名👇报名方式二点击文章最底部“阅读原文”,通过H5报名页面完成报名了解我们关注我们长按下图二维码关注“UXE优艺智造”这里有最新的行业动向最前沿的学术研究来一探用户体验的商业价值吧联系我们电话15868193198邮箱uxestudy@126.com欢迎投稿

    2018-03-30