用途:为界面动效提供系统化规范,让动画服务于引导注意力、表达因果关系、确认操作与保持连续性,而非单纯装饰。
主要能力:给出时长分级(即时0ms、微交互100-150ms、小150-250ms、中250-400ms、大400-600ms、超大600-1000ms)与规则(100ms内视为瞬时、用户触发150-300ms、系统触发200-500ms、常规流程不超1000ms、移动端约缩短30%);标准缓动库(ease-out用于入场、ease-in用于退场、ease-in-out用于状态变化、弹簧用于物理感交互),并明确UI动效禁用linear。涵盖按钮、开关、表单、通知等微交互模式,页面/视图转场(前进后退、模态、标签切换、共享元素与View Transitions API)、加载编排(骨架屏、进度指示、乐观UI),以及Norman三层情感设计与情感动效词汇。触觉部分涉及iOS Impact/Notification/Selection与Android HapticFeedbackConstants等,并强调触觉须与视觉配对、时长低于100ms、随减少动态偏好关闭。
使用方式:按主题查阅参考文件——动画时序与曲线见references/animation-timing-curves.md,情感化设计见references/emotional-design-patterns.md,触觉系统见references/haptic-feedback-design-system.md;M3 Expressive弹簧模型见mobile-ux-design相关参考。减少动态可用@media (prefers-reduced-motion: reduce)统一降级,优先以非动效替代而非全部移除。
适用场景:Web与移动端界面动效设计、设计系统动效规范、可访问性适配。
限制:具体实现细节与完整参数需查阅上述参考文件;CSS spring()尚未标准化,弹簧需借助JavaScript;部分平台与版本相关细节暂未提供。