大家是苹果手机玩抖音的，有没有发现抖音客户端app有一个惊喜的小功能，那就是我们在看长一点的视频的时候，可以拖动进度条来快速浏览和定位到想看的哪一部分。带着发现新大陆的惊喜赶紧要告诉设计的小伙伴们，先来看看设计群里同学的看法：

微信群中大家的反馈

对这个设计细节很大一部分用户像我一样之前没有注意到，另一部分人注意到了，但在使用操作上觉得略微有点“神奇”。

通过进度条去快速查看视频内容，这一功能是在抖音开放长视频后出现的，在很长一段时间里，用户刷抖音养成的习惯就是上下滑动，且注意力更多聚焦于视频本身内容上，很少去发现视频下方进度条的变化。抖音iOS端无论视频长短下方都有一条分割线，这条分割线承担着三个功能的展示：

1. 长视频的进度条；

2. 视频音量的调节度；

3. 视频加载状态；

Android端的也有同样一条分割线，区别在于短视频没有展示分割线；

通过多次体验操作后，有几点感触：

1. 双端在进度条拖动过程中容易误操作，手指必须点击到进度的圆点上才可以拖动；   

2. iOS端的进度条整体设计上采用相对很弱化处理方式，在区分长短视频时相对不易察觉，而Android索性就没有进度条；

3. 抖音没有很好的展示视频的当前状态，且让用户明确当前视频类型；

Android短视频和长视频

同类产品进度条的设计

除了抖音之外，其他类似产品是如何设计进度条的呢？

1.快手

快手在点击屏幕时消息消失，出现暂停及进度条功能，无论长短视频给用户操作的认知相一致，并且误操作的几率极低。这个操作易用性相对较高。

2.Ins

Ins的进度条在滑动时做了清空处理，只留下了进度条及视频内容，让用户操作任务更聚焦，减少其他因素干扰，缩略图+时间的展示，清晰的告知用户的进程及时间，一目了然。

3.微博

微博小视频通过进度条加载快慢来区分长短，通过快慢可以清晰的知道当前视频的进程状态。点击滑动进度条时，同Ins相似，只留下了进度条，并且有清晰的时间展示，告知用户的进程及时间。点击返回按钮回到视频内容及相关信息的展示状态。

进度条的由来

发现了这个问题后，我们来分析一下进度条是如何引入到播放器界面的。播放器的界面由早前期的录音机而来，也就是索尼创造的Walkman。从后续索尼的一系列产品中如摄像机、摄录一体机、CD机都可以看到播放器界面中的影子。对于其中的物理按钮播放/暂停，快进/快退等图形语意及操作方式也在随后成为了国际标准IEC417Graphical symbols for use on equipment International Electrotechnical Commission指定用法。包括后续我们使用的电视机遥控器Mp3、Mp4等。

随着计算机技术的发展，计算机的输入方式由原来的纸带输入到键盘输入、到鼠标输入、再到触摸输入，整个过程播放器也在跟随着变化。由早期的物理按钮逐渐变为虚拟触控按钮，同时进一步升级了播放器的界面，加入了些其他功能，如音量，进度条，录音等更方便用户去使用，但也保留了用户对播放器的整体认知。

Windows Media Player播放器

录音机界面

如后续我们使用的暴风、快播、QQ播放器等界面功能基本就很一致了。结合我们上面发现的抖音的问题，来想几个问题：

1. 播放器中为什么会有进度条的存在？引入进度条的目的是什么？

2. 结合使用场景，进度条类型有哪些呢？它们的目标是什么？需要展示哪些信息？

3. 进度条形式多种多样，怎样从本质上区分呢？

下面我们一起来梳理以上3个问题，希望可以帮助大家获得更加清晰的认知。

进度条的类型

实际的场景中，进度条在场景中的含义就有了进一步的扩展。结合使用场景，可分成3种类型，分别是“进程型”进度条，“进程型＋状态型”进度条和“状态型”进度条。

1.“进程型”进度条

一般为动态，表明程序正忙于请求或者运行中。这个类型的进度条很常见，也经常被人们提及，像常见的Loading进度条、下载进度条等均属于此种。

各种样式的加载

在此种使用场景下，进度条的设计目标可以归纳为以下两点：

• 帮助用户明确程序正在做什么，是否正常；

• 如果一定要让用户等待，那就缓解他们等待时的焦虑感；

2.“状态型”进度条

一般为静态，表明当前所处状态。在大部分讲进度条的文章中，“状态型”进度条较少有人提及，但不管是在实际生活中，还是互联网产品中都十分常见。

仪表样式

在此种使用场景下，进度条的设计目标主要为两点：

• 帮助用户明确当前状态；

• 为用户的后续决策提供充足的支持；

3.“进程型＋状态型”进度条

此类进度条较为特殊，是介于“进程型＋状态型”之间的进度条类型，较为常见的例子就是音频和视频播放器中的进度条。

进度条

音视频播放器在播放过程中有明显的“进程”概念，进程结束则播放内容结束。进度条的状态则可以帮助用户无需等待，并展示当前播放的状态，为后续操作提供进一步的支持；这在整个播放的过程使其意义更大。

所以对于这一类进度条的使用场景具有2个显著的特征：

1.有明确的进程概念，和时间关联紧密；

2.进度条不是为了缓解等待的焦虑感，而是为了展示当前状态，让用户做出相关决策；

与此同时播放器进度条也承担着如下任务：

1.向用户清楚地表明当前正在运行进程，进程是否正常；

2.向用户清楚地表明当前状态、重要的进度节点；

3.向用户清晰地展示可能需要的操作；

那么，在设计视频类应用的进度条时应该注意什么呢？

1.视频的进度条尽量可以清晰的告知用户当前内容的进程；

2.尽可能清晰地向用户展示可能需要的操作；

3.如需区分长短视频，让用户轻易发觉，尽量清晰且明确。