学习
实践
活动
工具
TVP
写文章

加载类型的选择,我有话说……

前段时间在做公司产品的加载优化,一开始的想法是优化加载样式,通过样式来缓解用户的等待焦虑;在设计方案过程中,通过查询资料发现自己对加载的认知很片面,想要更好地解决用户等待的焦虑感,单单靠漂亮、美观、有趣的loading设计是远远不够的。

自己做了一些思考沉淀,所以今天就跟大家聊聊加载是怎么回事,它的内在逻辑是怎样的,有哪些加载类型,他们各自的优缺点及使用范围,因为只有深入了解才能选择最合适加载方案。

1

什么是加载

加载是系统的一种反馈状态,是产品对用户最基础的礼貌行为,加载的过程涉及到3个角色:用户 - 客户端 - 服务器

举个栗子:

用户有一个了解内容详情的需求,就会点击客户端上的内容摘要,客户端收到指令后,会立马将指令传达给服务器,告知“用户需要XXX信息,请将信息带到用户面前”。如果网络环境好或者信息体量小的话,这个过程会非常快速,不到1秒的时间就能迅速完成,用户就直接看到详细

信息了。

但是...通常情况下,由于网络环境,客户端性能、服务器性能等多种因素的影响,用户实际等待的时间很可能会是2~3秒,甚至更长,而心理学研究发现,如果没有反馈,用户的注意力一秒后就会转移到别的地方,为了避免这种情况发生,任何超过一秒的等待都需要加载提示;并且很多时候用户也会很迷茫,不确定操作是否成功,下意识觉得机子卡主了,会多次点击操作,增加用户的使用成本和焦虑感。

为了解决用户长时间等待的焦虑,客户端会通过各种加载样式告知用户,数据正在传送。就像电话接线员在查询信息前会告知你“查询相关业务需要一些时间,请耐心等待一样”,用户会有心里预期。

总结来看,加载需要的时间其实是客户端与服务器进行数据交换需要的时间,用户等待的也是这个时间。所以为了缓解用户等待的焦虑感,解决方式有以下两种思路:

呈现加载状态,缩短用户感知到的加载时间,缓解用户焦虑 —模态加载、非模态加载、扭转用户对时间的感知

提前提交处理数据信息,减少用户等待时间 —智能加载

下面我们来具体了解一下模态加载、非模态加载、扭转用户对时间的感知、智能加载。

2

模态加载

模态加载过程中,用户不能进行其他操作,也没有信息可以浏览,只能呆呆的等着。就像去餐厅吃饭,点了8个菜,服务员会将菜全部做出来之后,一起端上桌。

优点:

用户可以感知到数据正在加载

用户可以一次看到完整的信息呈现

缺点

用户等待信息的时间会比较长

使用范围:

信息无法分开加载。比如APP启动页面,国外通常是一张空白页面,国内一般会放置企业logo

简易表单或红包的提交过程。因为信息量小,大多数情况会快速有反馈,简单的模态加载会比较适合

模态加载根据时间的长短使用的加载类型不太一样,具体如下:

1. 短时间加载

一般情况下产品会用小菊花,小菊花的变形体,品牌吉祥物动画、logo动画、slogan等来呈现加载过程。

2. 长时间加载

如果资源比较大,例如视频、文件的上传和下载过程,加载的时间就会比较长,这时需要显示加载百分数或进度条。

优点:

用户可以明确看到数据加载进度

通过进度提示,对加载时间有预判

Tips:

数字显示可以先慢后快,给用户加载速度越来越快的感觉

在数据实际有延迟的情况下,让数字假装在变动

切记勿让数据在99%的时候停下来,这时候几乎多有的用户都会失望

使用范围:

比较大的文件、视频、图片加载、上传和下载的过程中

3

非模态加载

非模态加载就是在系统加载的过程中,用户可以继续做别的事情,等加载完成后,就将数据呈现给你。这个就像去餐厅吃饭,你可以先拿上号,去周围溜达溜达,等快到你的时候会给你信息提醒。

优点:

加载在页面的小范围内呈现,不干扰用户阅读其他内容信息

比较友好的方式,给用户自由选择如何消耗等待时间的权利

使用范围;

页面内局部呈现加载过程:下拉刷新、下拉加载

图片、按钮加载:社交操作反馈(点赞、收藏反馈)、表单提交

导航栏:信息收取状态。社交类产品QQ、微信,邮件等

很多同学可能会对非模态加载可缓解用户等待焦虑有疑问,大家想想自己上厕所的时候是不是都会选择带上手机或书籍,如果没带的话,是不是会拿起沐浴露、洗发水等瓶瓶罐罐看上面的文字......这样想想就很容易理解用户可以看到可读信息的必要性了。

4

扭转用户会时间的感知

模态加载和非模态加载是加载的两种基础形式,不同点在于用户是否可以利用等待的时间去处理其他事情,但本质上都是一样的,都是让用户一次性得到所有信息,用户看到内容实际等待的时间并没有改变。所以我们可以通过下面3种方式解决这个问题。

1. 加载占位图

加载占位图是在界面加载区域中填充灰色色块,加载完成后,文字图形等信息就会出现在占位图的位置上。虽然对信息等待时间没有缩短,但用户可以了解信息的基础轮廓,并展开内容想象。

