對于網(wǎng)頁(yè)瀏覽者來(lái)說(shuō)，按鈕控件的幾種變化可以說(shuō)是再熟悉不過(guò)的一種機制了：一般使用鼠標瀏覽時(shí)容易感受到的有 Normal、Hover 以及 Archive 這三種效果，分別為按鈕平時(shí)的狀態(tài)、鼠標游標移到上方的效果、以及點(diǎn)擊按鈕時(shí)的效果。

　　而另外還有一個(gè)我們稱(chēng)為 Focus 的效果，Focus 主要是指使用鍵盤(pán)的 Tab 按鍵來(lái)「瞄準」網(wǎng)頁(yè)上的控件時(shí)、被瞄準的那一個(gè)控件所顯示的狀態(tài)。雖然現在鼠標已經(jīng)是操作電腦時(shí)的主要設備，但在某些情況下，例如填寫(xiě)表單時(shí)，讓使用者直接使用鍵盤(pán)的 Tab 來(lái)切換輸入欄位，比不斷的在鼠標與鍵盤(pán)之間來(lái)回操作要來(lái)得順暢多了。因此在注重使用者體驗的表單系統設計，都會(huì )特別注重輸入框的 Focus 效果：

　　網(wǎng)頁(yè)上常見(jiàn)的互動(dòng)效果：Hover

　　在網(wǎng)頁(yè)中，Hover 效果是常被應用的一種效果，除了可以有效的提供使用者「我現在鼠標準確地瞄準了這個(gè)按鈕」、以及「這可能是一個(gè)可以互動(dòng)的控件」的資訊以外，Hover 效果還常常被用來(lái)提供許多額外資訊的一種方式：例如在 Dribble 的瀏覽上我們平常看到的都是作品的圖片、而作品的名稱(chēng)以及描述等資訊則是設計在 Hover 的效果裡：

　　以及常見(jiàn)的提示說(shuō)明：當使用者不清楚按鈕的功能時(shí)、Hover 可以在不改變原始版面的情況下、提示使用者該按鈕的功能描述：

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

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

　　與桌上型電腦作業(yè)系統不同，觸控式螢幕設備由于操作上的特性，是不存在鼠標游標的，因此操作上是使用手指或觸控筆直接點(diǎn)擊感應面板、于是使用者可以執行的動(dòng)作不外乎：?jiǎn)螕簟㈦p擊、長(cháng)壓以及各種方向的滑動(dòng)(多指手勢屬于部分系統的特殊動(dòng)作、故不在此討論)。

　　例如 iOS 系統中對于 App 圖示的控制就設計成單擊啟動(dòng) App、長(cháng)壓則可以進(jìn)行刪除或移動(dòng)的操作：

　　另外一個(gè)常見(jiàn)的觸控式操作模式則是 iOS 系統中大家熟悉的下拉式重新整理功能，單指往下滑動(dòng)的手勢取代了傳統的 Refresh 按鈕：

　　因此在開(kāi)發(fā) App 的時(shí)候，設計師考慮到設備本身的特性、必須針對觸控系統的操作改變設計，例如 Plant Nanny 中即設計了必須長(cháng)壓 2 秒鐘才能完成任務(wù)的按鈕：一方面避免了誤觸，一方面更可以在這 2 秒中配合音效、營(yíng)造出「喝水」的感覺(jué)。

　　在觸控設備中，該怎麼達到 Hover 的效果呢?

　　既然在觸控設備上具有完全不同的操作特性，而使用者使用觸控設備瀏覽資訊的比例越來(lái)越增加，許多網(wǎng)站也不得不考慮如何應對觸控設備瀏覽的需求加以調整：

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

　　例如 Behance 的網(wǎng)頁(yè)版以及手機 App 即展示了不同的版面配置

　　點(diǎn)擊一次觸發(fā) Hover 的效果、再點(diǎn)一次即觸發(fā)點(diǎn)擊的效果

　　例如 Grids 這個(gè)網(wǎng)站亦使用了鼠標 Hover 上去才會(huì )顯示標題與資訊的設計。而當使用觸控設備瀏覽時(shí)，機制則自動(dòng)變更為按次顯示 Hover 效果，再按第二次則真正進(jìn)行點(diǎn)擊的動(dòng)作：

　　另一個(gè)類(lèi)似的作法是 App Store 裡面的購買(mǎi)按鈕，以?xún)呻A段按鈕來(lái)提示使用者「更多的額外資訊」，例如原本是顯示 App 的價(jià)格，當使用者點(diǎn)擊一次后，則變更按鈕的外觀(guān)，描述變更成再度按下后會(huì )真正執行的動(dòng)作(購買(mǎi)并下載安裝)。當然它也同時(shí)具備了防止使用者不小心誤觸而導致購買(mǎi)了 App 的兩階段按鈕設計。

　　不知道是不是為了設計上的一致性，雖然桌面上對于按鈕誤觸的情形較不明顯，但其實(shí) OSX 桌面版的 App Stroe 也設計了這個(gè)兩階段的按鈕，而 iTunes 11 卻沒(méi)有這麼做，也許在接下來(lái)的版本會(huì )趨于統一吧。

　　使用長(cháng)壓并滑動(dòng)的方式來(lái)模擬鼠標游標經(jīng)過(guò)的狀況

　　但這種方法的學(xué)習成本較高：一般觸控式螢幕使用者并不熟悉此種 UI 操作方式，況且在瀏覽全版面的情況下，讓使用者不斷壓著(zhù)觸控螢幕并且進(jìn)行全螢幕的滑動(dòng)是相當辛苦的一件事情、手指頭亦容易擋住視線(xiàn)，反而遮蔽到想顯示給使用者的資訊。

　　所以此種長(cháng)壓、滑動(dòng)的操作方式大多使用在游戲中、并且多是使用在限定某一區域的控制(例如 Angry Bird、Fruit Ninja 等體感游戲，或是如 Minigore 這類(lèi)模擬傳統搖桿的游戲等等。

　　提供特殊功能來(lái)模擬鼠標的效果

　　雖然觸控設備沒(méi)有鼠標游標，但其實(shí)還是可以利用筆記型電腦模擬觸控板的方式、來(lái)模擬出有鼠標游標的效果，例如 Puffin 這個(gè)瀏覽器即提供了「虛擬觸控版」的功能、來(lái)模擬鼠標游標的存在。但依然有缺點(diǎn)：虛擬觸控版的設計嚴重影響觸控設備體驗上的直覺(jué)性以及流暢感。

　　不同瀏覽裝置上的瀏覽方式不同，在設計時(shí)自然必須將各種狀況考慮進(jìn)去。如此簡(jiǎn)單一個(gè)網(wǎng)頁(yè)上的 Hover 效果，在觸控裝置上時(shí)是要怎麼安排呢?是改變排版方式、讓 Hover 的資訊直接顯示出來(lái)嗎?採用兩段式點(diǎn)擊是否會(huì )影響使用者的瀏覽體驗?抑或是其實(shí) Hover 的顯示資訊根本一點(diǎn)也不重要，那麼直接捨棄掉，是否會(huì )更好?

　　并可以適用所有設計的解決方式并不存在，大家在設計時(shí)還是得根據自己產(chǎn)品的特性、為產(chǎn)品選擇一個(gè)適當的方案來(lái)進(jìn)行，「觸控設備不一定會(huì )改變世界，但改變了某些設計」。

http://ezekroy.com/jianzhanzhishi/7889.html 深圳微信營(yíng)銷(xiāo)中的移動(dòng)互聯(lián)網(wǎng)設計