對於行動上網人口節節高升的趨勢，許多網站也推出了行動版網站，或是利用 Responsive Web Design （自適應網頁設計）來增進網站在行動裝置上的體驗。但如何有效區別觸碰（touch）與點擊（click）的不同之處呢？
在 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 去控制該用點擊還是觸碰事件了喔。
參考文獻
[1] Mozilla Style Guide.
[2] Images via Camilo, cc license.
本文獲Desiring Clicks授權轉載，原文連結在此
Desiring Clicks裡面包含了行為心理學、視覺心理學、認知心理學、認知神經學、介面設計、資訊架構學、使用性分析與設計等等不同領域的知識。介紹人機互動的領域，藉由表達人與電腦之間的關係，讓我們能更進一步的設計更容易使用、更貼近人性、甚至是更智慧化的電腦設備。
Desiring Clicks官網、粉絲團
留言列表
留言列表
