设计加载/错误/空状态与微交互时，用反馈模式…

在需要设计加载态、错误处理、空状态、动画节奏或触摸/键盘交互时，提供一套可直接落地的交互设计模式与无障碍做法。

适用场景

解决思路

1. 按模式选择动效时长：微交互（按钮按下、开关切换）100-200ms；过渡（页面切换、模态框）200-400ms；入场（列表项出现）300-500ms。
2. 加载态使用骨架屏 CSS：.skeleton 设置 background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)、background-size: 200% 100%、animation: shimmer 1.5s infinite；@keyframes shimmer 从 background-position: 200% 0 过渡到 -200% 0。
3. 封装 LoadingState({ isLoading, children }) 组件：isLoading 为 true 时渲染 <div className="skeleton" style={{ height: 200 }} />，否则直接返回 children。
4. 错误态用 ErrorState({ error, onRetry }) 组件：容器加 role="alert"，展示 warning 图标、标题、error.message，以及点击触发 onRetry 的 “Try Again” 按钮。
5. 空状态用 EmptyState({ title, description, action }) 组件：展示 empty-inbox 插图、标题、描述，若传入 action 则渲染点击执行 action.onClick、文案为 action.label 的按钮。
6. 无障碍播报：用 StatusAnnouncer({ message }) 组件，通过 aria-live="polite"、aria-atomic="true" 和 sr-only 类把状态变化告知屏幕阅读器。
7. 检测用户的减少动效偏好：window.matchMedia('(prefers-reduced-motion: reduce)').matches，并据此调整动画。
8. 动画时长保持在 500ms 以内，更长会显得迟钝。
9. 进入动画用 ease-out，退出动画用 ease-in。
10. 尊重 prefers-reduced-motion 设置。
11. 确保焦点指示器始终可见。
12. 用键盘导航进行测试。
13. 为所有操作提供即时反馈。
14. 等待时间超过 0.5s 时显示加载状态。
15. 错误信息要清晰，并附带恢复选项。
16. 设计有意义的空状态。
17. 支持键盘导航。

适用边界 · 注意事项

• 纯后端或无界面交互的场景，这些模式与动效规范不适用。
• 已有成熟设计系统/组件库时，不必重复造这些状态组件，优先沿用既有规范。