什么是骨架屏（Skeleton Screen）

什么是骨架屏（Skeleton Screen）

骨架屏（Skeleton Screen）是一种加载状态的设计模式，用于在数据加载时为用户提供视觉反馈。它通过显示页面内容的占位符轮廓，让用户感知到内容即将呈现，从而减少等待焦虑感。

核心定义

骨架屏是在实际内容加载出来之前，展示的一个灰色的、与页面结构相似的占位界面。它模仿了最终内容的布局和形状，但内容是空白的，只是用颜色深浅或动画效果来表示"正在加载"。

主要作用

使用场景

骨架屏适用于以下情况：

1. 列表页面：新闻流、商品列表、社交动态等
2. 卡片式内容：用户信息卡片、商品卡片、文章卡片
3. 首屏内容：首页主内容区域、仪表盘数据展示
4. 需要快速感知页面结构的场景

实现方式

1. CSS 样式实现

<!-- 骨架屏示例 -->
<div class="skeleton-card">
  <div class="skeleton-image"></div>
  <div class="skeleton-title"></div>
  <div class="skeleton-text"></div>
  <div class="skeleton-text long"></div>
</div>

.skeleton-card {
  background: #fff;
  padding: 16px;
}

.skeleton-image {
  width: 100%;
  height: 200px;
  background: #e0e0e0;
  border-radius: 8px;
  animation: shimmer 1.5s infinite;
}

.skeleton-title {
  width: 60%;
  height: 20px;
  background: #e0e0e0;
  margin-top: 16px;
  border-radius: 4px;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background: #e0e0e0; }
  50% { background: #f5f5f5; }
  100% { background: #e0e0e0; }
}

2. 框架实现

• React：可以使用 react-skeleton 等第三方库
• Vue：有 vue-skeleton 等组件库支持
• Angular：有 ngx-skeleton-loader 等库
• 移动端：React Native 和 Flutter 都有相应的骨架屏组件

最佳实践

与 Loading 动画的区别

典型应用案例

• Facebook / Instagram：信息流加载时显示卡片骨架
• Twitter / 微博：推文加载时显示头像、文字占位符
• 淘宝 / 京东：商品列表、详情页加载
• YouTube / 视频网站：视频列表、推荐内容展示

骨架屏已成为现代 Web 和移动端应用的标配加载体验，是提升用户体验的重要细节之一。