前阵子设计了一个0到1的产品，到了测试的时候，突然有同学提出了数据加载的问题。关于数据加载的问题，我一直处于一种模糊的状态。由于模糊性，设计往往是模糊的。这一次，必须明确数据加载。

首先，了解数据加载如何帮助我们

了解数据加载可以让我们在合适的业务场景中使用合适的加载方法，就像拥有一个工具箱，知道什么工具能做什么，事半功倍。

同时，很好地加载数据可以减少我们用户的等待焦虑，获得更好的用户体验。

第二，加载和刷新

加载:指请求更多数据

刷新:指请求最新数据

这两种场景结合“知乎”更好理解。您可以通过下拉和刷新获得最新的推荐问题，也可以通过向上滑动查看更多数据:

第三，数据加载场景

1.从后台剪切应用程序

在涉及跨平台任务的场景中，当回切过程间隔较短时，不需要加载数据，可以在一定间隔后设置额外的事件刷新。

2.启动应用程序

当应用程序异常关闭时，应用程序会闪烁，等等。，需要重启app并加载数据。

3.触发加载事件

一般有两种情况:用户手动触发和系统自动加载。

由用户手动触发:即常见的下拉刷新和上滑加载，其中也包括点击按钮重新加载。

自动系统加载:显示当前内容后，预加载下一页的内容。

4.页面跳转

它涉及页面跳转，可以是本机跳转到本机页面，也可以是本机跳转到h5页面。

因为有跳页，所以不可避免的要加载新数据。

5.定时数据刷新

在特定的时间内，页面会被刷新，数据会被加载，大部分操作都会被执行。

例如，排行榜每天23: 59更新，或一些有时间限制的活动。这里我发现了一个最近支付宝优惠券的例子。

6.即时消息推送

微信消息采用实时推送机制，不需要用户手动刷新加载。

这也是微信小程序入口可以大胆做下拉刷新位置的原因。

四、数据加载方法

在详细介绍数据加载方法的基础之前，定义了两种加载逻辑:延迟加载和预加载。

懒加载：顾名思义，懒模式，进入页面时，再加载数据。预加载：预加载数据，再展示页面。

大多数场景使用惰性加载来节省性能，但是预加载可以提前预测用户的浏览行为，保证体验。

1.总负载

整体加载是指加载所有内容，然后呈现给用户。具体表现为空白页加载。

优点：能保证内容的整体性，不会造成信息缺失。缺点：非常容易造成等待焦虑。

2.分布式加载

分布式加载也变成了优先加载，提前加载页面内容的重要部分。具体形式有:分块加载、页面加载、分屏加载。

(1)分段装载

可以根据数据类型顺序加载，比如在信息应用中，先加载文本，再加载图片。

优点:可以保证用户快速获取内容。

缺点:由于加载速度的限制，有些内容被用户忽略，导致信息不足。

(2)寻呼负载

对于某些列表或卡片信息，您可以使用自动或手动分页加载。

优点:可以快速显示相对完整的内容。

缺点:可能会在一定程度上影响信息检索。

(3)分屏加载

首先加载全局页面框架，然后停留在页面上，然后具体加载相应的内容。

优点:节省资源，便于专注内容。

缺点:只适用于部分数据量较大的页面，信息不满意。

3.智能加载

智能加载根据用户的网络状态选择不同的加载方案。

非WiFi模式:暂时不加载资源，提示用户消耗流量，用户确认后加载。

WIFI模式:自动加载所有资源

优点:更贴心，适合视频、音乐等需要占用相对较大流量的产品

缺点:会阻塞路径访问。

4.缓存加载

即过去所说的离线加载，通过现有的Wifi资源在本地缓存服务器内容，在无网络或网络弱的环境下读取缓存进行加载。

优点:可以解决无网或弱网情况下的数据采集问题

缺点:可能会占用本地存储空，需要考虑后续的缓存处理。

5.渐进加载

点击图片先看高斯模糊图，然后加载详细图。

优点:减少等待，节约资源。

缺点:使用必须基于数据类型，有一定的局限性。

动词 （verb的缩写）加载设计过程

数据加载的业务流程并不复杂。具体如下:

分支情况:没有更多新内容，空页面，页面已删除。

异常:网络连接异常，频繁刷新，网络状态切换，服务器崩溃。

加载功能点:下拉刷新、点击刷新、系统自动刷新、重载按钮等。

第六，负载优化策略

数据加载过程的优化可以通过两个维度进行:

1.交互级别的优化

(1)尽可能考虑预压

使用预加载可能会大大改善用户体验，但不会消耗太多性能。

(2)使用异步处理

有些关键页面可以使用异步数据处理，等网络环境恢复后再和服务器校对。有一定的门槛和风险，需要经过技术评估后使用。

(3)使用缓存

要注意数据存储的数据类型和更新规则。配合缓存加载可以减少用户等待时间，不会占用大量本地存储空。

(4)尽量使用非模态加载

非模态加载:不会打扰用户，可以让用户转移注意力，减少等待焦虑。

模态加载:只能完成当前加载后的其他事情。该模式在本机应用程序中使用，必须提供取消按钮供用户控制。

(5)提前加载布局

在一些不需要完整性的页面上，尽量先展示页面布局。

(6)进度条显示

应用内打开H5页面应尽量提供进度条，先慢后快，尽量减少用户的等待焦虑。

2.用户界面级别优化

(1)加载动画

使用情绪加载动画，可以让等待过程变得轻松愉快。

(2)加载职业位图

例如，一些品牌元素可以帮助用户加深对应用程序的印象，形成品牌意识。

(3)加载色块

比如一些图像瀑布应用，比如花瓣网、Pinterst等，会优先以图像色块流的形式显示背景色，减少等待焦虑。

因为我的技能有限，我对数据加载的理解就到此为止了。欢迎同学们积极讨论交流，相互成长！

参考文献:

六种常用加载方法的优缺点及设计策略