對於網頁瀏覽者來說,按鈕控制元件的幾種變化可以說是再熟悉不過的一種機制了:一般使用滑鼠瀏覽時容易感受到的有 Normal 、 Hover 以及 Archive 這三種效果,分別為按鈕平時的狀態、滑鼠遊標移到上方的效果、以及點選按鈕時的效果。

  而另外還有一個我們稱為 Focus 的效果,Focus 主要是指使用鍵盤的 Tab 按鍵來「瞄準」網頁上的控制元件時、被瞄準的那一個控制元件所顯示的狀態。雖然現在滑鼠已經是操作電腦時的主要裝置,但在某些情況下,例如填寫表單時,讓多使用者直接使用鍵盤的 Tab 來切換輸入欄位,比不斷的在滑鼠與鍵盤之間來回操作要來得順暢多了。因此在注重多使用者體驗的表單系統設計,都會特別注重輸入框的 Focus 效果:

  網頁上常見的互動效果:Hover

  在網頁中,Hover 效果是常被應用的一種效果,除了可以有效的提供多使用者「我現在滑鼠準確地瞄準了這個按鈕」、以及「這可能是一個可以互動的控制元件」的資訊以外,Hover 效果還常常被用來提供許多額外資訊的一種方式:例如在 Dribble 的瀏覽上我們平常看到的都是作品的圖片、而作品的名稱以及描述等資訊則是設計在 Hover 的效果裡:

  以及常見的提示說明:當多使用者不清楚按鈕的功能時、 Hover 可以在不改變原始版面的情況下、提示多使用者該按鈕的功能描述:

  合理的安排 Hover 可以讓版面的設計更為簡潔、許多容易造成版面雜亂的文字與描述都可以暫時地消失在版面上、卻又可以在適合的時間提供給多使用者必要的資訊。

  然而在觸控式螢幕中,Hover 卻變得寸步難行

  與桌上型電腦作業系統不同,觸控式螢幕裝置由於操作上的特性,是不存在滑鼠遊標的,因此操作上是使用手指或觸控筆直接點選感應面板、於是多使用者可以執行的動作不外乎:單擊、雙擊、長壓以及各種方向的滑動 (多指手勢屬於部分系統的特殊動作、故不在此討論) 。

  例如 iOS 系統中對於 WordPress APP 圖示的控制就設計成單擊啟動 WordPress APP 、長壓則可以進行刪除或移動的操作:

  另外一個常見的觸控式操作模式則是 iOS 系統中大家熟悉的下拉式重新整理功能,單指往下滑動的手勢取代了傳統的 Refresh 按鈕:

  因此在開發 WordPress APP 的時候,設計師考慮到裝置本身的特性、必須針對觸控系統的操作改變設計,例如 Plant Nanny 中即設計了必須長壓 2 秒鐘才能完成任務的按鈕:一方面避免了誤觸,一方面更可以在這 2 秒中配合音效、營造出「喝水」的感覺。

  在觸控裝置中,該怎麼達到 Hover 的效果呢?

  既然在觸控裝置上具有完全不同的操作特性,而多使用者使用觸控裝置瀏覽資訊的比例越來越增加,許多網站也不得不考慮如何應對觸控裝置瀏覽的需求加以調整:

  放棄 Hover 效果、利用偵測瀏覽端的裝置給予不同的版面排列方式

  例如 Behance 的網頁版以及手機 WordPress APP 即展示了不同的版面配置

  點選一次觸發 Hover 的效果、再點一次即觸發點選的效果

  例如 Grids 這個網站亦使用了滑鼠 Hover 上去才會顯示標題與資訊的設計。而當使用觸控裝置瀏覽時,機制則自動變更為按次顯示 Hover 效果,再按第二次則真正進行點選的動作:

  另一個類似的作法是 WordPress APP Store 裡面的購買按鈕,以兩階段按鈕來提示多使用者「更多的額外資訊」,例如原本是顯示 WordPress APP 的價格,當多使用者點選一次後,則變更按鈕的外觀,描述變更成再度按下後會真正執行的動作 (購買並下載安裝) 。當然它也同時具備了防止多使用者不小心誤觸而導致購買了 WordPress APP 的兩階段按鈕設計。

  不知道是不是為了設計上的一致性,雖然桌面上對於按鈕誤觸的情形較不明顯,但其實 OSX 桌面版的 WordPress APP Stroe 也設計了這個兩階段的按鈕,而 iTunes 11 卻沒有這麼做,也許在接下來的版本會趨於統一吧。

  使用長壓並滑動的方式來模擬滑鼠遊標經過的狀況

  但這種方法的學習成本較高:一般觸控式螢幕多使用者並不熟悉此種 UI 操作方式,況且在瀏覽全版面的情況下,讓多使用者不斷壓著觸控螢幕並且進行全螢幕的滑動是相當辛苦的一件事情、手指頭亦容易擋住視線,反而遮蔽到想顯示給多使用者的資訊。

  所以此種長壓、滑動的操作方式大多使用在遊戲中、並且多是使用在限定某一區域的控制 (例如 Angry Bird 、 Fruit Ninja 等體感遊戲,或是如 Minigore 這類模擬傳統搖桿的遊戲等等。

  提供特殊功能來模擬滑鼠的效果

  雖然觸控裝置沒有滑鼠遊標,但其實還是可以利用筆記型電腦模擬觸控板的方式、來模擬出有滑鼠遊標的效果,例如 Puffin 這個瀏覽器即提供了「虛擬觸控版」的功能、來模擬滑鼠遊標的存在。但依然有缺點:虛擬觸控版的設計嚴重影響觸控裝置體驗上的直覺性以及流暢感。

  不同瀏覽裝置上的瀏覽方式不同,在設計時自然必須將各種狀況考慮進去。如此簡單一個網頁上的 Hover 效果,在觸控裝置上時是要怎麼安排呢? 是改變排版方式、讓 Hover 的資訊直接顯示出來嗎? 採用兩段式點選是否會影響多使用者的瀏覽體驗? 抑或是其實 Hover 的顯示資訊根本一點也不重要,那麼直接捨棄掉,是否會更好?

  並可以適用所有設計的解決方式並不存在,大家在設計時還是得根據自己產品的特性、為產品選擇一個適當的方案來進行,「觸控裝置不一定會改變世界,但改變了某些設計」。