骨架屏怎么设计？结构占位、加载过渡与异常切换

骨架屏的目标是让用户预先读懂页面结构，而不是把等待时间装饰成灰色方块。可以先按真实内容拆出占位块，再定义超时后的重试或空状态，最后用一条可回到内容的路径收尾。做页面结构时，在线界面设计协作能把骨架、真实内容和异常状态放在同一份稿里评审。

先按真实内容确定占位结构

列表中的标题、摘要、头像和操作按钮，加载后仍会占据同样的位置。骨架块应沿用这些尺寸和间距；如果真实卡片有两行摘要，骨架只画一行，回填时就会产生明显跳动。详情页则应优先保留标题、主图和首个操作区的轮廓，让用户知道内容正在何处出现。

把加载、慢加载和失败分开

首次请求可以展示骨架，但已经有旧内容时不应整页清空。超过预期时间后，保留可见内容并在对应区域给出“仍在加载”的说明；确定失败时再切换到重试、空状态或联系支持。状态变化最好就地发生，避免用户被突然跳回顶部。

对列表而言，部分数据成功比整页失败更常见。已返回的卡片可以先显示，失败卡片保留原位置并提供单项重试。这样既不会把成功结果隐藏，也不会把一次网络波动误写成“没有数据”。

窄屏和读屏也要有答案

窄屏下不要简单缩小骨架块。标题行可能从两行变成三行，操作区也可能下移；应让占位结构和真实断点使用同一套布局约束。读屏用户不需要听到每个装饰性方块，可以给容器一个“内容加载中”的状态，并在完成或失败时更新状态文本。

在原型中走完一条完整路径

在画布里准备“首次进入—内容回填—超时—重试成功—无结果”五个画板，使用相同的卡片数量和尺寸。连接超时与重试按钮，检查用户是否能看出哪个区域仍未完成。再用窄屏画板验证底部操作是否被骨架块挤出视口。

• 占位块是否对应真实内容，而不是替代真实信息？
• 超时、失败和空结果是否有不同的文案与动作？
• 部分成功时，已返回内容和失败区域能否分别处理？
• 骨架结束后，焦点和滚动位置是否保持可理解？

完成这些检查后，骨架屏才是在等待期间帮助用户建立预期，而不是制造页面闪烁。

从请求到结果的四个节点

把骨架屏放进真实流程时，可以按“请求发出、局部返回、超时、确定失败”四个节点检查。请求发出时只替换真正需要等待的区域；局部返回时立即回填已知内容；超时保留上下文并给出轻量提示；确定失败才切换为重试或空状态。每个节点都要有明确的触发条件，不能用固定秒数替代服务状态。

例如订单列表先返回标题和筛选条件，卡片接口稍后返回。标题可以保持可操作，卡片区域显示骨架；如果只有第二页失败，第一页不应重新闪烁。设计稿中用相同的筛选条件贯穿五个画板，评审才能看到等待发生在哪个范围。

文案也属于加载反馈

骨架块本身无法告诉用户还要等待多久。页面级可以使用“正在加载内容”，局部区域用“正在获取成员列表”，超时则写“加载时间较长，可重试”。不要写“马上完成”这类无法验证的承诺。空状态要说明是没有数据，还是筛选后没有匹配结果。

上线前检查

• 真实标题变长时，骨架和回填是否仍保持相同的列宽？
• 接口只返回部分数据时，成功卡片和失败区域能否分别操作？
• 超时重试是否会保留筛选条件、滚动位置和焦点？
• 读屏用户能否收到加载完成或失败的状态更新？

产品与接口边界

骨架屏只负责表现等待和结果，不应替服务端决定有没有数据。设计稿可以标注接口返回“成功但为空”“部分成功”和“失败”三种结果，开发据此接入真实状态。若数据来自多个请求，分别标注加载范围；例如左侧导航已成功，主列表仍在加载，就不要让导航跟着整页变灰。

在首屏优先加载的场景，骨架应尽量接近最终内容的视觉密度，但也要给真正的文本留出可变宽度。标题从一行变两行时，卡片高度可以自然增长；不要用固定高度把下方按钮遮住。对于图片，保留比例框比画一个具体的图片轮廓更稳妥。

长时间等待时，轻提示可以放在区域标题旁，避免用弹窗打断阅读。重试后如果仍失败，提示应保留上一次失败原因和新的动作结果，便于支持人员复现。所有状态都应能在无动画环境下理解。

标注给开发的关键细节

在标注中写明骨架与真实内容的对应关系、最小展示时长是否存在、超时由哪一层判断以及重试按钮会重新请求什么。若使用渐变动画，说明在减少动效设置下的静态替代。图片占位应保留宽高比，避免真实图片返回后把文字推移。

一个可复用的骨架组件可以支持列表、卡片和详情三种密度，但不要因为复用而让所有页面出现相同的灰块。组件参数应能控制标题行数、图片比例和操作区是否存在；内容页还需要预留广告、相关推荐或免责声明的真实位置。

测试时分别模拟快速返回、慢速返回、空数组、权限拒绝和断网。把截图与状态名一起交付，方便开发和测试人员对照，而不是只给一张“加载中”图片。

内容变化时的稳定性

当列表从两列变成一列、标题从短句变成长句时，骨架仍应遵循同一栅格。可以在设计稿中准备短标题、长标题和没有图片三种数据，检查文字换行、按钮位置和卡片高度。骨架的稳定性不是让所有内容等高，而是让变化有规律。

如果加载失败后允许继续浏览旧数据，要在旧数据旁标明更新时间，避免用户把过期内容误当成新结果。重新加载成功后再移除提示。涉及权限的数据不要用缓存骨架遮盖无权访问的结果，服务端确认后显示权限说明。

最终验收将视觉、文案和状态放在同一张检查表：区域形状是否对应真实内容，状态文案是否说明下一步，焦点与滚动是否保持，动画关闭时是否仍可理解。

回归测试怎么留证

为每个加载结果保存状态截图和对应数据条件：正常返回、空结果、部分成功、超时和权限拒绝。截图只证明视觉位置，测试记录还应写明焦点、滚动和重试后的请求结果。这样改版后可以快速判断是样式变化还是状态逻辑退化。