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

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

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

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

一、創(chuàng)作背景

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

二、創(chuàng)意和策劃

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

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

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

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

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

1. 角色制定

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

嘗試了幾種方向最后敲定主要角色：白，橘。

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

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

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

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

4. 根據(jù)風(fēng)格，草圖，著手繪制

四、動(dòng)畫開發(fā)

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

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

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

animate cc+createjs則很好地解決了以上方案的各種弊端：可以可視化直觀地制作動(dòng)畫，體積比視頻小很多，可以實(shí)現(xiàn)各種交互操作、邏輯處理，比較契合這次動(dòng)畫的需求，因此也自然而然使用這個(gè)方案了。

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

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

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

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

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

場(chǎng)景內(nèi)可以進(jìn)一步解耦，繼續(xù)分解各個(gè)動(dòng)作，將其組件化，方便組織和管理，替換素材時(shí)也能夠盡量減少修改點(diǎn)。例如將玩游戲時(shí)手上下晃動(dòng)的動(dòng)作組裝成一個(gè)不停循環(huán)的組件放在主場(chǎng)景下，當(dāng)主場(chǎng)景中有其他修改，時(shí)間軸發(fā)生變化，也不會(huì)影響到這個(gè)手晃動(dòng)效果的展示。

3. 用animate cc制作動(dòng)畫可以實(shí)現(xiàn)一些H5上比較難實(shí)現(xiàn)的效果

如遮罩效果、從一個(gè)圖形變成另一個(gè)圖形的漸變效果、沿著路徑運(yùn)動(dòng)效果等，使可創(chuàng)作空間得到大大提升。

4. createjs提供了豐富的方法來和動(dòng)畫進(jìn)行交互

開發(fā)者用熟悉的js就能編寫邏輯，相比animate cc需要使用action script來處理邏輯，學(xué)習(xí)成本進(jìn)一步下降，上手更容易。

接著簡(jiǎn)單介紹一下如何用animate cc實(shí)現(xiàn)H5中常見的位移變換、大小變換、旋轉(zhuǎn)變換。

由動(dòng)圖可見這些效果是很容易實(shí)現(xiàn)的，而且制作效率比編碼高得多了。

五、細(xì)節(jié)表現(xiàn)

制作效率高了，就有更多的時(shí)間打磨細(xì)節(jié)了。雖然開發(fā)時(shí)間還是很緊張，但我們還是努力在細(xì)節(jié)上把動(dòng)畫做得更自然生動(dòng)。在這抽出幾點(diǎn)介紹一下：

1. 加載頁的細(xì)節(jié)表現(xiàn)

loading頁開始時(shí)兩只貓相繼探出頭來，白貓看到黑貓出現(xiàn)時(shí)會(huì)轉(zhuǎn)動(dòng)眼睛偷瞄一下他。原方案他們會(huì)捉迷藏，白貓會(huì)去到黑貓的位置，然后瞄到黑貓又跑去其他地方了，如此循環(huán)。后來又想到用貓爪拉開門的方式表現(xiàn)加載進(jìn)度，就將2個(gè)創(chuàng)意結(jié)合在一起了。

2. 游戲場(chǎng)景的細(xì)節(jié)表現(xiàn)

在玩游戲時(shí)，隨著拿下三殺四殺，手的動(dòng)作會(huì)變得越來越大，屏幕的發(fā)射光也越來越頻密，以表現(xiàn)出玩游戲時(shí)的激動(dòng)，以及為后面另一半突然來電話不知所措做出較強(qiáng)烈的反差效果。

3. 用戶操作友好的細(xì)節(jié)表現(xiàn)

用戶操作貓爪進(jìn)行選擇時(shí)，既可以拖動(dòng)貓爪，又可以點(diǎn)擊目標(biāo)位置完成選擇。對(duì)于給魚的場(chǎng)景，貓爪左邊大量的空白位置也能拖動(dòng)貓爪，方便各種操作習(xí)慣的用戶。當(dāng)用戶沒操作的時(shí)候，會(huì)顯示提示箭頭指引用戶操作。

4. 故事時(shí)間地點(diǎn)提示的細(xì)節(jié)表現(xiàn)

