前言
全篇共 2072字，大概需 5-10 分钟的阅读时间。建议浅色模式浏览
Part 1 理论篇：加载的逻辑梳理
Part 2 实践篇：基于场景，分析 “加载” 的实际应用
对于新用户
首次进入平台没有数据，一定有空页面状态，这时加载和空状态结合就非常重要；
对于老用户
也能够提升用户体验度以及更好的深入产品功能和运营玩法。
根据上图，可以得知：连接数据库-请求服务器-返回对应数据 这样的过程会产生加载，这时就需要有加载动效来承接此页面。
梳理了加载逻辑框架如下：建议电脑浏览
主要分两大块：数据加载 及 操作过程加载
1. 数据加载：有缓存/无缓存
a. 有缓存：先展示缓存内容，后加载新内容。
b. 无缓存：无数据情况下加载的形式。
因为有缓存的加载形式属于无缓存中的一部分，所以主要分析无缓存的加载形式。
a) 白屏加载
白屏加载可理解为H5页面的加载，页面中间一般有进度条加载/菊花加载/品牌符号加载，整体页面来看，目前市面上的加载形式有三种：返回按钮+静态标识、返回按钮+活动标题+动态loading、返回按钮+活动标题+骨架屏兜底加载。
总结：（支付宝）加载形式体验度更好，提供了返回按钮，也告知了用户当前页面是做什么，同时有大框架的兜底，最大程度的打消了用户急躁心理。
b) 分步加载
分步加载：针对图文结合的页面，顺序加载，先加载较快的元素（文字），后加载较慢的图片（较大元素），让页面过渡更为流畅。
一般情况下在图片未加载出来之前图片都是灰色的方块，其实这样并没有达到最好的效果，可以在方块上增加品牌符号+扫光效果，第一深入品牌，其次告知用户当前状态.（案例：上图右侧动画）
c) 智能加载
智能加载：指软件可以根据手机的网络环境进行加载。
d) 懒加载
懒加载: 一般在feed流或列表页面，当页面有较多内容时，会分批加载。
e) 预加载
2. 操作过程加载
a) 模态加载：
模态加载：防止用户在加载过程中进行其他操作，导致当前加载出错出现的一个模态提示层。（案例：微信支付中）
不过采用这种加载形式，可能会因为网络原因或者内容过多导致长时间处于加载状态，建议提供一个“取消”的操作。
b) 控件自加载
提到控件自加载，可能更多人的印象中它是属于PC端的加载方式，但其实最早期移动端也是必须要有控件加载状态的，得益于网络的提速，很多设计师会忽略掉控件加载。但如果我们在使用软件的过程中，点击一个按钮，因为网络的问题没有任何跳转和提示，这时你会怎么样呢？是不是觉得卡住了或者出现bug，就有可能导致用户杀后台的行为。
所以设计师应考虑所有控件的加载状态！！！
c) 后台加载
后台加载：用户操作功能后，先改变状态后处理交互的行为。
这样一来，用户不用等待太久的时间，可以继续浏览其他内容，把发布的内容放在后台处理。 像微博/抖音/陌陌等在发布动态的时候都是使用这样的加载形式，体验非常好。
以上就是所有加载方式，小伙伴们可以带入所负责的项目进行思考。
Part 2 实践篇：基于场景，分析 “加载” 的实际应用
结合负责的对缘产品来分析>>>
一稿：以平台的性质出发，联想到了丘比特之箭，采用射箭的动画形式体现相亲寻找爱情的意义。
二稿：因一稿没有考虑平台的品牌IP，不够具有品牌特色。
三稿：目前市面上的加载动画越来越丰富，除了解决加载期间急躁的情绪之外也希望给用户带来一些趣味感。
所以我们也考虑采用手势跟随的形式来设计，也融入平台的相亲性质。
a）下拉 [对对IP] 左右寻觅观察 —— 寓意着寻找爱情。
b）松开之后怀抱爱心左右摇晃 —— 代表找到爱情之后愉快情绪。
END
以上就是本次的分享内容，如果你也在梳理平台的加载逻辑；设计加载动画，那希望这篇文章能对你有所帮助。
