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