骨架屏状态系统 是做什么的？
目的
骨架屏状态系统提供了一种设计界面“加载中”状态的方法论。与通用的加载转圈或进度条不同，骨架屏使用“骨骼”（低保真形状）来近似最终布局，这能减少用户感知的等待时间，并通过在内容到达之前预留必要的空间来防止累积布局偏移 (CLS)。
使用场景
- 数据密集型仪表盘： 多个小部件以不同速度加载的场景。
- 内容信息流： 滚动浏览文章、产品或社交帖子列表。
- 图片密集型网格： 为高分辨率图片预留空间，防止页面“跳动”。
- 搜索与筛选视图： 提供系统正在处理查询的即时反馈。
- 单页应用 (SPA)： 管理异步获取数据时路由之间的过渡。
不适用的场景
- 即时交互： 如果内容在 300ms 内加载完成，骨架屏可能会引起令人分心的“闪烁”。
- 简单、低上下文加载： 对于单个按钮或小标签之类的小元素，标准的加载转圈或“加载中...”文字更为合适。
- 静态内容： 硬编码或缓存并能立即渲染的内容。
- 高速实时数据： 如果数据变化太快，导致骨架屏不断出现和消失，可能会引起视觉疲劳。
输入
- 目标布局： 组件或页面的最终“完全加载”设计。
- 内容变量： 用户界面的哪些部分是动态的（文本、图片、价格、头像）？
- 空间维度： 最终元素的确切高度、宽度和宽高比。
- 品牌基调： 用于“骨骼”基底和闪烁效果的主色和次要色。
输出
- 骨架蓝图： 展示骨骼排列方式的低保真地图。
- 骨骼规范： 形状（圆形 vs. 矩形）和尺寸（固定 vs. 百分比）的定义。
- 过渡策略： 骨架淡出和内容淡入的规则。
- 无障碍要求： 关于
aria-busy和aria-hidden实施的指导。
工作流程
1. 映射“目标”几何形状
将最终组件分解为基本的几何基元：
- 圆形： 用于头像、图标或圆角按钮。
- 矩形（圆角）： 用于卡片、图片容器和文本块。
- 线条： 用于单行文本（标题、元数据）。
2. 定义骨骼层次
并非每个元素都需要骨骼。关注结构性的“锚点”：
- 一级骨骼： 最大的视觉元素（例如，产品图片）。
- 二级骨骼： 标题和主要的元数据。
- 三级骨骼： 小的元细节或操作按钮（如果太小，通常可以省略）。
3. 建立空间匹配（CLS 规则）
确保骨架屏的尺寸与最终内容的容器完全匹配：
- 宽高比： 为骨骼使用固定的宽高比（例如，视频用 16:9），这样在资源加载时其尺寸不会改变。
- 文本尺寸： 使用与所代表文本的行高和近似宽度相匹配的骨骼。
4. 设计节奏与闪烁效果
骨架屏应感觉“生动”但不令人分心：
- 基底颜色： 使用低对比度的中性颜色（例如，浅灰色）。
- 闪烁效果（脉冲）： 应用从右向左移动（应为从左到右，原文如此）的柔和渐变动画。
- 同步： 如果屏幕上同时有多个骨架屏，确保它们的动画同步，以防止视觉混乱。
- 减少动效： 将闪烁关键帧动画包裹在
@media (prefers-reduced-motion: reduce)查询中，当用户偏好减少动效时禁用移动，并回退到静态或缓慢透明度脉冲的骨骼。
5. 定义“交接”过渡
规划骨架屏的退出：
- 时机： 对真实内容使用短的淡入效果（例如，200ms），以防止生硬的“快照”过渡。
- 交错： 对于列表，决定是让所有项目一次性出现，还是随着加载逐个出现。
决策规则
- 300ms 规则： 仅当预计加载时间超过 300ms 时才显示骨架屏。
- 骨骼精度： 骨骼应代表容器，而非特定的数据。例如，文本骨骼应是一个简单的条形，而不是模仿特定字母的锯齿线。
- 行数模拟： 对于多行文本，使用 2 或 3 个宽度变化的骨骼（例如，最后一行宽度为 60%）来模拟自然段落流。
- 加载转圈 vs. 骨架屏：
- 对于页面级别或章节级别的过渡，使用骨架屏。
- 对于小的局部操作（如“保存中...”按钮状态），使用加载转圈。
约束条件
- 无障碍性： 骨架屏必须标记
aria-hidden="true"，以便屏幕阅读器不会尝试“读取”空条形。父容器在加载时应使用aria-busy="true"，并且最好持有一个视觉上隐藏的aria-live="polite"区域，用于播报“加载中”，然后在内容替换骨架屏后播报完成状态——不要在骨骼本身使用aria-live。对于闪烁效果，请遵循prefers-reduced-motion。 - 对比度： 骨架屏颜色必须与背景区分开，但对比度不能高到看起来像活动内容。
- 响应式： 骨架骨骼必须使用与最终内容相同的网格/弹性布局逻辑进行缩放。
常见失败模式
- “CLS 跳跃”： 200px 高的骨架屏被 300px 高的内容替换，导致页面“跳跃”。
- 闪烁过度： 动画过快或对比度过高，引起晕动症或注意力分散。
- 内容与骨骼不匹配： 为方形图片使用圆形骨骼，反之亦然。
- 过度复杂： 试图为每个小图标都创建骨骼，导致布局混乱的“幽灵”布局。
- “静态骨架屏”： 没有动画的骨架屏，可能被误认为是损坏或空白的页面。
验证标准
- 骨架屏尺寸与最终“加载完成”状态完全匹配（零 CLS）。
- 图片/视频的宽高比使用固定容器保留。
- 闪烁动画柔和且从左到右移动。
- 文本密集区域使用模拟自然行长度的骨骼。
- 对骨架元素应用
aria-hidden="true"，加载容器使用aria-busy="true"。 - 闪烁动画遵循
prefers-reduced-motion: reduce。 - 从骨架屏到内容的过渡是平滑的淡入（约 200ms）。
- 对于低于 300ms 的加载，不显示骨架屏。