[交互基础］系列之移动端页面加载详解(6)

5.智能加载

• 定义：考虑网络环境、用户流量成本，选择合适的方式去呈现图片、视频、音乐等高流量消耗的资源。例如以下的处理方式：

在WIFI环境下：优先加载高质量的图片、视频、音乐等。

在4G环境下：提示是否终止下载行为或自动停止下载行为，优先加载普通甚至停止加载图片、视频、音乐等，并提示用户当前网络环境可能消耗大量流量。

在弱网环境下：默认加载低质量甚至停止加载图片、视频、音乐等，并提示用户当前网络环境异常。

• 场景：适用于有大量图片或视频的应用，如新闻资讯类应用、视频类、直播类的应用。

• 作用：根据场景来控制流量消耗，帮助用户避免出现流量非自愿损耗的情况。

• 缺点：不一定能准确地满足用户的需求。（土豪不会考虑流量因素。）

• 表现形式：如下图所示，需检测用户当前设备的网络环境。非WIFI环境下进入直播间，提示用户当前网络环境观看直播会消耗大量流量；查看今日头条新闻，非WIFI环境下，文章内的图片默认显示缩略图，用户可选择性地显示大图，避免流量消耗过多，WIFI环境下直接显示大图，以保证体验更佳。

6.缓存加载

• 定义：应用从本地数据库获取已缓存的数据，以至在无网/弱网的情况下，用户仍可查看一些内容或使用一些功能。

• 场景：适用于新闻资讯、小说、视频等内容列表及已查看的内容详情的缓存及相关的功能离线操作，即时通讯消息的缓存及相关功能的离线操作。（同时也要考虑流量因素，WIFI环境下和4G环境下缓存处理应差异处理。）

• 作用：提高应用的加载效率，在无网/弱网环境下，仍可查看一些内容或使用某些功能，应用内容列表不至于空白；针对用户可能二次查看的即时内容，缓存处理可以减少流量损耗。

• 缺点：应用的缓存需考虑容量限制和清理时间，否则缓存量越来越大，会导致手机不堪重负，运行缓慢。

• 表现形式：如下图所示，今日头条缓存了资讯列表及咨询内容的文本及框架，便于用户无网络时查看（如在地铁上），体验远远好于内容空白；优酷视频在离线状态下缓存了内容展示页的文字及框架（封面图较多，占得缓存比较大）；微信朋友圈支持离线点赞，先将用户的操作保存到本地，待有网时，再上传操作，对用户来讲，操作得到了满足。

五、关于加载的处理注意点

请求数据的过程必然要耗费一定的时间，而且可能会存在网络异常、服务器异常等情况，导致这个请求的时间更长。而等待容易让用户产生烦躁、焦虑的情绪，一旦处理不好，用户对于产品的好感度就会大大降低，以致卸载产品。我觉得设计师可以从以下几个方面考虑优化加载的过程：

1.合理采用预加载和缓存加载的方式

以阅读类的应用为例，用户读了第一页，应用提前加载了后面几页，这样用户翻页就不需要再次加载了。这种体验就比较好，但是需要预测用户可能的使用行为，也要考虑设备的网络环境和流量成本，如果内容数据量比较大，又是在非WIFI环境下，就不建议使用预加载机制了。

使用缓存加载，就必然要考虑缓存的容量限制和使用时间，关于缓存，会在以后的文章做详细说明。

2.设计有趣的加载动画

一个好的加载动画需要结合品牌，同时也要体现出一定的趣味性，用趣味性的加载动画吸引用户，可以在一定程度上缓解用户等待时焦虑的情绪。

3.及时退出

如果加载时间太长，动画再有趣，用户也不会买账的。因此我们可以考虑，为用户提供退出加载的选项；也可以考虑设置一定时间内加载还没有成功的话，退出加载过程，让用户选择是否重新加载。

了解加载的原理，合理地使用（或搭配使用）加载的策略，才能设计出体验更佳的加载方案。

作者：雨无声，微信公众号：int－PD，快服科技交互设计师， 2 年互联网交互设计经验，已主导设计多款移动端产品。

（编辑：ASP站长网）