隨著消費(fèi)升級(jí)的步伐，商家總結(jié)出在帶動(dòng)消費(fèi)能力上小孩>女人>寵物>男人的規(guī)律，爸爸們作為商家最不重視的一個(gè)角色，該如何在父親節(jié)以爸爸為主角制作一款H5呢。

一、項(xiàng)目背景

手機(jī)充值作為一個(gè)日活數(shù)千萬(wàn)的工具型產(chǎn)品，親密充作為多號(hào)碼充值的首要場(chǎng)景，對(duì)話(huà)費(fèi)充值的生態(tài)與成長(zhǎng)起到至關(guān)重要的作用。未來(lái)，在新用戶(hù)增速放緩環(huán)境下，發(fā)揮親密充功能沉淀的用戶(hù)充值關(guān)系，將成為我們新的探索方向。

所以此次在父親節(jié)進(jìn)行發(fā)力，制作一款可以對(duì)手機(jī)充值親密充有拉動(dòng)作用的H5品宣。

相對(duì)于每年母親節(jié)的聲勢(shì)浩大，但是一到父親節(jié)就世界都安靜了。這是機(jī)會(huì)也是挑戰(zhàn)，機(jī)會(huì)在于因?yàn)楦赣H節(jié)平均聲量較小，所以產(chǎn)出較容易被大家所看到，同時(shí)也面臨著關(guān)注度不夠的客觀(guān)情況的挑戰(zhàn)。

二、創(chuàng)意來(lái)源

這個(gè)用戶(hù)的狀態(tài)反映了許多人父親節(jié)送禮物的常態(tài)，送來(lái)送去好像什么都不合適，最終還是充了一筆話(huà)費(fèi)，這恰好也是此次話(huà)費(fèi)充值父親節(jié)品宣的落腳點(diǎn)。此次品宣的雛形就初現(xiàn)了，一個(gè)在老家缺少關(guān)心的空巢父親與一個(gè)在外地工作費(fèi)盡心思送禮物的兒子，他們之間發(fā)生的火花。

但若單單如此，則略顯單調(diào)，如何增加趣味性與可玩性呢？

• 趣味性：配音的趣味性來(lái)源于劇本的趣味性與聲音的趣味性，劇本的趣味性可以在劇本中增加各種各樣的梗，聲音的趣味性可以聯(lián)想到各地的方言。那么選擇哪些地區(qū)的方言顯得尤為重要，為了覆蓋更多的地區(qū)，我們選擇了中國(guó)較有特色且差異較大的地區(qū)的方言，分別是江浙滬、兩廣、陜西、東北、中原、四川，這些地區(qū)的方言既有識(shí)別性，又有一定的喜劇效果。
• 可玩性：在采用選擇題的互動(dòng)方式，模擬兒子為父親選擇禮物，讓用戶(hù)深度參與其中。

確定了主題后開(kāi)始具體著手項(xiàng)目具體制作，由于是第一次制作劇情動(dòng)畫(huà)、配音與答題三者相結(jié)合的故事性交互H5，下面會(huì)每一步說(shuō)明，我們?cè)谶@些地方都是怎么做的。

三、劇本編寫(xiě)

劇本是故事性交互H5的重中之重，也是其對(duì)用戶(hù)是否吸引的關(guān)鍵因素，若缺乏吸引力用戶(hù)則無(wú)法到達(dá)最后看到品牌曝光，一個(gè)劇本最基本的需要一個(gè)通順且合理的劇情，更高的要求是要充分利用用戶(hù)好奇心，獲取用戶(hù)注意力，完成品牌與功能的曝光。按照寫(xiě)文章的方法，一個(gè)飽滿(mǎn)的劇本需要有三部分組成。

• 虎頭：通過(guò)一個(gè)最常見(jiàn)也是最能引起共鳴的場(chǎng)景——也就是爸爸給兒子打電話(huà)，引出劇情；
• 豬肚：用搞笑與接地氣的父子對(duì)話(huà)持續(xù)吸引用戶(hù)，同時(shí)選擇題帶給用戶(hù)參與感；
• 鳳尾：通過(guò)劇情引導(dǎo)出，一個(gè)父親的日常狀態(tài)，對(duì)孩子的要求無(wú)非是想要日常的關(guān)心已足夠，最后引出品宣slogan點(diǎn)題，同時(shí)曝光親密充入口，引導(dǎo)綁定與充值。

四、劇本配音

具體的配音工作交給配音外包商就好，我們要做的就是對(duì)最后效果的把控。

• 配音劇本：需要提前寫(xiě)好劇本，方便演員配音，同時(shí)增加可控性，六種方言需要找相應(yīng)的方言同學(xué)在普通話(huà)劇本的基礎(chǔ)上一一編寫(xiě)成方言劇本；
• 音效劇本：BGM風(fēng)格、按鍵音、鈴聲音效等等，可以用表格列出交予外包商也方便后期核對(duì)；
• 挑選演員：有些年輕配音演員可以配出老年音色，但是整體語(yǔ)感不及年齡較大的配音演員來(lái)的自然和諧。

五、配音與動(dòng)畫(huà)相匹配

