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個場景都轉成組件組織，可以很好地解耦辦理每個場景的內容，而不是將場景動畫內容都鋪在同一條時間軸上，制止修改了前面的內容，影響了后面的動畫。

標簽：九江 烏魯木齊 東營 林芝 鹽城