您的位置:首页技术文章
文章详情页

详细了解Win8.1系统中IE11的触控体验

【字号: 日期:2022-12-01 11:56:39浏览:8作者:猪猪

解决触控实现悬停操作

详细了解Win8.1系统中IE11的触控体验

随着触控技术和Windows 8的带动下,如今越来越多的PC开始配备触控屏,给传统PC领域带来了全新的交互体验触控操作。但是目前有个略显尴尬的问题:除了专门针对触控操作优 化的Windows 8应用外,大量传统操作都是基于键盘和鼠标的,比如说我们最常进行的上网。现在的网站几乎都只考虑了鼠标和键盘操作,这就导致在使用触控方式访问网站时会 遇到操作障碍。从网站入手,重新制作兼容触控操作的网页是最彻底的解决方法,但实现难度比较大,因为网站数量是如此的多。另一个解决途径就是从浏览器入 手,通过改进浏览器来解决上网过程中的触控操作问题,这种方式相对容易实现,只要浏览器开发商下功夫即可。

作为即将随Windows 8.1一同发布的Internet Explorer 11,进一步增强了对触控操作的支持,在访问网页时更加得心应手。 那么IE11究竟做了哪些改进呢?下面就一起来了解一下吧。。。

模拟鼠标悬停操作

目前有很多网站都有悬停展开的功能,比如各大电商网站,在商品分类区块基本都采用这种形式。这样商品分类就不会显得太乱太臃肿,用户也容易找到自己需要的商品。

详细了解Win8.1系统中IE11的触控体验

最常见的网页悬停展开操作

但这种常见的悬停操作,想通过触控操作来实现会遭遇识别问题。鼠标因为有指针的存在,网页只要检测到指针即可实现悬停展开的操作,而触控操作并没有指针的 存在,直接把手指放上去的话,网页只会识别为点击。也许有人会想到按住的方式,但现实情况是:按住操作会被识别为打开右键上下文关联菜 单,而不是悬停。

IE11针对这个问题做了改进,让按住也可以实现悬停操作,同时又保留了原有按住操作的打开右键菜单功能。在IE11中访问上述网页时,将手指 按住即可展开二级菜单。同时,如果按住的位置本身含有可点击操作(比如含超链接),那么在屏幕下方会额外显示右键上下文菜单命令栏(新窗 口打开、复制链接等命令)。

通过触控操作在几个不同网站上操作悬停菜单

其他触控操作改进

改进链接突出显示

当网页上有较多链接存在的时候,通过触控打开某个链接需要防止点错。如果在点击过程中有个较明显的反馈提示,帮助用户实时确认所点击链接的话,触控操作无疑会更加准确。

IE11现在就加入了这样一个反馈提示,当用户通过触控点击链接的时候,该链接文字周围会短暂显示灰色背景,突出显示用户所点击的对象。

详细了解Win8.1系统中IE11的触控体验

链接突出显示效果对比

左右轻扫实现后退和前进操作

在浏览网页的过程中,IE11(包括IE10)都会主动隐藏所有功能栏从而以全屏方式显示网页,这种情况下用户经常会用到的后退操作就需要花费额外的 步骤,先呼出地址栏,再点击后退按钮。经常使用手机上网的应该知道,很多手机浏览器都支持手势操作实现后退和前进,Windows 8也不例外。从IE10起,用户在浏览网页的时候直接手指在屏幕上向右扫动即可返回到上一个页面,向左扫动则是前进。

详细了解Win8.1系统中IE11的触控体验

左右扫动手势实现前进和后退

IE11继承了这一手势操作,并进一步改善了用户体验和操作效率。当用户在不同页面之间切换时,IE11会将前一个页面挂起并缓存到内存中。一旦用户轻扫 回前一个页面时,该页面会从内存中恢复,而不是重新加载,这种方式带来的结果就是前一个页面瞬间加载完成。此外,在后退或前进的时时候,IE11会在加载 页面时向用户显示一张网页截图,以便用户在到达页面时能够快速找到所需的内容。

触控实现HTML5拖放操作

也许HTML5距离大规模应用还有不少路要走,但它毕竟是未来的趋势。IE11当然是要支持HTML5的,而且它还是支持通过触控实现HTML5拖放功能的首个浏览器。在IE11里,用户只需长按即可实现。

在微软的Magnetic Poetry测试演示里,IE10可以通过鼠标来实现HTML5拖放操作,现在我们可以用IE11打开这个演示,来体验触控实现HTML5拖放操作。

详细了解Win8.1系统中IE11的触控体验

Magnetic Poetry演示页面

访问:Magnetic Poetry

改进可实现指针事件的触控API

指针事件是由微软及其他浏览器厂商和W3C合作制定的一套标准,这个标准基于IE10引入的带有供应商前缀的API。这个API使网站能够支持包括鼠标、 手写笔、多点触控等不同触控设备。IE11会引入更新后的MSPointer API,最终正式版将支持不带前缀的指针事件。

备注:文中部分技术说明文字截图以及视频引自微软官方博客。

标签: Windows系统 win8
相关文章: