浅谈APP的几种加载形式

  • A+
所属分类:经验思维

本文来源: 一飞(喜马拉雅XUED), 共 1332 字

最近做新的项目,在整理app的加载流程,发现其中涉及的知识还是蛮多的,所以拿出来跟大家分享一起学习一下

关于加载的定义:

当用户点击确认按钮,客户端就会发送请求到服务器,服务器返回数据到客户端,而这个过程需要耗费一定的时间,这时候我们就需要给用户展示加载的画面来告诉用户app正在做什么,可能需要多少时间,以此来缓解用户的焦虑情绪,如果返回数据的过程中出现网络不稳定或者服务器异常等情况,也需要及时的告诉用户。

关于加载的分类:

同步加载:客户端在向服务端请求数据的时候,必须等待数据返回才能执行下一步操作,比如注册登录、提交订单、上传资料等需要验证信息才能确定下一步结果走向,其特点是反馈及时前后操作关联性强,但是当网络不稳定时会一直留在加载页面,导致用户烦躁。

异步加载:客户端在执行某一操作时,在等待服务端返回数据的时候可以继续执行其他操作,比如图片流,列表页,详情页等,其特点是让用户操作流程,觉得反馈很及时,但是处理的不友好容易让用户产生疑虑。

加载的几种形式:

全屏加载:多出现在内容单一的页面和H5页面,例如zara的新产品介绍页、微信的公众号文章。全屏加载的特点是数据一次性加载完成,内容加载完成之前界面都会停留在loading界面,进度条和有趣的动画设计,都会减轻用户等待时的焦虑感;加载失败后,呈现缺省页。

浅谈APP的几种加载形式

浅谈APP的几种加载形式

分步加载/分屏加载/分页加载当页面向下滑动时,先加载页面内的框架,然后根据页面上的元素类型进行先后加载,优先加载文字,图片在加载过程中先使用占位符知道加载完整,其先手顺序为 文字→图片→视频→其他资源,目的是为了减少用户的心理等待时间,提高产品体验。比如 Pinterest通过加载框架-图片的主色-图片本身的顺序,来让用户感知加载的流程,以此减少用户等待的焦虑

浅谈APP的几种加载形式

下拉加载:最早Twitter提出了下拉刷新,被众多app纷纷效仿并发扬光大,比如QQ的“细胞分裂”式刷新

浅谈APP的几种加载形式

更新加载:在当前页面,当有新内容更新时,就会在内容顶部toast提示,点击就能更新app最新内容,比如什么值得买的首页,间隔一定时间就会推送更新内容。

浅谈APP的几种加载形式

预加载:提前加载下一界面的部分流量较少的内容,让用户无需加载过程便能进入下一界面,给与流畅的体验,比如微信的微信公众号内容卡片,在公众号列表页面的时候就预加载了公众号内容的框架

浅谈APP的几种加载形式

智能加载:当检测到用户正在使用蜂窝数据时,feed流的视频默认暂停状态需要手动播放,当使用WiFi时则直接加载视频;当网络状态不好时,可以考虑加载低质量的图片,当网络良好时,则加载高质量的图片;比如即刻的视频加载机制,当手机处于wifi状态下,app会自动播放视频,而在4g状态下则需要用户手动播放;

浅谈APP的几种加载形式

浅谈APP的几种加载形式

缓存加载:用过Ins的都会发现,用起来特别流畅,很少遇到网络不好的情况,其实Ins只是将你点赞的操作缓存下来保存到了本地,等网络正常了再上传到服务器,从而完成点赞行为。

浅谈APP的几种加载形式

如何用设计有效提升加载体验

设计情感化的loading动画,比如京东送快递小哥、美团的送外卖袋鼠,从用户心理上降低用户对加载的焦虑感

浅谈APP的几种加载形式

浅谈APP的几种加载形式

适当使用预加载、智能加载的方式,比如内容类app,当用户在浏览第一个页面的时候,app就可以提前在后台加载后面的页面,等用户翻看到第二页的时候,就不需要等待加载了。



发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: