高大上的双屏互动,你玩过了吗?【双屏互动H5欣赏】

双屏互动的由来

先说下双屏互动是怎么回事,其实就是两个或多个屏幕之间的实时通讯,在屏幕之间产生互动效果。最早就到的是手机和电脑屏幕的互动,比如有些网站可以通过手机操作电脑的显示,H5的兴起于流行,双屏互动广泛见于H5页面的开发。

双屏互动的机制

双屏互动的核心技术点是实时互动,实时互动是基于html5的websocket机制实现的,这就是为什么最近几年才有双屏互动的原因。

web前端的小伙伴可以看看 http://tutorialzine.com/2015/02/smartphone-remote-control-for-presentations/,讲述了如何实现双屏互动。

nodejs的开发者应该听说过socket.io,重新封装了websocket的功能,开发起来更加方便。

双屏互动的案例

案例1、LOVESTYLE邀你过七夕

广告主:Lomark 点媒
推广产品:点媒移动广告

项目亮点:含蓄的画面,配上幽默的文案,让你脑洞大开,还能和身边的一起互动,广告主是在七夕这一天放出,也算是契合当下的日子,另外猜谜的形式,也符合七夕这一天的猜谜传统,给用户提供了一个不错的体验。

LOVESTYLE邀你过七夕

案例详情:http://www.digitaling.com/projects/15282.html
扫描二维码,立即体验!
二维码_160-jpg.jpg

案例2、七夕鹊桥会,爱更多

广告主:梅赛德斯-奔驰
推广产品:梅赛德斯-奔驰B级运动旅行车

项目亮点:华丽而又梦幻的画面,模拟喜鹊搭桥,并结合摇一摇这个功能,另外,两个手机之间的配合也很好,比如画面中,一只喜鹊从一个手机到另一个手机,感觉那只喜鹊真的是飞过去的,当两个手机合并的时候,一座鹊桥就搭建完成,并出现一唯美的爱心画面,最后出现车的后备箱都是玫瑰花,很浪漫的一次互动。

七夕鹊桥会,爱更多

案例详情:https://www.iguoguo.net/2015/58111.html
扫描二维码,立即体验!
fc47e9b54aa9d169211ba5757c1ead0a.png

案例3、五一劳动节,我们的爱爱居然是酱紫

广告主:杜蕾斯
推广产品:杜蕾斯动动节款定制避孕套

项目亮点:杜蕾斯这个广告主一直很敢玩,这次也是结合了摇一摇这个功能做双屏的互动,测测两个人之间的配对指数,比如一个用户摇出“深”这个字,另外一个摇出“痴”这个词,之后还能定制属于你们之间的杜杜包装盒,图案,文字都是由用户自己选择和填写,很有私人定制的感觉,还有一个亮点是,杜杜的文案也很有深意,“男女搭配,干活不累”。

五一劳动节,我们的爱爱居然是酱紫

案例详情:https://www.iguoguo.net/2015/54128.html
扫描二维码,立即体验!

案例4、《在夏天在一起》,约他一起看电影

广告主:六神
推广产品:六神清怡冰爽沐浴露

项目亮点:谁规定双屏互动就必须两个人拿着手机手舞足蹈来回折腾呢?六神《在夏天在一起》通过买通票的方式,模拟电影院让两位观众欣赏到一部制作精良的夏夜动画。看到这个机制和跨屏方式有没有想起NDS上的某些游戏?

H5分屏效果图

案例详情http://www.digitaling.com/projects/15241.html
扫描二维码,立即体验!
H5二维码.jpg

案例5、玩转进化论

广告主:New Balance
推广产品:New Balance Fresh Foam 574 跑步鞋

项目亮点:进入2015年New Balance的宣传方向比以往尖锐了不少,这场同时发生在两部手机上的进化论通过四组动画比喻产品的四个特点。我们认为画面酷炫与否可能不是判断一个H5是否精良的标准,但是画面像这部作品那么酷炫,确实应该给个高分。

玩转进化论

案例详情:https://www.iguoguo.net/2015/57899.html
扫二维码,立即体验!

案例6、遇见爱

广告主:杜蕾斯
推广产品:杜蕾斯 品牌推广

项目亮点:杜杜这款双屏互动,用充满诱惑而又神秘的色调,开始一段爱的寻找旅程,你若想找到我,必须要经历一些“痛苦”,而另一半只需静坐等待即可,到最后,两个小人一起到一个屏幕上,感觉两个手机是真的联在一起,但是唯一的一个不太好的地方就是,这款互动必须要旁边有人,否则就不能完成,这个给单身人士又是一个打击。

杜蕾斯_遇见爱

案例详情:http://www.digitaling.com/projects/13776.html
扫二维码,立即体验!
杜勒斯-爱160.jpg

案例7、天生一对

广告主:Kappa 卡帕
推广产品:Kappa 卡帕新春限定礼品及官方微信推广

项目亮点:Kappa在春节时候找到一个洞察点,有时候春节没有年味,不怎么热闹,即使是两个年轻人在一起,也不知道要聊些什么,于是就出这么一招,用传统春联、五言绝句以及网络流行语的乱入,加上双机配合的新颖模式,让Kappa和你一起玩转春节,感受久违的红火新年!

KAPPA_天生一对

案例详情:http://www.digitaling.com/projects/13724.html
扫二维码,立即体验!
kapper.160.jpg

案例8、微爱之渐入佳境

广告主:《微爱之渐入佳境》
推广产品:《微爱之渐入佳境》电影
该活动已结束)

项目亮点:“游戏化”是今年在移动广告网站领域较大的一个趋势,手机与PC互动是另一个。这个电影推广案例通过手机操作PC端广告,使得网页广告稍稍不那么讨人厌。当用户用二维码作为开启互动游戏的“钥匙”并通关后,获得微信公众账号的二维码入口。两次使用二维码,两种用途,开启游戏和获取入口。

微爱之渐入佳境

案例详情:http://www.digitaling.com/projects/13826.html
该活动已结束)

案例9、我们15个理想生活养成记

广告主:腾讯
推广产品:《我们15个》生活真人秀节目
该活动已结束)

项目亮点:又一个游戏化的H5。扣住综艺节目《我们15个》需要团队紧密合作的主题,游戏也需要两台手机的用户达成较高的默契,完成三关游戏后系统给出默契指数与当前玩家排名,刺激用户进行再一次游戏。

我们15个理想生活养成记

案例详情:http://www.digitaling.com/projects/14084.html
该活动已结束)

案例10、三星手机S6 edge官网采用双屏互动

Unpack-the-Future

案例11、Diplomatic-Cover

小编当年见到的一个双屏互动的网站,当时嘴就合不上了

 

Diplomatic-Cover---Digital-Brand-Value

 

 

案例整理:数英网&爱果果