卡在99%的进度条,让我越来越焦虑

·  阅读 6007

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

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

图片

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

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

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

创意进度条设计实例

首先,咱们来看看这款进度条:

图片

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

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

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

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

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

图片

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

图片

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

图片

图片

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

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

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

图片

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

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

图片

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

设计时需要考虑什么?

在我看来,进度条设计的原则有三点:

1)降低干扰频率

2)及时反馈

3)极致的用户体验

图片

降低干扰频率

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

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

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

图片

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

及时反馈

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

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

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

图片

极致的用户体验

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

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

图片

最后

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

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

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

分类:
阅读
收藏成功!
已添加到「」, 点击更改