从微信、钉钉等APP，看六种常见的loading 加载设计

从微信、钉钉等APP，看六种常见的loading加载设计

作者@邹志南(微信公众平台:UE养护)

大多数应用程序必须与服务器交换虚拟机数据，应用程序向网络服务器发送数据请求。网络服务器收到请求后，将相关数据发送给应用程序。应用程序成功接收请求后，会显示信息数据内容。如果没有成功接收，则反馈数据没有成功接收。

在整个数据交换的过程中，因为互联网的原因，肯定要花一些时间。换句话说，用户必须等待加载。这时候他们就需要采用加载系统，这个系统告诉用户，App已经在勤勤恳恳的为你加载数据了，要淡定。好的加载设计可以减弱用户的等待焦虑，而不科学的加载设计会让用户骂爹。

菜单栏加载:手机微信，钉钉打卡

钉钉&手机微信

手机，打指甲等。都用这种方法。聊天目录页的微信聊天记录存储在本地，所以网页内容不是空。这时候加载的时候不一定要获得用户视觉效果的焦点。如果菜单栏显示App已经加载，菜单栏的加载会淡化。如果由于网络错误导致网络未连接，则菜单栏中的信息未连接。

黑屏加载

这种黑屏加载方式选择在网页内容比较单一，信息必须加载一次才能显示的情况下。在这种加载方式下，用户无法看到完整加载前的一切，所以一旦时间长了，一定要提醒用户加载不成功的原因，而不是一直转来转去。另外，让加载logo更有趣也会缓解用户等待时的焦虑(上下图比左图让用户感觉更好)。

时基

野生动物园&手机微信

时间轴加载风格，常见于电脑浏览器，包括PC端和移动端电脑浏览器。有些App网页是用H5的方式做的，这些网页也大多采用时间轴的风格来展示信息加载的全过程。

烤

当用户进行一次实际 *** 作时，为了更好地避免用户再次实际 *** 作导致的数据加载不成功，使用Toast的样式提醒用户数据已经加载完毕，并限制用户再次进行实际 *** 作。在这种情况下，用户一般只需要进行返回上一个网页的实际 *** 作，其他实际 *** 作都是禁止的。

为了更好的防止数据一直加载不上，我们可以在Toast中添加一个撤销按钮，让用户主动终止加载的情况。因为数据加载不成功的情况很少发生，所以给Toast添加撤销按钮的app并不多。

页面刷新

页面刷新在大多数app中被广泛使用。这种加载系统保证了用户可以看到本地缓存的文件数据，也可以告诉用户网页已经更新。另外，用户可以根据下拉的手势功能选择重新加载数据，一定程度上考虑了强迫症患者。

预设地图/占位符

当一个网页的结构是固定的，必须只加载结构中的数据时，就采用这种更新风格，即先加载结构，再加载结构中的数据。为了更好地将框架中的内容与空进行对比，会添加占位符或预设照片。

以上简单详细介绍了六种常见的加载方式。虽然有六种样式，但实际上只有两个基本的加载原则:一是整体加载网页数据，加载后一次显示信息；第二种是先加载一部分内容，再加载其余部分(先加载文字，再加载照片；在加载模式中的数据之前加载模式)。

我常说设计方案永远是为产品功能服务的，产品功能是为了更好的考虑用户的需求。知道了加载的设计方法，独立思考一下:这种方法是为了更好的减少用户等待数据加载时的焦虑。那么有没有更强的系统来减少用户等待时的焦虑呢？当然有。

第一，改进App的加载优化算法，让App与web服务器交互数据的时间简洁明了。这必须由开发人员精心制作。这就从源头上解决了问题，因为加载数据的时间立刻减少了，也就是用户要等待的时间减少了。

第二，选择预装系统。拿文章App打个比方。当用户正在查看第一页时，应用程序在后台加载后管理最后两页。当用户翻到第二页的时候，就不需要等待加载了，因为App早就帮用户加载了。这种加载系统给用户的感觉非常好，但是有一个问题，就是预测分析用户的个人行为，加载其他数据，会耗费大量的总流量。因此，建议在WiFi网络空中采用这种预载系统，而不在蜂窝网络中采用。首先要和开发者讨论沟通，保证预装系统的最终运行。

第三:多线程解决方案。做这件事最好的App是Instagram。不知道大家有没有注意到。使用Instagram时会感觉特别流畅，即使网络不稳定。这是为什么呢？因为网络情况不稳定，你给好友点赞。Instagram不会提醒你网络不稳定， *** 作失败，只会提醒你关注成功了。其实它只是记录你关注的 *** 作，在互联网好的时候把关注的个人行为上传到网络服务器，从而关注个人行为。这是为了减轻用户的实际 *** 作压力，让产品自己解决困难，而不是把问题扔给用户。

请记住，现阶段App的通用加载样式只有六种。自然也有其他的装载设计风格，但这有什么关系呢？你已经掌握了商品装载的基本原理，真正理解了装载系统，这样才能静制动。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zz/782116.html