进度条篇 | 从5方面入手，助你设计出优秀的进度条！

用户在做任何一件事情时，最反感的事情就是没有预期的等待，千万不要高看其耐心。当用户在完成某个任务时等的太久而耗费过多的时间成本ps安装进度条卡很久不动，可能会毫不犹豫的离开，转身投入其他产品的怀抱，当然，如果你有足够的信心能召回用户、或产品属于垄断性质用户不得不使用的除外。

有时候，通过技术手段可以在一定程度上加快程序响应速度，但遇到部分实时处理信息或需要系统精确的计算则没办法加快，用户别无选择、只能等待。想减少用户在等待过程中的无聊、焦虑感，这时，在你的产品任务流程中可增加一个清晰可见的进度条来帮助用户追踪信息，利用实时反馈当前进度让用户具有掌控感，并且还能通过趣味化的视觉效果或提供有帮助的信息来消耗其等待的时间，甚至一度超出用户预期，惊喜之余，用户的接受程度自然也就更高。

不管是PC端还是移动端，进度条的使用都非常广泛，如视频/音乐播放页、下载页、任务完成情况、调查问卷填写进度等，其表现方式也是多种多样。进度条的目的是降低用户在等待过程中的焦虑感，当进度条的反馈速度较快或即将完成时，用户还会有所期待或产生激动的心情，所以在设计之前我们需要对进度条有一个清晰的认知。在本文中，笔者将带领大家一起探讨进度条的设计技巧及使用方法。

一、进度条基础知识

1.为什么需要有进度条

有这么一句话“人类的一切恐惧都是来自于未知”，不难看出，焦虑的原因大多都是来自于对未来的不确定性。焦虑无处不在，尤其是近几年很多年轻人人一边打着“财富自由”的名号、一边却享受着“佛系”生存方式，在认知、能力、资源都没有跟上的时候依然迷之自信，焦虑大概就是最好的陪伴了。

当你下载文件突然在中途卡住了是否会焦虑？

到了饭点、点的外卖迟迟未到是否会焦虑？

线上买的商品过了好几天快递还没有送达是否会焦虑？

这些种种都是源于对时间的未知、对后续失去了掌控。在互联网如此发达的今天，缓解上述焦虑并不是难事，只需要一个进度条便能解决大部分问题。

进度条并非局限于口头上的“条形”，其视觉样式千变万化，最需要突出的应该是“进度”，能让用户清晰当前状态，通过图形、色彩、数字百分比与各种场景结合，将本身比较单一的进度条衍生出不同的类型，给用户带去不同的心理感受，不管是提高用户期待还是障眼法，都能让用户在等待的过程中产生无限可能。

2.进度条定义及使用场景

进度是指用户正在完成某个任务的速度，通过图形、图片或文字将任务的速度、完成度、剩余未完成任务量的大小进行视觉化即是大家所说的进度条。

进度条的使用非常广泛，例如下载进度、注册流程、调查问卷、安装进度、多媒体播放进度、物流轨迹、出票等过程...等，这些都是比较常见的进度条。另外，我们不能将进度条局限在条形或圆形里面，比如游戏中的人物血量/耗蓝程度/升级经验、地图迷雾、吃鸡跑毒，还有一些物品的消耗度、定时/定量的健身运动、商品限时大促都可以归类于进度条。

3.进度条给用户的心理感受

用户完成任何一件事情都需要付出对应的时间成本、精力成本或金钱成本，如果付出一定成本后并没有达到预期会不知所措，这时无论出于何种原因，用户很可能转身就走，即便在不得已、必须使用的情况下，也仅只是完成本次任务后便会永久离开。

在特定的场景中，产品无法解决程序响应或处理任务的速度，用户需要等待，必须付出很多、甚至超额的时间成本，这时，进度条的作用就显而易见。

首先，它能给用户一个明确的预期，知道自己当前正在做什么、做了多少、还剩多少，并且以此推断出大概的剩余时间；其次，一个优秀的进度条还能通过转移用户视线，将其带入对其他信息的了解或乐趣中，让用户短暂的忽略进度过程，以减少心理抵触；最后，进度条能缓解用户等待的焦虑感，不至于让用户自以为卡死、或任务无法完成而产生消极的想法。

4.需要一个信息明确、清晰可见的进度条

用户需要的是对信息的掌控、对未来的预知，如果进度条过于虚假或精确度较低，在进度完成之后并未满足自己的需求，焦虑感瞬间飙升并对产品失去信任。这就好比我们通过线上点了外卖，催了好几次，可商家每次都说马上送到却迟迟未见，一旦超出我们对时间成本的预期，宁愿花费更多的时间重新点外卖，也要退货的原因 。

