如今，在做Web或App设计时，除了常见的加载动效外，“进度条”也是设计师们常常要花费时间与精力来着重思考的组件设计。

进度条可以理解成可视化等待，能缓解用户在等待过程中的焦虑情绪，及时给予用户反馈和提示，降低用户在等待过程中跳出的频率。

你是不是看到Loading0%的进度条很是焦虑？

那么，进度条的设计究竟要如何既能兼顾用户体验，又能利用精美炫酷的色彩、动效抓住用户眼球？

下面，小摹给大家整理了一些创意十足的进度条设计案例，一起来看看吧。

创意进度条设计实例

首先，咱们来看看这款进度条：

不得不说，用户心理被设计师拿捏的死死的。

一开始小拖车拉着进度条走的很快，走到中间便开始匀速运动，动画效果的展现形式，用户会很有耐心地等待进度条走完。

中间的等待过程，软件也进行了自身的加载，何乐而不为。

在滴滴打车时，界面中展示等待时间、已等待时间、前方排队人数等细节，有了这些量化的数据，用户可以自由安排时间。

如遇到打车难的情况，即使正在等待中，看到自己已等待的沉没时间，也很难取消订单，直至成功打到车。

将进度条像雪花般打散，是不是很能吸引到你的注意力，很大程度帮你缓解负面情绪呢？

甚至搞搞创意，利用各种小动画来转移人们的注意力，让用户意识不到需要等待。

对于某些进度信息无法在短时间内彻底完成，那么可以尽量将精准度与真实情况靠近，让用户知道目前最新进展，缓解用户的焦虑之情。

这一点，淘宝的物流设计就十分可圈可点。

从最初的仅更新文字物流信息，到现在从地图上就能直观地展示包裹已送至何处，预计送达时间是多久，越来越人性化了~

除此以外，红绿灯上的读秒、地铁站中预计下一趟地铁多久到达、外出吃饭，实时扫码查看前方还有多少桌在等待……这一切的一切，进度条发挥了应有的贡献。

往小了说，进度安抚了人心，往大了说，进度让生活得以安稳继续。

在看过这么多优秀的进度条设计后，接下来，咱们再来聊聊设计进度条时需要考虑什么？

设计时需要考虑什么？

在我看来，进度条设计的原则有三点：

1）降低干扰频率

2）及时反馈

3）极致的用户体验

降低干扰频率

对于内容型产品，在设计进度条时可尽量弱化其存在，让用户能更沉浸式体验内容本身。

类似于抖音，本身一条视频的时间就比较短，用户操作进度条的需求不高，因此弱化进度条，尽可能保证视频的完播率。

当我们在看电影或电视剧这类时间较长的视频时，快进、跳过等需求频率大幅增加，因此在点击屏幕时，下面的进度条自动显示，可便于用户控制视频的进度。

根据产品属性规划进度条出现的频率，能有效帮助用户更专注于内容本身，提升用户体验。

及时反馈

我们滑动进度条的目的在于加快或减慢进度，所以设计进度条时最需要考虑的是给用户反馈时间。

总视频的时长是多久？拖到了哪里？是不是我想看的那一部分？

例如腾讯视频，在播放过程中拖动进度条时，当前视频内容可以正常播放，并会给整个屏幕加上一层蒙版后，中间展现拖动的时间和缩略画面，以此在不妨碍当前播放的前提下，用户还能及时知晓进度条进度和拖动的位置是否正确。

极致的用户体验

从操作方式来说，可以尽量避免将所有操作都限制在进度条中，例如在腾讯视频中，长按屏幕可支持3倍快进/快退，整体视频播放比拖拽进度条更加流畅。这样可以避免唤醒进度条，误触风险产生。

从分散注意力方面而言，在王者荣耀即将对战的loading中，左侧会显示所选英雄的使用小tips，右侧的小拳头动效可以点击，为一会儿的赛场加油打气。在看攻略和加油助力的过程中，有些很快就能加载好，马上就能全军出击了~

最后

一款优秀的产品脱颖而出，虽说离不开产品及运营团队的助力，可我们身为设计师，也要为产品设计做出应有的贡献。

关注设计细节、提升用户体验、坚持用户至上的原则来设计产品，这都是我们应该遵循的设计准则。虽然进度条只是一个很小的组件，但当我们把每一个小小的组件都设计精致后，相信用户体验必能进阶一大步！

（文中图片均用“更懂中国设计师的设计工具——摹客DT”完成）

Powered by Froala Editor