首先要了解匹配原理，為了節(jié)省開(kāi)發(fā)時(shí)間與資源，六種方言動(dòng)畫(huà)全部采用同一種幀數(shù)與時(shí)間，所以需要精確匹配每一句的配音時(shí)長(zhǎng)。

配音時(shí)長(zhǎng)可以通過(guò)三種方法控制：

• 在劇本階段，控制每句話(huà)的內(nèi)容與字?jǐn)?shù)保持大體一致。
• 在配音階段，備注配音演員進(jìn)行時(shí)長(zhǎng)控制。
• 在后期階段，通過(guò)后期軟件的加減速對(duì)每句話(huà)時(shí)長(zhǎng)進(jìn)行精確匹配。

六、人物風(fēng)格設(shè)定

確定好玩法流程后，進(jìn)入視覺(jué)階段，這次整體的設(shè)定是不同區(qū)域的爸爸形象，要表現(xiàn)出各區(qū)域的特色，結(jié)合好配音，才會(huì)達(dá)到比較理想的效果。

在人物的刻畫(huà)上，視覺(jué)是有很多表現(xiàn)形式的，但會(huì)根據(jù)整體方案的氣質(zhì)去選擇合適的視覺(jué)呈現(xiàn)。由于這次的方案會(huì)有人物配音，為了使整體效果更自然，更接近用戶(hù)的想象，加上對(duì)產(chǎn)品用戶(hù)群的定位，我們摒棄了低齡卡通的設(shè)計(jì)方向，在人物設(shè)計(jì)上選擇了寫(xiě)實(shí)的設(shè)計(jì)風(fēng)格，更符合用戶(hù)心理對(duì)父親這個(gè)嚴(yán)肅、嚴(yán)謹(jǐn)?shù)男睦碛∠蟆?/p>

結(jié)合對(duì)話(huà)的內(nèi)容以及動(dòng)畫(huà)的表現(xiàn)形式，在細(xì)節(jié)刻畫(huà)顏色搭配上增加復(fù)古的味道，使人物更活潑不呆板將字體圖形化設(shè)計(jì)，結(jié)合中國(guó)元素，提煉各省市的簡(jiǎn)稱(chēng)加上有特點(diǎn)的人物設(shè)計(jì)，能更快速的幫用戶(hù)選擇以及增加親切感，以下就是各區(qū)域的爸爸形象設(shè)計(jì)，有沒(méi)有一款打動(dòng)你呀～

七、主視覺(jué)風(fēng)格設(shè)定

人物的設(shè)定出來(lái)后，主頁(yè)面的視覺(jué)風(fēng)格就比較好把控了，復(fù)古的老式畫(huà)報(bào)風(fēng)格，是一個(gè)很好的選擇～既能突出人物形象，又能把內(nèi)容很好的劃分整合。

板式設(shè)定：

主頁(yè)面整體視覺(jué)風(fēng)格確立以及板式布局，畫(huà)面主體還是已人物形象為主，配合動(dòng)畫(huà)讓整個(gè)畫(huà)面更有動(dòng)感，強(qiáng)調(diào)打電話(huà)的動(dòng)作，更貼近產(chǎn)品。

在動(dòng)畫(huà)的設(shè)計(jì)上，也是遇到了很多困難，因?yàn)?個(gè)區(qū)域人物分為獨(dú)白、對(duì)話(huà)、聽(tīng)電話(huà)3個(gè)部分的動(dòng)畫(huà)，而為了防止圖片過(guò)多文件過(guò)大每個(gè)動(dòng)作都要控制在6/7幀的范圍內(nèi)，又要保證形態(tài)的自然有趣，又要能對(duì)上字幕配音。

這里的難度非常非常的大，需要每個(gè)步驟都配合的剛剛好，非常感謝開(kāi)發(fā)哥哥耐心打磨，最后的呈現(xiàn)還是很滿(mǎn)意的。

動(dòng)畫(huà)效果，頁(yè)面過(guò)多就選一部分進(jìn)行展示：

八、活動(dòng)效果

最后整體數(shù)據(jù)效果還是比較理想～用戶(hù)完成全部選項(xiàng)占比整體UV 34.89%，說(shuō)明H5內(nèi)容對(duì)用戶(hù)吸引度較高，能夠用內(nèi)容本身吸引用戶(hù)到達(dá)廣告落地頁(yè)，完成運(yùn)營(yíng)目標(biāo)。也帶來(lái)較高的親密充數(shù)據(jù)，相較平時(shí)有顯著提升，給親密充帶來(lái)綁定與充值。

九、結(jié)語(yǔ)

第一次制作配音動(dòng)畫(huà)相關(guān)的運(yùn)營(yíng)H5，制作初期既期待又緊張，中間也遇到了幾次看似無(wú)法逾越的難題，最終呈現(xiàn)結(jié)果也還較為滿(mǎn)意。

最后特別參與項(xiàng)目的各位小伙伴：rebeccayan、windylei、evanzhou、ricexiao

這么好玩的H5，還不快來(lái)看看~

作者：騰訊FiTdesign?，公眾號(hào)：騰訊FiTdesign（ID：FiTdesign2017）

本文來(lái)源于人人都是產(chǎn)品經(jīng)理合作媒體@騰訊FITdesign，作者@騰訊FiTdesign

題圖來(lái)自 Pexels，基于 CC0 協(xié)議