QQ錢(qián)包團(tuán)隊(duì)聯(lián)合厘米秀在這一天特意奉上《520的正確操作方式：白和寶貝橘的520》H5。作為此次項(xiàng)目的參與者，本文作者將給大家分享一下他們?cè)谶@支H5在創(chuàng)作過(guò)程中的一些心得體會(huì)。

還記得幾天前的520你在干什么嗎？是在伴侶圈爭(zhēng)先恐后曬恩愛(ài)、曬求婚、曬結(jié)婚證結(jié)婚照，還是一邊吃著狗糧一邊被曬得雙目失明呢？我們QQ錢(qián)包團(tuán)隊(duì)聯(lián)合厘米秀在這一天特意奉上《520的正確操作方式：白和寶貝橘的520》H5，幫手各位用最正確的姿勢(shì)過(guò)一個(gè)幸福的520。

首先奉上H5線上地址，看看白和寶貝橘兩只貓是怎么過(guò)這一天的：

接下來(lái)，我給大家分享一下在這支H5在創(chuàng)作過(guò)程中的一些心得體會(huì)。

一、創(chuàng)作配景

過(guò)情人節(jié)要做什么？除了吃飯逛街看戲送禮物，當(dāng)然就是發(fā)個(gè)充滿感情的紅包給Ta啦。借著520這個(gè)節(jié)日，來(lái)一個(gè)情感化運(yùn)營(yíng)H5，既能給用戶增添情趣，又能提醒對(duì)方發(fā)QQ紅包表達(dá)對(duì)本身的愛(ài)意，何樂(lè)而不為呢？于是，就有了我們這次創(chuàng)作計(jì)劃。（其實(shí)，這還陪同著一班單身狗深深的惡意，哈哈?。?/p>二、創(chuàng)意和策劃

前期和產(chǎn)品經(jīng)理腦爆大量創(chuàng)意，出了若干版本故事線和展現(xiàn)方式，最后發(fā)現(xiàn)日常的才是比較感人的，于是我們以情侶間發(fā)生的日常普通小事構(gòu)造了三個(gè)情景：

玩王者榮耀拿下四殺時(shí)也要接聽(tīng)另一半的電話。有好吃的東西要主動(dòng)讓給另一半吃。最好的情人節(jié)禮物就是給對(duì)方發(fā)個(gè)充滿感情的QQ紅包。

從這些情景中提醒情侶們正確的520操作方式就是要懂得要替另一半著想、給對(duì)方驚喜。最后可在落地頁(yè)給心愛(ài)的Ta發(fā)紅包、領(lǐng)取厘米秀裝飾和動(dòng)作心情秀恩愛(ài)。故事從貓的角度去敘述，顯得更生動(dòng)形象有趣，而在每個(gè)關(guān)鍵時(shí)刻給予用戶操作選擇，使用戶更具代入感，以及對(duì)正確的操作方式這一主題印象更加深刻。

三、設(shè)計(jì)創(chuàng)作

確定好創(chuàng)意后，接下來(lái)就是設(shè)計(jì)師的創(chuàng)作過(guò)程了，概括一下就是：角色制定、場(chǎng)景分鏡、確定風(fēng)格、繪制。以下逐一進(jìn)行介紹：

1. 角色制定

按照這個(gè)命題，設(shè)計(jì)師繪制了主角白和橘。我們以貓作為故事主角，用貓的好處首先是可以模糊性別概念，其次當(dāng)然是萌啦！前期先畫(huà)了各種小咪咪。

嘗試了幾種標(biāo)的目的最后敲定主要角色：白，橘。

（被大家吐槽白像狗。。后來(lái)修改了一下）

2. 繪制分鏡及需要的元素

畫(huà)的比較草，因?yàn)楹罄m(xù)還會(huì)有修改，能明確需要畫(huà)什么元素、有什么場(chǎng)景就好。

3. 找大量參考，確定風(fēng)格

4. 按照風(fēng)格，草圖，著手繪制

四、動(dòng)畫(huà)開(kāi)發(fā)

有了畫(huà)稿，接下來(lái)就是創(chuàng)作動(dòng)畫(huà)、添加交互了。這個(gè)H5以時(shí)間比較長(zhǎng)的故事動(dòng)畫(huà)形式演繹，那怎么去做好這個(gè)動(dòng)畫(huà)就是最核心的問(wèn)題之一了。在此我想到了三個(gè)方案：純H5+CSS3、視頻、animate cc+createjs。經(jīng)過(guò)一番考慮，我覺(jué)得用animate cc+createjs開(kāi)發(fā)的方式是最好的，原因如下：

用H5+CSS3的方式要純代碼實(shí)現(xiàn)，不夠直不雅觀、編寫(xiě)抽象復(fù)雜、不適合用于制作這個(gè)內(nèi)容豐富、時(shí)間長(zhǎng)的動(dòng)畫(huà)；

視頻體積較大，用戶習(xí)慣在有wifi的情況下才會(huì)看，未便于傳播，且無(wú)法在播放過(guò)程中提供交互操作（如在各場(chǎng)景結(jié)尾都會(huì)讓用戶操作如何應(yīng)對(duì)各種難題），所以也分歧適；

animate cc+createjs則很好地解決了以上方案的各種毛?。嚎梢钥梢暬辈谎庞^地制作動(dòng)畫(huà)，體積比視頻小很多，可以實(shí)現(xiàn)各種交互操作、邏輯處理，比較契合這次動(dòng)畫(huà)的需求，因此也自然而然使用這個(gè)方案了。

實(shí)際上，animate cc+createjs的實(shí)現(xiàn)動(dòng)畫(huà)的方式有很多好處，在此簡(jiǎn)單列舉一下：

1. 可視化實(shí)現(xiàn)

制作時(shí)可以很直不雅觀地看到效果。

2. 組件化的概念讓動(dòng)畫(huà)組織得有條理

即使遇上各種改需求也能針對(duì)目標(biāo)組件修改，制止?fàn)恳话l(fā)而動(dòng)全身的情況。這個(gè)可以結(jié)合面向?qū)ο蟮木幊趟枷肴ダ斫?。如下圖將3個(gè)場(chǎng)景都轉(zhuǎn)成組件組織，可以很好地解耦辦理每個(gè)場(chǎng)景的內(nèi)容，而不是將場(chǎng)景動(dòng)畫(huà)內(nèi)容都鋪在同一條時(shí)間軸上，制止修改了前面的內(nèi)容，影響了后面的動(dòng)畫(huà)。

標(biāo)簽：九江 烏魯木齊 東營(yíng) 林芝 鹽城