UI 设计中最重要的规则之一是系统状态的可见性。其中原因很简单,为了减少用户的紧张感,你应该在合理的时间内反馈给用户到底在发生着什么。前往别让用户去猜,你要告诉用户在发生着什么。这样的反馈中最常见的其中一种就是进度条(progress indicator)。
通过这篇文章,我们会了解主要的集中进度条还有他们的使用案例。
好的交互设计是提供反馈的
app 能提供即时的反应的最好的,但是有时候你的 app 会由于种种原因反应熟读可能不够快。延迟常常是由于加载慢导致的。对于这些情况,你必须让用户确定你的 app 还在处理他们的请求,你的 app 正在工作。
最关键的,反馈可以为以下三个问题提供答案:
1)目前的状态:现在在发生什么?
2)结果:刚刚发生了什么?
3)未来的状态:即将会发生什么?
好的进度条是怎样的?
好的进度条总是提供即时的反馈,他们告诉用户这个 app 需要更多的时间去处理用户的请求,告诉他们大概还要多久才能处理好。好的进度条有点歌好处:
1)减少用户的不确定心理。(app 让用户知道它正在运行)
2)让用户愿意等待,并且减少用户对时间的感知。(app 让用户在等待的时候有东西可以看,因此,这让用户更少地关注自己等了多久)
从用户点击屏幕开始(开始一个动作),他就开始等待了。系统应该马上提供一些视觉上的反馈,告诉用户它已经收到了请求。
对于任何超过一秒钟的动作,都应该使用进度条。但是对于任何加载时间少于一秒的行为,用动画去提醒都是让人分心的。
进度条的种类
进度条可以是确定性的,也可以是非确定的。
确定性的进度条能表明一个操作需要多久,操作已完成的百分比是可以识别的。
当需要提醒用户去等待,而具体要等待多久没有必要让用户知道时,使用非确定的进度条。
这两种进度条也是可以混合的。
回环动画
动态的回环可以告诉用户系统在运行,但是常常不会告诉用户他具体还需要等待多久。
一般而言,回环动画只适用于快速的动作(2-10秒),因为让用户盯着旋转的圈圈太久容易产生副作用。
此时解释为什么用户在等待(比如写上“正在加载评论”),可以让用户心里有底。
用户预期
默认的加载标志(比如 iOS 那个旋转的灰色圈圈)会有负面的暗示。它承担了太多的系统功能,暗示各种状态,包括设备在加载东西,连接到网络有问题,或者加载数据。因此,人们不会喜欢看到这样一个默认的加载标志,它不能告诉用户在加载什么、也不能告诉用户需要加载多久。
整合的动态回环
你可以把已有的控件(比如按钮)和动态回环整合起来。对于安卓应用程序而言,一个圆形加载标志可以和浮动的动作按钮整合起来。
这里提交成功是通过圆圈的完成来提示的。
系统的还是定制的动态回环
Facebook 的 app 有一个关于动态回环很有趣的经验。Rusty Mitchell 谈到 Facebook 加载提示的时候说到:“在使用 Facebook iOS app 的时候,当用户看到的是定制的动画(图左)时,他们把延迟怪罪于 Facebook。但是当用户看到的是 iOS 系统的旋转动画(图右)时,他们更常去怪罪 iOS 系统。”
注:本文编译自《Progress Indicators in Mobile UX Design》,只选取了上半部分内容。