聊聊加载动画那些事儿
本文简单介绍了加载动画的
一、加载动画存在的意义是什么
众所周知，app服务器在加载数据的时候需要用户等待一段时间，在此期间，系统应该始终在合理的时间内做出适当的反馈，让用户了解正在发生的事情，让他们知道此时的操作是有反应的，减缓用户因等待而产生的焦虑感。所以设计师就采用加载动画的方式来缓解用户的等待时间，使整个等待过程变得更加友好、流畅。
二、加载动画如何分类
结合实际案例，我将加载动画按照样式分为以下9种：
1.启动页加载
2.导航栏加载
3.进度条加载
4.Toast加载
5.全屏加载
6.占位加载
7.模糊加载
8.分屏加载
9.下拉刷新加载
接下来，就让我为大家一一介绍吧。
1.启动页加载
我们启动app时，软件需要进行初始化工作，基本所有产品都会设置启动页来缓冲用户的等待时间，提升用户体验。通过展示启动页，营造沉浸体验感，来变相降低用户等待首页内容加载的时间。我们会在启动页中融入产品logo，向用户传达品牌形象。
图1.启动页加载
2.导航栏Loading加载
将导航栏标题临时变成加载信息的文字提醒，当收取信息时标题栏展示正在加载，加载成功则标题栏loading消失。这是一种极轻量化的加载样式，在加载信息的同时，不会占用用户的视觉焦点。用户可对屏幕中已加载出的内容进行操作。但是这样的加载方式仅适用于数据量少加载时间短的页面。
图2.导航栏Loading加载
3.进度条加载
加载时，在页面顶部显示进度条，来告知用户预计加载时间，让用户有一定的心理预期。多用于浏览器或APP中H5页面的加载。进度条可以告知用户加载页面预计需要等待的时间，让用户可以有一定的心理预期。但是，进度条加载的等待感比较强，如果遇上网络问题加载时间较长会导致用户体验感下降。
图3.进度条加载
4.Toast加载
当用户执行某个操作时，为了防止用户继续操作导致数据加载失败，则用Toast的样式来提示正在加载，在加载的时间内，用户的操作将受到限制，一般只能执行返回到上一级的操作，其他操作都被禁用。
图4.Toast加载
5.全屏加载
加载页面时，在加载成功之前看不到任何页面内容；加载完成后，一次性显示全部页面内容。在我们的日常项目设计中，常常会在全屏加载中植入品牌logo和趣味动销，来提升品牌识别度。
图5.全屏加载
6.占位加载
加载页面时，使用预设图片或占位符来填充页面框架，再逐步加载页面数据。这种方式能让用户快速地了解界面信息布局及阅读内容， 可在预设占位图中增加品牌元素，加深用户对品牌的认知。
图6.占位加载
7.模糊加载
在加载页面中的图片素材时，把预加载出来的图片进行模糊处理，再逐步加载出清晰地图片。通常用在多图界面中。相对于占位图来说，通常人们对这类若有似无的图片都会给予极大的耐心去等待，可以勾起用户的好奇心，减缓用户的等待焦虑。
图7.模糊加载
8.分屏加载
展示列表数据时，默认展示n条，滚动到最后，再自动加载n条或者手动点击加载。适用于多屏且信息资源较多的页面，如长列表、商品列表、咨询列表或瀑布流。
分屏加载的速度较快，属于系统自动加载不需要频繁点击下一页，连绵不断的瀑布流能够留住客户的关注点，但同时也容易迷失在茫茫商品海洋里，不方便快速牵引定位到某一特定内容。
图8.分屏加载
9.下拉刷新加载
用户主动下拉页面，刷新加载页面中的内容。这已成为用户习惯的加载方式，使用场景广泛，方便用户刷新当前页面，获取新数据。
图9.下拉刷新加载
从开发工程师的角度，还有四种加载方式：
1.预加载
2.懒加载
3.分布加载
4.智能加载
1.预加载
提前加载数据，当用户需要查看时可以直接从本地缓存中渲染。这种方式虽然换取了更好的用户体验，但会增加服务器前端压力，牺牲了服务器前端性能。假设在非wifi环境下，用户不确定查看的情况下，就会浪费流量。
图10.预加载
2.懒加载
当内容出现在界面范围内再进行加载，节省用户流量的同时适当减轻服务器压力。但偶尔会丢失重要的关键信息，无法建立信息获取的闭环。
图11.懒加载
3.智能加载
综合考虑网络环境、用户流量成本，智能组合合适的方式去呈现图片、视频、音乐等高流量消耗的资源，能够避免不必要的流量消耗。
图12.智能加载
3.分步加载
根据页面上的资源类型排队加载，优先加载占网络资源较小的文字，图片在加载过程中使用占位符，直到图片加载成功。以文字→图片→视频→其他资源的顺序加载。让用户快速了解界面信息布局及内容。
图13.分步加载
千万注意一点，无论你的动画有多好看，如果开发成本太高或者过于复杂都是无法落地的，所以我们要遵循简单实用的原则来进行设计。