等待时间总时长 - 用户看到加载展位图时间 - 想象的时间 = 用户感知到的等待时间

优点:

占位图通常可快速显示出来,给用户信息快速传送的假象

用户感知到的等待时间缩短了

网络环境差的情况下,用户可以根据占位图对内容框架有基础的了解

缺点:

占位图样式会跟实际信息展示有所差别,用户可能会有瞬间的迷茫

如果网络环境比较好,占位图会一闪而过,体验并不是很好

用户等待信息的总时长并没有变化,只是增加了一种过渡状态

使用范围:

内容版式比较固定的页面,可以先加载轮廓,再加载细节样式 - 终端和列表页面

2. 懒加载

根据信息的大小,优先加载文字等较小的资源,再加载图片、视频等较大的资源。就像你去餐厅吃饭,服务员可以分批次将做好的菜端上桌子,那些已准备好的凉菜、快速可做出来的小炒可以先让顾客垫垫肚子,解解馋。虽然用户等待全部信息加载出来的时间是一样的,但是因为用户可以提前处理文字信息,所以整体浏览信息的时间缩短了。

优点:

用户可以明确感知到加载的过程,并且可以先阅读文字信息,等待图片加载完成后再查看,提升用户查看信息的效率

即使页面没有全部加载出来,用户也可以通过文字信息判断内容是否是自己需要的,如果不是可以提前离开页面,提高用户的时间效率

缓解服务器的压力,因为用户提前离开,剩余内容可以不用再加载出来了

如果网络环境很差,高质量的图片很容易加载失败,这样也不至于影响用户对其他信息的阅读。

Tips:

图片加载失败后,让用户可以自主选择单张图片的加载

使用范围:

各种页面加载都比较适合,应用范围比较广,是现在各大产品中使用最多的加载方式

3. 图片、视频加载智能化处理

图片对用户的吸引力之大是产品设计者的一个共识,所以现在产品中图片数量越来越多,用户对图片得清晰度要求也越来越高,我们可以通过以下两种方式来缓解图片加载对用户等待时间的影响。

使用模糊效果逐步加载图片。模糊的图片体量很小,与原图相比占据的内存空间少,可以快速加载出来,缩短用户等待时间。

压缩内容质量。根据网络环境的不同选择加载不同质量的资源,主要针对图片和视频资源,如果网络不好就提供给用户压缩版的图片或视频资源

在移动网络环境下,告知所需流量,让用户主动选择是否加载视频资源

当网络环境不好或在运营商网络环境下,也可以让用户选择无图模式浏览

使用范围:

适合高清大图或视频比较多的页面

5

智能化加载过程

通过以上3种方式可以缩短用户得到信息的时间,本质上解决的是一个页面信息处理的时间效率,而用户通常情况下会浏览多个信息,或有多个操作步骤,那我们是不是可以有其他方式解决用户处理多个信息的整体时间呢。

1. 预加载

预加载,通过文字信息的表面理解,就知道是一种提前行为。系统揣摩用户的想法,提前对用户下一步可能会浏览的内容进行提前请求,这样用户在点击这部分内容信息时,就可以快速加载出来,减少用户等待数据加载的时间。

优点:

从根本上解决用户加载等待时间

缺点:

需要强大的数据判断,对用户行为有比较准确的定位

服务器压力比较大

当用户在非WIFI网络环境下会消耗用户比较多的流量

使用范围:

列表及下方列表对应的详情页

2. 提前传送数据

这个跟预加载用异曲同工之处,可以分批次传送用户需要上传的信息到服务器,这样用户最终提交的时候,上传时间会大大减少。

eg. Instagram在用户选择图片后,会在后台先上传,然后引导用户添加标题,详情等信息,等待用户完成后续操作后,图片已经上传成功,以减少用户等待的时间

优势:

缩短用户等待上传的时间

劣势:

服务器压力大,用户可能会反复修改图片

使用范围:

包含大量视频或图片的表单

6

总结

加载的过程,本质上是客户端与服务器数据交换的过程,作为产品设计者,为了提升用户使用产品的体验感,肯定都想尽可能减少用户的加载等待时间。但是每个公司的服务器性能是不一样的,虽然智能化加载能更好的解决加载等待的问题,但是服务器承载不了那么大的信息处理过程,或者数据比较少,用户画像还不完整,这个时候选择懒加载的方式做时间上的缓冲是更理想的选择。

现在很多产品的加载过程都不是单纯的一种方式,很多时候会将几种加载方式组合在一起使用,比如预加载和懒加载合并使用,懒加载和图片占位图合并使用等等。

所以,没有绝对好的选择,了解加载逻辑和上面这些处理方式就是为了大家可以灵活运用,根据应用的场景,模块内容大小,服务器性能等多因素,综合选择更适合的方式。

参考文献

《APP中的加载类型梳理与应用场景分析》

http://www.woshipm.com/pd/757842.html

《浅谈设计中的加载》

《特殊情况下的APP设计③:如何处理加载页面?》

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180505G1910F00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码关注腾讯云开发者

领取腾讯云代金券