最近在使用ios版抖音客户端的时候发现一个小惊喜，在浏览长视频中可以通过拖动进度条快速定位和浏览视频的内容。
带着发现新大陆的惊喜赶紧要告诉设计的小伙伴们，先来看看设计群里同学的看法：
微信群中大家的反馈
对这个设计细节很大一部分用户像我一样之前没有注意到，另一部分人注意到了，但在使用操作上觉得略微有点“神奇”。
通过进度条去快速查看视频内容，这一功能是在抖音开放长视频后出现的，在很长一段时间里，用户刷抖音养成的习惯就是上下滑动，且注意力更多聚焦于视频本身内容上，很少去发现视频下方进度条的变化。抖音iOS端无论视频长短下方都有一条分割线，这条分割线承担着三个功能的展示：
- 长视频的进度条；
- 视频音量的调节度；
- 视频加载状态；
Android端的也有同样一条分割线，区别在于短视频没有展示分割线；
通过多次体验操作后，有几点感触：
- 双端在进度条拖动过程中容易误操作，手指必须点击到进度的圆点上才可以拖动；
- iOS端的进度条整体设计上采用相对很弱化处理方式，在区分长短视频时相对不易察觉，而Android索性就没有进度条；
- 抖音没有很好的展示视频的当前状态，且让用户明确当前视频类型；
Android短视频和长视频
同类产品进度条的设计
除了抖音之外，其他类似产品是如何设计进度条的呢？
1.快手
快手在点击屏幕时消息消失，出现暂停及进度条功能，无论长短视频给用户操作的认知相一致，并且误操作的几率极低。这个操作易用性相对较高。
2.Ins
Ins的进度条在滑动时做了清空处理，只留下了进度条及视频内容，让用户操作任务更聚焦，减少其他因素干扰，缩略图+时间的展示，清晰的告知用户的进程及时间，一目了然。
3.微博
微博小视频通过进度条加载快慢来区分长短，通过快慢可以清晰的知道当前视频的进程状态。点击滑动进度条时，同Ins相似，只留下了进度条，并且有清晰的时间展示，告知用户的进程及时间。点击返回按钮回到视频内容及相关信息的展示状态。
进度条的由来
发现了这个问题后，我们来分析一下进度条是如何引入到播放器界面的。播放器的界面由早前期的录音机而来，也就是索尼创造的Walkman。从后续索尼的一系列产品中如摄像机、摄录一体机、CD机都可以看到播放器界面中的影子。对于其中的物理按钮播放/暂停，快进/快退等图形语意及操作方式也在随后成为了国际标准IEC417Graphical symbols for use on equipment International Electrotechnical Commission指定用法。包括后续我们使用的电视机遥控器Mp3、Mp4等。
随着计算机技术的发展，计算机的输入方式由原来的纸带输入到键盘输入、到鼠标输入、再到触摸输入，整个过程播放器也在跟随着变化。由早期的物理按钮逐渐变为虚拟触控按钮，同时进一步升级了播放器的界面，加入了些其他功能，如音量，进度条，录音等更方便用户去使用，但也保留了用户对播放器的整体认知。
Windows Media Player播放器
录音机界面
如后续我们使用的暴风、快播、QQ播放器等界面功能基本就很一致了。结合我们上面发现的抖音的问题，来想几个问题：
- 播放器中为什么会有进度条的存在？引入进度条的目的是什么？
- 结合使用场景，进度条类型有哪些呢？它们的目标是什么？需要展示哪些信息？
- 进度条形式多种多样，怎样从本质上区分呢？
下面我们一起来梳理以上3个问题，希望可以帮助大家获得更加清晰的认知。
进度条的类型
实际的场景中，进度条在场景中的含义就有了进一步的扩展。结合使用场景，可分成3种类型，分别是“进程型”进度条，“进程型＋状态型”进度条和“状态型”进度条。
1.“进程型”进度条
一般为动态，表明程序正忙于请求或者运行中。这个类型的进度条很常见，也经常被人们提及，像常见的Loading进度条、下载进度条等均属于此种。
各种样式的加载
在此种使用场景下，进度条的设计目标可以归纳为以下两点：
- 帮助用户明确程序正在做什么，是否正常；
- 如果一定要让用户等待，那就缓解他们等待时的焦虑感；
2.“状态型”进度条
一般为静态，表明当前所处状态。在大部分讲进度条的文章中，“状态型”进度条较少有人提及，但不管是在实际生活中，还是互联网产品中都十分常见。
仪表样式
在此种使用场景下，进度条的设计目标主要为两点：
- 帮助用户明确当前状态；
- 为用户的后续决策提供充足的支持；
3.“进程型＋状态型”进度条
此类进度条较为特殊，是介于“进程型＋状态型”之间的进度条类型，较为常见的例子就是音频和视频播放器中的进度条。
进度条
音视频播放器在播放过程中有明显的“进程”概念，进程结束则播放内容结束。进度条的状态则可以帮助用户无需等待，并展示当前播放的状态，为后续操作提供进一步的支持；这在整个播放的过程使其意义更大。
所以对于这一类进度条的使用场景具有2个显著的特征：
1.有明确的进程概念，和时间关联紧密；
2.进度条不是为了缓解等待的焦虑感，而是为了展示当前状态，让用户做出相关决策；
与此同时播放器进度条也承担着如下任务：
1.向用户清楚地表明当前正在运行进程，进程是否正常；
2.向用户清楚地表明当前状态、重要的进度节点；
3.向用户清晰地展示可能需要的操作；
那么，在设计视频类应用的进度条时应该注意什么呢？
1.视频的进度条尽量可以清晰的告知用户当前内容的进程；
2.尽可能清晰地向用户展示可能需要的操作；
3.如需区分长短视频，让用户轻易发觉，尽量清晰且明确。