产品需要考虑的是给用户一个信息明确、清晰可见的进度条。不难看出，常见的进度条基本都有百分比、已完成/未完成可视图形、色彩明暗对比等综合信息，用户可多角度的对进度进行模糊或精准了解。例如：下载进度中，有已完成、未完成、下载速度、预计剩余时间等信息，让用户对下载进程有一定的把控。另外，如果因技术原因，无法提供精准进程，尽量想办法尽量将精准度与真实情况靠近，也可提供其他信息转移用户视线或进行心理补偿。

二、常见的进度条类型1.动态型

动态型进度条一般用于系统自动处理某个任务而提供的实时进程提醒，在此期间，用户无需其他操作，安心等待结果即可。像大家平时看到的系统杀毒、下载、loading等均属动态型进度条。动态进度条的目的是让用户明确知道系统正在做什么、当前是否处于正常状态，让用户在等待过程中有心理预期。需要注意的是，这种进度条绝大部分都需要用户花费一定的时间成本，用户有权知道任务进程，只有进程达到100%才能进行下一步操作（暂停/取消中断属中断操作）。

在处理任务时，需要呈现当前状态、进度百分几（数字或色彩明暗对比）、大概剩余时间、暂停/取消中断操作等信息。当然，并不是所有动态进度条都具备上述信息，在实际工作中，要呈现的信息元素会受到多种因素的影响，要结合任务目标、场景、特征来设计，例如用户等待时长、信息的重要程度、开发成本等。

2.静态型

静态进度条弱化了进度的概念，需要在用户做出一定操作后才会有进度变化。其主要目的是告知用户当前状态，可为其他任务决策提供一定的参考条件，无需用户等待。

常见的如磁盘存储空间、学习进度、表单完成进度等，最重要的是需要突出进度节点、数据，以便用户做出其他方面的决策。

3.动/静结合型

综合了动态型、静态型进度条的特点，大多使用于视频/音频播放场景中，既有明显的进程动态、同时又明确了当前状态，可系统自动或人为手动控制进程，这种进度条有非常密切的时间关系ps安装进度条卡很久不动，却无需缓解用户等待的焦虑。

在正常情况下，“动态+静态”两者之间需要维持着平衡关系，如果存在优先级的高低，还需结合实际使用场景的变化来确定设计目标。例如抖音视频的进度条就相对弱化，因为短视频耗时原本就比较少，几秒到几分钟不等；而看电视剧/电影因为耗时较多就完全不同了，用户的操作需求较高，视觉优先级自然更高。

三、进度条设计流程

1.明确设计目标

首先，需清楚了解产品需求及用户需求，设计进度条的目的是为了更好的帮助用户明确当前状态、还是为了缓解用户在等待过程中的焦虑感，以此确立设计目标。

2.合适的进度条类型

根据设计目标合理的选择进度条类型，如上述提到的动态型、静态型或综合型。但进度条类型并不仅限于此，快递轨迹地图、外面送餐进度就与众不同，只不过这种类型只适合特殊性质的进度存在，并不会遍地使用。

3.信息元素及优先级

结合进度条使用场景及类型综合分析，确定好需展示的信息元素并罗列优先级，以便重要的信息能优先被用户看到，次要信息紧随其后。

4.视觉表现方式

表现方式虽然多种多样，但要想设计出实用性、易用性较高的进度条需以上述的分析结果为前提，并经过多方面思考，确保各图形、文字元素清晰可见，信息层级划分明确，尽量减少用户思考时间及认知成本。

另外，如果动态型的进度条需用户等待的时间较长，可通过增加其他有价值的信息或趣味化的内容转移用户注意力，让用户在不知不觉中轻松消耗掉等待时间。例如，进入全民K歌房间、加载歌词的过程中，系统会提供部分操作技巧及常见问题的处理方式；进入七雄争霸网游加载时，会通过打地鼠游戏给用户带来其他的乐趣。

四、进度条设计原则

1.不主动干扰用户

对于内容型产品，虽然用户对动态进度条有一定操作需求，但为了让其更专注于内容本身、尽量不要让进度条对用户产生过多的干扰，尤其是视频类应用，避免影响用户沉浸式体验。

类似抖音/快手这种短视频应用，对进度条的操作需求并不高，从界面中不难看出，进度条视觉效果相对较弱，并不会过多的吸引用户注意力；而腾讯视频的进度条在视觉上就强化了很多、相当抢眼，很明显对于电影/电视剧这种时间较长的视频，操作需求也是直线上升，但也没有就此过多干扰用户，显示3秒左右、在无任何操作的情况下即会自动隐藏，当然，这并非降低进度条的实用性，一方面得归功于通过其他操作依然可控制进视频进度，例如屏幕左右长按、或左右滑动。

合理的进度条设计不会在用户专注于内容时来分散其注意力，一旦受到干扰，用户体验就会大打折扣并由此产生一些不可控的想法，降低继续看下去的欲望或因为误操作而跳出页面，对产品来说都将是得不偿失。