《瞬间的细节：触摸与点击的不同》由会员分享，可在线阅读，更多相关《瞬间的细节：触摸与点击的不同（7页珍藏版）》请在金锄头文库上搜索。
1、瞬间的细节：触摸与点击的不同对于移动上网人口节节高升的趋势，许多网站也推出了移动版网站，或是利用 Responsive WebDesign （自适应网页设计）来增进网站在移动设备上的体验。在 2013 年的今天，网页开发者利用CSS media query 在不同尺寸来达到不同的排版已经是基本工，但是关于自适应网页设计还有更多的细节等着设计师与开发者去改善，例如利用 Lettering.js 让字体大小也能随着设备大小而变动，或是利用 Retina.js 让高像素密度（ppi）较高的移动设备，可以欣赏到高分辨率的图片。300 毫秒时间差这次要提到的是网页在移动设备上触摸（touch）与点击（c
2、lick）的不同之处，在 W3C 草案中touch 共有 touchstart、touchend、touchmove、touchcancel，在 Goolge IO 2013 中 MobileHTML : The Future of Your Sites 这个议程中，从 22 分 10 秒的地方开始，有针对 touchstart、touchend、touchmove 这三个事件做了一个 Demo，同时也演示了 touchstart 与 click 事件（event）之间有 300 毫秒（ms）的差异。300 毫秒的时间差，看起来很短，但是却会让使用者一直处在到底按到了没有的疑问之中。因为在移动
3、设备中，我们不仅有点击（click）的事件，我们还有点击两下（double click）放大、捲动（scroll）等指令，300 毫秒延迟的设定系为了侦测其他事件而存在的。 一个往下捲动的动作，里面也包含了触摸事件 在 Google IO 的演示当中，touchend 有 60 毫秒、click 有 300 毫秒的时间差要知道这 300 毫秒的影响有多大，我们直接拿起手机，进入台湾最多人设为首页的 Yahoo 奇摩 移动版网站。在浏览网站时，因为在点击超连结时也需要等待一个有点久的时间，所以使用者不容易发现 300 毫秒的时间差，不过今天如果是一个选单按钮呢？我们点击左上角选单按钮，感受一下选
4、单打开变成右边的样子。嗯似乎感受到有些延迟，虽然有没办法慢慢去挖出程式码去证明这个按钮是点击事件，不过应该八九不离十了。不过并不是 Yahoo里面所有按钮都是点击事件，我们点击新闻分类，切换到该页面去。再点击一次左上角选单按钮，咦是不是感觉变快了，这是因为该按钮的事件应该是用 touchend的事件去做触发，我们来做个小实验，我们像下图一样手指的起点从选单按钮开始，然后再萤幕上乱画一通，最后再其他地方放开，选单一样会打开，这个行为就可以确定是使用了 touchend 事件。使用 touch 事件在移动设备上是不是有更好的体验了呢！点击下去的那瞬间的细节避免 300 毫秒的时间差，并没有解决所有
5、的问题，在以往的网页设计上，我们可能只会去处理到hover 的效果，不过在触控设备上，hover 的效果却没有办法好好发挥，我们需要借助 touchstart事件来做出点击的效果。在 Firefox style guide 也订出按钮需要有 閒置（idle）、下压（press）、关闭（disabled）几种状态。在先前 Yahoo 的案例里，虽然有 300 毫秒的延迟，但是我们却没有到底有没有点到的窘境，仔在先前 Yahoo 的案例里，虽然有 300 毫秒的延迟，但是我们却没有到底有没有点到的窘境，仔细观察一下，就会发现在点击选单按钮时，在 touchstart 事件时皆有不同的效果，因此我们
6、才会知道，原来我们有点击到，然后再感受到跳出选单的时间有延迟。 Yahoo 移动版网站中，选单按钮都有点击瞬间的视觉效果自适应网页实作不过当网页里面使用触摸事件时，用鼠标点击想当然是没有效果，但是如果把触摸与点击事件同时用上时，在移动设备上又会造成重复的点击。在这边可以利用 Modernizr 在网页中加载modernizr.js，当网页开启后开启浏览器的开发者工具，我们发现在 html 标签里，增加了好多个class 其中 no-touch，就表示这个设备不支持触摸，如果支持触摸就有 touch 这个 class。 html 标签中有 no-touch 这个 class 表示该设备不支持触控 html 标签中有 touch 这个 class 表示该设备支持触控这样一来我们就可以容易的判断设备是否支持触摸，在利用 javascript 去控制该用点击还是触摸事件了喔。via：盒子UI人人都是产品经理（）中国最大最活跃的产品经理学习、交流、分享平台
