车载仪表盘动效设计 · 课程目录

01仪表盘设计概述

发展历程 · HMI原则 · 动效价值

02设计工具与工作流

Figma/Sketch · 组件库 · 交付标准

03动效基础理论

动画12原则 · 帧率 · 贝塞尔曲线

04动效设计工具

AE · Lottie/Bodymovin · 导出格式

05仪表盘布局设计

信息层级 · 视觉重心 · 安全区域

06指针动效设计

旋转动画 · 阻尼 · 回弹 · 联动

07数字仪表动效

数字滚动 · 翻页 · 渐变 · 字体优化

08指示灯动效

状态切换 · 呼吸灯 · 脉冲 · 颜色过渡

09进度条与环形图

环形填充 · 缓动 · 分段 · 数据驱动

10地图与导航动效

地图缩放 · 路径动画 · 3D旋转

11告警与异常动效

紧急告警 · 红色闪烁 · 声音同步

12多屏联动动效

中控与仪表联动 · 信息流转 · 同步

13性能优化基础

GPU渲染 · 图层合并 · 硬件加速

14代码实现基础

Canvas/SVG · CSS/JS动画 · rAF

15WebGL与Three.js

3D仪表盘 · 光照材质 · 模型导入

16动效状态管理

状态机 · 触发条件 · 中断恢复

17数据绑定与动效

实时数据 · 平滑处理 · 插值算法

18用户交互动效

触摸反馈 · 手势 · 涟漪 · 滑动

19动效测试方法

帧率检测 · 内存泄漏 · A/B测试

20无障碍设计

色盲友好 · 动效关闭 · 对比度

21设计系统与动效

动效Token · 设计语言 · 组件化

22动效落地流程

设计评审 · 开发对接 · 验收标准

23案例实战1：经典双圆

速度+转速 · 完整动效实现

24案例实战2：全液晶仪表

数字+地图+告警 · 综合动效

25案例实战3：运动模式

红色主题 · 激进动效

26案例实战4：经济模式

蓝色主题 · 柔和动效

27动效趋势与创新

3D全息 · AR-HUD · AI生成

28项目复盘与总结

常见坑点 · 最佳实践 · 团队协作

29动效作品集制作

作品集结构 · 演示视频 · 面试

30综合大作业

完整仪表盘动效系统 · 5+动效类型