無(wú)醬：在這個(gè)日新月異的時(shí)代，想要立于不敗之地，擺脫被淘汰的命運(yùn)，只有迎頭趕上，不斷創(chuàng)新。在過(guò)去兩年的時(shí)間內(nèi)，H5經(jīng)歷了從全民興起 - 爆發(fā) - 沉淀到再爆發(fā)式增長(zhǎng)的過(guò)程，以層出不窮的新面孔一次又一次展現(xiàn)了驚人的生命力。

2016年即將呼嘯而過(guò)，讓我們抓住今年的尾巴來(lái)細(xì)數(shù)一下這一年那些扭轉(zhuǎn)衰勢(shì)給我們帶來(lái)驚艷感受的十大H5，哪些曾經(jīng)刷過(guò)你的屏呢？

往期回顧：《人氣超高的HTML5特效排行榜TOP 10（附經(jīng)典案例）》

注：以下僅代表個(gè)人觀點(diǎn)，項(xiàng)目按照上線時(shí)間順序排列。

1. 微信：我和微信的故事

查看案例詳情：http://www.digitaling.com/projects/20080.html

（該活動(dòng)已下線）

一句話點(diǎn)評(píng)：大數(shù)據(jù)的暖心運(yùn)用版“回憶殺”

2016微信公開(kāi)課PRO版在開(kāi)年就丟出了一個(gè)引爆朋友圈的輕H5，寥寥幾頁(yè)，幾乎不需要互動(dòng)，幾條與“我”息息相關(guān)的數(shù)據(jù)統(tǒng)計(jì)，就能讓用戶(hù)分享得不亦樂(lè)乎。微信雖然不倡導(dǎo)誘導(dǎo)轉(zhuǎn)發(fā)，但是這樣大數(shù)據(jù)的暖心運(yùn)用，恰到好處地喚醒用戶(hù)記憶，引發(fā)情感共鳴，不刷屏才奇怪吧？

2. 豆瓣：我們的精神角落

掃描二維碼，立即體驗(yàn)！

一句話點(diǎn)評(píng)：戲很足的文青解謎系列H5

堅(jiān)持11年不打廣告的豆瓣終于在今年年初放出了一個(gè)超級(jí)大招，以“我們的精神角落”為主題推出了一系列海報(bào)、品牌宣傳片和H5。?H5分為眼、鼻、耳、口、大腦五個(gè)章節(jié)，從畫(huà)面到文案再到交互整合了多種表現(xiàn)形式，只為向用戶(hù)傳達(dá)一個(gè)觀點(diǎn)：我內(nèi)心豐富、生而不凡，這是我的秘密。由內(nèi)而外散發(fā)滿(mǎn)滿(mǎn)的豆瓣文藝氣息，細(xì)節(jié)處理堪稱(chēng)完美。

3. 寶馬：全新BMW M2游刃鋒芒間

掃描二維碼，立即體驗(yàn)！

一句話點(diǎn)評(píng)：狂炫酷拽破屏而出的速度與激情

寶馬官方微信先是用一個(gè)“該新聞已被BMW快速刪除”的標(biāo)題迅速吸睛無(wú)數(shù)，再用閱讀原文中的H5徹底點(diǎn)燃了用戶(hù)的速度與激情：一輛BMW M家族全新車(chē)型M2從虛擬的新聞內(nèi)頁(yè)呼嘯而出，在多個(gè)平臺(tái)任性跨越橫沖直撞，實(shí)現(xiàn)虛擬與現(xiàn)實(shí)的無(wú)縫切換，視覺(jué)沖擊應(yīng)接不暇，聲效配合酣暢淋漓。在77分鐘內(nèi)便獲得了10萬(wàn)+的閱讀量，還得到了各行業(yè)意見(jiàn)領(lǐng)袖刷屏式的分享。

4. 俠隱江湖：一個(gè)翻滾的H5——只要功夫深 撩妹100分

掃描二維碼，立即體驗(yàn)！

