米哈游抽奖系统
米哈游内部专用的年会及内推活动抽奖系统。通过标准化 UI 组件与 AE 动画模板的「换肤」机制,将抽奖动画的制作周期从 2-3 周缩短至 1 周。
关键词
企业内部活动 / 动画设计 / 换肤机制
工作内容
UI/UX 设计师 | 设计抽奖动画的换肤框架,制定 UI 组件规范与 AE 模板交付流程
项目年份
2024 - 2025
米哈游内部专用的年会及内推活动抽奖系统。通过标准化 UI 组件与 AE 动画模板的「换肤」机制,将抽奖动画的制作周期从 2-3 周缩短至 1 周。
关键词
企业内部活动 / 动画设计 / 换肤机制
工作内容
UI/UX 设计师 | 设计抽奖动画的换肤框架,制定 UI 组件规范与 AE 模板交付流程
项目年份
2024 - 2025
🤔 我的思考
每次年会、内推等活动的抽奖动画都需从零开始——从 UI 到动画再到研发联调,整个流程至少需要 2-3 周。不同活动的交互逻辑高度相似,差异仅在视觉主题,存在巨大的提效空间。
💡 换肤思路
既然不同活动的抽奖动画骨架结构一致,差异仅在「皮肤」,我借鉴游戏角色换装思路,将系统拆解为两层:固定的「骨架」层(组件 + 交互动画) 和 可替换的「皮肤」层(视觉主题)。新活动只需更换皮肤,无需重建骨架。
Step 1 :标准化 UI 组件
将 Button、Dropdown 等 UI 元素设计为标准化组件,预留可替换的背景图层。设计师只需在 Figma 中复制母组件并替换背景即可。

Step 2 :AE 动画模板化
将 AE 工程封装为2 套标准动画模板,设计师只需替换相同尺寸的视觉素材即直接导出新的抽奖动画,无需从零开始制作 AE 动画。
Step 3 :标准化交付流程
打包交付2 套 AE 动画模板 + 1 套 UI 组件模板,研发流程精简为两步:
· UI 层:Figma 复制母组件 → 替换背景 → 导出
· 动画层:AE 模板渲染导出 2 段 APNG 序列帧 + 1 张 PNG 静态图 + 时间配置

对接过程从多轮沟通简化为一次交付。
🎞️ 为什么选择 APNG
主流浏览器通杀:Chrome、Safari、Firefox 和 Edge 早已实现原生支持,无需任何 JavaScript 库或第三方插件即可播放。
移动端与小程序友好:在 iOS 和 Android 系统中,通过简单的第三方库或原生组件即可流畅调用。特别是在微信小程序等内存敏感的环境下,它比集成 Lottie 或 SVGA 引擎更轻量,不会增加包体积负担。
优雅降级:APNG 的第一帧是标准 PNG。在极少数不支持动效的环境下,它会显示为一张清晰的静态图,保证了基础的用户体验。
🏁 最终成果 🏁
🧑🎨 设计提效
通过「换肤」机制,设计周期从 2-3 周缩短至 1 周,效率提升超 60%
🚀 开发提效
规范交付标准,减少开发沟通成本 & 走查成本,开发工时从 1 周缩短至 2 天
其他项目