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

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》,只选取了上半部分内容。

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,799评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,066评论 4 62
  • 许多刚做不久的销售通常容易走进一个误区,就是销售做得好都是那些口才好、能说会道的人,其实不然,客户不会仅仅因为你能...
    跑腿僧阅读 370评论 0 0
  • 我问你是谁? 你说:我是夏姑娘! 我问夏姑娘 你能否帮个小忙 让空气变得凉爽 夏姑娘说: 我要的是骄阳似火 荷花满...
    淡然如梦阅读 219评论 0 0
  • Wish to have a chance to say "Nice to meet you again".
    渡枯荷阅读 185评论 0 0