设计中的加载都有哪些？ / 木子杰软件教程

UI设计中，如何选择正确的加载方式，来提升用户体验？

什么是加载？

加载在互联网环境中可以理解为等待数据呈现的过程，也是一种反馈的状态。当用户对媒介进行交互行为之后触发的一种等待反馈。换个说法：你去饭店点菜，等待后厨上菜的过程，就是加载。

加载的逻辑

我们再以图示帮助大家更好的理解，数据是如何通过一些列复杂的流转最终呈现给用户的。用户在客户端中进行操作，触发一个事件，例如点击外卖商品列表。然后客户端向服务端发送一个信号：“用户要一只烤鸡、一只烧鹅、一盘猪大肠”。

这时服务端收到了这个信号，并开始寻找材料（数据），对材料进行烹饪（整理数据打包）。再之后服务端需要对最后的成果进行摆盘（美化／渲染）最终送到用户的手中。

但实际上，用户在出发事件到最后看到呈现的内容这一段时间都是在等待，也就是在等待加载完成。而客户端和服务端的数据交互都需要一定的时间来完成。

数据的发送和接受取决于网络的好差，数据的查找和整合取决于服务端的性能和容量，最后呈现给用户的渲染取决于客户端的性能，高端手机和低端手机在显示内容的质量及快慢都有不同的差距。

所以，我们希望能减少用户等待的时间，对每个步骤进行优化，针对数据信息类型的不同采取不同的加载方式，以满足用户的心里预期和更好的体验。

加载的类型和使用场景

1.模态加载

模态加载比较暴力，当用户出发事件后模态加载将会独占客户端，意思就是我正在帮你做菜，并且我要全部做完才能给你，这时你只能等待。这种体验并不是很好，如果数据相当庞大，那么大部分用户会失去耐心。除非是不完整加载出来就会导致严重失误的场景，否则尽量不使用模态加载。

当我们需要一起让用户显示但是减少用户内容焦虑的时候，我们通常会采用占位图布局预先加载的展示样式以及情感化动效／插画。例如豆瓣，在点击首页列表中的内容后跳转到详情，此时由于数据还未返回，他使用了一张资源较小的图片来展示给用户，告诉了用户即将加载出来的信息大致的布局和轮廓，让用户提前有心理预期。但是需要注意的是，如果该页面会有多种变化时就不要用该方法。