### **什么是骨架屏？**
骨架屏（Skeleton Screen）是一种 **加载占位符技术**，在页面或数据还在加载时，先显示页面的基本结构和轮廓，用户能提前了解页面布局，给用户一种「内容正在加载」的感觉，而不是空白页面。
**核心作用**：减少用户等待时的焦虑感，提升感知性能，让加载过程更流畅自然。
### **为什么需要骨架屏？**
#### 1. **提升用户体验**
- 传统方式：加载时显示空白或转圈，用户不知道要等多久
- 骨架屏：显示页面结构，用户心理有数，知道内容「正在路上」
#### 2. **降低跳出率**
- 用户看到骨架屏知道页面在加载，不会立刻关掉页面
- 心理学角度：人会倾向于等待已承诺的内容（骨架屏就是承诺）
#### 3. **业界最佳实践**
- 主流产品都在用：Facebook、YouTube、LinkedIn、Medium 等
- Material Design 和 iOS HIG 都推荐这种加载方式
### **骨架屏的应用场景**
#### **场景 1：图片列表页面**
电商、图片社交平台等内容密集型页面，图片加载慢时，用骨架块占位：
```html
```
#### **场景 2：个人信息卡片**
用户资料页面，姓名、头像、简介等信息模块分别占位：
```html
```
#### **场景 3：文字内容页**
文章、新闻页面，标题和段落分别加载：
```html
```
### **如何在网页中实现骨架屏？**
#### **方法 1：CSS + 简单动画（推荐新手）**
用 `animate-pulse` 制作闪烁效果，配合灰色背景模拟加载状态：
```css
.skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}
@keyframes loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
```
#### **方法 2：Tailwind CSS 的 animate-pulse（最简单）**
Tailwind 内置了脉冲动画，直接添加类名即可：
```html
```
**完整例子：带骨架屏的图片卡片**
```html
```
#### **方法 3：React/Vue 组件化（进阶）**
用 JavaScript 控制显示状态，数据加载前显示骨架屏，加载完成后隐藏：
```javascript
// React 示例
function UserCard({ user, loading }) {
if (loading) {
return (
);
}
return (
{user.name}
);
}
```
### **骨架屏的设计原则**
#### **1. 尺寸要匹配真实内容**
骨架屏的占位块大小应尽量接近真实内容（避免加载完成后跳动）
#### **2. 颜色选择有讲究**
- 背景色：用灰色系（`#f0f0f0`），不能是纯白（对比太强）
- 动画色：稍深的灰色（`#e0e0e0`），营造层次感
#### **3. 动画速度要合适**
- 太快：用户看不清，像在闪烁
- 太慢：用户着急，感觉卡顿
- **推荐**：1-2 秒的循环动画
#### **4. 形状要符合内容**
- 图片：圆角矩形
- 头像：圆形
- 文字：细长矩形（长度多样化模拟真实文字）
### **骨架屏 vs 传统加载方式对比**
| 方式 | 表现 | 用户体验 |
|------------|----------------------------------------|-------------------|
| 空白页面 | 一片空白，什么都没有 | ❌ 焦虑，不知道要等多久 |
| Spinner | 转圈圈，只有进度指示 | ⚠️ 知道在加载，但不知道内容结构 |
| 骨架屏 | 显示页面轮廓，内容占位 | ✅ 知道要加载什么，心理有数 |
### **一个结合 Unsplash 图片和骨架屏的完整例子**
```html
```
**效果**：页面先显示灰色占位块（骨架屏），2秒后显示真实的 Unsplash 书籍图片和文字内容，让用户清楚知道页面在加载什么内容。