骨架屏适合在首次加载时提示内容的大致结构。标题、导航和可用操作应先显示，数据区域按真实布局占位，哪个模块先返回就先展示哪个。刷新已有内容时通常保留旧数据并标明更新状态；加载失败后结束骨架屏，在出错区域给出重试入口。
下面以一个虚构采购概览为例，把待审批卡片、最近采购表格和月度趋势分开处理。可以先把分区加载顺序连成原型演示，检查同一页面从没有数据到部分完成，再到局部失败时，用户还能看什么、做什么。
先把采购概览拆成独立返回的三个区域
这个概览使用同一采购组织与日期范围，但三个区域分别请求数据。待审批卡片统计范围内全部待审批单据；表格只展示最近 3 笔采购，不是待审批总数的明细。月度趋势展示 7 月至 9 月的采购金额。三者口径在标题或说明里写清，避免用户把表格行数当成卡片数量。
| 区域 | 首次加载时保留什么 | 占位形状 | 本例成功内容 |
|---|---|---|---|
| 待审批卡片 | 标题“待审批单据”、查看入口 | 数字位置的短矩形 | 12 笔 |
| 最近采购 | 标题、采购单号/供应商/金额三列列头 | 与三行表格高度一致的文本占位 | PO-201、PO-202、PO-203 三行 |
| 月度采购金额 | 标题与统计范围“7—9月” | 图表绘图区，不画假折线或假坐标值 | 7 月 2.6 万元、8 月 3.1 万元、9 月 2.8 万元 |
本例表格数据固定为：PO-201，示例供应商甲，800.00 元；PO-202，示例供应商乙，1,200.00 元；PO-203，示例供应商丙，600.00 元。这三个金额只用于展示最近采购记录，不用于推导月度采购总额。所有公司名、编号和数据均为教学示例。
占位行数是布局选择，不是提前知道了记录总数。真实返回只有一行时，就显示那一行；返回空列表时则切换成明确的空状态。骨架块也不要写“0 笔”或“0.00 元”，因为零会被理解成真实业务数据。
Carbon 的加载模式建议将骨架用于初始加载的数据与容器类内容，并按模块逐步展示，而不是给所有元素都加占位。落到这个页面，创建采购按钮如果不依赖这些查询，应从一开始就可用；若某个操作确实依赖数据，则只说明并限制该操作。
首屏按返回顺序填充，不等待全页同时完成
本例不设“必须展示骨架屏多少毫秒”的门槛。用响应事件定义状态，比为所有网络情况指定一个动画时长更可靠。初始先显示页面标题“采购概览”、组织和日期筛选，以及三个区域的结构；随后按照下面的次序演示。
| 事件 | 已经可读的区域 | 仍在等待的区域 | 用户看到的反馈 |
|---|---|---|---|
| 进入页面，三个请求已发出 | 页面框架与固定文字 | 卡片、表格、趋势 | 各数据区显示对应骨架 |
| 待审批数量返回 | 卡片显示 12 笔 | 表格、趋势 | 仅替换卡片占位 |
| 最近采购返回 | 卡片和三行采购记录 | 趋势 | 表格可阅读，趋势继续等待 |
| 趋势请求明确失败 | 卡片和三行采购记录 | 无区域继续等待 | 趋势区结束骨架，显示“月度趋势未加载，重试” |
局部失败时，整个页面不应继续标成“加载中”，也不应把已经返回的卡片和表格清空。点趋势区域的重试，只重新请求趋势数据；如后端确实只能重新获取整组数据，也应在界面约定中说明，不能给读者一种“只重试一块”的假象。
骨架的宽度和高度尽量接近最终内容，尤其保留表头、卡片边界和图表区域的高度。长供应商名称出现时仍需正常换行或按既定规则截断，不能为保住占位形状而隐藏业务信息。Ant Design 的 Skeleton 组件说明可用来理解占位形态，但实际行高和布局应由自己的内容决定。
再次刷新时，保留旧内容并标出它的时间
首屏没有数据，骨架能告诉用户这里将出现什么；刷新时已经有内容，再把整页替换成灰块，会让用户暂时失去可用信息。本例在已有数据时保留原卡片、表格和折线，在各区域显示轻量的“正在更新”，完成后再替换对应区域。
例如月度趋势在 09:40 成功展示了 2.6、3.1、2.8 万元三个值，用户在 09:42 刷新。刷新失败后仍保留这组值，但标注“更新失败，显示 09:40 的数据”，旁边提供重试。时间是本例的展示时间，不代表两分钟是某种加载阈值。
这里保留旧内容有一个条件：组织、日期范围和查询口径没有变化。如果用户从 A 组织切到 B 组织，不能继续把 A 组织的金额留在 B 的标题下。可以让新查询区域进入加载态，或者明确区分上一查询结果；必须避免旧数据被当成当前筛选结果。
不同区域各自刷新时，也要避免看似属于同一时刻却口径不同。如果用户需要一份同步的总览快照，应由数据接口提供一致的快照口径，界面再显示对应时间。骨架屏和动画无法解决数据一致性问题。
在评审中检查“结束等待”是否真的完成
在墨刀里建立初始加载、卡片返回、表格返回、趋势失败、趋势重试成功五个状态，再补“已有趋势刷新失败”状态。用同一套组件布局保持位置一致，交互连线展示事件顺序；不把播放中的占位动画当成真实网络响应。
走查时重点看三个结果：请求成功后占位是否完全移除，空结果是否明确显示“暂无采购记录”，失败是否停止动画并提供可用的下一步。空列表与请求失败必须分开，不能统一写“暂无数据”。完整状态关系可参照后台加载、空白与异常状态设计。
还应把读屏和动态效果要求写进交付说明：占位块不作为真实内容反复朗读，区域的忙碌状态随请求结束而更新，错误消息能够被获知；用户减少动态效果时，应采用静态或弱化动画的占位。不要让“闪得更明显”成为等待反馈的唯一手段。需要整理更多组件的反馈方式，可继续阅读UI 与界面设计专题。
