空数据加载之 l 占位与启动页—优化易用体验

96
Meowmaid
2017.11.30 19:16* 字数 896
Skeleton Screen


一、概述

Skeleton Screen Loading(手动翻译成框架屏幕加载)
Skeleton Screen 即界面加载过渡时的占位框架图,在加载完成前,待加载区域填充浅灰色的占位图,预先呈现界面轮廓,再逐步的加载真正的内容。

二、由来

iOS把界面控件框架的轮廓做成静态图片用于Launch Screen(启动屏幕);
而在Google Material Design规范中将其作为启动页中的一种类型,称为Placeholder UI,在加载完成前呈现核心架构元素,例如状态栏和导航栏。
另外一种类型为品牌启动页(Branded launch),呈现LOGO等可提高品牌辨识度和知名度的元素,利用短暂的品牌曝光,让用户专注于内容。

启动页的作用是呈现出快速响应,避免空白界面增加启动程序的感知时间,而不是用于艺术表达。由于很快被第一个界面替代,给用户留下快速响应的印象。

Google Material Design建议尽量启动页中不要有文字,宣传品牌的标语除外;不过Apple Human Interface Guidelines并不提倡利用启动页做广告,不能设计成闪屏、“关于”入口等,杜绝加入文字、标志或其他品牌元素,除非第一屏中的静态部分也包括这些元素。


首页占位


三、作用

由于手机性能和网络状况的差异,等待加载无法避免,尽管有Progress Indicator(加载进程指示)告知用户,但重复循环的loading动效一定程度上也会使用户厌烦,但框架占位图可以让用户快速感知并预测内容,感知上会比菊花加载方式更快,比启动页更加顺畅,看起来无缝衔接,产生即将加载完成的错觉,降低了用户的焦躁感。


分类-占位


四、如何使用

1. 适用于布局、排版固定的内容区域
空页面和框架常换新的界面不适用Skeleton Screen Loading。

2. 保障占位图与待加载内容一一对应
占位图要确保与第一屏完全相同,避免加载完成后,内容位置产生偏移,造成屏幕闪烁等不佳的体验。
保障占位图适配不同屏幕大小

3. 应用于包含大量数据的关键界面
视具体界面的加载速度而定,加载无延迟的界面无需使用,建议应用于核心界面;
数据中含大量图片的界面使用效果更佳,纯文字界面无须使用。

4. 配合其他加载技术一起使用
若加载持续时间很久,单凭Skeleton Screen Loading起不到流畅过渡的效果;结合使用懒加载(先文字后图片)、逐条加载、预加载等技术以达到更出色的体验。

顶部加载条

5. 可适当添加品牌宣传元素
在占位图中融入产品应用主图、LOGO、VI等,不影响基本功能的同时,增强产品识别度,将品牌直接地传达给用户。

商品详情页占位



扩展阅读:
https://material.io/guidelines/patterns/launch-screens.html#launch-screens-branded-launch
https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/launch-screen/
https://cloud.tencent.com/community/article/332283
http://www.jianshu.com/p/d152e1d84296

设计文章
Web note ad 1