一句話點(diǎn)評(píng)：翻轉(zhuǎn)手機(jī)扭轉(zhuǎn)人生一圓武俠夢(mèng)的H5

銀漢集團(tuán)為旗下的《俠隱江湖》游戲做了一個(gè)名叫《只要功夫深 撩妹100分》的H5，只要通過(guò)翻轉(zhuǎn)手機(jī)就能即刻扭轉(zhuǎn)人生，從事事無(wú)可奈何的“凡人模式”切換為開(kāi)掛的“大俠模式”，一圓一眾為現(xiàn)實(shí)所累的現(xiàn)代人的武俠夢(mèng)。它采用簡(jiǎn)單好玩的翻轉(zhuǎn)形式和逗趣浮夸的故事情節(jié)，向世人傳達(dá)了“天生武俠，本色江湖”的游戲理念。

5. NEXT IDEA×故宮：大明皇帝除了會(huì)唱 Rap，還能有多魔性？

掃描二維碼，立即體驗(yàn)！

一句話點(diǎn)評(píng)：大明皇帝穿越故宮玩Rap成新晉網(wǎng)紅的神邀請(qǐng)函

故宮淘寶的萌版皇帝們?cè)缫焉钊肴诵模欢f(wàn)萬(wàn)沒(méi)想到這次大明皇帝變身rapper席卷朋友圈的H5，卻是騰訊與故宮跨界合作舉辦“Next Idea × 故宮” 騰訊創(chuàng)新大賽的邀請(qǐng)函。該H5將古今多種元素相互穿插，讓原本遙遠(yuǎn)的古人重新煥發(fā)生機(jī)，充滿(mǎn)現(xiàn)代感的幽默演繹，讓人眼前一亮，大大刺激了用戶(hù)的分享欲。短時(shí)間內(nèi)訪問(wèn)量就突破了300W。

6. 361°：我給你畫(huà)了個(gè)動(dòng)畫(huà)，看完可別哭啊！

掃描二維碼，立即體驗(yàn)！

一句話點(diǎn)評(píng)：用自己畫(huà)的小人去創(chuàng)造屬于你的熱愛(ài)故事

相對(duì)于單純通過(guò)點(diǎn)擊進(jìn)行互動(dòng)，引導(dǎo)用戶(hù)親自畫(huà)出小人去完成一系列動(dòng)作著實(shí)新鮮，這種形式也許不是首創(chuàng)，但也阻擋不了它的刷屏之勢(shì)。361°從自身品牌調(diào)性出發(fā)，迎合奧運(yùn)主題，用畫(huà)畫(huà)的方式鼓勵(lì)用戶(hù)勇敢面對(duì)挑戰(zhàn)，在人生這場(chǎng)比賽中贏到最后。H5情節(jié)設(shè)定完整，動(dòng)畫(huà)效果生動(dòng)可愛(ài)，輕松為品牌收獲滿(mǎn)滿(mǎn)好感。

7. 墨跡天氣：#天氣改變命運(yùn)#H5，每天都有新改變，每天都能玩一遍

掃描二維碼，立即體驗(yàn)！

一句話點(diǎn)評(píng)：奧運(yùn)最強(qiáng)借勢(shì)H5

今年正逢里約奧運(yùn)會(huì)，墨跡天氣以#天氣決定命運(yùn)#為主題，推出了一個(gè)在奧運(yùn)期間每天更新的H5。整整持續(xù)了17個(gè)日夜，一天一個(gè)H5熱點(diǎn)追擊，原創(chuàng)動(dòng)畫(huà)+原創(chuàng)詞曲+音樂(lè)互動(dòng)，在奧運(yùn)會(huì)閉幕當(dāng)天更是放出了《月球運(yùn)動(dòng)會(huì)》這個(gè)大招視頻。W將這款行業(yè)內(nèi)領(lǐng)先、人盡皆知的天氣App，系統(tǒng)性地實(shí)現(xiàn)了從“工具化”到“品牌化”的價(jià)值轉(zhuǎn)換，借勢(shì)時(shí)事熱點(diǎn)，用一個(gè)最平常不過(guò)的道理觸及人心，從而引發(fā)思考。

