一、項目流程
二、項目背景
目前活動專題類型模式越來越單一，參與入口也只有到團購客戶端才可以進行參與，對于那些不經(jīng)常關注團購活動的用戶來說，一個可以在朋友圈傳播的H5想必能把這部分用戶的注意力帶入到我們的活動中，也就促使了這個H5項目的誕生。
三、需求討論
在開始之前設計師們一起欣賞了一些H5案例，分析這些成功案例的創(chuàng)意手法營銷方式。
最后腦爆出了幾個方案：
第一種：情懷類
國慶假期出去旅游演變成看人山人海，所以我們想把用戶往國慶回家和陪伴家人的情節(jié)上引導，讓多數(shù)人能夠產(chǎn)生情感共鳴，把團聚這個意義融入在H5之中。
電影放映機播放設定的劇情，回家路、老照片、家門鑰匙希望可以將用戶帶入一幕幕熟悉的場景。
第二種：趣味類
圍繞“吃”字展開聯(lián)想。一群小動物偷吃了一個餅，設定線索和步驟讓用戶參與進來尋找這個小動物，最終由這個小動物把用戶引導到國慶活動專題，整個過程貼合活動專題核心又趣味生動。
拿著以上兩種方案和產(chǎn)品開會討論，產(chǎn)品覺得趣味類的從用戶參與和情節(jié)設定比較有趣，選定第二種風格開始執(zhí)行。
四、開展設計
1.結構梳理
把最初的思路優(yōu)化整理，定下情節(jié)和主線結構。
2.草圖整理
按照最新的框架重新畫了草圖,大致頁面形態(tài)基本都呈現(xiàn)出來了。
3.風格設定
風格走的是單色線條的四格漫畫風，重點內容用色彩來突出，單純的靜態(tài)畫面展示在表現(xiàn)力上還是差點意思，就想到把漫畫做成動態(tài)似乎更生動有趣一些，有了這些就開始繼續(xù)下一步。
4.編寫文案
因為把情節(jié)類型定義為趣味類，就想在文字內容方面可以詼諧幽默一些，再有一點賤賤的特點在里面。
5.出稿
先把動畫最多的一個頁提前完成了，效果還是很符合我們最初的設想，其他頁面也是跟著這個風格繼續(xù)往下走的。
第一稿：
全部頁面：
五、制作實現(xiàn)
有了確定稿我們就開始做分鏡頭動畫，讓畫面生動起來，看著只有幾秒長度的動畫都是設計師幾幀幾百幀動手畫出來的-!T_T!
我們希望可以把最細膩的一面呈現(xiàn)給用戶。
整個動畫都是使用Hype3完成的，設計師把動畫做好，工程文件拷貝給開發(fā)就可以直接使用，中間省去很多開發(fā)時間，很容易上手太多細節(jié)就不多說了，網(wǎng)上有很多實例教程。
動畫成品
最初設想是會給H5添加很多音效和配樂，但由于排期等原因沒能添加上，成為了一點小遺憾。
六、最后總結
看著這個H5從無到有，對我們來說是一次很好的嘗試和鍛煉，整個過程中設計師不只扮演一種角色，我們想流程、寫文案、制作動畫還有剪輯音效，做了很多也收獲很多。盡管也有遺憾和不足，相信下一次我們會把更好的設計呈獻給大家。
這里跟大家分享一些收獲的經(jīng)驗：
1.一個好的工作流程非常重要
合理分工發(fā)揮每個人的特長，執(zhí)行過程中隨時溝通，流程利用得好會節(jié)省很多設計資源浪費。
2.提前跟負責開發(fā)的同學進行溝通
提前把活動方案跟開發(fā)同學核對一下，確定哪些效果是實現(xiàn)不了或者耗時較多，以便讓開發(fā)知曉整個設計預估開發(fā)時間。
3.養(yǎng)成平時收集案例的習慣
對于沒有多少H5設計經(jīng)驗的設計師來說，平時多收集精彩案例，在開展設計任務的時候可以獲取更多的靈感和方向。
掃描二維碼查看我們的H5哦:）
美團用戶體驗設計部
10
作品
2777
粉絲
0
關注
分享能獲取更多贊？
大牛，別默默的看了，快登錄幫我點評一下吧！:)
登錄 立即注冊