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
网友评论