8. 天貓：盡情盡興！天貓穿越宇宙向你發(fā)來(lái)了一封雙11邀請(qǐng)函

查看案例詳情：http://www.digitaling.com/projects/19272.html

（該活動(dòng)已下線）

一句話點(diǎn)評(píng)：穿越宇宙級(jí)的一鏡到底沉浸式體驗(yàn)

眾所周知，淘寶是出了名的“愛(ài)搞事情”，而且逼格沒(méi)有最高只有更高。這次天貓雙11的宣傳H5又實(shí)現(xiàn)了一次自我超越。H5融入時(shí)下最流行的VR技術(shù)，用戶(hù)通過(guò)手指輕滑屏幕，就可以感受到由225張素材圖精心構(gòu)建的“一鏡到底”的天貓世界。其中不拘泥于形式具有兼容特點(diǎn)的巴洛克式風(fēng)格與雙11“不設(shè)限，盡情狂歡”的理念巧妙結(jié)合，相得益彰。充滿(mǎn)未來(lái)感的沉浸式體驗(yàn)讓人嘖嘖稱(chēng)奇，也似乎已遠(yuǎn)遠(yuǎn)超出了H5原來(lái)的定義。

9. Dopemine：THE SAVE - 活口：不留活口的H5嘗試

掃描二維碼，立即體驗(yàn)！

一句話點(diǎn)評(píng)：交互式密室逃脫微電影H5

相信大家對(duì)密室逃脫游戲并不陌生，但融影視、游戲、支付于一體的H5卻前所未有。Dopemine借助微信支付及 H5 強(qiáng)大的表現(xiàn)平臺(tái)，將游戲演給我們看，將電影放給我們玩兒。通過(guò)將產(chǎn)品線索與游戲情節(jié)融為一體，故事情節(jié)環(huán)環(huán)相扣，用“色彩”引導(dǎo)用戶(hù)層層深入，最后引導(dǎo)用戶(hù)支付1元錢(qián)來(lái)下載“性格色彩APP”以解開(kāi)謎團(tuán)。相當(dāng)于用一個(gè)H5完成了一部微電影和一個(gè)小游戲的工程量，怎一個(gè)酷字了得？

10. TGideas：為什么騰訊動(dòng)漫選了薛之謙當(dāng)代言人？

掃描二維碼，立即體驗(yàn)！

一句話點(diǎn)評(píng)：當(dāng)薛式搞笑遇上燃情國(guó)漫

提到薛之謙，很多人的第一反應(yīng)就是“段子手”。當(dāng)薛式段子遇上熱血二次元，產(chǎn)生的化學(xué)反應(yīng)真心不小。有段子，有表演，還有劇情的各種反轉(zhuǎn)，薛之謙都完美消化，最終完成了“共同的信仰，由我來(lái)守護(hù)”的品牌理念的有效傳遞，不得不說(shuō)騰訊動(dòng)漫app代言人選得非常到位。據(jù)悉，該 H5 從上線后2小時(shí)便獲得了百萬(wàn)級(jí)的 PV，平均停留時(shí)間也達(dá)到了 1 分 49 秒，將近故宮 H5（56.8 秒）的兩倍啊！

「HTML 5 好文合集」

1. 營(yíng)銷(xiāo)指南丨《不得不看的流行趨勢(shì)！品牌H5營(yíng)銷(xiāo)完全實(shí)戰(zhàn)指南》
2. 實(shí)戰(zhàn)案例丨《親歷者說(shuō)！火爆的“吳亦凡入伍”HTML5背后有哪些設(shè)計(jì)故事？》
3. 實(shí)戰(zhàn)方法丨《騰訊精品文！六大奇招帶你優(yōu)化HTML5移動(dòng)頁(yè)面》

原文地址：數(shù)英網(wǎng)

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專(zhuān)注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量180萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com