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

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

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

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

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

进度指示器 Progress Indicator

A progress indicator is an element of a command line interface, a textual user interface, or a graphical user that is intended to inform the user that an operation is in progress, to reassure that the system is not hung or waiting for user input, and often to provide the user with an estimate of how far through a task the system has progressed.

进度指示器是命令行界面,文本用户界面或图形用户的元素,旨在通知用户操作正在进行,以确保系统未挂起或等待用户输入,以及通常为用户提供任务的系统进展的估计值。(摘自维基百科)

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

抠脚大叔画

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

进度指示器主要功能是指示某个事件正在发生。(至于能不能达到缓解用户焦虑的情绪我就不得而知了,起码我每次看到这些就知道:看来要等会了)

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

iOS设计规范描述如下:

Activity Indicator活动指示器

当一个任务无法量化(unquantifiable task)时活动指示器转动,例如加载或者同步复杂的数据时展示。当任务完成时它消失,活动指示器是无法交互的。(1、进度条比活动指示器好;2、保持活动指示器运动;3、如果有用,当等待任务完成时提供有用的信息)

Progress Bar进度条

一个进度条包含了一个从左到右的进度填充过程来表明可知的持续时间(known duration)。进度条不可交互,尽管他们经常伴随着一个取消掉相应操作的按钮。(1、永远精确的报告进度;2、对具有明确定义的持续时间的任务使用进度条;3、隐藏导航栏和工具栏中未填充的轨道部分;4、考虑自定义进度条的外观以匹配您的应用)

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

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

Material Design设计规范描述如下:

线形的和圆形的 

Material Design 提供了两种视觉上区别的进程指示器:线形的和圆形的加载指示器。只有一种类型应该代表应用中的每种活动,例如:加入一个刷新行为在屏幕上显示的是圆形加载器,那么在其他地方同样的操作不应该用线形的加载器。

确定的和不确定的指示器

确定的指示器显示进程要花多久时间。他们经常被用在进程完成度可测上。

不确定的指示器表示不确定的等待时间。 如果无法检测到进度,或者没有必要指出活动需要多长时间,则应使用它们。

不确定的指示器可以转成确定的指示器

当反馈时间为2-9秒时,可使用循环的加载样式。当反馈时间超过10秒时,须使用带有进度指示的加载样式(参考数据)。

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

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有一个参考数据:

0.1 second is about the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback is necessary except to display the result.

0.1秒是关于让用户感觉系统瞬间响应的限制,这意味着除了显示结果之外不需要特殊反馈

1.0 second is about the limit for the user's flow of thought to stay uninterrupted, even though the user will notice the delay. Normally, no special feedback is necessary during delays of more than 0.1 but less than 1.0 second, but the user does lose the feeling of operating directly on the data.

即使用户会注意到延迟,1.0秒也是关于用户意识流保持不断的限制。通常,在超过0.1秒但小于1.0秒的延迟期间不需要特殊反馈,但是用户确实失去了直接操作数据的感觉。

10 seconds is about the limit for keeping the user's attention focused on the dialogue. For longer delays, users will want to perform other tasks while waiting for the computer to finish, so they should be given feedback indicating when the computer expects to be done. Feedback during the delay is especially important if the response time is likely to be highly variable, since users will then not know what to expect.

10秒是将用户的注意力集中在对话上的极限。对于较长的延迟,用户将希望在等待计算机完成时执行其他任务,因此应该给出反馈,指示计算机何时完成。如果响应时间可能变化很大,则延迟期间的反馈尤为重要,因为用户将不知道会发生什么。

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

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,921评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,635评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,393评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,836评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,833评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,685评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,043评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,694评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,671评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,670评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,779评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,424评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,027评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,984评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,214评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,108评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,517评论 2 343