當前位置:
首頁 > 最新 > 設計師如何做活運營?-給父親的H5活劇

設計師如何做活運營?-給父親的H5活劇

引言:隨著消費升級的步伐,商家總結出在帶動消費能力上小孩>女人>寵物>男人的規律,爸爸們作為商家最不重視的一個角色,該如何在父親節以爸爸為主角製作一款H5呢。

一、項目背景

手機充值作為一個日活數千萬的工具型產品,親密充作為多號碼充值的首要場景,對話費充值的生態與成長起到至關重要的作用。未來,在新用戶增速放緩環境下,發揮親密充功能沉澱的用戶充值關係,將成為我們新的探索方向。所以此次在父親節進行發力,製作一款可以對手機充值親密充有拉動作用的H5品宣。

相對於每年母親節的聲勢浩大,但是一到父親節就世界都安靜了。這是機會也是挑戰,機會在於因為父親節平均聲量較小,所以產出較容易被大家所看到,同時也面臨著關注度不夠的客觀情況的挑戰。

二、創意來源

這個用戶的狀態反映了許多人父親節送禮物的常態,送來送去好像什麼都不合適,最終還是充了一筆話費,這恰好也是此次話費充值父親節品宣的落腳點。此次品宣的雛形就初現了,一個在老家缺少關心的空巢父親與一個在外地工作費盡心思送禮物的兒子,他們之間發生的火花,

但若單單如此,則略顯單調,如何增加趣味性與可玩性呢?

趣味性:配音的趣味性來源於劇本的趣味性與聲音的趣味性,劇本的趣味性可以在劇本中增加各種各樣的梗,聲音的趣味性可以聯想到各地的方言,那麼選擇哪些地區的方言顯得尤為重要,為了覆蓋更多的地區,我們選擇了中國較有特色且差異較大的地區的方言,分別是江浙滬、兩廣、陝西、東北、中原、四川,這些地區的方言既有識別性,又有一定的喜劇效果。

可玩性:在採用選擇題的互動方式,模擬兒子為父親選擇禮物,讓用戶深度參與其中。

確定了主題後開始具體著手項目具體製作,由於是第一次製作劇情動畫、配音與答題三者相結合的故事性交互H5,下面會每一步說明,我們在這些地方都是怎麼做的。

三、劇本編寫

劇本是故事性交互H5的重中之重,也是其對用戶是否吸引的關鍵因素,若缺乏吸引力用戶則無法到達最後看到品牌曝光,一個劇本最基本的需要一個通順且合理的劇情,更高的要求是要充分利用用戶好奇心,獲取用戶注意力,完成品牌與功能的曝光,按照寫文章的方法,一個飽滿的劇本需要有三部分組成。

虎頭:通過一個最常見也是最能引起共鳴的場景——也就是爸爸給兒子打電話,引齣劇情

豬肚:用搞笑與接地氣的父子對話持續吸引用戶,同時選擇題帶給用戶參與感

鳳尾:通過劇情引導出,一個父親的日常狀態,對孩子的要求無非是想要日常的關心已足夠,最後引出品宣slogan點題,同時曝光親密充入口,引導綁定與充值。

四、劇本配音

具體的配音工作交給配音外包商就好,我們要做的就是對最後效果的把控。

配音劇本:需要提前寫好劇本,方便演員配音,同時增加可控性,六種方言需要找相應的方言同學在普通話劇本的基礎上一一編寫成方言劇本

音效劇本:BGM風格 按鍵音 鈴聲音效等等,可以用表格列出交予外包商也方便後期核對。

挑選演員:有些年輕配音演員可以配出老年音色,但是整體語感不及年齡較大的配音演員來的自然和諧。

五、配音與動畫相匹配

首先要了解匹配原理,為了節省開發時間與資源,六種方言動畫全部採用同一種幀數與時間,所以需要精確匹配每一句的配音時長。

配音時長可以通過三種方法控制:

1.在劇本階段,控制每句話的內容與字數保持大體一致。

2.在配音階段,備註配音演員進行時長控制。

3.在後期階段,通過後期軟體的加減速對每句話時長進行精確匹配。

六、人物風格設定

確定好玩法流程後,進入視覺階段,這次整體的設定是不同區域的爸爸形象,要表現出各區域的特色,結合好配音,才會達到比較理想的效果。

在人物的刻畫上,視覺是有很多表現形式的,但會根據整體方案的氣質去選擇合適的視覺呈現,由於這次的方案會有人物配音,為了使整體效果更自然,更接近用戶的想像,加上對產品用戶群的定位,我們摒棄了低齡卡通的設計方向,在人物設計上選擇了寫實的設計風格,更符合用戶心理對父親這個嚴肅、嚴謹的心理印象。

結合對話的內容以及動畫的表現形式,在細節刻畫顏色搭配上增加復古的味道,使人物更活潑不呆板將字體圖形化設計,結合中國元素,提煉各省市的簡稱加上有特點的人物設計,能更快速的幫用戶選擇以及增加親切感,以下就是各區域的爸爸形象設計,有沒有一款打動你呀~

七、主視覺風格設定

人物的設定出來後,主頁面的視覺風格就比較好把控了,復古的老式畫報風格,是一個很好的選擇~既能突出人物形象,又能把內容很好的劃分整合。

板式設定

主頁面整體視覺風格確立以及板式布局,畫面主體還是已人物形象為主,配合動畫讓整個畫面更有動感,強調打電話的動作,更貼近產品。在動畫的設計上,也是遇到了很多困難,因為6個區域人物分為獨白、對話、聽電話3個部分的動畫,而為了防止圖片過多文件過大每個動作都要控制在6/7幀的範圍內,又要保證形態的自然有趣,又要能對上字幕配音,這裡的難度非常非常的大,需要每個步驟都配合的剛剛好,非常感謝開發哥哥耐心打磨,最後的呈現還是很滿意的。

動畫效果,頁面過多就選一部分進行展示

GIF

???

GIF

GIF

GIF

八、活動效果

最後整體數據效果還是比較理想~用戶完成全部選項佔比整體UV 34.89%,說明H5內容對用戶吸引度較高,能夠用內容本身吸引用戶到達廣告落地頁,完成運營目標。也帶來較高的親密充數據,相較平時有顯著提升,給親密充帶來綁定與充值。

九、結語

第一次製作配音動畫相關的運營H5,製作初期既期待又緊張,中間也遇到了幾次看似無法逾越的難題,最終呈現結果也還較為滿意。

最後特別參與項目的各位小夥伴

rebeccayan、windylei、evanzhou、ricexiao

這麼好玩的H5,還不快來看看

長按掃碼體驗

感謝閱讀!

交互設計學堂已經開設了新的欄目-行知書院,旨在幫助小夥伴們來高效的學習現在市面上優秀的用戶體驗書籍比如《交互設計精髓》等等,同時結合老D的工作經驗來幫助你們從不同的高度和角度來解讀書中的內容。每天一課,積少成多。已有222位小夥伴加入。詳細了解行知書院


喜歡這篇文章嗎?立刻分享出去讓更多人知道吧!

本站內容充實豐富,博大精深,小編精選每日熱門資訊,隨時更新,點擊「搶先收到最新資訊」瀏覽吧!


請您繼續閱讀更多來自 交互設計學堂 的精彩文章:

Figma 3.0 版本重磅發布!為你揭秘這款2018年最值得體驗的設計軟體!

TAG:交互設計學堂 |