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

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动效一定程度上也会使用户厌烦，但框架占位图可以让用户快速感知并预测内容，感知上会比菊花加载方式更快，比启动页更加顺畅，看起来无缝衔接，产生即将加载完成的错觉，降低了用户的焦躁感。