APP常见的几种加载方式

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/jnshu_it/article/details/89282461

这里是IT修真院产品分享课,今天要分享的是

【APP常见的几种加载方式】

一、加载

      用户在客户端发出一个指令后,直到客户端出现反馈结果时,这段时间内计算机完成的一系列执行动作,可能包括有客户端发出请求,服务器做出响应,客户端拿到数据后计算,渲染等。

二、加载方式

1、启动页加载

      这个主要是APP启动时的一个页面,由于APP启动需要时间,因此可以加入一个启动页来自然过渡,而且很多启动页是广告,这样也可以带来一些收益,这个页面一般可以点击跳过。

2、界面跳转加载

      这个加载模式又可分为当前页加载和跳转下个页面加载。当前页加载一般是帐号登录的时候使用的,跳转页面加载一般用于新闻类APP,点击新闻标题后跳转至内容页面。

3、白屏加载

      这个加载方式其实很多地方都用到了,只是平常没有刻意关注它,在使用QQ或者微信时,如果别人发了一个链接过来,然后去点击链接,当时周围的网络信号又不太好的话,就会看到这种加载模式的完整过程。一般顶部会有进度条,出结果就是整个页面加载出来,加载失败的话则页面为空。

4、分步加载

      顾名思义,就是分步骤的加载网页,优先加载占网络资源较小的元素。如先文字和默认图标后图片,图片加载完成前使用占位符显示;当加载的页面内容有固定的框架时,可以先加载框架,再加载框架内的内容。这个方式可以减少用户等待内容时间,即使网络不太好,也可以先把文字等数据量较小的先显示出来,可以让用户提前看到一些内容。

      类似的还有懒加载与预先加载,都可以算作是分步加载。

      懒加载主要是针对前端页面比较大而设计出来的一种方式,假如一个网页很大,又含有很多图片、视频内容,那么想一次性加载就会等待很久,懒加载就是只有在屏幕显示范围内的资源,被用户看到的内容才会真正去加载。

       预加载就是提前加载,比如启动APP时,当显示启动画面时,就可以预先把首页内容加载出来,这样可以减少用户加载内容时的等待时间,还有一个很典型的使用场景就是浏览视频网站或者购物网站,当我们快要滑到页面底部时,下面图片已经几乎加载完成了,这就是预加载的好处,在使用上感觉更加流畅。

5、智能加载

      这个加载模式我经常使用到,假如是在WIFI情况下,使用QQ浏览器去看视频,那么它会自动加载视频播放,而使用4G的流量去访问视频页面的话,会有一个弹窗来确认是否要播放,以免耗费大量流量造成用户扣费。智能加载模式就是根据用户使用场景来改变加载形式的。

6、缓存加载

      就是用户在没有网络的情况下,依靠缓存数据来加载内容,可以在断网的情况下显示数据,不会因为断网APP就啥也不显示了。而且由于有缓存数据,还可以提高正常模式下的加载速度,缺点就是会占用用户本地存储空间,设计时需要考虑好限制条件。

7、全页面加载

      将整个页面一起加载。这一过程用户不需要了解,不需要等待,在正常情况下体验是非常棒的。

8、占位色块加载

      在页面即将出现的位置加载占位色块,等到数据加载完成后将数据陆续填进色块(给用户加载很快的感觉,体验会比全页面加载流畅)。让等待时间变得更加有趣,保持用户感受的连续性。

9、进度条加载

      可以清楚的看到当前进度,反馈十分明确。反馈明确,清晰易懂缺点:页面无内容,美观度较低。

10、混合加载模式

      为了能让产品有一个流畅的体验,很多app会根据产品的各种不同场景来组合使用不同加载方式。根据不同场景来设计,体验升级缺点:需要对各场景制定对应的加载规范,保证交互一致性。

11、后台加载

       用户在操作后,客户端立刻反馈操作成功,然后把请求放到后台与服务器交互。这一过程用户不需要了解,不需要等待,在正常情况下体验是非常棒的。

12、渐进加载

      在 PC 端用浏览器看图片的时候,经常是先看到一张模糊图,然后再渐渐的变得清晰,这种效果就叫做渐进式加载。

三、加载遇到的问题

      有些加载过程的时间可能会比较长,甚至用户不知道此时应用是卡死了还是在执行命令,这样就会导致用户体验降低,用户会对应用失去耐心。

不确定的等待时间比已知的、有限的等待时间让人觉得更长。

在设计app的加载方式时,让加载时间变的更加有价值,或让等待时间变得更加有趣,或保持用户感受的连续性,或三者结合。

【更多内容,欢迎加入交流群565763832与大家一起讨论交流】

【这里是技能树·IT修真院:IT修真院官网,初学者转行到互联网的聚集地】

猜你喜欢

转载自blog.csdn.net/jnshu_it/article/details/89282461
今日推荐