H5分析|騰訊、京東、杰士邦的刷屏套路都在這里！

2017-08-23 H5 h5制作 h5游戲 h5頁面 html5模板 html5 騰訊杰士邦

經(jīng)過了這么久的醞釀

本汪積攢了太多的H5案例要跟小伙伴們分享

奈何篇幅有限

今天先跟大家嘮嘮這幾支

/ 騰訊：揭秘QQ娛樂社交！ /

視頻+VR全景+做工精美

騰訊的這款H5全面展示一個(gè)做工十分精美的QQ娛樂區(qū)，在這個(gè)精美的娛樂區(qū)里面，有許多用戶經(jīng)常用到或者說見到的功能，例如Now 直播、QQ等等功能，用戶通過點(diǎn)擊可以看到騰訊公司中具體負(fù)責(zé)這一功能的負(fù)責(zé)人的介紹，使用VR全景可以讓用戶對活動(dòng)內(nèi)容一覽無余。

這支H5的主要使用視頻+VR全景，開始企鵝畫面使用視頻實(shí)現(xiàn)，而后面則使用了VR全景。這兩個(gè)功能在人人秀均可以直接實(shí)現(xiàn)。

這支H5整體炫彩風(fēng)格，將騰訊QQ中所有功能全都匯集在一張地圖上面，不僅沒有顯得亂糟糟的感覺，反而給人一種做工很精美的感受。使用VR全景功能可以讓用戶轉(zhuǎn)動(dòng)著手機(jī)或者是用手滑動(dòng)屏幕，就可以玩遍地圖上的所有點(diǎn)，是一款很精致的展示h5。

/ 京東：打破邊界，世界雕像嗨起來了！ /

還記得之前嗨起來的世界名畫嗎？

這次世界雕像也跟著嗨起來了。

世界雕像嗨起來了整體展示.jpg

（長按識別二維碼欣賞案例）

有趣創(chuàng)意+序列幀動(dòng)畫

原本冰冷固定的雕像們作為素材，轉(zhuǎn)變成嗨皮不停的“潮人”，跟世界名畫嗨起來的H5形式基本差不多，頁面中所展示的動(dòng)態(tài)效果，都采用了序列幀動(dòng)畫的實(shí)現(xiàn)方式，通過不同交互形式重返首頁，選擇不同的著名雕像體驗(yàn)，有趣好玩，不火很難！

世界雕像嗨起來了壓縮gif.gif

/ 杰士邦：8月8日的正確打開方式 /

杰士邦整體封面.jpg

（長按識別二維碼欣賞案例）

視頻+故事+污

杰士邦的這個(gè)H5果然是沒有離開品牌的調(diào)性，堅(jiān)持了有點(diǎn)小污污的特色，通過3個(gè)故事以視頻的方式展現(xiàn)，比較有意思的是每個(gè)故事中出現(xiàn)的分屏視頻，故事情節(jié)對比，激發(fā)欲望。每個(gè)視頻頁面會(huì)添加相應(yīng)的觸發(fā)動(dòng)作按鈕，可以觀看下一個(gè)故事，也可以直接進(jìn)入帶有微商城鏈接的長頁面。有視頻，有故事，有“色彩”，火是有道理的！

杰士邦分屏視頻壓縮GIF.gif

/ 浦發(fā)銀行：我說話的時(shí)候請不要戳我！ /

浦發(fā)銀行H5整體封面展示.jpg

（長按識別二維碼欣賞案例）

視頻+觸發(fā)動(dòng)作

這支H5作為一則這么明顯的廣告H5，卻還是讓本汪心服口服的吃下了。

其實(shí)這支H5流程整體來說并不是太難的，是視頻+動(dòng)畫觸發(fā)按鈕的融合。

首先進(jìn)入頁面后是視頻，一個(gè)銀行經(jīng)理的引導(dǎo)介紹，然后進(jìn)入游戲流程頁面，一男一女兩個(gè)真人經(jīng)理供用戶進(jìn)行選擇。

這里就是最有趣的地方了，只要點(diǎn)擊真人經(jīng)理的身體部位，人物會(huì)相應(yīng)的做出反應(yīng)，比如點(diǎn)擊胳膊，胳膊會(huì)向外彈出，點(diǎn)擊腿，腿也會(huì)向外彈出。極大的滿足了用戶“撩”的心理。形式新穎有趣，游戲簡單粗暴又好玩，“撩”到停不下來！

浦發(fā)銀行H5點(diǎn)擊就動(dòng) GIF.gif 浦發(fā)銀行H5點(diǎn)擊就動(dòng)2 GIF.gif