每日优鲜页面刷新.gif

五、占位加载

使用矩形色块代替未加载完成的数据，一般用于页面布局固定的H5设计，如信息流列表、资讯详情页等，加载过程中用户可以提前看到即将展示的界面框架，有个心理预期。

经典且比较出色的占位加载产品莫过于FaceBook了，按模块细分进行不同占位加载，而且加载过程中色块有渐变效果：

Gif效果图：

FaceBook占位加载.gif

不过对客户端来说，采用这种加载方式对性能要求较高，可能会出现加载慢或不流畅的情况。

还有一种占位加载是优先加载文字和框架，针对加载较慢的图片、视频进行占位加载，多用默认色块或者缺省图进行占位：

六、模糊加载

适用于图片较多的界面，加载完毕前先展示模糊处理的图片，用户能大致看清图片轮廓，等待意愿更强，过渡效果也比使用缺省图或黑色画布更自然。

七、模态加载

客户端对话框设计中可分为模态和非模态对话框，模态对话框是指在用户想要进行下一步操作时，必须先对该对话框进行响应。顾名思义，模态加载也会阻断用户操作，除了终止或返回上一页，必须等待当前加载完毕才可进行下一步动作。

模态加载主要用来限制一些关键性操作，如创建订单、支付、提交信息等，多以Toast结合图案的形式展示：

补充：关于加载的一些细节设计

1. 选择合适的加载方式

为了更快让用户看到信息，通常会对加载页面的设计配合技术层面的数据加载方式来提高加载速度，最常见的为懒加载、预加载、智能加载和分步加载。

(1) 懒加载

当内容出现在界面区域时再进行加载，节省用户流量同时适当减轻服务器压力，很多信息流产品都采取这种加载方式，一般只针对加载较慢的图片和视频进行懒加载。

(2) 预加载

用户在浏览当前页面的时候，预先加载下一级页面的内容。应用场景多为资讯类，通常在用户浏览列表的时候就已经加载好了资讯详情的内容，这样即使突然网络异常也不影响用户查看文章。

采取预加载时需要结合实际场景，预测用户行为，如果用户浏览当前页面的时候就已经离开了，会造成流量的浪费。而且为了适当节省流量和减轻服务器压力，通常只针对用户当前浏览的界面进行预加载。

微信公众号和今日头条都采用了预加载方式：

(3) 智能加载

针对不同网络情况采取不同的加载方式，比如：

• 观看视频时，3G/4G情况下默认选取低分辨率画面节省流量，WiFi情况下则选取高清模式。
• 非Wifi情况下浏览信息时，不加载图片/视频或需要用户手动点击加载。

(4) 分步加载

对重点模块或加载速度较快的内容进行分步加载，优先级一般为界面布局>文字>图片>视频，具体表现形式跟前面提到的占位加载有些类似。

2. 后台加载

加载过程中用户退到后台时，是否继续加载？ 再次返回客户端时是否重新加载？是自动重新加载还是手动？

3. 不那么起眼的加载

你可能没有留意到：有的加载提示并不会采用明显的方式，目的是尽量不影响用户操作和注意力，通常直接在按钮上改变文字或在文字旁添加一个小菊花加载图标来提醒用户加载的状态。

4. 异常提示

根据著名的「尼尔森十大可用性原则」中的容错原则和人性化帮助原则，在设计加载样式过程中应当考虑加载异常的情况，加载时间过长或断网导致加载失败都应及时给予用户反馈，并尽可能提供说明引导和解决方案。

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

5. 加载完毕的交互

数据加载成功后是直接显示，还是渐变或其他过渡效果？是否伴随另外的提示信息？这些都是需要考虑的。

应用场景多为信息流app列表刷新后顶部提示：

6. 多种加载方式结合

采取某一种加载方式来设计页面的局限性较大，而且表现形式单一，因此更多的app采取的是多种加载方式结合的设计，这样加载更加灵活高效，用户体验也更完善。

多种加载方式的结合非常多样化，下面只列举两种比较常见的：

（1）列表尾部：自动加载和手动加载结合

前面提到过手动加载多见于网页端产品，对于移动端H5目前仅发现36氪采取该加载方式。

这是一种比较折衷的方式：在用户刚开始浏览的一段时间采用自动加载，专注于被动接受信息的沉浸式体验；当用户连续浏览了一定的页数，说明到达了一定的使用时长，可能会产生注意力不集中和视觉疲劳的感觉，这时候把加载的主动权交回用户手上，不仅能缓解服务器加载压力，也能有效避免用户由于长时间不断接受信息而出现负面情绪。

（2）页面加载：进度条加载和白屏加载结合

由于白屏加载时页面是没有内容的，就算配合动画转移注意力，用户仍然无法知悉加载的进度，所以把进度条加载和白屏加载结合的情况也十分常见，比如：Mori手账和淘宝，而且可以看到结合情况下对进度条加载做了弱化处理，放在了导航栏甚至状态栏的上方。

总结

关于数据加载采取哪种加载方式和样式并没有严格的限制，重点在于以用户为中心，灵活运用适合的加载方式，以尽可能快的速度和流畅的效果给用户呈现出完整的数据。

本文由@给予 原创发布于人人都是产品经理，未经许可，禁止转载。

题图来自Unsplash, 基于CC0协议。