浅析进度条设计

排队等待在日常生活中是很普遍存在的现象，比如超市付款等待，银行办理业务等待、中午食堂买午餐等待。看似简单的排队等待，实则也会因为某些原因（如人员插入）会让队列前进相当困难，让等待变得漫长且烦躁。

同样的道理，在移动端界面设计中，进度条设计就属于等待的过程中，常用于视频播放、Loading加载等页面中。它属于反馈的一种表现形式，告知用户当前进度，可以让用户在等待的过程中不那么无聊。

本文主要从以下几个方面去讲述进度条的设计？

1、什么是进度条

2、进度条的形式及使用场景

3、使用进度条提升等待体验的方法

什么是进度条

进度条可以帮助用户对过程的长度和步骤有个预期，并且知道自己当前在那个位置，一般以直线状和圆弧状呈现。其表现一般都有一定的参照，同时有限定值存在，如果单纯的通过数字或文字表达，不便于用户理解，所以引入了图形化的元素，也就是我们常见的进度条。

进度条的目的在于通过向用户反馈当前的响应进度和所花费的时间来让用户在等待过程中放松下来。用户不应该被傻傻的丢到一边。所以进度指示器是连接用户和系统间的一座桥梁。

其反馈的作用：

1、让用户了解当前的状态

2、给用户传达一个等待时间限定，减少用户对无聊时间的等待，在一定程度上可以分散转移用户对等待时间的注意力。

进度条的形式及使用场景

进度条设计可以分为两大类：一是确定性进度条，明确告知用户需要多久完成，有时间或数字显示；二是不确定性进度条，用户在等待反馈的过程中没有时间显示，用户只能一直处于等待中。

1、确定性进度条

一般用于较长时间的进度显示，明确告知用户进度需要多少时间完成，让用户对当前进度和剩余等待时间有个明确的心理预期，包括倒计时、直线进度条、圆弧进度条。

倒计时进度条一般用于登录注册页面，采用以数字倒计进度，在设计时，考虑到网络信息的传输，倒计时一般设定在60s之内，避免时间太短造成用户来不及填写，或避免时间太长给用户带来烦躁感。

圆角直线进度条在设计中是比较常见的，采用圆角矩形的形式，主要用于音乐视频播放页面、等级晋升页面、软件更新页面中，进度条通常伴随着数字出现，且数字位于直线的两端，根据数字和图形的位置，用户可以很清楚的了解当前进度的进程。

圆弧进度条在页面设计中占的面积较大，且突出进度条的进程，页面所含文字信息较少。主要用于健身类APP

同时确定性进度条还包括物流购买进度，这类型进度持续时间较长，比如淘宝待揽件和运输进程完成后，其状态变为红色，其他没有完成的阶段处于灰色状态中，用户就明白当前的进程。

2、不确定进度条

一般用于短时间的加载，用户在等待反馈的过程中没有时间显示，用户只能一直等待。因为这种形式从服务器加载数据，其过程是充满风险的，因为客户端跟服务器间的网络连接情况并不是掌握在开发人员的手里。包括菊花状进度条和矩形进度条。

此矩形进度条常见于多媒体数据加载（图片、视频）、浏览器加载，直线两端没有起始终点值。加载进度往往与网络有很大的关系。所以此类进度条是不稳定的。

菊花状进度，当加载时间在2-10s内考虑这种方式，因为没有足够的信息显示用户需要等待多久时间，一般用在界面顶部标题，且搭配文字出现，相对而言，微信的加载进度比QQ做的好，因为微信在加载的同时有收取中表示当前进度，让用户更容易理解。

使用进度条提升等待体验的方法

1、使用反向的填充

经调研显示，反向（与进度条行进方向相反的）填充的进度条看起来比那些正向的进度条要快不少。比如下图中蓝色那部分就是填充的，在加载时，它向左移动会给人的感觉整个加载速度更快。因为它创造了一个速率被增加了的假象，能影响到我们对于进度时间的感知。

2、等待过程中有清晰的反馈

比如下图中用户等待的过程中，文件扫描进度是不断变化，用户很清楚当前情况。

3、积极的开始，美好的结束

一般进度进程包括：开始、中间过程、结尾。如果能在结尾时增加稍许愉快的成分，即使进程很慢，用户仍然会对整个过程产生愉快的感受。比如说下图中淘宝游戏中当用户升级成功后，会出现画面，给用户一些奖励，即使升级过程很漫长，用户还是很有期待感。

结论

1、进度条是通常以直线状和圆弧状的形式出现，通过数字或图形化元素给予用户反馈，帮助用户对过程的长度和步骤有个预期，并且知道自己当前状态。

2、进度条包括确定性进度条和不确定性进度条两种，确定性进度条明确告知用户进度需要多少时间完成，让用户对当前进度和剩余等待时间有个明确的心理预期；不确定性进度条是用户在等待反馈的过程中没有时间显示，用户只能一直处于等待中。

3、在设计进度条时，我们可以通过反向填充，清晰的反馈和给予用户美好的结束感来提高用户在等待过程中的感受，让等待不再无聊。

参考链接：

https://www.uisdc.com/process-bar-design-method无论哪种进度条设计，从这4个方面入手就能轻松搞定！

http://www.woshipm.com/pd/388804.html13个提高「进度条」用户体验的设计技巧

http://www.chinaz.com/manage/2012/0522/253144.shtml从排队等待谈进度条设计