觸控設(shè)備中Hover效果的互動(dòng)設(shè)計(jì)

時(shí)間：2022-05-29 13:09:01 | 來源：網(wǎng)絡(luò)營(yíng)銷

時(shí)間：2022-05-29 13:09:01 來源：網(wǎng)絡(luò)營(yíng)銷

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

而另外還有一個(gè)我們稱為Focus的效果，F(xiàn)ocus主要是指使用鍵盤的Tab按鍵來“瞄準(zhǔn)”網(wǎng)頁(yè)上的控件時(shí)、被瞄準(zhǔn)的那一個(gè)控件所顯示的狀態(tài)。

雖然現(xiàn)在鼠標(biāo)已經(jīng)是操作電腦時(shí)的主要設(shè)備，但在某些情況下，例如填寫表單時(shí)，讓使用者直接使用鍵盤的Tab來切換輸入欄位，比不斷的在鼠標(biāo)與鍵盤之間來回操作要來得順暢多了，因此在注重使用者體驗(yàn)的表單系統(tǒng)設(shè)計(jì)，都會(huì)特別注重輸入框的Focus效果：

1、網(wǎng)頁(yè)上最常見的互動(dòng)效果：Hover

在網(wǎng)頁(yè)中，Hover效果是常被應(yīng)用的一種效果，除了可以有效的提供使用者“我現(xiàn)在鼠標(biāo)準(zhǔn)確地瞄準(zhǔn)了這個(gè)按鈕”、以及“這可能是一個(gè)可以互動(dòng)的控件”的資訊以外，Hover效果還常常被用來提供許多額外資訊的一種方式。

例如：在Dribble的瀏覽上我們平?？吹降亩际亲髌返膱D片、而作品的名稱以及描述等資訊則是設(shè)計(jì)在Hover的效果：

以及最常見的提示說明：當(dāng)使用者不清楚按鈕的功能時(shí)、Hover可以在不改變?cè)及婷娴那闆r下、提示使用者該按鈕的功能描述：

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

2、在觸控式螢?zāi)恢?，Hover卻變得寸步難行

與桌上型電腦作業(yè)系統(tǒng)不同，觸控式螢?zāi)辉O(shè)備由于操作上的特性，是不存在鼠標(biāo)游標(biāo)的，因此操作上是使用手指或觸控筆直接點(diǎn)擊感應(yīng)面板、于是使用者可以執(zhí)行的動(dòng)作不外乎：?jiǎn)螕?、雙擊、長(zhǎng)壓以及各種方向的滑動(dòng)(多指手勢(shì)屬于部分系統(tǒng)的特殊動(dòng)作、故不在此討論)。

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

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

因此，在開發(fā)App的時(shí)候，億企邦建議設(shè)計(jì)師應(yīng)考慮到設(shè)備本身的特性、必須針對(duì)觸控系統(tǒng)的操作改變?cè)O(shè)計(jì)，例如：Plant Nanny中即設(shè)計(jì)了必須長(zhǎng)壓2秒鐘才能完成任務(wù)的按鈕：一方面避免了誤觸，一方面更可以在這2秒中配合音效、營(yíng)造出“喝水”的感覺。

3、在觸控設(shè)備中，該怎么達(dá)到Hover的效果

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

放棄Hover效果、利用偵測(cè)瀏覽端的設(shè)備給予不同的版面排列方式，例如：Behance的網(wǎng)頁(yè)版以及手機(jī)App即展示了不同的版面配置：

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

另一個(gè)類似的作法是App Store彥面的購(gòu)買按鈕，以兩階段按鈕來提示使用者“更多的額外資訊”，例如原本是顯示App的價(jià)格，當(dāng)使用者點(diǎn)擊一次后，則變更按鈕的外觀，描述變更成再度按下后會(huì)真正執(zhí)行的動(dòng)作（購(gòu)買并下載安裝）。

當(dāng)然，它也同時(shí)具備了防止使用者不小心誤觸而導(dǎo)致購(gòu)買了App的兩階段按鈕設(shè)計(jì)。

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

4、使用長(zhǎng)壓并滑動(dòng)的方式來模擬鼠標(biāo)游標(biāo)經(jīng)過的狀況

還有一種方法是：使用長(zhǎng)壓并滑動(dòng)的方式來模擬鼠標(biāo)游標(biāo)經(jīng)過的狀況，但這種方法的學(xué)習(xí)成本較高，一般觸控式螢?zāi)皇褂谜卟⒉皇煜ご朔NUI操作方式，況且在瀏覽全版面的情況下，讓使用者不斷壓著觸控螢?zāi)徊⑶疫M(jìn)行全螢?zāi)坏幕瑒?dòng)是相當(dāng)辛苦的一件事情、手指頭亦容易擋住視線，反而遮蔽到想顯示給使用者的資訊。

所以，此種長(zhǎng)壓、滑動(dòng)的操作方式大多使用在游戲中、并且多是使用在限定某一區(qū)域的控制（具體可查看億企邦《基于滑動(dòng)維度的交互設(shè)計(jì)變化》的相關(guān)介紹）。

例如：Angry Bird、Fruit Ninja 等體感游戲，或是如Minigore這類模擬傳統(tǒng)搖桿的游戲等等。

5、提供特殊功能來模擬鼠標(biāo)的效果

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

雖然觸控設(shè)備沒有鼠標(biāo)游標(biāo)，但其實(shí)還是可以利用筆記型電腦模擬觸控板的方式、來模擬出有鼠標(biāo)游標(biāo)的效果。

例如：Puffin這個(gè)瀏覽器即提供了“虛擬觸控版”的功能、來模擬鼠標(biāo)游標(biāo)的存在。

但依然有缺點(diǎn)：虛擬觸控版的設(shè)計(jì)嚴(yán)重影響觸控設(shè)備體驗(yàn)上的直覺性以及流暢感。

億企邦點(diǎn)評(píng)：

完美并可以適用所有設(shè)計(jì)的解決方式并不存在，大家在設(shè)計(jì)時(shí)還是得根據(jù)自己產(chǎn)品的特性、為產(chǎn)品選擇一個(gè)最適當(dāng)?shù)姆桨竵磉M(jìn)行，觸控設(shè)備不一定會(huì)改變世界，但改變了某些設(shè)計(jì)。