場(chǎng)景切換都是采用屏風(fēng)開合過渡，考慮到不要出現(xiàn)無用的畫面，于是把進(jìn)入打游戲場(chǎng)景前的屏風(fēng)畫成白的家，進(jìn)入約會(huì)吃魚場(chǎng)景前的屏風(fēng)換成了餐廳，告訴大家故事發(fā)生的地點(diǎn)；把進(jìn)入QQ聊天場(chǎng)景前的屏風(fēng)換成了夜晚，告訴大家故事時(shí)間將切換到晚上了。

此外，屏風(fēng)上也有時(shí)間跳動(dòng)，說明故事的時(shí)間變化，使故事更具連貫性。

5. 聊天場(chǎng)景的細(xì)節(jié)表現(xiàn)

在這個(gè)場(chǎng)景中，我們使用了真實(shí)的QQ聊天界面，讓用戶熟悉發(fā)紅包按鈕位置，起到教學(xué)作用。

我們模仿了真實(shí)QQ聊天時(shí)對(duì)話氣泡及其從外往內(nèi)進(jìn)場(chǎng)的方式，增強(qiáng)真實(shí)感和代入感。聊天內(nèi)容弄成了對(duì)方說得比較快，自己說得比較慢的方式，表示出對(duì)方想要紅包的急切之情。

6. 聲音的細(xì)節(jié)表現(xiàn)

當(dāng)有音效發(fā)出時(shí)，背景音樂音量會(huì)適度降低，待音效結(jié)束時(shí)再恢復(fù)到原來的音量，模擬真實(shí)的手機(jī)聲音效果。

7. 錯(cuò)誤選擇的細(xì)節(jié)思考

當(dāng)用戶做出不好的選擇時(shí)，原本的創(chuàng)意是回放一下兩只貓過去的恩愛回憶，然后再做出好的選擇。在評(píng)審時(shí)覺得這讓H5變得有點(diǎn)拖沓和不明所以，于是把回憶刪去，改為很直觀的”想做單身狗嗎？還是對(duì)他好吧“之類的提示，另外也加快看起來比較拖沓的動(dòng)效，使得最終H5看起來更加緊湊和節(jié)奏感。

8. 結(jié)果頁的細(xì)節(jié)表現(xiàn)

在QQ聊天場(chǎng)景中，選擇發(fā)紅包和直接發(fā)晚安，分別會(huì)去到不同的結(jié)果頁，頁面上會(huì)有寶貝橘對(duì)應(yīng)的開心/失望反應(yīng)，并會(huì)擺動(dòng)貓爪指著下面的發(fā)紅包按鈕，發(fā)紅包按鈕也會(huì)有一個(gè)放大抖動(dòng)的微動(dòng)效，以吸引用戶注意力，指引用戶此時(shí)應(yīng)點(diǎn)擊按鈕使用發(fā)紅包功能。據(jù)之前的運(yùn)營(yíng)活動(dòng)數(shù)據(jù)分析，這些按鈕在有/無動(dòng)效的情況下轉(zhuǎn)化率差別還是挺明顯的。

六、創(chuàng)作時(shí)要注意的地方

在創(chuàng)作的過程中，我們踩了不少坑，耽誤了一些時(shí)間，也發(fā)現(xiàn)了一些好的工作方式以提高效率。在此列一下，方便大家繞坑：

1. 理順故事情節(jié)和邏輯

一定要在一開始的時(shí)候就理順故事情節(jié)，打通各邏輯點(diǎn)，否則出現(xiàn)問題可能會(huì)全盤推翻。

2. 素材要整理好

由于動(dòng)畫素材較多，素材最好分門別類用不同的目錄組織好，減少查找的時(shí)間，替換素材時(shí)也更加輕松容易。同理，設(shè)計(jì)稿psd也應(yīng)該將不同的素材放好在不同的組中，方便切圖。素材在動(dòng)畫中也最好轉(zhuǎn)換成元件，方便復(fù)用、替換和管理。

3. 將動(dòng)畫timingMode設(shè)為RAF

將createjs.Ticker.timingMode設(shè)為createjs.Ticker.RAF。用默認(rèn)的RAF_SYNCHED會(huì)按照在animate cc里設(shè)置的fps播放動(dòng)畫，這在性能不高的安卓機(jī)上會(huì)卡。而設(shè)置為createjs.Ticker.RAF后，會(huì)改用requestAnimationFrame來播放動(dòng)畫，在安卓機(jī)上也能流暢播放。這樣做的壞處是幀率會(huì)不確定，完全以requestAnimationFrame的處理速度來決定播放速度。解決辦法是制作動(dòng)畫時(shí)將fps設(shè)成60fps，這樣和requestAnimationFrame處理的幀率大致相近，即可按自己想要的速度去制作動(dòng)畫。

