瞬间的细节:触摸与点击的不同

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

对于移动上网人口节节高升的趋势,许多网站也推出了移动版网站,或是利用 Responsive Web Design (自适应网页设计)来增进网站在移动设备上的体验。在 2013 年的今天,网页开发者利用 CSS media query 在不同尺寸来达到不同的排版已经是基本工,但是关于『自适应网页设计』还有更多的细节等着设计师与开发者去改善,例如利用 Lettering.js 让字体大小也能随着设备大小而变动,或是利用 Retina.js 让高像素密度(ppi)较高的移动设备,可以欣赏到高分辨率的图片。

300 毫秒时间差

这次要提到的是网页在移动设备上触摸(touch)与点击(click)的不同之处,在 W3C 草案中 touch 共有 touchstart、touchend、touchmove、touchcancel,在 Goolge IO 2013 中 Mobile HTML : The Future of Your Sites 这个议程中,从 22 分 10 秒的地方开始,有针对 touchstart、touchend、touchmove 这三个事件做了一个 Demo,同时也演示了 touchstart 与 click 事件(event)之间有 300 毫秒(ms)的差异。

300 毫秒的时间差,看起来很短,但是却会让使用者一直处在『到底按到了没有』的疑问之中。因为在移动设备中,我们不仅有点击(click)的事件,我们还有点击两下(double click)放大、捲动(scroll)等指令,300 毫秒延迟的设定系为了侦测其他事件而存在的。

▲ 一个往下捲动的动作,里面也包含了触摸事件

▲ 在 Google IO 的演示当中,touchend 有 60 毫秒、click 有 300 毫秒的时间差

要知道这 300 毫秒的影响有多大,我们直接拿起手机,进入台湾最多人设为首页的 Yahoo 奇摩 移动版网站。在浏览网站时,因为在点击超连结时也需要等待一个有点久的时间,所以使用者不容易发现 300 毫秒的时间差,不过今天如果是一个选单按钮呢?

我们点击左上角选单按钮,感受一下选单打开变成右边的样子。嗯~似乎感受到有些延迟,虽然有没办法慢慢去挖出程式码去证明这个按钮是点击事件,不过应该八九不离十了。不过并不是 Yahoo 里面所有按钮都是点击事件,我们点击新闻分类,切换到该页面去。

再点击一次左上角选单按钮,咦~是不是感觉变快了,这是因为该按钮的事件应该是用 touchend 的事件去做触发,我们来做个小实验,我们像下图一样手指的起点从选单按钮开始,然后再萤幕上乱画一通,最后再其他地方放开,选单一样会打开,这个行为就可以确定是使用了 touchend 事件。使用 touch 事件在移动设备上是不是有更好的体验了呢!

点击下去的那瞬间的细节

避免 300 毫秒的时间差,并没有解决所有的问题,在以往的网页设计上,我们可能只会去处理到 hover 的效果,不过在触控设备上,hover 的效果却没有办法好好发挥,我们需要借助 touchstart 事件来做出点击的效果。在 Firefox style guide 也订出按钮需要有 閒置(idle)、下压(press)、关闭(disabled)几种状态。

在先前 Yahoo 的案例里,虽然有 300 毫秒的延迟,但是我们却没有『到底有没有点到』的窘境,仔细观察一下,就会发现在点击选单按钮时,在 touchstart 事件时皆有不同的效果,因此我们才会知道,原来我们有点击到,然后再感受到跳出选单的时间有延迟。

▲ Yahoo 移动版网站中,选单按钮都有点击瞬间的视觉效果

自适应网页实作

不过当网页里面使用触摸事件时,用鼠标点击想当然是没有效果,但是如果把触摸与点击事件同时用上时,在移动设备上又会造成重复的点击。在这边可以利用 Modernizr 在网页中加载 modernizr.js,当网页开启后开启浏览器的开发者工具,我们发现在 html 标签里,增加了好多个 class 其中 no-touch,就表示这个设备不支持触摸,如果支持触摸就有 touch 这个 class。

▲ html 标签中有 no-touch 这个 class 表示该设备不支持触控

▲ html 标签中有 touch 这个 class 表示该设备支持触控

这样一来我们就可以容易的判断设备是否支持触摸,在利用 javascript 去控制该用点击还是触摸事件了喔。

via:盒子UI

您的赞赏,是对我创作的最大鼓励。

评论( 0

登录后参与评论
加载中