QQ錢包團隊聯合厘米秀在這一天特意奉上《520的正確操作方式：白和寶貝橘的520》H5。作為此次項目的參與者，本文作者將給大家分享一下他們在這支H5在創作過程中的一些心得體會。

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

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

接下來，我給大家分享一下在這支H5在創作過程中的一些心得體會。

一、創作背景

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

二、創意和策劃

前期和產品經理腦爆大量創意，出了若干版本故事線和展現方式，最后發現日常的才是比較感人的，于是我們以情侶間發生的日常普通小事構造了三個情景：

1. 玩王者榮耀拿下四殺時也要接聽另一半的電話。
2. 有好吃的東西要主動讓給另一半吃。
3. 最好的情人節禮物就是給對方發個充滿感情的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個場景都轉成組件組織，可以很好地解耦管理每個場景的內容，而不是將場景動畫內容都鋪在同一條時間軸上，避免修改了前面的內容，影響了后面的動畫。

場景內可以進一步解耦，繼續分解各個動作，將其組件化，方便組織和管理，替換素材時也能夠盡量減少修改點。例如將玩游戲時手上下晃動的動作組裝成一個不停循環的組件放在主場景下，當主場景中有其他修改，時間軸發生變化，也不會影響到這個手晃動效果的展示。

3. 用animate cc制作動畫可以實現一些H5上比較難實現的效果

如遮罩效果、從一個圖形變成另一個圖形的漸變效果、沿著路徑運動效果等，使可創作空間得到大大提升。

4. createjs提供了豐富的方法來和動畫進行交互

開發者用熟悉的js就能編寫邏輯，相比animate cc需要使用action script來處理邏輯，學習成本進一步下降，上手更容易。

接著簡單介紹一下如何用animate cc實現H5中常見的位移變換、大小變換、旋轉變換。

由動圖可見這些效果是很容易實現的，而且制作效率比編碼高得多了。

五、細節表現

制作效率高了，就有更多的時間打磨細節了。雖然開發時間還是很緊張，但我們還是努力在細節上把動畫做得更自然生動。在這抽出幾點介紹一下：

1. 加載頁的細節表現

loading頁開始時兩只貓相繼探出頭來，白貓看到黑貓出現時會轉動眼睛偷瞄一下他。原方案他們會捉迷藏，白貓會去到黑貓的位置，然后瞄到黑貓又跑去其他地方了，如此循環。后來又想到用貓爪拉開門的方式表現加載進度，就將2個創意結合在一起了。

2. 游戲場景的細節表現

在玩游戲時，隨著拿下三殺四殺，手的動作會變得越來越大，屏幕的發射光也越來越頻密，以表現出玩游戲時的激動，以及為后面另一半突然來電話不知所措做出較強烈的反差效果。

3. 用戶操作友好的細節表現

用戶操作貓爪進行選擇時，既可以拖動貓爪，又可以點擊目標位置完成選擇。對于給魚的場景，貓爪左邊大量的空白位置也能拖動貓爪，方便各種操作習慣的用戶。當用戶沒操作的時候，會顯示提示箭頭指引用戶操作。

4. 故事時間地點提示的細節表現

場景切換都是采用屏風開合過渡，考慮到不要出現無用的畫面，于是把進入打游戲場景前的屏風畫成白的家，進入約會吃魚場景前的屏風換成了餐廳，告訴大家故事發生的地點；把進入QQ聊天場景前的屏風換成了夜晚，告訴大家故事時間將切換到晚上了。

此外，屏風上也有時間跳動，說明故事的時間變化，使故事更具連貫性。

5. 聊天場景的細節表現

在這個場景中，我們使用了真實的QQ聊天界面，讓用戶熟悉發紅包按鈕位置，起到教學作用。

我們模仿了真實QQ聊天時對話氣泡及其從外往內進場的方式，增強真實感和代入感。聊天內容弄成了對方說得比較快，自己說得比較慢的方式，表示出對方想要紅包的急切之情。

6. 聲音的細節表現

當有音效發出時，背景音樂音量會適度降低，待音效結束時再恢復到原來的音量，模擬真實的手機聲音效果。

7. 錯誤選擇的細節思考

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

8. 結果頁的細節表現

在QQ聊天場景中，選擇發紅包和直接發晚安，分別會去到不同的結果頁，頁面上會有寶貝橘對應的開心/失望反應，并會擺動貓爪指著下面的發紅包按鈕，發紅包按鈕也會有一個放大抖動的微動效，以吸引用戶注意力，指引用戶此時應點擊按鈕使用發紅包功能。據之前的運營活動數據分析，這些按鈕在有/無動效的情況下轉化率差別還是挺明顯的。

六、創作時要注意的地方

在創作的過程中，我們踩了不少坑，耽誤了一些時間，也發現了一些好的工作方式以提高效率。在此列一下，方便大家繞坑：

1. 理順故事情節和邏輯

一定要在一開始的時候就理順故事情節，打通各邏輯點，否則出現問題可能會全盤推翻。

2. 素材要整理好

由于動畫素材較多，素材最好分門別類用不同的目錄組織好，減少查找的時間，替換素材時也更加輕松容易。同理，設計稿psd也應該將不同的素材放好在不同的組中，方便切圖。素材在動畫中也最好轉換成元件，方便復用、替換和管理。

3. 將動畫timingMode設為RAF

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

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

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

七、上線效果

接著，我們看看這個H5上線后的幾個統計數據：

1. 留存率

從數據上可以看出，用戶對這個H5是比較感興趣的，大部分人看完第一個場景后會繼續把第二和第三個場景看完。

2. 點發紅包次數有220多萬，轉化率為42.2%，同比上一年有很大提升。分享率為16.4%，遠高于為市面上H5的平均分享率3.93%（平均分享率數據來源于騰訊大數據發布的移動頁面行為用戶報告）。

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

八、展望

由于這次開發時間比較緊張，有一些展望和創意沒來得及嘗試，將來如有類似的機會會繼續嘗試：

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

九、總結

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

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

作者：大熊

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