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

前段时间在做公司产品的加载优化，一开始的想法是优化加载样式，通过样式来缓解用户的等待焦虑；在设计方案过程中，通过查询资料发现自己对加载的认知很片面，想要更好地解决用户等待的焦虑感，单单靠漂亮、美观、有趣的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设计③：如何处理加载页面？》