我们在很多产品上都能看到进度条的存在,它们的表现形式也是多种多样。对于设计初学者来说,可能不太清楚进度条存在的意义及场景中的运用,今天UI设计培训像素妹就来给大家梳理一下。
为什么进度条的存在能够提升用户等待的耐心,并且促成一个积极有效的用户体验过程呢?原因是人天生喜欢掌控,对于未知的不确定性会产生焦虑、害怕的情绪。就像在网上看到一个男追女的段子,男孩每天对女孩嘘寒问暖,但因为对方迟迟没有给有效的反馈,最终放弃了。很多人喜欢打游戏,野怪身上的血量条能给玩家实时有效的反馈,所以玩游戏是一个比较放松的过程。如果在追求过程中也能有一个进度条,相信追求者就会有更多的耐心和热情了。
在产品设计中也是这样,进度条可以及时地反馈信息,让用户有更多的耐心去等待程序作出响应,使等待过程变得清晰而流畅。比如在网上买东西,现在的平台基本都有快递数据实时显示,这种可视化的信息让用户有了明确的心理预期,对快递到达的进度有了更多的把握,减少了对无聊的等待时间的感知,避免产生焦虑感。
1、明确进程型进度条
这种进度条非常常见,可以明确告诉用户当前动作需要多久能完成,用户能够从视觉上明晰当前进度,如下载进度条、loading等,可以配合百分比使用。
2、不明确进程型进度条
如果用户在动作进行过程中,没有被告知这个过程需要多少时间,而只能默默等待的话,就是不明确进程型进度条。若等待时间太长,用户会对局面失去了掌控,容易产生烦躁的情绪,造成不好的体验感受。
1、线性进度条
这种进度条很常见,一个明确的线性进度条,可以配合百分比使用,从0%到100%有递增的动态变化,让用户对整体进度有更多的把握,缓解等待时的焦虑感。
长时间的等待会影响用户体验,我们可以让用户专注于数据加载过程而非等待时间本身。比如在网络状态较差、甚至是飞行模式下点击微信的文章链接,刚开始进度条是正常速度加载,后面速度会放慢,随着进度条越来越接近终点,用户的焦虑就会少很多。不过当等待时间很久还是没有响应的话,这个“假的”进度条就不再有参考意义了,会显得比较尴尬。
像音乐播放器、视频播放器页面中的进度条,作用就不再是缓解用户等待的焦虑感了,而是重在展示当前状态,无需用户等待,让用户明确当前状况,便于后期做出相关操作。
除了动态的线性进度条,还有静态的,这种进度条通常不需要用户等待,只是呈现出来一种稳定的状态,让用户了解当前状况,如某网盘的容量进度。
2、圆形进度条
进度条并不是只有条形的,还可以有别的形式,圆形进度条通常采用的形式是环形动画。
第一种是循环的环形动画,这种方式受制于服务器加载数据的网络情况,可控性比较差,不会清楚的告诉用户当前动作完成需要多少时间,适合10秒以内的加载等待。如果时间太久的话,用户就会失去耐心甚至放弃了。正因为等待时间的不确定性,可以配合文字向用户传达一些信息,比如“页面正在努力加载”,鼓励用户尽可能多点耐心。
第二种是单次的环形动画,如下面左图是一款番茄闹钟与白噪音应用,通过设定目标时间,让使用者在这个时间内保持专注,视觉表达上依靠圆形的逐渐闭合表示整个进程的完成,用户可以较为清晰的看到当前状态。右图是一款音乐APP,正在播放音乐时底部会出现圆形进度条,展示出当前的播放状态。
3、步骤型进度条
这种进度条,用户可以看到总的步骤数,内心有一个心理预期,便于对接下来的进程有明确的评估。
4、趣味型自定义进度条
人们讨厌等待,如果能让用户忘记等待这件事本身,尝试一些能够分散用户等待的注意力,给他们一些超出预期的小惊喜,可以促使用户多点耐心去等待加载完成。我们可以自定义进度条,不再局限于基础形态,结合动态效果,可以做出丰富多样的有趣的进度条设计。
人们都喜欢一切尽在掌握之中的感觉,进度条便是一个能够让用户等待过程变得友好、流畅的好方法。一个优秀的进度条设计可以改善等待体验,减少用户焦虑,帮助他们更加顺利地完成目标。