进度指示器——是菊花还是进度条？

Posted 2023-03-09

参考技术A 话说大叔我以前以为菊花就是朵单纯的菊花，撑死了也只是个会转的菊花，没想到，它居然还有一个高大上的名字叫做进！ 度 ！指！ 示！ 器！顾名思义：表示进度的机器。瞬时间，我不能仅以看一朵小菊花的眼神看待它了，因为那显得我特别的不纯粹！

为什么加载要用一个转个不停的菊花？

你有没有忍受过一个仿佛要加载到天荒地老的菊花？

到底进度指示器是个什么鬼？

网站上列举了几个例子：Progress Bar进度条，Throbber平面动画，Splash Screen启动页，Mouse Pointer/Spinning Pinwheel鼠标/旋转转轮，Simple Textual Percentage Figure简单文本百分比，他们都属于进度指示器。

从上面这段定义中我们可以总结出：

在这个基础上，ios平台和Material Design分别对进度指示器进行了划分和场景规范。

从上面这段定义中我们可以总结出：

在iOS平台里，分为可量化和不可量化两种场景，这两种场景有着不同的形式和交互。并且他们更推荐用进度条，可以理解为尽量让用户可预知他们即将花费的时间。

从上面这段定义中我们可以总结出：

Material和iOS对于进度指示器的的相同之处在于分了两种类型指示器：确定和不确定。但是MD对于不确定的定义比iOS要多两个内容：1、不可量化时间（共同点）；2、不确定的等待时间（不同点）；3、没有必要指出还需要多少时间（不同点），除此之外，MD里的不确定指示器可以转成确定的指示器。

看完上面的定义我们大致了解他们之间的区分，但是这里我们要注意一个细节，不确定指示器有两种理解：不确定时间长短（是1秒还是3秒），不能估算出有多长（未知时间）。在 iOS的描述中，明确的就是指的第二种（英文原词已经附上），而Material Design里面显然拓宽了对不确定时间的理解。

最后回到之前的问题上：

为什么加载要用一个转个不停的菊花？

答：他想告诉你，你要等一会儿哦，慢慢看我转～可是要等多久？我不告诉你～（差评）

你有没有忍受过一个仿佛要加载到天荒地老的菊花？

答：太多次了，转到老壳发晕。所以有比较好的设计就是，当他转的时间超过一个值时，就会直接显示加载失败或其他，不会让加载指示器无止尽的加载。（差评）

到底进度指示器是个什么鬼？

答：看上面。

以下是额外的内容：

在设计的时候，对于用户而言，他根本不Care什么量化不量化，他只希望越快越好，如果不能快，那就告诉我还要等多久。所以，下面展示的是用户的耐心范围：

每个范围对应着用户的状态：

0到A秒之间的是用户感受不到，你不需要做任何事情。

0到B之间是用户可以忍受的时间，你可以适当的分散点用户注意力，比如说什么胸口碎大石啊之类的动效，不过这种场面看一次还好，让你一天看上十次胸口碎大石你也会烦吧？所以现在有skeleton screen，还有MD的Placeholder UI这种类似于占位符的效果，让用户专注于内容本身，而不是加载器。

0到C之间，EMM...时间有点久了哦，超过这个时间你就要告诉用户当前进度状况了，加载了多少，还有多少，让用户心理有个底。

在此，Nielsen Norman Group有一个参考数据：

所以再次回到上上面的问题：

你有没有忍受过一个仿佛要加载到天荒地老的菊花？

答：有，解决方案：如果用户已经意识到这个菊花转了很久，那么有两种方法，要么你就告诉他还要等多久，要么就设置一个时间机制，在加载超过这个时间之后就默认加载失败，让用户进行再次操作。