TGideas：探究H5的不同表現(xiàn)手法
日期：2015-12-02 / 人氣： / 來源：未知
文藝、走心的手繪風(fēng)格 項目背景 雷霆戰(zhàn)機(jī)周年慶，項目組為雷霆進(jìn)行了拍攝了一部品牌短片，圍繞整個影片策劃了一個h5對其進(jìn)行傳播。 視頻主要內(nèi)容講述幾個小朋友從小心懷對星空的夢想，通過不斷研究學(xué)習(xí)長大后當(dāng)上了航天工作者完成了自己一直的夢想，來闡述如今繁華社會里仍有千千萬萬不斷追隨自己的內(nèi)心的人。引發(fā)大家對天空的夢想的共鳴走情感路線。 前期構(gòu)思 本次嘗試了2套方向展現(xiàn)——圍繞視頻內(nèi)容的靜幀截圖直接展示，主打宇宙情懷的手繪風(fēng)格文藝的展示。 此前移動端上大多是以單頁大長圖+視頻按鈕進(jìn)行宣傳的方式，作為首個嘗試試水兩種方向?qū)ψ罱K視頻造成的轉(zhuǎn)化率影響。 風(fēng)格推導(dǎo) 風(fēng)格一 視頻元素提取： 根據(jù)其視頻提取關(guān)鍵元素：收音機(jī)、天文望遠(yuǎn)鏡、宇宙飛船、風(fēng)鈴。
整體氛圍圍繞四個關(guān)鍵詞 科幻、復(fù)古、文藝和走心。 于是最終采用牛皮紙背景來展現(xiàn)復(fù)古+手繪主元素使科幻主題更添親和力增添情懷，不同于以往的寫實風(fēng)。 為了在手機(jī)上更生動的展示，每一個元素搭配小動畫來使手繪的物件更具有生命力（例收音機(jī)動畫：打開天線——搜頻——搜到聲音）。一段描述性的文案搭配小動畫增加畫面故事的完整性，同時配合空靈的背景聲效，讓用戶在體驗h5的時候，在符合移動端用戶體驗同時讓用戶在視覺、聽覺上感受到情懷產(chǎn)生共鳴。
1.TVC的推廣，使用視頻本身元素和再創(chuàng)作元素，對于傳播哪一個更合適？ 一開始老板擔(dān)心跟視頻本身的結(jié)合度不夠，項目組對于手繪風(fēng)格與游戲內(nèi)風(fēng)格差異大有所擔(dān)憂，于是首推的是靜幀視頻截圖版本，出于探究精神我們在微信公眾賬號對手繪版本進(jìn)行傳播。 （當(dāng)時老板的擔(dān)心，項目組的傾向，設(shè)計團(tuán)隊的堅持，最終加推后的數(shù)據(jù)反饋） 從最終的數(shù)據(jù)可以看到，手繪版本在只有唯一宣傳入口（微信公眾賬號）和視頻靜幀有多方的宣傳渠道的對比下，兩者的數(shù)據(jù)達(dá)到相當(dāng)，且手繪版本的點擊全文閱讀量遠(yuǎn)高于以往文章點擊量，由此可見在創(chuàng)作元素來宣傳視頻并無影響，游戲用戶更多是樂于接受不同風(fēng)格的嘗試。
2.手繪插畫類型的H5，在設(shè)計和重構(gòu)階段應(yīng)該注意的問題 A．給到重構(gòu)的psd文件分層將每個元素合理打包能減少重構(gòu)負(fù)擔(dān)提高工作效率，將主元素轉(zhuǎn)化為智能對象和背景分開，若主元素內(nèi)有單獨需要動畫的部件，再另外區(qū)分開來。 3． H5需要的插畫類型與傳統(tǒng)插畫的區(qū)別 A．由于手機(jī)屏幕的限制，一屏內(nèi)出現(xiàn)一個主要元素最為舒適，更容易引導(dǎo)用戶在體驗中看到重點。畫面排版過滿容易分散用戶注意力失去焦點。 B．矢量扁平風(fēng)格的插畫和可復(fù)用背景能大大減少文件包大小提升加載速度。 C．簡單的圖形加上微妙的肌理感能瞬間提升畫面質(zhì)感。
整體氛圍圍繞四個關(guān)鍵詞 科幻、復(fù)古、文藝和走心。 于是最終采用牛皮紙背景來展現(xiàn)復(fù)古+手繪主元素使科幻主題更添親和力增添情懷，不同于以往的寫實風(fēng)。 為了在手機(jī)上更生動的展示，每一個元素搭配小動畫來使手繪的物件更具有生命力（例收音機(jī)動畫：打開天線——搜頻——搜到聲音）。一段描述性的文案搭配小動畫增加畫面故事的完整性，同時配合空靈的背景聲效，讓用戶在體驗h5的時候，在符合移動端用戶體驗同時讓用戶在視覺、聽覺上感受到情懷產(chǎn)生共鳴。
1.TVC的推廣，使用視頻本身元素和再創(chuàng)作元素，對于傳播哪一個更合適？ 一開始老板擔(dān)心跟視頻本身的結(jié)合度不夠，項目組對于手繪風(fēng)格與游戲內(nèi)風(fēng)格差異大有所擔(dān)憂，于是首推的是靜幀視頻截圖版本，出于探究精神我們在微信公眾賬號對手繪版本進(jìn)行傳播。 （當(dāng)時老板的擔(dān)心，項目組的傾向，設(shè)計團(tuán)隊的堅持，最終加推后的數(shù)據(jù)反饋） 從最終的數(shù)據(jù)可以看到，手繪版本在只有唯一宣傳入口（微信公眾賬號）和視頻靜幀有多方的宣傳渠道的對比下，兩者的數(shù)據(jù)達(dá)到相當(dāng)，且手繪版本的點擊全文閱讀量遠(yuǎn)高于以往文章點擊量，由此可見在創(chuàng)作元素來宣傳視頻并無影響，游戲用戶更多是樂于接受不同風(fēng)格的嘗試。
2.手繪插畫類型的H5，在設(shè)計和重構(gòu)階段應(yīng)該注意的問題 A．給到重構(gòu)的psd文件分層將每個元素合理打包能減少重構(gòu)負(fù)擔(dān)提高工作效率，將主元素轉(zhuǎn)化為智能對象和背景分開，若主元素內(nèi)有單獨需要動畫的部件，再另外區(qū)分開來。 3． H5需要的插畫類型與傳統(tǒng)插畫的區(qū)別 A．由于手機(jī)屏幕的限制，一屏內(nèi)出現(xiàn)一個主要元素最為舒適，更容易引導(dǎo)用戶在體驗中看到重點。畫面排版過滿容易分散用戶注意力失去焦點。 B．矢量扁平風(fēng)格的插畫和可復(fù)用背景能大大減少文件包大小提升加載速度。 C．簡單的圖形加上微妙的肌理感能瞬間提升畫面質(zhì)感。
作者：admin