移动交互设计中的进度条设计

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 系统。”

定制动画 vs 系统动画

注：本文编译自《Progress Indicators in Mobile UX Design》，只选取了上半部分内容。