快好知 kuaihz

淘宝实例分析:常见的七种app加载样式设计

本文笔者将以淘宝数据加载为例,来分析常见的七种app加载方式。

数据加载发生在用户触发特定操作后,客户端向服务器发送请求,服务器处理并返回数据给客户端的过程。

该过程中由于网络异常、解析出错或服务器异常等问题常常会导致数据加载失败或延时。而用户是没有耐心的,这时候需要产品在前端进行一定的设计来缓解用户等待焦虑,并在加载失败时给出一定的反馈提示,防止用户由于漫长等待时间而离开。

下面将通过淘宝的加载实例,来分析一些常见的数据加载方式,体验设备:iPhone 8 v12.3。

目录

启动页

下拉刷新加载

分页加载

全屏加载

占位加载

模糊加载

模态加载

补充:关于加载的一些细节设计、总结

一、启动页

启动app时需要进行初始化工作,基本所有产品都会设置启动页来缓冲用户的等待时间,提升用户体验。

通常有以下几种:

展示产品logo和slogan,宣传定位。

展示具有品牌形象和产品情怀的封面图,建立品牌认知。

更多的是两者结合,利用展示logo和slogan的时间加载广告或活动页,同时继续初始化app界面。

二、下拉刷新加载

常用于内容可变的界面或列表,顶部刷新属于用户的主动行为,比起常见的文字提示,更多app都是采用比较有趣的设计,提高趣味性同时展示产品形象。

淘宝首页刷新使用动态悬浮圆圈样式,每次刷新除了展示商品的变化,还伴随广告展示。

同样在下拉刷新展示广告的,还有爱优腾之类的视频播放软件:

首页以外的页面刷新频次不高,采用了简单的文字刷新提示,刷新成功会有对应的 Toast 提示,给予适当的反馈:

像斗鱼、虎牙、B站等偏娱乐的app采取的则是比较有趣的动画,让用户忍不住盯着看,有效缓解用户等待过程的无聊感:

Gif效果图:

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:实例分析  实例分析词条  淘宝  淘宝词条  样式  样式词条  加载  加载词条  常见  常见词条  
设计

 眼动研究介绍:应用价值与问题

随着用户体验的兴起与技术设备的进步,眼动研究已经越来越为人熟知,国内更多的研究咨询机构或企业自身开始配备了眼动仪。但对于眼动技术与研究方法,许多朋友们仍然是雾里...(展开)

设计

 走近移动设计——硬件设备篇

从磐石一般的台式机,到可移动的笔记本,再到手机,一个能永远携带的硬件设备,开启了一个属于个人的新媒体时代。生为无线领域的设计师,需要对手机各方面有清晰的认知和理...(展开)

设计

 创建定性用户画像

在产品研发过程中,确定明确的目标用户至关重要。不同类型的用户往往有不同甚至相冲突的需求,我们不可能做出一个满足所有用户的产品。为了让团队成员在研发过程中能够抛开...(展开)