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

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

相关推荐

  • 交互设计要学什么这个问题终于得到解决了-交互设计师的知识架构

    如果你也是一枚刚入门的交互设计师,是不是常有这样一种感觉:不知从何下手,闷头读了一大堆书、学了一大堆软件、画了一大堆图之后还是感觉心里不踏实,总害怕自己还缺点什么,恨不得要有本《交互设计学习大纲》就…

    2015-01-25
  • 腾讯MXD:资讯app为什么都长一个样?

    作者: Celine Wang@腾讯MXD   打开手机,国内的资讯 app 除了品牌 logo 外,几乎都长一个样。就如你敲开不同的门,发现房间不光装修风格一样,还住着品味雷同的主人。是什么造就了它们? 资讯产品的本质是连接内容…

    交互专题 2023-03-03
  • 用户体验在人工智能下的改变

    用户体验在人工智能下的改变安全性越接近系统底层的技术越影响用户体验,例如手机中毒或者信息被盗都会对用户产生巨大影响;如果关系到国家安全,整个社会的秩序都会被扰乱,所以安全性是产品以及用户体验的基础。效率1.实时性随着计算能力和算法的提升,计算机可以做到实时反馈结果。在以往的重要直播上,视频会显示实时字幕,这是通过给原有直播信号增加5-10分钟的延时,速记员在这短暂的时间内快速整理并输出字幕,但这需要消耗多名速记员的大量体力和脑力。在人工...

    2018-03-24
  • 蘑菇街App改版设计总结

    新版app在短短的一个多月内,完成了从方向调整到开发上线的全过程,而设计在其中仅仅只占一周多,这也是互联网公司面临的共性难题。为了配合产品小步快跑的策略,我们采用敏捷设计的方法:快速地进行竞品分析,根据低保真原型一边进行业务细化和方案讨论,一边进行视觉风格的设计。

    2017-05-12
  • 是不是该考虑加入动态交互了?

    本文转载自:阿西博客 原始链接:是不是该考虑加入动态交互了? 一个优秀的APP交互动画不仅仅是炫,而且要实用,有的还要考虑手机的性能等因素,所以想做一个好的交互不并容易,今天就带你来见识一下什么叫洋气范儿…

    2015-03-21
  • 独家UED手机端 保险投注

    活动时间:2018年3月1日中午12:00至2018年3月31日上午11:59 (北京时间)针对于优惠期间内第一次使用头头移动平台的会员50%本金返还,高达RMB 88手机保险投注!活动详情:1.头头移动平台包括手机网页版版平(m.toutou158.com),UED手机端安卓版和iOS版;2.没有下载头头手机端安卓版和iOS版的会员可以进入官网www.toutou158.com下载;3.头头会员需在优惠期间通过头头手移动平台投注第一笔...

    2018-03-29
  • Axure rp视频教程36集,免费!

    1-36集,免费学习~~~点击“阅读原文”或长按下面二维码立即观看视频。对教程有疑问,请咨询微信:13388182428

    2018-04-09
  • 译文 | 4种帮助设计师整理设计思路的方法

    当我们刚刚接手一个项目的时候,我们总能在初期迸发出很多有趣的想法,很多闪光的细节都是偶然闪现的,但当我们在设计的过程中,有多少能够真正落地到产出中呢?怎样才能成功捕捉到这些有趣的创意,并使之在后续的产品设计中表达出来?本文向大家推荐了四种方法,帮助大家整理设计思路,避免创意在你的脑海里逃走!下面进入译文。

    2017-05-25
  • 2018年04月07招聘岗位

    诚聘:通辽澳鼎医疗器械公司诚聘:工作人员要求:40岁到50岁之间的女性,能长期工作的,有爱心,有孝心,家庭没有负担的,高中以上文化程度,语言表达能力好待遇:中午有工作午餐,每个周日休息,节假日休息,基本工资1800元,满勤奖200元,年底奖金不少于12000元。联系人:闫经理。联系电话,15247572846,15374967717不能长期工作的勿扰!招聘服务员工资底薪2500加提成收银员2700元加提成招聘电话:8663888,157...

    2018-04-08
  • 【原创】交互设计七大标准(7) 奥卡姆剃刀定律(简单有效原理)

    奥卡姆剃刀定律(Occam's Razor, Ockham's Razor)是由14世纪逻辑学家、圣方济各会修士奥卡姆的威廉(William of Occam,约1285年至1349年)提出。这个原理称为“如无必要,勿增实体”,即“简单有效原理”。正如他在《箴言书注》2卷15题说“切勿浪费较多东西去做,用较少的东西,同样可以做好的事情。”▲ 奥卡姆剃刀原理如果你有两个类似的解决方案,选择最简单的。这些所提到其实就是驭繁于简。把事情变复杂...

    2018-02-22