骨架屏Skeleton

你可能会说

加载时先显示灰色的框框占位，别一直转圈。

页面加载时先出现的灰色轮廓，用来占住稍后内容的位置例如打开商品列表时，可先看到图片框和两行文字的轮廓，真实内容到达后再替换。它只表示正在加载；等待过久或加载失败时，必须改成明确的提示和重试入口。

你可以这样告诉 AI Agent

文章列表等待数据时，请显示接近真实图片和标题布局的骨架，数据到达后原位替换；请求失败时改成错误和重试，不要一直保留骨架。请确认内容出现时页面没有明显跳动。

组成结构 · Anatomy

一组占位色块，形状对齐真实布局

圆形或方块，对应媒体位

短而粗的一行

长短错落的灰条，模仿段落

常见变体 · Variants

列表项List Item

信息流、消息列表加载时占位

文章段落Paragraph

长文详情页加载，先摆出段落形状

卡片Card

图片、封面类卡片加载前占位

典型使用场景

首页首屏加载

列表加载占位

图片卡片占位

文章详情加载

快速练习

A. 先显示“还没有文章”，数据回来后再改成列表B. 显示从 0% 自动增长的进度条，不读取真实进度C. 先显示接近图片和标题形状的骨架，数据到达后替换