App要与服务器进行数据交换,服务器接收到请求之后向App传输相应数据。在这个过程中,由于网络原因,需要花费一定时间,这个时候就要用到loading加载。Loading需要做两件事:一是告诉用户APP在处理数据,二是要避免用户因等待而烦躁。在此对APP图片的加载样式做出总结。
1.无占位符或预设图
特点:在整个页面加载过程中,现将文本加载出来,图片在加载完成之前暂不出现,目前已渐渐舍弃;
优点:加载速度快,程序简单。
缺点:或许会丢掉重要的信息,无法建立信息获取的闭环。另外容易因为图片的突然出现,影响用户的阅读顺序,用户体验感差。
2.有占位符或预设图
特点:先加载框架,再加载框架内的数据。一般文字先加载出来,由于图片加载慢,会用占位符或者预设图片来填充。
优点:先加载文字,保证用户阅读的顺畅性。
缺点:或许会丢掉重要的信息,无法建立信息获取的闭环。
样式:目前主流有如下几种样式(欢迎补充)
2.1 无图样式
2.1.1 灰色无图样式
在图片加载完成之前,在图片的位置先显示一个灰色的占位符。
2.1.2 彩色无图样式
在图片加载完成之前,在图片的位置先显示一个彩色的占位符,具体的颜色可以按照图片的颜色读取,也可以按照某种规律设置。
2.2 有图样式
2.2.1 灰色+logo样式
在给一个默认占位符图片的基础上,加上APP的logo,起到传达品牌作用。
2.2.2 APP主色+logo样式
在图片占位符的基础上,加上APP的logo,宣传品牌。不同的是,占位符图的背景会根据APP的风格或者图片的颜色整体的排布,保证的APP风格的延续性,让用户在阅读的时候感觉很顺畅,降低用户的焦躁感。
例如:毒物APP的图片都是以黑色为主色调,那么图片占位符就用黑色+毒物的logo;聚美APP的图片都是以白色为主色调,那么占位符就用白色+聚美的logo。
2.2.3 灰色+自定义图标样式
在灰色占位符的基础上,加上icon,这个icon可以按照APP的内容确定。
例如:QQ音乐的自定义图标是一个光盘icon,腾讯新闻的自定义图标是一个链接icon。
目前主流的样式,我总结的基本就是这些,欢迎指导和补充!