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

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

相关推荐

  • 一只设计师的工作小结:在想好之前,先克制你的表达欲

    我一直觉得做设计,其实是在克制,潜移默化是最好的。在你没有想好如何表达,最稳妥的做法是克制你的表达欲。

    2017-05-05
  • 做完这5次Axure实操,0基础不仅做出高保真,还能提升产品交互

    众所周知,Axure是产品经理必备的工作软件。BAT对于产品工作2-3年的面试者,均要求熟练使用Axure。别让Axure阻碍你的高薪产品路!别等面试时,才发现自己掌握不够。“起点学院&腾讯课堂”联合打造6周Axure实战班,第7期开启报名!从第1期到现在,2000多位同学学习成长,好评如潮。花3-5分钟了解,很快Axure对于你,就不再是问题。(真诚地说)产品思维和交互贯穿全程,学完不仅能画出高保真,同时告别画图经理。具体来看,通过6...

    2018-04-07
  • 当戒指也走向智能化

    小编导语:这是这是一个不错的创新产品设计,特意推荐给大家看看哦。 这款叫做 Smarty Ring 的智能戒指使用了防过敏不锈钢材质,宽 13mm,厚度为 4mm,黑色给人一种酷炫高冷的感觉。 它不仅可以当手表使用,而且它…

    2015-04-11
  • Smartisan OS v3.1.0 功能列表(M1 / M1L),创新交互设计“One Step”与“Big Bang”变革安卓阵营。

    本次更新主要增加了两大重磅功能“One Step”与“Big Bang”,前者将常用的点击与分享操作放置于边栏,快捷切换与分享,快人岂止一步;后者可以将大面积按压下的文字区域,智能拆成字和词,你可以自由选择与搭配,同时…

    2016-10-19
  • VR/AR开发程序中直接搜索Sketchfab的3D素材 / Vive Pro 如何买更省钱?/ Vulkan拥有直接内存分配器

    从今天起试试这个新形式,把重点的资讯提炼后合并成一条,欲知详情就摁紧二维码跳转阅读啦。我们依然尽量让这些从外媒翻译过来的信息以最合适的中文翻译方法论润饰和(或)修改后放在这里。有什么好想法新想法告诉我们!【Sketchfab推出新API,3D内容“搜索引擎”可植入VR/AR应用中】Sketchfab今天推出了最新的 Download API(下载API),允许应用开发者直接把Sketchfab内容导入他们的3D、VR和AR软件,这样就无...

    2018-03-21
  • 【UE&用户体验面试题】阿里巴巴 2015 用户体验专员实习生笔试题

    阿里巴巴 2015 用户体验专员实习生笔试题 1.某购物网站是大陆市场的领导者,为了扩展台湾市场,专门推出了该网站的台湾版并已上线。为了在台湾竞争激烈的电商 环境中脱引而出,吸引更多从未使用过该网站的台湾用户…

    2015-07-30
  • 预加载:尝试分析这种自动加载的交互方式

    网站运营者的目的是为了增加阅读量,用户停留时间。而大部分用户一般是比较迷茫的,他们不知道自己想要读什么。

    2017-05-01
  • APP设计:那些打动人心的设计点(一)

    打造用户喜欢的产品,让产品从能用、好用到爱用,是每个互联网从业者的使命,为你的APP增添一些打动人心的小设计,不失为一个好办法。当然,前提是该设计能为用户带来价值,千万不要为了设计而设计。

    2017-05-06
  • 听说微软这次硬了?苹果赶紧发布了个触摸条压压惊!

    #交互学堂# 前天晚上,#微软# 赶在 #苹果新品发布# 会的前头抢先发布了一波硬件产品,出人意料地推出了Surface Studio 一体机以及交互配件 Surface Dial。一时间设计夹小编朋友圈里的设计师们都沸腾了,惊呼 “巨硬…

    2016-10-28
  • QQ空间是怎么设计直播功能的?

    什么?空间也做直播了!没错,在当今直播的热潮下,国内外的直播产品大都是基于陌生人的关系链,且内容结构与视觉效果同质化严重。如何让用户更好的分享生活?如何为用户提供差异化的内容消费?如何给用户更多新鲜趣味的互动玩法?这是我们做直播希望解决的问题。
    Qzone依托自身优势,另辟蹊径地发掘基于好友关系链的直播场景。与此同时,我们不断探索更符合空间用户直播的设计形态,发掘与竞品的差异点,寻找直播的下一个突破口,通过系统化的设计,为用户提供非一般的直播体验。

    2016-07-27