【控件规范】-操作类

UI设计师在设计APP时，往往会更在意界面的布局，转跳等操作及反馈，但往往忽略了一个更重要的环节，即APP的数据加载。那么，我们如何处理界面交互中的加载设计，以确保体验不中断，用户没有长时间的等待感呢？

什么是加载？

用户在客户端上操作，客户端将请求发送到服务器，服务器处理请求，将数据返回给客户机，并将其显示给用户。这个过程就是加载。与缓存不同，缓存是主动的，而加载是被动。

1.全屏加载

这种类型的加载相对简单，一般在页面内容相对单一时使用，因此在直接加载所有数据后显示内容。

优点：能保证内容的完整性，完整的加载才能系统地获取信息。

缺点：由于一个加载，这个过程是一个非常强烈的等待感，超过3秒会产生焦虑，所以在信号不好的地方如地铁，使用全屏加载内容是一体验很差的事情。

使用场景：从上层界面进入较低级别的接口是常见的；或H5通常情况下，这种情况会与加载过程结合在一起，并带有明确的进度标记。

2.分步加载

当有文字和图片时，图片的加载速度将比文本慢，文本将首先加载，图像将在加载过程中使用，直到图像被加载成功为止。当加载页面的内容具有固定框架时，可以先加载框架，然后加载框架内的内容。通过先加载页面的框架，据此，占位符可以让用户提前了解整个界面的架构，提高产品的体验。

优点：能帮助用户快速了解整个界面的信息布局。

缺点：开始的瞬间会丢失重要的关键信息，用户第一次会产生觉得产品有问题的感觉。

使用场景：适用于多图片的布局界面和消耗流量较大界面。

3.下拉加载

当用户下拉时，加载动画就会出现并刷新整个页面。现在很多产品设计加载动画，使加载过程更加情绪化，人性化和品牌化。

优点：方便用户刷新当前界面，获取新数据。

缺点：该操作只能在首屏执行。

使用场景：加载时可以使用接口信息。

4.上拉加载

在浏览界面的过程中，用户在上拉过程中自动加载信息。

优点：让用户进入无休止的浏览模式，让用户向下滚动，而不必手动单击下一页。

缺点：没有结尾，不方便快速定位到某个内容。

使用场景：适用于瀑布流、长列表等。

5.预加载

当用户在页面停留时，与当前界面对应的下一个界面的所有信息都被加载。使用此加载方法将减少进程中需要等待的时间。

优点：用户进入下一级的页面没有加载过程中，消除等待的焦虑。

缺点：在非WiFi的情况，消耗较多的流量。

应用场景：信息需求即时刷新和预加载消耗较少的流量情况下可使用，如电子邮件。

它可以加入条件的判断，当用户是在WiFi链接下，可以进行预加载。非wifi链接下则不进行。

6.智能加载

根据用户的网络情况，加载不同质量的图片内容。例如，在wifi的情况下，加载的图像是HD，并且在非wifi状态下加载的标清的图像。

优点：基于特定场景来控制流量和加载速度。

缺点：不一定真实有效符合用户的需求。

适用于有大量图片或视频的应用程序，如电商类或视频类APP。