2018-8-14 資深UI設(shè)計者
如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里
隨著消費(fèi)升級的步伐,商家總結(jié)出在帶動消費(fèi)能力上小孩>女人>寵物>男人的規(guī)律,爸爸們作為商家最不重視的一個角色,該如何在父親節(jié)以爸爸為主角制作一款 H5 呢?手機(jī)充值作為一個日活數(shù)千萬的工具型產(chǎn)品,親密充作為多號碼充值的首要場景,對話費(fèi)充值的生態(tài)與成長起到至關(guān)重要的作用。未來,在新用戶增速放緩環(huán)境下,發(fā)揮親密充功能沉淀的用戶充值關(guān)系,將成為我們新的探索方向。
所以此次在父親節(jié)進(jìn)行發(fā)力,制作一款可以對手機(jī)充值親密充有拉動作用的 H5 品宣。
相對于每年母親節(jié)的聲勢浩大,但是一到父親節(jié)世界就都安靜了。這是機(jī)會也是挑戰(zhàn),機(jī)會在于因為父親節(jié)平均聲量較小,所以產(chǎn)出較容易被大家所看到,同時也面臨著關(guān)注度不夠的客觀情況的挑戰(zhàn)。
這個用戶的狀態(tài)反映了許多人父親節(jié)送禮物的常態(tài),送來送去好像什么都不合適,最終還是充了一筆話費(fèi),這恰好也是此次話費(fèi)充值父親節(jié)品宣的落腳點。此次品宣的雛形就初現(xiàn)了,一個在老家缺少關(guān)心的空巢父親與一個在外地工作費(fèi)盡心思送禮物的兒子,他們之間發(fā)生的火花。
但若單單如此,則略顯單調(diào),如何增加趣味性與可玩性呢?
確定了主題后開始具體著手項目具體制作,由于第一次制作劇情動畫、配音與答題三者相結(jié)合的故事性交互 H5,下面會每一步說明,我們在這些地方都是怎么做的。
劇本是故事性交互 H5 的重中之重,也是其對用戶是否吸引的關(guān)鍵因素,若缺乏吸引力用戶則無法到達(dá)最后看到品牌曝光,一個劇本最基本的需要一個通順且合理的劇情,更高的要求是要充分利用用戶好奇心,獲取用戶注意力,完成品牌與功能的曝光。按照寫文章的方法,一個飽滿的劇本需要有三部分組成。
具體的配音工作交給配音外包商就好,我們要做的就是對最后效果的把控。
首先要了解匹配原理,為了節(jié)省開發(fā)時間與資源,六種方言動畫全部采用同一種幀數(shù)與時間,所以需要匹配每一句的配音時長。
配音時長可以通過三種方法控制:
確定好玩法流程后,進(jìn)入視覺階段,這次整體的設(shè)定是不同區(qū)域的爸爸形象,要表現(xiàn)出各區(qū)域的特色,結(jié)合好配音,才會達(dá)到比較理想的效果。
在人物的刻畫上,視覺是有很多表現(xiàn)形式的,但會根據(jù)整體方案的氣質(zhì)去選擇合適的視覺呈現(xiàn)。由于這次的方案會有人物配音,為了使整體效果更自然,更接近用戶的想象,加上對產(chǎn)品用戶群的定位,我們摒棄了低齡卡通的設(shè)計方向,在人物設(shè)計上選擇了寫實的設(shè)計風(fēng)格,更符合用戶心理對父親這個嚴(yán)肅、嚴(yán)謹(jǐn)?shù)男睦碛∠蟆?
結(jié)合對話的內(nèi)容以及動畫的表現(xiàn)形式,在細(xì)節(jié)刻畫顏色搭配上增加復(fù)古的味道,使人物更活潑不呆板將字體圖形化設(shè)計,結(jié)合中國元素,提煉各省市的簡稱加上有特點的人物設(shè)計,能更快速的幫用戶選擇以及增加親切感,以下就是各區(qū)域的爸爸形象設(shè)計,有沒有一款打動你呀。
人物的設(shè)定出來后,主頁面的視覺風(fēng)格就比較好把控了,復(fù)古的老式畫報風(fēng)格,是一個很好的選擇~既能突出人物形象,又能把內(nèi)容很好的劃分整合。
板式設(shè)定:
主頁面整體視覺風(fēng)格確立以及版式布局,畫面主體還是以人物形象為主,配合動畫讓整個畫面更有動感,強(qiáng)調(diào)打電話的動作,更貼近產(chǎn)品。
在動畫的設(shè)計上,也是遇到了很多困難,因為6個區(qū)域人物分為獨白、對話、聽電話3個部分的動畫,而為了防止圖片過多文件過大每個動作都要控制在6/7幀的范圍內(nèi),又要保證形態(tài)的自然有趣,又要能對上字幕配音。
這里的難度非常非常的大,需要每個步驟都配合的剛剛好,非常感謝開發(fā)哥哥耐心打磨,最后的呈現(xiàn)還是很滿意的。
動畫效果,頁面過多就選一部分進(jìn)行展示:
最后整體數(shù)據(jù)效果還是比較理想,用戶完成全部選項占比整體 UV 34.89%,說明 H5 內(nèi)容對用戶吸引度較高,能夠用內(nèi)容本身吸引用戶到達(dá)廣告落地頁,完成運(yùn)營目標(biāo)。也帶來較高的親密充數(shù)據(jù),相較平時有顯著提升,給親密充帶來綁定與充值。
第一次制作配音動畫相關(guān)的運(yùn)營 H5,制作初期既期待又緊張,中間也遇到了幾次看似無法逾越的難題,最終呈現(xiàn)結(jié)果也還較為滿意。
藍(lán)藍(lán)設(shè)計( tweetduck.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
藍(lán)藍(lán)設(shè)計的小編 http://tweetduck.com