html5多屏互动游戏,多屏互动 —— 手机端与PC端网页互动的现有尝试及设想

不可否认，多屏时代已经到来。

手机/平板/笔记本/PC/TV等，多个显示平台的逐步构建，为信息传播及交互提供了多重平台及体验选择。

素材：多屏自适应网页设计/多屏延生设计

在此篇文章，取手机端与PC端网页的互动案例来探讨：

案例一： Chrome 超级体育游戏 (Super Sync Sports)译：“超同步运动”

此互动案例为谷歌推出的多屏同步游戏，通过WebSockets功能，让手机端与PC网页端代码匹配并绑定，手机端将变为手柄。之后就可以通过操作手机端界面来控制网页端的人物进行相应的动作。

#通过手机端可以选择人物形象

#通过手机端触摸，网页端做出相应回馈

#最多支持4人同屏对战互动，有兴趣的朋友可以去尝试一下，体验还是不错的。

案例二：QQ手机浏览器，谁能比我快/双屏互动案例

此案例，与Chrome的游戏互动方式类似，同样是运用了WebSockets功能，通过手机端与网页端绑定，通过手机端控制网页端做相应动作。QQ浏览器这个案例，将品牌诉求结合的更好，技术与创意点结合的相当不错。

有兴趣的朋友也可以参与玩一下：

案例三：UNICEF: “MOON”——一个孩子，两种命运

感谢编辑:Viking @DIGITALING

这则互动案例，无论从内容还是交互方式上，我都很喜欢。我觉得技术的魅力就应该通过这种方式呈现。

本互动案例是由Ogilvy Spain和Ogilvy One Madrid为ING集团支援UNICEF联合国儿童基金会的慈善活动而打造的网站，网站用动画的形式讲述了一个孩子的两种命运。

用户需要同时登陆PC端网站及手机端网页，将手机端与网页端通过验证码匹配后，即可观看短片。有趣的事，你可以通过翻转手机同时观看到这两个小故事。该网站的用意在于，你的每一次捐款可以改变失学儿童的命运。

有兴趣的朋友也可以直接登入网站感受一下：

体验了这些案例，想必对手机端与PC端互动的方式有了了解，那接下来更多的就是我们该如何去利用现有的技术来结合品牌的特色，呈现出更多的交互方式，最终达到传播品牌诉求的目的。

正如案例中所描述的手机端与PC网页端的状态，手机端由于体积小巧，灵活性高的特色，能够直接与我们产生交互的，多扮演控制端的角色，网页端则更多的是以内容呈现的载体角色存在。所以，在结合品牌特色的同时，我们更应该把握其不同的功能定位来做交互方式。

例如“果粒橙”，他们的品牌诉求之一，就是体现饮品中的果粒丰富，喝前摇一摇。那结合这样的特点，我们就可以在做互动站的同时，结合手机端做相应交互，类似摇一摇手机，网页端呈现丰富果粒的效果，来传递这一品牌诉求。

再例如“保时捷”跑车等品牌，为了传递跑车的声效及引擎体验，那我们也可以结合手机端，类似油门踏板等按钮，触摸，网页端结合时速表加速，声效互动等，都能提供更加丰富的交互体验。

诸如此类的案例设想，都是在互动网站的基础上给予参与者更多的用户体验，将品牌传播以“被动”传递的方式转为“主动”索取。当然，这也需要市场给予更多的空间。

html5多屏互动游戏,多屏互动 —— 手机端与PC端网页互动的现有尝试及设想相关推荐

手机端与pc端页面html5,浅谈pc和移动端的响应式的使用
身为一个前端攻城狮,是不是经常遇到各种各样的响应式问题?下面我们来说一下: 1.响应式跟自适应有什么区别? 有些人可能还不知道响应式跟自适应的区别,甚至认为他们是同一个东西,其实不是的. 自适应是最早 ...
fullpage 单屏高度超过屏幕高度，实现单屏内可以滚动并解决手机端单屏高度不正确的问题
fullpage 单屏高度超过屏幕高度,实现单屏内可以滚动并解决手机端单屏高度不正确的问题参考文章: (1)fullpage 单屏高度超过屏幕高度,实现单屏内可以滚动并解决手机端单屏高度不正确的问题 ...
PC端网页在手机端全屏展示改造
为了让PC端网页在手机端全屏展示,一般首先想到的是清除浏览器的默认设置边距. * {padding: 0;margin: 0; } 但是不建议使用以上写法,尤其是较大的网站,会极大的消耗资源,所以不建 ...
HTML5响应式手机模板：电商网站设计——房地产移动端网页模板(15个页面)
HTML5响应式手机模板:电商网站设计--房地产移动端网页模板(15个页面) HTML+CSS+JavaScript 手机模板wap 手机网站模板手机网页模板手机网站模板手机模板响应式手机网站 ...
html5页面设计时做多大的,pc端网页按什么尺寸设计
如果不做全屏,或者主区域没有全屏设置,可以固定中宽,比如bootstrap的container的固定宽度1170px.下面小编给大家介绍pc端网页按什么尺寸设计,一起来看看吧. pc端网页的尺寸设计规 ...
基于socket实现虚拟手柄使用手机控制电脑游戏（下）-手机端虚拟手柄
基于socket实现虚拟手柄使用手机控制电脑游戏(下)-手机端虚拟手柄这个是关于利用socket套接字实现手机控制电脑按键的一个实例,完成这个项目可以实现用手机控制狂野飙车等游戏,就是一个简易的手机 ...
html5多屏互动游戏,多屏互动与游戏功能_高清技术应用-中关村在线
多屏互动让你生活大不同多屏互动是一个非常有趣的有趣的功能,把手持终端(智能手机.平板电脑等)的视音频.图片等内容,通过机顶盒和WiFi传送到大屏幕电视上面,大屏幕播放手持终端上面的多媒体内容.比如, ...
互动游戏对战平台推荐：盘点很火的互动小游戏多人对战平台
虽然是个妹子,但我超有游戏天赋呦!还记得我和表哥在20年前经常在家里用世嘉.ps等主机联机玩幽游白书.魂斗罗的日子,那份美好变成了我们这代人童年最宝贵的记忆,不管是对战的互相嘲讽还是与好友一同通关的瞬 ...
windows截屏录屏 (D3d) 游戏黑屏解决思路
先随手记下来,以后补代码,整排版最近忽然想折腾点游戏辅助(w a i g u a..)自己玩玩最简单直接的思路就是获得游戏画面,然后判断,然后干一些事情了. 可是搜出来的几个windows截屏方法 ...

html5多屏互动游戏,多屏互动 —— 手机端与PC端网页互动的现有尝试及设想

html5多屏互动游戏,多屏互动 —— 手机端与PC端网页互动的现有尝试及设想相关推荐

最新文章

热门文章

html5多屏互动游戏,多屏互动 —— 手机端与PC端 网页互动的现有尝试及设想

html5多屏互动游戏,多屏互动 —— 手机端与PC端 网页互动的现有尝试及设想相关推荐

最新文章

热门文章

html5多屏互动游戏,多屏互动 —— 手机端与PC端网页互动的现有尝试及设想

html5多屏互动游戏,多屏互动 —— 手机端与PC端网页互动的现有尝试及设想相关推荐