UI设计师在设计APP时,往往会更在意界面的布局,转跳等操作及反馈,但往往忽略了一个更重要的环节,即APP的数据加载。那么,我们如何处理界面交互中的加载设计,以确保体验不中断,用户没有长时间的等待感呢?
什么是加载?
用户在客户端上操作,客户端将请求发送到服务器,服务器处理请求,将数据返回给客户机,并将其显示给用户。这个过程就是加载。与缓存不同,缓存是主动的,而加载是被动。
1.全屏加载
这种类型的加载相对简单,一般在页面内容相对单一时使用,因此在直接加载所有数据后显示内容。
优点:能保证内容的完整性,完整的加载才能系统地获取信息。
缺点:由于一个加载,这个过程是一个非常强烈的等待感,超过3秒会产生焦虑,所以在信号不好的地方如地铁,使用全屏加载内容是一体验很差的事情。
使用场景:从上层界面进入较低级别的接口是常见的;或H5通常情况下,这种情况会与加载过程结合在一起,并带有明确的进度标记。
2.分步加载
当有文字和图片时,图片的加载速度将比文本慢,文本将首先加载,图像将在加载过程中使用,直到图像被加载成功为止。当加载页面的内容具有固定框架时,可以先加载框架,然后加载框架内的内容。通过先加载页面的框架,据此,占位符可以让用户提前了解整个界面的架构,提高产品的体验。
优点:能帮助用户快速了解整个界面的信息布局。
缺点:开始的瞬间会丢失重要的关键信息,用户第一次会产生觉得产品有问题的感觉。
使用场景:适用于多图片的布局界面和消耗流量较大界面。
3.下拉加载
当用户下拉时,加载动画就会出现并刷新整个页面。现在很多产品设计加载动画,使加载过程更加情绪化,人性化和品牌化。
优点:方便用户刷新当前界面,获取新数据。
缺点:该操作只能在首屏执行。
使用场景:加载时可以使用接口信息。
4.上拉加载
在浏览界面的过程中,用户在上拉过程中自动加载信息。
优点:让用户进入无休止的浏览模式,让用户向下滚动,而不必手动单击下一页。
缺点:没有结尾,不方便快速定位到某个内容。
使用场景:适用于瀑布流、长列表等。
5.预加载
当用户在页面停留时,与当前界面对应的下一个界面的所有信息都被加载。使用此加载方法将减少进程中需要等待的时间。
优点:用户进入下一级的页面没有加载过程中,消除等待的焦虑。
缺点:在非WiFi的情况,消耗较多的流量。
应用场景:信息需求即时刷新和预加载消耗较少的流量情况下可使用,如电子邮件。
它可以加入条件的判断,当用户是在WiFi链接下,可以进行预加载。非wifi链接下则不进行。
6.智能加载
根据用户的网络情况,加载不同质量的图片内容。例如,在wifi的情况下,加载的图像是HD,并且在非wifi状态下加载的标清的图像。
优点:基于特定场景来控制流量和加载速度。
缺点:不一定真实有效符合用户的需求。
适用于有大量图片或视频的应用程序,如电商类或视频类APP。
领取专属 10元无门槛券
私享最新 技术干货