4. 聲音不要放在createjs提供的預(yù)加載方法上

因?yàn)闆]有緩存，聲音文件預(yù)加載會(huì)嚴(yán)重拖慢loading的速度。后來我們將音樂文件直接通過new audio加載，并將主BGM體積控制在500K以內(nèi)，將聲效控制在幾十K內(nèi)，經(jīng)處理后，主BGM能快速播放，聲效也能及時(shí)響應(yīng)動(dòng)畫發(fā)出。用audio的另一個(gè)好處，是能夠用多個(gè)audio在手機(jī)上同時(shí)播多個(gè)聲音，而用createjs的方法在iphone中只能同時(shí)播一個(gè)聲音，因此在聲音處理方面建議使用audio。此外還需要記錄聲音在各個(gè)時(shí)刻的播放狀態(tài)，以免在靜音后重新打開聲音時(shí)不知道該播什么。

七、上線效果

接著，我們看看這個(gè)H5上線后的幾個(gè)統(tǒng)計(jì)數(shù)據(jù)：

1. 留存率

從數(shù)據(jù)上可以看出，用戶對(duì)這個(gè)H5是比較感興趣的，大部分人看完第一個(gè)場(chǎng)景后會(huì)繼續(xù)把第二和第三個(gè)場(chǎng)景看完。

2. 點(diǎn)發(fā)紅包次數(shù)有220多萬，轉(zhuǎn)化率為42.2%，同比上一年有很大提升。分享率為16.4%，遠(yuǎn)高于為市面上H5的平均分享率3.93%（平均分享率數(shù)據(jù)來源于騰訊大數(shù)據(jù)發(fā)布的移動(dòng)頁面行為用戶報(bào)告）。

此外，該H5也被“H5案例分享”網(wǎng)站收錄，助力宣傳QQ錢包和厘米秀。在朋友圈、空間也看到很多朋友轉(zhuǎn)發(fā)，很多愛貓人士也表示這2只貓很萌很可愛。

八、展望

由于這次開發(fā)時(shí)間比較緊張，有一些展望和創(chuàng)意沒來得及嘗試，將來如有類似的機(jī)會(huì)會(huì)繼續(xù)嘗試：

1. 手機(jī)來電時(shí)可加上震動(dòng)手機(jī)效果。
2. 給游戲添加雙屏互動(dòng)，情侶雙方一起玩，到最后可以查看對(duì)方在游戲中做出的選擇。
3. 骨骼動(dòng)畫的應(yīng)用，用在貓手的動(dòng)作上。
4. 雖然這是QQ的活動(dòng)，但可以探討一下如果在微信上打開，可不可以讓整個(gè)動(dòng)畫都在微信上播放，到了發(fā)QQ紅包和領(lǐng)厘米秀裝飾時(shí)再跳到QQ上進(jìn)行。這樣在微信上的傳播范圍應(yīng)該會(huì)更廣。

九、總結(jié)

如何做好一個(gè)情感化運(yùn)營(yíng)項(xiàng)目，一是故事策劃上要從日常生活出發(fā)，日常才能引發(fā)共鳴；二是動(dòng)畫實(shí)現(xiàn)要自然流暢，我們通過animate cc+createjs可以比較高效完成動(dòng)畫開發(fā)；三是細(xì)節(jié)之處的體驗(yàn)打磨，在操作引導(dǎo)，逼真，轉(zhuǎn)場(chǎng)，音效等方面都需要仔細(xì)考慮用戶感知。同時(shí)配合生動(dòng)有趣的故事內(nèi)容能吸引用戶一直體驗(yàn)下去，更愿意使用目標(biāo)功能，提高轉(zhuǎn)化率，達(dá)成運(yùn)營(yíng)目標(biāo)。

在此感謝各位小伙伴奮斗多天的辛勞，也感謝身邊的大神給予寶貴的體驗(yàn)意見。另祝愿所有看到這兒還沒關(guān)閉頁面的用心讀者，未拍拖的早日遇到心儀的另一半過上幸福的情人節(jié)，已拍拖的能趕上過今年的父親節(jié)。大家也可以在評(píng)論區(qū)留言搭訕，說不定緣分就這樣來了，friends嚟噶嘛！

作者：大熊

來源：https://isux.tencent.com/qq520redpacket.html