先滑动进度条，我们首先需要得到反馈，时间到了，我们拖到哪里了？总时间是多少？等等，时间文字太小、太大、太轻都会影响浏览体验。
第二个是进度条本身。拖动时，应与被拖动时合理区分。俗话说，兄弟姐妹也要算清楚，给用户明显的操作反馈提示。包括拖的结束，应该给用户一个短暂的考虑机会（冷静期）。如果内容不是自己想看的，可以及时回到过去，用户可以在短时间内再次拖动进度条而不会再次醒来。
此外，当用户滑动进度条时，主要精力都在视频的内容上。事实上，它不知道开始和结束，所以有时它可能会滑到开始和结束。给个反馈（除了时间反馈）怎么在视频进度条做内容点，体验就可以锦上添花，比如朋友圈视频有震动反馈。设计建议：建议在进度条两端增加震动反馈，提高无障碍（无障碍不是指残疾人）使用体验。
当然，还有其他更详细的反馈形式，比如微博。视频时长在30s以内，当用户拖动进度条时，只有时间进度；但是当视频时长超过30s时，用户拖动进度条显示时，就变成了另一种设计风格，有缩略图和时间怎么在视频进度条做内容点，而且缩略图的比例也是根据视频本身的比例来选择的。
极致体验
在满足正常视频刷屏的情况下，如果能更好的提升用户体验，解决提升体验的问题，当然是最好的。我们来分析一下这几点：
1. 进度条拖拽丝滑效果
有些视频进度条在拖拽的时候特别卡顿，不流畅，不丝滑，经常中断，用户体验极差。另外，当进度条出现和消失时，进度条的动画也是一个很自然的过程。下图是爱奇艺的效果，拖动的时候有点卡顿：
2. 进度条设计细节
①。视频加载加载（不是页面加载，两者是不同的）：很多人共享一个页面加载和视频加载，但它们是两个不同的东西。我们仔细体验过抖音（图一）和快手，他们的视频加载动画结合了进度条，很自然，不会很死板，让用户刷的更沉浸。爱奇艺（图二）的）页面加载和视频加载共享合一。
②。设计细节还原：截取了快手、微视、抖音三款产品的进度条，并放大仔细观察。可以发现，抖音进度条的锚点上有一条分界线（不应该这么刻意设计的），设计细节的还原还有待完善；微视侧的锚点直接剪掉一点点，相比快手，设计细节更好；另外，我们来看看整体情况。三个公司的进度一开始都是四舍五入的，灰色的进度条不是。这也是设计还原的一个细节问题。
2. 进度条点，拖动交互手势选择
为什么进度条一般都是用拖拽的交互手势来操作的？因为手势操作是在这么小的空间内进行的，而且下方多为可点击的标签页或上方的其他功能区，所以滑动是比点击更精准的操作。如果必须在进度条中添加点击功能，建议增加点击热区，将其与上下功能区分开，避免误操作。此外，点击时给出了详细的反馈，这与拖动手势的效果是分开的。
下面是爱奇艺和微视的对比，iQIYI（图一）点击时经常误操作，点击到下方标签区，点击后进度条和正常播放没有区别；微视（图一）)@二）的设计点击错误率相对较低，点击后有闪烁褪色效果，有锚点。
3. 时间数字
这个地方也是一个很详细的地方，因为当进度条被拖动的时候，时间也随之而来。淘飘飘（图片四）的当前时间和视频的总时间是一起设计的，滑动的时候会出现时长时短时长，设计不够精致的情况，略粗略。微视（图一）@）>虽然两次的设计是分开的，但是因为数字不是等宽字体，所以每个数字的宽度不同，长度还是有变化的。快手的设计（图片二）使用等宽字体）而且是特殊的数字字体，所以设计后看起来很精致，但是时间数字中间的冒号与底部对齐，还有一个细节点视觉上被忽略了。抖音（图片<
概括
通过以上分析可以得出，抖音和快手可以在短视频产品中脱颖而出。虽然运营和产品密不可分，但设计师可以学习和思考很多细节。在产品逐步完善、市场接近饱和的今天环境下，作为设计师，更要注重设计细节，提升体验，达到极致体验，坚持用户至上的原则来设计产品。脱颖而出，创造近乎完美的沉浸式体验，充分发挥设计的价值，让设计更好地赋能和商业化。
129万人点赞的QQ语音进度条是如何设计的？
4月16日，QQ语音留言新功能突然登上微博热搜，QQ粉丝瞬间云集。
阅读文章 >
