您的位置:中华显示网 > 行业追踪 > 市场行情 >

自然流畅:感受IE11中的触控体验

编辑:admin 2014-06-25 10:00:22 浏览:727  来源:中华液晶网

  在触控技术和Windows 8的带动下,越来越多的PC开始配备触控屏,给传统PC领域带来了全新的交互体验——触控操作。然而,除了专门针对触控操作优化的Windows 8应用外,大量传统操作都是基于键盘和鼠标,比如我们最常进行的上网。现在的网站几乎都只考虑了鼠标和键盘操作,这就导致在使用触控方式访问网站时会遇到操作障碍。从网站入手,重新制作兼容触控操作的网页是最彻底的解决方法,但实现难度比较大,因为网站数量是如此的多,而另一个解决方案则是从浏览器入手,通过改进浏览器来解决上网过程中的触控操作问题。作为目前全球市场占有率最高的浏览器,IE11针对触控操作进行了进一步优化,为其他浏览器厂商做出了很好的示范

  在Modern风格下IE11的触控体验

在Modern风格界面下,微软针对IE11浏览器做了很多触控相关的优化。针对最常见的“悬停展开”操作,IE11设计了悬停菜单,和现在一些鼠标悬停显示下级菜单的功能类似,当访问网页时,用户只需将手指按住菜单即可自动打开网站的下级菜单。同时, IE11上还改进了页面前进和后退的方式。从IE10起,用户在浏览网页时可以直接通过手指在屏幕上向左/右扫动完成前进或后退的操作。IE11继承了这一手势操作,并进一步改善了用户体验和操作效率。当用户在不同页面之间切换时,通过预渲染技术,IE会将前一个页面挂起并缓存到内存中。一旦用户轻扫回前一个页面时,该页面会从内存中恢复,而不是重新加载,使前一个页面瞬间加载完成。此外,在后退或前进时,IE11会在加载页面时向用户显示一张网页截图,以便用户在到达页面时能够快速找到所需内容

  而作为首个支持HTML5拖放和触摸的浏览器,IE11还允许用户直接在HTML5网页上使用手指拖动页面中的素材

  IE推动触控类休闲游戏的发展

除了浏览网页,针对触控进行优化的IE浏览器也成为了网页游戏玩家们的福音。有了触控的支持,用户可以抛弃键盘和鼠标,享受更加自然流畅的游戏体验。

  作为去年的精品游戏之一,美轮美奂的视觉风格令Contre Jour独树一帜。Contre Jour 由 Maksym (Max) Hryniv推出,首先在 iOS 上大获追捧,因其创新的游戏设置、奇幻的艺术风格以及动人的背景音乐而享誉世界。由于需要多点触控的支持,在很长一段时间内用户只能通过应用端进行体验。不过在支持多点触控体验的IE10推出之后,Contre Jour被开发人员从客户端被搬到了浏览器上,而这个游戏也被认为是IE浏览器与触控操作的最佳结合

  通过与Max以及网站开发机构Clarity Consulting的合作,IE仅使用HTML5和JavaScript便将Contre Jour导入了浏览器。将Contre Jour成功导入网页并实现触控体验的成功之举,拓展了我们以往所认知的可能性极限,它证明了浏览器作为一种可行平台,已经为促进触控网页休闲游戏的发展做好了准备。



  
多点触控支持的实施是该游戏中为数不多的使用到特定于浏览器的代码的地方之一。得益于IE10 对触控事件监听器的内置支持,迁移过程中对多点触控的开发并不复杂。Contre Jour团队表示:“IE对多点触控的良好支持,对于开发人员而言是一件好事,你能够简单、高效的完成对于多点触控的支持。因为这使得我们可以集中精力应对项目中那些更具有挑战性的部分。”

以下是与触控事件监听器相关的代码示例:

function inferInputModel() {
if (window.navigator.msPointerEnabled) {
return 'pointer';
} else if (window.ontouchstart !== undefined) {
return 'touch';
} else {
return 'unknown';
}
}
switch (inferInputModel()) {
case 'pointer':
element.addEventListener('MSPointerDown', msStart);
element.addEventListener('MSPointerOut', msStop);
document.addEventListener('MSPointerUp', msStop);
document.addEventListener('MSPointerCancel', msStop);
document.addEventListener('MSHoldVisual', preventDefault);
break;
case 'touch':
element.addEventListener('touchstart', touchStart);
document.addEventListener('touchend', touchStop);
element.addEventListener('mousedown', mouseStart);
element.addEventListener('mouseout', mouseStop);
document.addEventListener('mouseup', mouseStop);
break;
default:
element.addEventListener('mousedown', mouseStart);
element.addEventListener('mouseout', mouseStop);
document.addEventListener('mouseup', mouseStop);
break;
}

从编码的角度看,在迁移的过程中Contre Jour团队花费了一些时间编写主触控模块,该模块包含特定于浏览器的触控支持和触控事件处理。该模块跟踪触控事件(无论何种浏览器平台)并将其送入游戏引擎进行处理。此外,游戏元素可“订阅”特定的触控实例以通过触控的“开始触控”来接收通知,并且移动和结束触控事件生命周期。这使得游戏中场景等元素能够轻松地跨浏览器平台对触控事件作出响应

  Contre Jour其实可以看作是移动端休闲游戏迁移到网页上的典型例子。在迁移的过程中能够看出,对于开发者来说,利用IE的触控特性,至少在触控部分,并没为开发者造成多大的麻烦。但达到的效果显而易见,利用HTML5、JavaScript,再结合IE对于触控的支持,现在用户就能够直接在IE浏览器上玩Contre Jour,而在过去,这可不是一件容易的事

  无处不在的触控

  除了Contre Jour,IE浏览器还为触控的应用提供了大量的开发实例。由微软IE团队与育碧共同开发的网页版《刺客信条:海盗传奇》就很好地诠释了IE11对于触控的支持。在全3D的网页体验中,用户可以通过触控操作控制海盗船的舵轮,调整海盗船的方向,让整个游戏体验更加逼真和流畅。同时,游戏会自动检测玩家的设备种类及输入方式进行调整以适应屏幕,达到最佳的显示效果

  随着触控设备市场渗透率的不断提升,开发者们在进行网站开发的时候就需要考虑到对触控的支持,所有的开发者都希望能够创造一个交互、设计与内容完美结合的网站,为用户带来更好的数字内容呈现方式。而这其中对触控体验的支持就尤为重要。IE浏览器对于触控的优化,给开发者们提供了一个良好的平台,帮助他们为用户创造更加丰富和流畅的使用体验。

标签:

关注我们

公众号:china_tp

微信名称:亚威资讯

显示行业顶级新媒体

扫一扫即可关注我们