本文笔者将以淘宝数据加载为例,来分析常见的七种app加载方式。
数据加载发生在用户触发特定操作后,客户端向服务器发送请求,服务器处理并返回数据给客户端的过程。
该过程中由于网络异常、解析出错或服务器异常等问题常常会导致数据加载失败或延时。而用户是没有耐心的,这时候需要产品在前端进行一定的设计来缓解用户等待焦虑,并在加载失败时给出一定的反馈提示,防止用户由于漫长等待时间而离开。
下面将通过淘宝的加载实例,来分析一些常见的数据加载方式,体验设备:iPhone 8 v12.3。
目录
启动页
分页加载
全屏加载
占位加载
模糊加载
模态加载
补充:关于加载的一些细节设计、总结
一、启动页
启动app时需要进行初始化工作,基本所有产品都会设置启动页来缓冲用户的等待时间,提升用户体验。
通常有以下几种:
展示产品logo和slogan,宣传定位。
展示具有品牌形象和产品情怀的封面图,建立品牌认知。
更多的是两者结合,利用展示logo和slogan的时间加载广告或活动页,同时继续初始化app界面。
常用于内容可变的界面或列表,顶部刷新属于用户的主动行为,比起常见的文字提示,更多app都是采用比较有趣的设计,提高趣味性同时展示产品形象。
淘宝首页刷新使用动态悬浮圆圈样式,每次刷新除了展示商品的变化,还伴随广告展示。
同样在下拉刷新展示广告的,还有爱优腾之类的视频播放软件:
首页以外的页面刷新频次不高,采用了简单的文字刷新提示,刷新成功会有对应的 Toast 提示,给予适当的反馈:
像斗鱼、虎牙、B站等偏娱乐的app采取的则是比较有趣的动画,让用户忍不住盯着看,有效缓解用户等待过程的无聊感:
Gif效果图: