盤點2017上半年，那些畫風精奇的爆款H5

現在微信用戶量如此之高，在微信做線上推廣便成了不可少的途徑。伴隨著一隻神經貓和幾次品牌內容的朋友圈瘋轉，H5逐漸佔據了自己的營銷地位，越來越多的品牌開始製作H5。

人是視覺動物，那麼小編今天給大家整理了十個畫風精奇的H5（排名不分先後），都非常有意思，一起來看看吧！

1

費玉清又火了！快聽2017年洗腦神曲！

出品：滴滴出行

技術實現： Video

視頻類，模擬費玉清專輯，濃濃80年代海報設計感，文字畫面設計感強，滑動屏幕開始播放視頻，小哥騎車從1里之外一直唱到6里之外，每一里的設定都有電影海報的既視感，最後可以進進入滴滴打車叫車界面，十分有趣。

2

一分鐘看懂單身狗

出品：藝龍

技術實現： Video

以簡筆畫動畫講述了一個男主狗剩「因下載APP網速慢而無法去酒店開房看夜光手錶導致的悲慘分手」，掃地大媽為安慰狗剩，在說唱和掃地中不漏痕迹的把「微信錢包訂酒店」的信息表現出來，最後可以奔走相告，分享給好友以及領取520專享紅包！

畫風簡潔，音樂魔性。體驗上，整個案例輕鬆，幽默。

3

轉完這個H5，就去陪老媽過節

出品：統帥電器

技術實現： Video

情景類。在母親節來臨之際， 該H5將媽媽的形象進行了差異化，以一個年輕人做事的方式來呈現媽媽「逃離不孝子女「「媽媽集體去火星」這樣的表現方式，突破常規思維；同時描繪媽媽走後，年輕人生活的囧態——房間髒亂差，衣服八周一洗，闡釋媽媽的重要性。

4

端午節拒做身狗！

出品：網易

技術實現：Canvas + Egret（白鷺引擎）

測試答題類，端午來了，有幾道給你測試一下自己撩人本事的題。

你的另一半想吃粽子了，需要你根據TA的描述，猜測TA喜歡吃甜粽還是咸粽， 十道題全部猜完後，即可看到你猜對了幾次，並根據你的戰績給出你能追到的男神or女神的名字， 最後點擊結果頁「領端午禮物」，登錄網易新聞客戶端即可有一次抽獎機會。鬼畜風格，視覺效果強烈…一言難盡…！

5

飛越淘寶奇市

出品：淘寶

技術實現：JavaScript+3D+Video

通過一支風箏穿越的時空的方式，進行展現造物節的豐富，進行活動宣傳。

利用交互動畫+3D建模視頻來完成，一共四個場景，每個場景串場動畫為一隻風箏穿梭於五彩斑斕的時光隧道，利用重力感應+ThreeJS來完成交互，然後播放東、西、南、北四個方位進入的3D視角視頻。背景音樂輕快悅耳，新穎的H5形式讓人印象深刻。

6

穿越未來來看你

出品：騰訊

技術實現：Zepto + Video

插畫風格，畫風極致細膩，一面承載著中國的傳統文化，另一面象徵未來的大場景，不僅打造了騰訊NEXT IDEA的標誌性；中間部分中國風和科技相結合，在不可思議中將傳統美與未來科技融合！後面的畫面又有一種科幻風，想像力十足。

音樂上，混拼音樂，從曲調獨特的京劇、古典樂轉為節奏動感的RAP，分分鐘將未來與傳統相結合。

7

關於我的故事，全在這裡了

出品：岡本

技術實現：

CreateJS + TweenMax + Zepto + Video

視頻將這幅「極樂飛升圖」作為切入點，講述了岡本產品，從設計，到「原料加工」，到「產品成型」，再到「安全檢測」等全部過程。

畫面風格很像浮世繪，淡黃色的背景，與整體給人的「污」感完美結合在了一起。男聲配音充滿吸引力，情緒也恰到好處，配合著畫面，將故事講述的超級生動形象，一點都不枯燥。

8

上手機QQ 貼表情

出品：騰訊

技術實現： CreateJS+Zepto+video

畫館從「戴珍珠耳環的少女」開始，各種世界名畫、聖經里的人物，都趁夜出來斗圖逗表情，最後推出「上手機QQ貼表情」的主題，且底部露出動圖拖拽演示效果。

用夜晚美術館中的「世界名畫」為手機QQ的貼圖表情代言，讓大家在歡樂中感受手機QQ的貼圖表情的魅力，誘導App更新和安裝。

9

你學到的有多少已還給老師

出品：海寧日報

技術實現： jQuery

插畫風格，採用綠色作為主色調，瞬間讓人回到小學看課本的節奏中去。

10

ofo小黃車研發車間

出品：ofo

技術實現： Canvas + JavaScript

圖文類。一共五個場景展示「ofo小黃車研發車間」。點擊小黃人，啟動工廠設備，小黃人對車輛驅動系統進行檢測；進行車輛組裝車間，搖一搖手機，糾正圖紙方向；進入染色車間，向下滑動屏幕，將車輛進入小黃人澡池進行染色；進入測試車間，點擊黃豆餵給小黃人，兩個屁就可催動車輛。隨後搖一搖為發布會揭幕，大boss與小黃人代表接受採訪，表示小黃人車間拳頭產品-小黃車榮耀上市。

案例整體以3D模型展示，空間感十足，小細節滿滿，十分精緻。顏色方面以小黃人與ofo共有黃色為主色調，增強產品辨識度。多種方式的交互方式，配合有趣的音效，給人一愉快的體驗。

-End-

編輯：厘訊網

如有侵權，請聯繫刪除

如果你需要APP開發、H5，網站建設，運營推廣等服務

請聯繫我們——

歡迎長按以下添加微信好友

如果你還想看更多這樣的資訊，那就關注我們的公眾號咋樣？【厘訊網】

下方查看歷史資訊

點擊展開全文

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