互联网和产品 · 2019年12月26号 0

如何设计产品的与预加载?

为什么好多电梯都设计成镜面?

这其实是为了缓解人们因等电梯时间长而带来的焦虑,用户的视线被镜子转移,同时还能避免了大家都在一起等电梯的尴尬,有效地缓解了等待电梯过程中焦虑。

用户感知的实时反馈只需0.1秒,这是产品用户体验很流畅的状态,超过0.1秒的反馈速度,用户就能感觉到不实时,可见用户对实时反馈的感知有多快。

伴随着反馈延迟速度的增加,用户等待的时间成本会增加,接下来就会引发系列的负面效应。当然,造成延迟的原因有很多,不单单是产品体验的原因,还可能会是表单需要提交给服务器做验证才能反馈、后台复杂的数据计算时间、网络状况不好等。

延迟对用户的影响

延迟其实是再正常不过的体验了,关键是延迟对用户造成的影响有多大。

流畅体验时间是0.1秒,那意味着超过这个时间都可以算是有延迟。

在人机交互中,用户是在跟产品沟通,用户与界面互动一次就会产生一次加载。如果用户操作提交,页面却没有立即反馈,随着延迟时间的推移,用户会怎么想?

  • 2秒:产品可能需要做一些处理,可以理解。
  • 5秒:反复操作未反馈的界面,造成加载的压力更频繁。
  • 10秒:用户已经快要忍受到极限了,尽力说服自己下一秒就可以加载完成。
  • 13秒:用户基本会认为是产品Crash了,忍无可忍,无需再忍,果断做出离开的打算了。

2秒是产品比较好的一个体验原则,是用户能接受延迟的最佳等待时间。

用户从感知延时到最后离开,映射出用户对产品的态度也从友好转而崩溃。既然产品中延迟无法避免,但我们可以通过体验设计来缓解用户的感知到的加载时间,能明确告知用户加载进度的体验肯定肯定更好。

用户在与产品交互过程,好比打电话:你问了个问题,对方不回答,可能都睡着了,等到你都崩溃了。

但如果我们丰富加载设计的体验,感受就完全不一样了。就好比跟真人在当面交流,问个问题,对方结巴,抓耳挠腮,你能很清晰地判断出状况,不至于崩溃。

加载设计就等同于那个真人的表达,有进度、有动画、有状态等,加载也是一种过程的反馈,友好地缓解了用户等待中的焦虑情绪。

比如,游戏让玩家进入心流状态,有一个很重要的原因就实时反馈。玩家的一个闪现技能放出去,有延时会有什么后果,肯定直接挂了,这对玩家和游戏都会造成负面影响。

部落冲突的游戏,在发生网络延时的时候,玩家还可以清晰地看到战争的继续。在这个过程中,玩家看不见的是服务器在火速拼命地抢修线路。等玩家反映过来,线路可能都已连接好了,这也是产品中的一种加载策略。

技术定义加载类型

加载的类型其实是属于技术开发的范畴,产品和交互设计如果不了解这块,就没法结合不同的场景做出匹配的加载设计。产品中如果不完善加载设计,就会造成体验上的缺陷。

上面刚分析了对用户的影响,加载设计根据开发场景的不同基本可以分为以下6种开发类型。

1. 分步加载

这就是我们打开页面经常会看到,文字全出来,中间的图片还没,通常可能会在图片上有个菊花在转,或者显示带品牌标识的图片占位符。

如何设计产品的与预加载?

2. 渐进式加载

不同于分步加载的是先下载再慢慢地变清晰,让用户有个直观感受,比如好多界面加载过程中先看到有点模糊的图,再加载高清图片,这样的体验方式很受用户的欢迎。

3. 懒加载

懒加载又叫延迟加载,通常一个界面的内容是同步加载的。这样的话,很多商品的介绍页面很长,加载就会占用太多的网络资源,用户可能都不看,就造成了占用网络资源的浪费,影响加载速度。

所以,懒加载就是页面浏览到哪里加载哪里,将网络资源集中在用户浏览的当前内容,大大提高了加载速度。一般界面图片较多的界面会比较适合懒加载。

4. 预加载

预加载,顾名思义就是判断用户的加载速度,为用户提前加载好下一步要看的内容。

这和上面的懒加载策略恰恰相反,在不考虑流量的情况下预加载会好点,反之就可以选择懒加载。预加载比较适合图片较少界面的加载策略。

5. 智能加载

智能加载在不同的网络状态加载不同的数据,在4G网络状态下浏览视频的时候就会提醒你需要多少流量是不是继续观看的,WIFI下就可以任性地显示大图,高清的视频。

6. 服务端加载

我们在每个产品中树立自己的ID就需要注册登录,产品想获取用户信息往往也是通过表单的形式效率最高。

这些信息的提交都发到了服务端,服务端再录入数据库匹配计算,然后才会返回一些信息参数,比如密码错误、登录名不存在、邮箱格式不对等。这些用户看不到,都是服务端再处理。

写在最后

以上不同场景中的加载设计发挥不同的作用,结合到体验设计中,常见的加载场景有启动页设计、登录注册页设计、加载新页面设计、加载进度设计、内容图文预加载设计、下拉刷新设计、上拉加载更多设计等。

一些产品中启动页的设计。

如何设计产品的与预加载?

内容加载中的状态。

如何设计产品的与预加载?