本次跟大家分享的内容是[设计细节@加载]，我会从前期的产品架构分析到后期落地的一些加载动画进行讲解和展示。

全篇共2072字，大概需要5-10分钟的阅读时间。（建议浅色模式浏览）

目录：

一.加载的逻辑梳理

二.对缘平台的加载动画

一.加载的逻辑梳理

大部分的设计师应该都遇到过这种情况：刚开始接到需求时只是按照产品或者需求方的原型图进行设计，虽然很多成熟的设计师会根据自己的设计经验和对产品的理解，能够设计出体验度较好的功能，但是大家往往会忘记[加载]这个细节。

[加载]其实真的很重要：1️⃣首先对于新用户来讲，首次进入平台因为没有数据，一定有很多页面是空页面的状态，那么这时的加载和空状态的结合就非常重要；2️⃣其次对于老用户来说能够提升用户体验度以及可以更好的深入产品功能和运营玩法。

那么可以先来了解一下为什么会存在加载呢？

根据上图，我们可以知道其实就是：连接数据库-请求服务器-返回对应数据这样的过程导致会有加载的出现，我们就需要有加载动效来承接此时出现的空白页面。

这里我整理了加载的大体逻辑框架（建议电脑浏览）

主要分为两大块讲解：数据加载以及操作过程加载

1.数据加载：有缓存/无缓存

a.有缓存：这个比较好理解，就是先展示缓存内容，后加载新内容。

b.无缓存：无缓存加载也就是无数据情况下加载的形式。

因为有缓存的加载形式属于无缓存中的一部分，所以我们主要分析无缓存的加载形式。⬇️ ⬇️ ⬇️

1)白屏加载：

白屏加载也可以理解为H5页面的加载，页面中间一般有进度条加载/菊花加载/品牌符号加载，不过整体页面来看，目前市面上的加载形式有三种：返回按钮+静态标识、返回按钮+活动标题+动态loading、返回按钮+活动标题+骨架屏兜底加载。

不难看出最后一种加载形式体验度更好，提供了返回按钮，也告知了用户当前页面是做什么的，同时有大概框架的兜底提醒，最大程度的打消了用户急躁心理。

2)分步加载：

分步加载主要是针对有文字有图片的页面，为了不让用户等待时间过久，可以分步先将加载较快的文字呈现出来，然后再将加载较慢的图片呈现。

不过一般情况下在图片未加载出来之前图片都是灰色的方块，其实这样的话并没有达到最好的效果，我们可以在方块上增加品牌符号+扫光符号，第一是深入品牌，其次就是告知用户这里是在加载中..（案例：上图右侧动画）

3)智能加载：

智能加载是说软件可以根据手机的网络环境进行加载，举一个比较常见的例子：我们如果是wifi的情况下刷微博，视频是自动加载播放的；而如果是手机网络，视频是需要主动触发才可以播放的。

4)懒加载：

懒加载一般出现在feed流或者列表页面，当页面有较多内容时，会分批加载，每批内容的最下方被拉起时，会继续加载下一批内容。

5)预加载：

预加载更多被运用在阅读类的平台中，类似于：今日头条/知乎等等...；当用户处于此类平台的一级页面时，会看到很多文章的标题，这时平台会预先加载页面当中的前3-5条内容的二级页面，防止用户在网络不稳定或者断网的情况下，不能顺利的阅读内容。

不过大部分情况下，只会加载二级页面的文字信息，图片信息一般不会预先加载。

2.操作过程的加载

1).模态加载：

模态加载是防止用户在加载过程中进行其他操作，导致当前加载出错出现的一个模态提示层。（案例：微信支付中）

不过采用这种加载形式，可能会因为网络原因或者内容过多导致长时间处于加载状态，建议提供一个“取消”的操作，同时在安卓中的后退按钮能关闭模态提示。

2).控件自身加载：

提到控件自身加载，可能更多人的印象中它是属于PC端的加载方式，但其实最早期移动端也是必须要有控件加载状态的，只不过随着网络的速度越来越快，很多设计师会忽略掉控件加载。但如果我们在使用软件的过程中，点击一个按钮，因为网络的问题没有任何跳转和提示，这时你会怎么样呢？是不是觉得卡住了或者出现bug，就有可能导致用户杀后台的行为。

所以控件的自身加载也非常重要。

3).后台加载：

后台加载是在用户操作一个功能之后，先改变状态后处理交互的行为。这样一来，用户不用等待太久的时间，可以继续浏览其他内容，把发布的内容放在后台处理。 像微博/抖音/陌陌等在发布动态的时候都是使用这样的加载形式，体验非常好。

以上就是几乎所有的加载方式，大家可以带入自己所负责的项目进行思考。

通过以上的分析我整理了对缘APP的加载逻辑，以及梳理了大概的加载方式。

说完加载的整体框架之后，接下来跟大家分享一下我为对缘APP做的一些加载动画。

1稿：以平台的性质出发，联想到了丘比特之箭，采用射箭的动画形式体现相亲寻找爱情的意义。

2稿：因为1稿没有使用平台的品牌IP，所以不够具有品牌特色，第二稿采用了IP[对对]进行设计。

3稿：目前市面上的加载动画越来越丰富，除了解决加载期间急躁的情绪之外也希望给用户带来一些趣味感。

所以我们也考虑采用手势跟随的形式来设计，也融入平台的相亲性质。

1.下拉[对对]左右寻找，寓意着来对缘是为了寻找爱情。

2.松开之后抱着爱心左右摇晃，寓意着找到爱情之后开心的样子。

end：

以上就是本次的分享内容，如果你也在梳理平台的加载逻辑；设计加载动画，那希望这篇文章能对你有所帮助。

Powered by Froala Editor