起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識瞬間的細節：觸摸與點擊的不同
對于移動上網人口節節高升的趨勢，許多網站也推出了移動版網站，或是利用 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
- 目前還沒評論，等你發揮！
