用途:在界面设计中提供反馈与交互模式,帮助打造直观、可访问的用户体验,适合处理加载状态、错误与空状态等场景。
主要能力:涵盖微交互、转场与入场动画的时长模式(微交互100-200ms、转场200-400ms、入场300-500ms);提供加载状态(骨架屏 shimmer 动画与 LoadingState 组件)、错误状态(ErrorState,含 role="alert" 与重试按钮)、空状态(EmptyState)示例;包含无障碍实践,如用 aria-live 向屏幕阅读器播报状态变化、检测 prefers-reduced-motion、保持焦点指示可见并支持键盘导航。
使用方式:资料以代码示例形式给出可直接参考的实现片段,例如骨架屏 CSS 与 React 组件写法,页面或组件可按需嵌入。
适用场景:列表加载、页面切换、模态框、表单错误提示、空数据页面,以及需要无障碍支持的交互设计。
限制:动画应控制在500ms以内,进入用 ease-out、退出用 ease-in,并遵循 prefers-reduced-motion;等待超过0.5s 应显示加载状态,错误需给出明确信息与恢复选项。原资料未提供安装命令、收费信息或平台细节。