骨架屏
Skeleton
初级通用骨架屏（Skeleton）是内容加载期间显示的页面轮廓，用灰色块模拟即将出现的图片、标题或列表。它让你在等待接口返回时看出内容大致会排在哪里，减少页面突然跳出的感觉。
你可能会说：「页面等数据时别一片空白，能不能先显示和最终内容位置差不多的灰色轮廓？」
动手看看资讯列表加载
加载时显示
内容出现方式
切换加载方式，再点重播：内容会在设定的等待时间后出现。留意等待期间，列表的位置能不能提前看出来。
骨架块先占住图标、标题和摘要的位置；数据回来时，真实内容在原处填入，页面不必突然长出三行。
短暂渐显能让骨架到内容的交接更柔和，但不应该拖慢读者开始阅读。
要点骨架屏怎样帮用户等待内容？
- 1
先画结构再填真实内容
比如你做商品列表，图片和价格还没返回时，可以先显示图片方块和几条文字横条。数据到了再替换成真实卡片，用户就能预先看出页面结构。
- 2
轮廓要贴近最终布局
如果真实页面是一列文章，骨架却画成四列卡片，加载完成时内容还是会明显跳动。我们通常按实际组件的宽度、数量和间距来画，同时考虑窄屏下的布局。
- 3
加载结束要有明确去向
骨架屏只代表内容正在等待，不代表请求一定会成功。拿到数据后换成内容；请求失败就显示错误和重试入口；结果为空就显示空状态，这样用户不会一直盯着灰块。
容易混淆的地方
骨架屏和旋转加载指示器都能表示等待，但骨架屏暗示将出现什么内容，适合布局可预见的区域；旋转图标只说明操作还在进行。它也不是输入框里的占位文字：占位文字提示你填什么，骨架屏表示真实内容尚未加载。
什么时候用
适合用
- 后台仪表盘首次读取数据，图表标题、统计卡片和列表区域都有固定布局时，先显示对应轮廓。
- App 的文章详情页等待正文接口返回时，先展示封面、标题和段落的大致位置。
- 切换商品列表的筛选条件后，新结果需要等待，且卡片布局保持不变时，显示卡片骨架。
不适合用
- 点击保存后只是等待写入完成，没有即将呈现的内容结构；用按钮加载状态或进度提示更贴切。
- 搜索已经完成但没有匹配结果时，展示空状态和调整关键词的建议，而不是继续显示骨架。
- 正在等待文件上传完成，用户关心的是传了多少；用进度条展示上传进度更合适。
练一练选一个答案，看看解释
你做一个订单列表页：进入页面要请求订单，列表行的布局固定；请求可能返回订单、空列表或错误。加载期间和结束后怎么处理？
让 AI 帮你做复制给 AI Agent 直接用
请为订单列表加入骨架屏：仅在首次加载订单时显示，轮廓贴近现有列表行布局，窄屏下也保持一致。请求成功后替换为真实数据；空结果显示空状态，失败显示错误及重试入口。不要让骨架被当作真实订单。