雅菲：最近半年一直在負責雷霆戰機和天天酷跑的項目，以偏品牌建設和創意營銷為主，在風格上嘗試了手繪的表現形式，這次和大家分享下其中的設計經驗。

　　雷霆戰機TVC HTML5 頁面

　　文藝、走心的手繪風格

　　項目背景

　　雷霆戰機周年慶，項目組為雷霆進行了拍攝了一部品牌短片，圍繞整個影片策劃了一個HTML5頁面對其進行傳播。

　　視頻主要內容講述幾個小朋友從小心懷對星空的夢想，通過不斷研究學習長大后當上了航天工作者完成了自己一直的夢想，來闡述如今繁華社會里仍有千千萬萬不斷追隨自己的內心的人。引發大家對天空的夢想的共鳴走情感路線。

　　前期構思

　　本次嘗試了2套方向展現——圍繞視頻內容的靜幀截圖直接展示，主打宇宙情懷的手繪風格文藝的展示。

　　此前移動端上大多是以單頁大長圖+視頻按鈕進行宣傳的方式，作為首個嘗試試水兩種方向對最終視頻造成的轉化率影響。

　　風格推導

　　風格一

　　視頻元素提取：

　　根據其視頻提取關鍵元素：收音機、天文望遠鏡、宇宙飛船、風鈴。

　　整體氛圍圍繞四個關鍵詞 科幻、復古、文藝和走心。

　　于是最終采用牛皮紙背景來展現復古+手繪主元素使科幻主題更添親和力增添情懷，不同于以往的寫實風。

　　為了在手機上更生動的展示，每一個元素搭配小動畫來使手繪的物件更具有生命力(例收音機動畫：打開天線——搜頻——搜到聲音)。一段描述性的文案搭配小動畫增加畫面故事的完整性，同時配合空靈的背景聲效，讓用戶在體驗HTML5 頁面的時候，在符合移動端用戶體驗同時讓用戶在視覺、聽覺上感受到情懷產生共鳴。

　　數據表現：

　　周累計PV：103，,662 周累計UV：80,799

　　最后一屏觸達率：66% 啟動游戲轉化率：23%

　　豐富的CSS3場景動畫以及走心的文案加上風鈴的音樂，產生用戶的共鳴。

　　成效要點：

　　1. 一共7屏，最后一屏觸達率達66%。

　　2. 整個專題從加載到加載完成僅23%的流失

　　關于項目的思考：

　　1. TVC的推廣，使用視頻本身元素和再創作元素，對于傳播哪一個更合適?

　　一開始老板擔心跟視頻本身的結合度不夠，項目組對于手繪風格與游戲內風格差異大有所擔憂，于是首推的是靜幀視頻截圖版本，出于探究精神我們在微信公眾賬號對手繪版本進行傳播。

　　(當時老板的擔心，項目組的傾向，設計團隊的堅持，最終加推后的數據反饋)

　　從最終的數據可以看到，手繪版本在只有唯一宣傳入口(微信公眾賬號)和視頻靜幀有多方的宣傳渠道的對比下，兩者的數據達到相當，且手繪版本的點擊全文閱讀量遠高于以往文章點擊量，由此可見在創作元素來宣傳視頻并無影響，游戲用戶更多是樂于接受不同風格的嘗試。

　　2. 手繪插畫類型的HTML5 頁面，在設計和重構階段應該注意的問題

　　A.給到重構的psd文件分層將每個元素合理打包能減少重構負擔提高工作效率，將主元素轉化為智能對象和背景分開，若主元素內有單獨需要動畫的部件，再另外區分開來。

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。