动效设计
平面设计
2026-03

type
Post
status
Published
date
Mar 26, 2026
slug
interactive_video
summary
tags
动效设计
平面设计
category
CCB
icon
password
备忘
项目介绍:起初借鉴b站的互动视频,制作了一系列金融类的互动视频,通过用户不同的选择产生不同的结局,解决金融投教视频低触达、低完播、低转化的问题。后续团队以Lottie承载动画,项目转向了H5形式。客户有建设银行、中信银行等。 我的职能:脚本创意、交互创意、UI设计、部分插画及动效,作为执行leader统筹项目把控产出。

理想住房模拟器

该H5原本是KYC体系内的,希望获取用户的当前住房水平和还贷能力。后续出售给建行生活时,作为“公积金缴存”的投教和引流游戏上线,投放于建行生活首页。
UI设计
UI设计
投放物料及lottie动效展示,我们为每一个选项都做了匹配的入场动画,通过lottie的方案让动效落地,但在实际开发时性能不足,改为了纯静态图层。
投放示意
投放示意
lottie动效
lottie动效
lottie动效

教育开支计算器

KYC体系内的一款H5,希望获取用户的子女情况、教育金支出情况。
UI设计
UI设计
lottie动效
lottie动效
lottie动效
lottie动效

重返绿茵场

将家庭资产配置比喻为赛场阵型,是“帆船理论”的一种变体。
UI设计
UI设计

炒基模拟器

提供给玩家三支基金,在一年半时间中操作三次。让用户潜移默化学习“择时不如择基”“长期持有”的金融知识。
视频demo
部分分镜
部分分镜
这支视频有三次交互,有10种结果分支
这支视频有三次交互,有10种结果分支

航海大冒险

让用户在游戏中学到家庭资产配置“帆船理论”。
视频demo
部分分镜
部分分镜

翻身模拟器

角色在奔跑中度过一生,将“四笔钱”金融知识融于事件中。创意来自横向卷轴游戏和“人生跑马灯”。
视频demo
部分分镜
部分分镜

丝路掘金

将选基金比喻为选驼队,教用户选基金时要避免的坑。
视频demo
部分分镜
部分分镜
End
Thanks for reading. ♥ from HJ