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

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

相关推荐

  • iOS 9人机界面指南(二):设计策略

    译者注:本文译自苹果官方人机界面指南 iOS Human Interface Guidelines (2015年10 月21日),由腾讯ISUX设计师翻译整理,非发文者一人之作。译文首发于ISUX博客,如在阅读过程中发现错误与疏漏之处,欢迎不吝指出。后续章节会陆续更新,敬请期待。

    2017-06-01
  • 初步谈谈iOS11的交互设计

    这是一篇很赶的文章。源于我看到iOS11的介绍后的一些想法,希望能在此跟大家聊聊。从iOS11的更新中我们可以看到苹果的两个方向:1、提升iOS的生产力;2、应用之间更加的无缝衔接和单应用的无声扩张。我们来看第一个…

    2017-08-01
  • 设计总结|基于大屏设计的QQiPad主题

    主题一直是QQiPad比较薄弱的一块,在用户的强烈呼声下,项目组决定在6.5版本上线新的主题,为此做了大量的尝试和思考。基于大屏设计的QQiPad主题有何特点?应该如何设计?在此分享本次主题设计总结。

    2017-05-09
  • Axure RP 8 入门手册 – 第6章(一)

    第6章概要与检视功能第1节概要功能第2节检视功能-页面样式第3节检视功能-页面说明第4节检视功能-页面属性第5节检视功能-元件命名第6节检视功能-元件样式第7节检视功能-元件说明第8节检视功能-元件属性第9节检视功能-元件交互第10节检视功能-组合属性第1节概要功能千语:楼叔,我在做原型的时候,画布里面有很多元件,有的还被别的元件盖住,选起来很不方便,有没有什么好的方法呀?小楼:别急,大妹子!Axure的概要面板中能够很方便的管理元件,...

    2018-04-22
  • UX小白 | 不谈它?算什么用户体验设计?

    这其实只是个引你进来的标题,我今天真正想说的事情其实是它——你在做一款产品的时候考虑过它的无障碍性(Accessibility)吗?无障碍性(Accessibility):在图形交互界面为基础的交互方式中,无障碍性也往往被称为可访问性。“无障碍性(accessibility)意味着产品设计应用时应考虑到,无论是因为年龄、事故或疾病而有认知、感官或者移动障碍的人,还是没有此类障碍的人,都应能够有效使用这个设计。”——《About Face...

    2018-01-31
  • 交互设计完全学习指南

    交互设计起源于网站和平面设计,但已成长为单独的一个领域。工作内容不仅仅有文本和图片,交互设计现在负责创造屏幕上用户可能会划动、点击、按压或输入的每一个元素,简而言之,就是体验的互动。这篇文章为对交互设计感兴趣的人提供了几个好的点可以开始行动。为了这个目的,我们简要的介绍了交互设计的历史、指导原则、值得注意的贡献者和与这个极具吸引力的学科相关的工具。即使你已经是一个交互设计师,阅读下这篇文章然后在下方评论区分享你的想法吧!目录什么是交互设...

    微信热点 2018-05-06
  • Axure RP 8 入门手册 – 第6章(二)

    第5节检视功能-元件命名千语:楼叔,我才问一个问题,你就给我讲了这么多!好感动哦!小楼:嘿嘿,因为这个群里你最大嘛!千语:切!反正你也有空,顺便把元件的设置也给我讲讲吧!我看不管是元件的样式还是属性,都很复杂呢。小楼:您好!因为网络原因,您发送的消息是乱码。千语:还想等你给我讲完,发张我昨天泡温泉的照片给你呢!小楼:你看,其实这个元件设置也非常简单,你看在点中一个元件后,检视面板中就会呈现与该元件相关的设置……从上至下,首先看到的是元件...

    2018-04-22
  • EVA「Flow」Living in the Future | Flow 正式上线

    吕骋说:“智能语音助手解决的是人机交互,但并没有解决人人交互,我认为,把人机交互和人人交互打通才是最重要的。” 为了保证最佳的视觉体验,我们特意制作了搜狗输入法的对应皮肤 大家在搜狗输入法的皮肤商店里,…

    交互设计 2015-09-11
  • 不看后悔的产品与运营结合的用户体验

    作者第一次拿实例产品进行文字和图片的分析。如果有兴趣的朋友可以回复文末的关键词进行体验产品。

    2017-05-24
  • 用户体验方法论的演变

    用户体验工作流程令人困惑,即使对大多数设计师而言也是如此。最初Donald A. Norman创造了用户体验设计的概念:“我发明了这个词,因为我认为人机交互和可用性太窄了。我想涵盖该系统的所有方面,包括工业设计图形,交互界面,面对面交互和使用手册。从那时起,这个词被广泛传播,以至于它开始失去意义。”而到2016年,Don Norman开始谈及对于这个词的误解有多严重。在彻底了解现代用户体验之前,我们需要回顾20世纪90年代以来设计和开发...

    2018-03-07