相關文章

61d053383f02d32095da83761f477bb9 對於行動上網人口節節高升的趨勢,許多網站也推出了行動版網站,或是利用 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官網粉絲團

使用 Facebook 留言

發表回應

謹慎發言,尊重彼此。按此展開留言規則