加载（Loading）在APP中非常常见，这次我们开发的APP上线后，发现开发很多地方都做了加载动画，而其实并没有必要加那么多加载动画，也是前期需求的忽视，所以我也趁着这次总结了一下APP加载设计，目录如下：
一、 加载设计的意义与作用
二、加载设计分类
三、不同分类的常见应用场景
四、不同场景下选择的加载方式
五、加载动画选择
一、 加载设计的意义与作用
我简单总结为，对于产品端：给予服务器响应的时间；对于用户端：缓解用户因响应时间而产生的等待焦虑； 满足用户对可能存在的未知情况的掌控。
二、 加载设计分类：1. 自动加载 2. 手动加载
自动加载：因产品需要自动请求数据库而产生的等待，我把这种产品的加载称为自动加载。手动加载：因用户需要，需每次手动触发请求数据库而产品的等待，我把这种加载称之为手动加载。
三、不同分类的常见应用场景
自动加载常见的应用场景包括：1）应用启动 2）注册以及登录 3）进入新的页面 4）保存数据 5）上传、下载 6）点赞等
手动加载常见的应用场景包括：1）下拉刷新 2）上拉加载更多
四、不同场景下选择的加载方式
自动加载方式大致分为以下7 种：
1. 全屏加载
全屏加载是指页面内容区域全部空白，只留进度条或转圈式加载动画以表示页面正在加载中，以保留阅读内容的完整性，但当网络状况不佳时，易给人造成页面卡死的感觉，如图：
全屏加载
2. 分步加载
分步加载是指优先加载占用网络资源小的元素，如文字以及默认图标、图片占位图等，如图：
分步加载
3. 懒加载
懒加载就是延迟加载，当用户触发到某些条件时，才去请求服务器。这样做一方面减少用户的网络资源耗费，另一面也减少服务器的请求次数。常见的如长列表、瀑布流等，当用户即将浏览完已加载的20条，再去加载后20条，给用户带来无痕的浏览体验。
4. 预加载
预加载是指在用户浏览前，预先加载内容到本地缓存中，当用户查看页面时，从本地缓存中直接渲染，减少用户等待时长。但提前加载也会造成资源的浪费，消耗服务器的性能，是以服务器性能换取用户良好的用户体验。
5. 智能加载
智能加载主要是指根据网络状况不同，智能的调整加载方式。当用户处于 Wi-Fi 环境下，可优先加载视频、大图片等，当用户处于非 Wi-Fi 环境下，加载小图、无图或者图片/视频占位图。
6. 后台加载
后台加载是指前后端分离的加载方式，前台正常回应用户的操作，后台慢慢处理用户请求，如点赞功能，在用户点赞后，点赞数立刻+1，其实这个+1在1、2秒内都是假数据，在请求数据1、2秒后才是真实+1。再例如我们发朋友圈，内容也是会立刻显示在朋友圈，但其实对于一些图片都是后台加载，也要延迟一会才能被其他人看到。这样前台及时反馈用户，后台处理数据的方式就是用户完全不用关心加载情况，也无加载提示，看起来不用用户的丝毫等待，提升用户体验。
7. 离线加载
离线加载其实就是预加载与本地缓存的结合，当用户处于Wi-Fi模式下，自动加载数据，这样在用户处于非Wi-Fi 模式下就可以查看缓存内容。这种加载方式最好在设置里让用户去选择是否开启，毕竟有些内容可能会占用大量缓存空间，而用户可根据自身手机内存空间大小，去选择是否开启离线加载。
手动加载采用的加载方式，大多都是懒加载。
五、加载动画选择
加载动画即与用户进行交互的等待动画，主要为缓解用户等待的焦虑感。加载动画的形式有很多种，分为中断用户操作和非中断用户操作，专业一点中断用户操作也称为模态加载，非中断用户操作称为非模态加载。
中断用户操作（模态加载）：主要以蒙版弹窗的形式进行加载，比如登录中、退出中、支付、APP的强制更新等，只有当这操作完成后，才能操作其他功能。而这时候加载动画，最好选择生动有趣一点的，有条件的情况下，可让UI自己设计个小动画，以提高用户体验。对于一些耗时较长的加载，需要提示目前进度情况，例如进度条、完成数，再生动点可用动画表示目前进度，以缓解用户因等待而产生的焦虑。
非中断用户操作（非模态加载）：主要以导航栏加载、顶部/底部进度条加载、页面转圈等形式进行加载，不影响用户点击其他操作按钮，这种加载方式我的心得是尽量不打扰到用户，所选择的加载控件也尽量淡化、弱化，不给用户产生视觉负担。
另外，下拉刷新操作其实是满足用户对最新消息的掌控需求，那么采用情趣化的加载动画去与用户交互，我觉得是个很好的方式。
以上就是我对APP加载设计的总结，不妥之处，不吝赐教。
- E N D -
如有问题或更好建议，欢迎进群与我讨论，QQ群号：304459226
网友评论