骨架屏Skeleton
灰色卡片一直闪，是内容快到了，还是加载已经失败？
骨架屏在数据尚未到达时，用接近最终布局的占位形状说明内容区域正在等待。占位只描述大致结构，不代表已有真实记录，也不加快接口本身；失败或无结果后应切换到对应状态。
先把座位排好，让人知道等来的内容放哪。客人没到不等于一定会到，更不能永远摆空椅子不解释。
上菜前摆好盘子能让你理解安排，但盘子数量不证明厨房已有同样数量的菜做好了。
类比到这里为止：占位卡数量是排版选择，不是接口返回的记录数。动画也不能证明后台持续有进展。
产品目录初次加载时展示卡片轮廓，保留图片与标题的大致位置。读取失败后移除占位并提供重试，真实零条则给出空状态。
占位有开始也要有结束
- 等待中
- 保留大致结构，另有可读的加载说明。
- 取得内容
- 用真实对象替换占位，不沿用虚构占位数量。
- 失败或无数据
- 分别显示错误或空状态，不能继续无限闪动。
减少视觉和读屏干扰
纯装饰骨架对辅助技术隐藏，内容区域可以标注忙碌状态，同时在忙碌区外说明正在读取什么。避免把每条灰线当成一条数据反复播报。
下面的课堂骨架不闪烁。它只展示位置，加载结果由明确的模拟按钮决定，不假装正在请求真实客户系统。
灰色卡片一直闪，是内容快到了，还是加载已经失败？
可以操作，也可以重试。数据为虚构示例，不连接真实业务系统。
正在准备当前演示，正文可以继续阅读。
继续看项目应用与交付检查
骨架屏 在项目中负责什么
- 什么时候用
- 首次读取内容，最终区域结构大致已知且等待可被感知时。
- 它解决什么
- 让用户理解内容布局，并减少数据到达后突兀的布局跳动。
- 它不负责什么
- 已能阅读的旧数据不一定要全部换成骨架；刷新可保留旧内容并说明正在更新。装饰轮廓不应被读成一条条真实记录。
- 放进真实项目
- 产品列表加载时显示卡片骨架，避免用户误以为页面没有内容。
骨架屏用接近最终布局的轮廓稳定等待，不假装已有数据
客户详情或课程列表加载时，可先保留标题、行和卡片位置，避免内容出现后整页跳动。
- 01
依据最终组件画简化轮廓。
- 02
已加载区域不要反复变回骨架。
- 03
超过合理时间后转为可解释状态。
骨架占位置，不占事实；等待结束就换真实状态。
容易混淆的地方
骨架屏是加载状态的一种外观；不是空状态，不是图片懒加载机制，也不是性能已经变快的证据。
首次读取产品失败，页面还在反复闪动六张灰色卡片。怎样恢复才准确？
你可以这样告诉 AI Agent
我在处理这件事：产品列表加载时显示卡片骨架，避免用户误以为页面没有内容。请以“骨架屏”为主线，先说明它在这里负责什么、不负责什么；再列出必要输入、建议动作和可验证结果。用外贸独立站的业务语言回答，不确定的信息标为待确认。
内容依据与延伸
本站用原创中文解释把专业概念映射到外贸独立站；定义和机制继续以官方资料为准，业务例子再回到 外贸独立站询盘优化实战 验证。
本站整理说明：原创整理：Web 开发、产品设计、AI 协作与外贸独立站实践