2.1 KiB
2.1 KiB
动画设计
动画能够有效强化界面层级感和空间方位感。本文档将阐述添加动画时应遵循的设计原则。
核心原则
起始原点
- 动画可锚定界面元素，例如菜单可从触发按钮位置缩放展开
- 动画可构建空间感知，例如侧边栏从屏幕边缘滑入，暗示其始终隐藏于屏幕之外
- 设计动画时需遵循真实物理规律。想象界面元素由实体材料构成——当它们不在屏幕上时位于何处？用动画来呈现这种空间关系
响应速度
- 动画绝不应阻碍用户交互，必须保持快速响应，通常在0.2秒内完成
- 用户无需等待动画完成即可进行交互操作
- 确保动画性能优化。优先使用CSS
transform属性，通过GPU渲染实现流畅效果 - 若无法实现快速高性能的动画效果，宁可不使用动画
简洁克制
- 非弹性材料不做弹跳动画
- 避免旋转、折叠或曲线路径动画，保持简洁直观
统一规范
建立统一的动画物理规则，使所有元素的动效保持协调一致、符合预期。动画应当匹配用户心理预期，否则可能不适配当前场景。
若已有现成动画效果，请直接复用。
无障碍考量
- 动画需保持克制，注意可能引发前庭功能障碍用户不适的情况（详见运动触发前庭障碍研究）
- 避免对正在向辅助技术报告内容的区域（如正在接收更新的
aria-live区域）添加动画，这可能导致技术解析动态变化区域时产生混乱 - 杜绝非用户直接触发的动画
- 确保动画遵循操作系统层级的"减弱动态效果"设置，可通过
prefers-reduced-motion媒体查询实现。Gutenberg提供@reduce-motion混合宏，需与含CSSanimate属性的规则配合使用
复用动画库
通用Animate组件用于驱动界面各区域的动画效果。具体可用动画请参阅组件文档。