米哈游抽奖系统

米哈游内部专用的年会及内推活动抽奖系统。通过标准化 UI 组件与 AE 动画模板的「换肤」机制,将抽奖动画的制作周期从 2-3 周缩短至 1 周。

关键词

企业内部活动 / 动画设计 / 换肤机制

工作内容

UI/UX 设计师 | 设计抽奖动画的换肤框架,制定 UI 组件规范与 AE 模板交付流程

项目年份

2024 - 2025

🤔 我的思考

每次年会、内推等活动的抽奖动画都需从零开始——从 UI 到动画再到研发联调,整个流程至少需要 2-3 周。不同活动的交互逻辑高度相似,差异仅在视觉主题,存在巨大的提效空间。

💡 换肤思路

既然不同活动的抽奖动画骨架结构一致,差异仅在「皮肤」,我借鉴游戏角色换装思路,将系统拆解为两层:固定的「骨架」层(组件 + 交互动画)可替换的「皮肤」层(视觉主题)。新活动只需更换皮肤,无需重建骨架。

Step 1 :标准化 UI 组件

将 Button、Dropdown 等 UI 元素设计为标准化组件,预留可替换的背景图层。设计师只需在 Figma 中复制母组件并替换背景即可

标准化 UI 组件设计稿

Step 2 :AE 动画模板化

将 AE 工程封装为2 套标准动画模板,设计师只需替换相同尺寸的视觉素材即直接导出新的抽奖动画,无需从零开始制作 AE 动画。

Step 3 :标准化交付流程

打包交付2 套 AE 动画模板 + 1 套 UI 组件模板,研发流程精简为两步:

· UI 层:Figma 复制母组件 → 替换背景 → 导出

· 动画层:AE 模板渲染导出 2 段 APNG 序列帧 + 1 张 PNG 静态图 + 时间配置

抽奖系统结构图
素材切换时间配置
/** PC端动画时间配置 */
// 第一张动效循环时间,一共113帧
const startTimes = 3766;

// 第一张动效开始移动的时间点 第90帧移动
const startMoveTime = 3000;

// 第二张动效时间,一共101帧
const ingTimes = 3366;

// 第二张动效奖品展示时间点 第25帧率
const showRewardTime = 833;

/** Mob端特定配置 */

// 第一张动效循环时间,一共112帧
const mobileStartTimes = 3733;

// 第一张动效开始移动的时间点 第90帧移动
const mobileStartMoveTime = 3000;

// 第二张动效时间,一共91帧
const mobileIngTimes = 3033;

// 第二张动效奖品展示时间点 第28帧率
const mobileShowRewardTime = 933;

对接过程从多轮沟通简化为一次交付

🎞️ 为什么选择 APNG

主流浏览器通杀:Chrome、Safari、Firefox 和 Edge 早已实现原生支持,无需任何 JavaScript 库或第三方插件即可播放。

移动端与小程序友好:在 iOS 和 Android 系统中,通过简单的第三方库或原生组件即可流畅调用。特别是在微信小程序等内存敏感的环境下,它比集成 Lottie 或 SVGA 引擎更轻量,不会增加包体积负担

优雅降级:APNG 的第一帧是标准 PNG。在极少数不支持动效的环境下,它会显示为一张清晰的静态图,保证了基础的用户体验

🏁 最终成果 🏁

🧑‍🎨 设计提效

通过「换肤」机制,设计周期从 2-3 周缩短至 1 周,效率提升超 60%

🚀 开发提效

规范交付标准,减少开发沟通成本 & 走查成本,开发工时从 1 周缩短至 2 天