QQ钱包团队联合厘米秀在这一天特意奉上《520的正确操作方式：白和宝贝橘的520》H5。作为此次项目的参与者，本文作者将给大家分享一下他们在这支H5在创作过程中的一些心得体会。

还记得几天前的520你在干什么吗？是在伴侣圈争先恐后晒恩爱、晒求婚、晒结婚证结婚照，还是一边吃着狗粮一边被晒得双目失明呢？我们QQ钱包团队联合厘米秀在这一天特意奉上《520的正确操作方式：白和宝贝橘的520》H5，帮手各位用最正确的姿势过一个幸福的520。

首先奉上H5线上地址，看看白和宝贝橘两只猫是怎么过这一天的：

接下来，我给大家分享一下在这支H5在创作过程中的一些心得体会。

一、创作配景

过情人节要做什么？除了吃饭逛街看戏送礼物，当然就是发个充满感情的红包给Ta啦。借着520这个节日，来一个情感化运营H5，既能给用户增添情趣，又能提醒对方发QQ红包表达对本身的爱意，何乐而不为呢？于是，就有了我们这次创作计划。（其实，这还陪同着一班单身狗深深的恶意，哈哈！）

二、创意和策划

前期和产品经理脑爆大量创意，出了若干版本故事线和展现方式，最后发现日常的才是比较感人的，于是我们以情侣间发生的日常普通小事构造了三个情景：

玩王者荣耀拿下四杀时也要接听另一半的电话。有好吃的东西要主动让给另一半吃。最好的情人节礼物就是给对方发个充满感情的QQ红包。

从这些情景中提醒情侣们正确的520操作方式就是要懂得要替另一半着想、给对方惊喜。最后可在落地页给心爱的Ta发红包、领取厘米秀装饰和动作心情秀恩爱。故事从猫的角度去叙述，显得更生动形象有趣，而在每个关键时刻给予用户操作选择，使用户更具代入感，以及对正确的操作方式这一主题印象更加深刻。

三、设计创作

确定好创意后，接下来就是设计师的创作过程了，概括一下就是：角色制定、场景分镜、确定风格、绘制。以下逐一进行介绍：

1. 角色制定

按照这个命题，设计师绘制了主角白和橘。我们以猫作为故事主角，用猫的好处首先是可以模糊性别概念，其次当然是萌啦！前期先画了各种小咪咪。

尝试了几种标的目的最后敲定主要角色：白，橘。

（被大家吐槽白像狗。。后来修改了一下）

2. 绘制分镜及需要的元素

画的比较草，因为后续还会有修改，能明确需要画什么元素、有什么场景就好。

3. 找大量参考，确定风格

4. 按照风格，草图，着手绘制

四、动画开发

有了画稿，接下来就是创作动画、添加交互了。这个H5以时间比较长的故事动画形式演绎，那怎么去做好这个动画就是最核心的问题之一了。在此我想到了三个方案：纯H5+CSS3、视频、animate cc+createjs。经过一番考虑，我觉得用animate cc+createjs开发的方式是最好的，原因如下：

用H5+CSS3的方式要纯代码实现，不够直不雅观、编写抽象复杂、不适合用于制作这个内容丰富、时间长的动画；

视频体积较大，用户习惯在有wifi的情况下才会看，未便于传播，且无法在播放过程中提供交互操作（如在各场景结尾都会让用户操作如何应对各种难题），所以也分歧适；

animate cc+createjs则很好地解决了以上方案的各种毛病：可以可视化直不雅观地制作动画，体积比视频小很多，可以实现各种交互操作、逻辑处理，比较契合这次动画的需求，因此也自然而然使用这个方案了。

实际上，animate cc+createjs的实现动画的方式有很多好处，在此简单列举一下：

1. 可视化实现

制作时可以很直不雅观地看到效果。

2. 组件化的概念让动画组织得有条理

即使遇上各种改需求也能针对目标组件修改，制止牵一发而动全身的情况。这个可以结合面向对象的编程思想去理解。如下图将3个场景都转成组件组织，可以很好地解耦办理每个场景的内容，而不是将场景动画内容都铺在同一条时间轴上，制止修改了前面的内容，影响了后面的动画。