淘宝实例分析：常见的七种 app 加载样式设计

2019-05-20 22:08:00

本文笔者将以淘宝数据加载为例，来分析常见的七种app加载方式。

数据加载发生在用户触发特定操作后，客户端向服务器发送请求，服务器处理并返回数据给客户端的过程。
该过程中由于网络异常、解析出错或服务器异常等问题常常会导致数据加载失败或延时。而用户是没有耐心的，这时候需要产品在前端进行一定的设计来缓解用户等待焦虑，并在加载失败时给出一定的反馈提示，防止用户由于漫长等待时间而离开。
下面将通过淘宝的加载实例，来分析一些常见的数据加载方式，体验设备：iPhone 8 v12.3。

一、启动页

启动app时需要进行初始化工作，基本所有产品都会设置启动页来缓冲用户的等待时间，提升用户体验。
通常有以下几种：

展示产品logo和slogan，宣传定位。
展示具有品牌形象和产品情怀的封面图，建立品牌认知。
更多的是两者结合，利用展示logo和slogan的时间加载广告或活动页，同时继续初始化app界面。

懒加载
当内容出现在界面区域时再进行加载，节省用户流量同时适当减轻服务器压力，很多信息流产品都采取这种加载方式，一般只针对加载较慢的图片和视频进行懒加载。
根据著名的「尼尔森十大可用性原则」中的容错原则和人性化帮助原则，在设计加载样式过程中应当考虑加载异常的情况，加载时间过长或断网导致加载失败都应及时给予用户反馈，并尽可能提供说明引导和解决方案。

淘宝加载失败的情况还有个小细节，如果点击重新加载几次后依然加载失败，会增加Toast再次强调提示，这时候用户更容易意识到：可能是手机网络真的有问题，不会因为一遍又一遍刷新失败而感到焦躁。

5. 加载完毕的交互

数据加载成功后是直接显示，还是渐变或其他过渡效果？是否伴随另外的提示信息？这些都是需要考虑的。
应用场景多为信息流app列表刷新后顶部提示：

6. 多种加载方式结合

采取某一种加载方式来设计页面的局限性较大，而且表现形式单一，因此更多的app采取的是多种加载方式结合的设计，这样加载更加灵活高效，用户体验也更完善。
多种加载方式的结合非常多样化，下面只列举两种比较常见的：
（1）列表尾部：自动加载和手动加载结合
前面提到过手动加载多见于网页端产品，对于移动端H5目前仅发现36氪采取该加载方式。

这是一种比较折衷的方式：在用户刚开始浏览的一段时间采用自动加载，专注于被动接受信息的沉浸式体验；当用户连续浏览了一定的页数，说明到达了一定的使用时长，可能会产生注意力不集中和视觉疲劳的感觉，这时候把加载的主动权交回用户手上，不仅能缓解服务器加载压力，也能有效避免用户由于长时间不断接受信息而出现负面情绪。
（2）页面加载：进度条加载和白屏加载结合
由于白屏加载时页面是没有内容的，就算配合动画转移注意力，用户仍然无法知悉加载的进度，所以把进度条加载和白屏加载结合的情况也十分常见，比如：Mori手账和淘宝，而且可以看到结合情况下对进度条加载做了弱化处理，放在了导航栏甚至状态栏的上方。