骨架屏 Skeleton

概述

在数据完整加载之前，通过占位图形给用户展示简单的页面布局。

何时使用

1、网络较慢，需要长时间等待加载处理的情况下。

2、图文信息内容较多的列表/卡片中。

3、只在第一次加载数据的时候使用。

4、可以被 Spin 完全代替，但是在可用的场景下可以比 Spin 提供更好的视觉效果和用户体验。

何时不使用

1、当内容布局和排版不固定时， 轮廓和内容布局之间会有巨大差异，使用骨架屏不仅不能给用户顺畅和期待感，反而会造成落差。

2、当内容区域有空页面时， 不建议使用骨架屏。

3、当加载时长低于 1 秒时，不建议展示加载样式；当加载时长高于 10 秒时，建议给出用户加载失败反馈和出口。

组件构成

骨架屏一般由灰色或中性色调的3种占位图形组合构成，包括条形、圆形和方形。

1、圆形占位图： 用于表示头像、logo、圆形icon等。

2、条形占位图： 用于表示中英文或数字，存在多个尺寸。

3、方形占位图： 用于表示按钮、方形icon、图片等，尺寸不限。

基础用法

文本骨架屏

带头像骨架屏

带操作骨架屏

带图片骨架屏

带动画骨架屏

常见为微弱的渐变滑动效果，适用于通用样式的单色场景，强化页面正在加载中。

图形骨架屏

图形骨架屏分为条形、正方形、圆形三种形状。