Hover，一種在主界面中把輔助信息隱藏，但在用戶需要時(shí)以一種輕量級(jí)的方式展現(xiàn)出來(lái)的設(shè)計(jì)，是一種很有用的功能形式。而且在未來(lái)，也會(huì)有很廣闊的應(yīng)用前景。

一、什么是Hover

首先，Hover通常指表示鼠標(biāo)懸浮在某個(gè)元素上的狀態(tài)。

Hover可以用于高亮提示、說(shuō)明信息懸浮框或下級(jí)導(dǎo)航等。

當(dāng)用戶在尋找/思考/困惑/猶豫/回憶時(shí)，Hover可以幫助用戶更快地找到需要的功能。

當(dāng)界面信息太多過(guò)于繁雜時(shí)，Hover也能夠容納額外的信息，在用戶需要時(shí)展開(kāi)。

上圖為百度網(wǎng)盤(pán)界面

二、明確Hover設(shè)計(jì)的目的

需要運(yùn)用到Hover的場(chǎng)景有很多，依據(jù)目的的不同主要分為以下四種：

1. 提高操作效率

密密麻麻沒(méi)有重點(diǎn)的信息，會(huì)極大地降低用戶的操作效率。

而Hover可以幫助我們?cè)诓桓蓴_主線任務(wù)的同時(shí)，保留細(xì)節(jié)操作或信息。

對(duì)于各種dashboard而言，Hover能夠讓用戶在擁有直觀干凈的圖表的同時(shí)，也能了解各節(jié)點(diǎn)的具體數(shù)據(jù)。

圖片引用自AntV交互設(shè)計(jì)說(shuō)明

除此之外，網(wǎng)站的導(dǎo)航區(qū)也經(jīng)常會(huì)用到Hover。在網(wǎng)站的層級(jí)信息非常復(fù)雜時(shí)，通過(guò)Hover展開(kāi)導(dǎo)航面板。

PS：關(guān)于導(dǎo)航欄內(nèi)，是通過(guò)點(diǎn)擊展開(kāi)下級(jí)導(dǎo)航還是Hover顯示下級(jí)導(dǎo)航，有人進(jìn)行過(guò)測(cè)試：

用戶更傾向于在點(diǎn)擊導(dǎo)航后直接跳轉(zhuǎn)至相應(yīng)頁(yè)面，而不是展開(kāi)下級(jí)導(dǎo)航信息。所以當(dāng)你的導(dǎo)航層級(jí)比較多時(shí)，還是應(yīng)該優(yōu)先選擇Hover的形式。

2. 解釋操作含義

我們現(xiàn)在習(xí)慣用icon來(lái)表示各種功能操作。盡管設(shè)計(jì)師通常已經(jīng)用盡全力去把這些操作icon的含義表現(xiàn)出來(lái)，還是很難保證每一位用戶都能清楚理解和記憶這些icon的含義。

尤其是面對(duì)工具類或To B這類功能復(fù)雜的產(chǎn)品時(shí)，在測(cè)試后常常可以發(fā)現(xiàn)，總有一部分用戶不太理解或無(wú)法確定這些按鈕都是做什么的。

而Hover能夠在保持頁(yè)面的簡(jiǎn)潔美觀的同時(shí)，解決這些用戶的困惑。

以Photoshop為例，用戶將鼠標(biāo)Hover在icon上時(shí)，會(huì)顯示功能名稱和快捷鍵；而在2019的版本中，Hover內(nèi)容進(jìn)一步升級(jí)為示例動(dòng)圖+功能名稱+快捷鍵+功能解釋。通過(guò)Hover信息，幫助用戶快速學(xué)習(xí)。

3. 增強(qiáng)可發(fā)現(xiàn)性

一些按鈕在Hover后，狀態(tài)會(huì)發(fā)生改變，通常是出現(xiàn)按鈕框或高亮，讓用戶注意到這個(gè)功能，并且明白鼠標(biāo)已經(jīng)進(jìn)入該功能的可點(diǎn)擊區(qū)域。

尤其是對(duì)于點(diǎn)擊感不夠強(qiáng)烈的文字而言，Hover特征能告知用戶它是可以操作的。

此外，還有許多基礎(chǔ)的鼠標(biāo)狀態(tài)，也起到了同樣的作用，例如手、光標(biāo)、放大鏡等。

4. 引導(dǎo)用戶行為

行為引導(dǎo)可以是根據(jù)用戶自身的需求。例如在Medium網(wǎng)站內(nèi)，用戶可以標(biāo)記重點(diǎn)段落。當(dāng)鼠標(biāo)Hover在這些信息上時(shí)，會(huì)顯示相應(yīng)的操作欄。

行為引導(dǎo)也可以基于商業(yè)需求。例如在用戶對(duì)著某商品思考猶豫的時(shí)候，通過(guò)Hover展示詳細(xì)信息，進(jìn)一步誘導(dǎo)點(diǎn)擊。

三、設(shè)計(jì)觸發(fā)Hover的時(shí)機(jī)

設(shè)計(jì)Hover時(shí)，需要使用對(duì)的觸發(fā)時(shí)機(jī)。

1. 延遲反饋

以下圖的某個(gè)開(kāi)放平臺(tái)為例：當(dāng)用戶想從頂部導(dǎo)航欄的“產(chǎn)品”tab，進(jìn)入到下方Hover出的二級(jí)面板時(shí)，通常會(huì)直線滑動(dòng)鼠標(biāo)。根據(jù)菲茲定律，直線的最短路徑和大面積的點(diǎn)擊區(qū)域本應(yīng)帶來(lái)最便捷的操作。

然鵝，在上圖內(nèi)，這種兩點(diǎn)之間直線最短的路徑是無(wú)法實(shí)現(xiàn)的，因?yàn)橐獜漠a(chǎn)品到下方藍(lán)色區(qū)域，一定會(huì)經(jīng)過(guò)頂部“解決方案”這個(gè)tab。但當(dāng)鼠標(biāo)經(jīng)過(guò)這個(gè)tab的一瞬間，整個(gè)Hover面板已變成了“解決方案”的二級(jí)面板：

在像上圖這樣出錯(cuò)了之后，用戶才會(huì)知道需要小心翼翼地把鼠標(biāo)先向下移到安全區(qū)域，再移動(dòng)到自己要點(diǎn)擊的字段上。在操作效率和用戶體驗(yàn)上，都大打折扣。

相比之下，淘寶Hover的細(xì)節(jié)就更成熟，設(shè)置了觸發(fā)的時(shí)長(zhǎng)要求。鼠標(biāo)停留不足1秒時(shí)不會(huì)觸發(fā)，也就沒(méi)有不小心經(jīng)過(guò)其他菜單時(shí)，Hover面板胡亂切換的現(xiàn)象。

我們可以隨便打開(kāi)一個(gè)網(wǎng)頁(yè)，抓著鼠標(biāo)在頁(yè)面上一頓暴晃，看看它會(huì)不會(huì)變鬼畜？

2. 即時(shí)反饋

當(dāng)然，我們并不用為每個(gè)Hover功能都設(shè)置延遲時(shí)間，還是要回歸具體的使用場(chǎng)景。如果設(shè)計(jì)的目的是增強(qiáng)元素的可發(fā)現(xiàn)性，讓用戶發(fā)現(xiàn)它是可以點(diǎn)擊或操作的，那么就需要提供即時(shí)的Hover反饋。

3. 延遲和即時(shí)的疊加

我們要根據(jù)具體場(chǎng)景的具體用戶需求進(jìn)行分析。

以我現(xiàn)在正在使用的Chrome瀏覽器為例，當(dāng)我把鼠標(biāo)Hover在收藏的網(wǎng)頁(yè)上時(shí)，標(biāo)簽會(huì)高亮，示意用戶這個(gè)標(biāo)簽是可以點(diǎn)擊的。而第二秒時(shí)，會(huì)出現(xiàn)網(wǎng)頁(yè)完整名稱，對(duì)頁(yè)面信息進(jìn)行補(bǔ)充。

四、移動(dòng)端Hover的演變

我們說(shuō)的Hover通常是指鼠標(biāo)在界面上懸浮。而手機(jī)端的Hover也跟隨觸控手勢(shì)進(jìn)行了演變。

AntV設(shè)計(jì)組建中，采用Touch and hold手勢(shì)（就是按住不要放手）來(lái)觸發(fā)詳細(xì)信息。在其他一些股票軟件中，也有使用Long Press長(zhǎng)按手勢(shì)觸發(fā)Hover內(nèi)容。

上圖引用自AntV設(shè)交互規(guī)范

五、關(guān)于未來(lái)Hover的想象

去年末MAX大會(huì)上Adobe發(fā)布了一段影片，描繪對(duì)未來(lái)MR世界的美好暢想（主要還是用來(lái)安利自己的新設(shè)計(jì)軟件AERO）。

其中有不少有趣的想法，但是看到最后用戶打開(kāi)窗戶時(shí)，我昏迷了。如果我每天早晨起床打開(kāi)窗要看到這么多可能有用但是亂七八糟的信息，這個(gè)設(shè)備大概率會(huì)躺在家里吃灰。

截圖來(lái)自Adobe 宣傳片

以上圖為例，確實(shí)是增強(qiáng)現(xiàn)實(shí)了，可是對(duì)用戶而言，信息也過(guò)載了。

我認(rèn)為，未來(lái)MR環(huán)境中，Hover的觸發(fā)器可能是手、是視線，或者其他手柄控制器。在主界面中把輔助信息隱藏，但在用戶需要時(shí)以一種輕量級(jí)的方式展現(xiàn)出來(lái)的。

以購(gòu)物環(huán)境為例，如果通過(guò)視線追蹤，識(shí)別到我盯住某商品超過(guò)5秒后，在AR界面內(nèi)會(huì)彈出關(guān)于商品的價(jià)格描述優(yōu)惠促銷等信息。再比當(dāng)我如左顧右盼猶豫去哪家餐廳吃飯時(shí)，觸發(fā)Hover顯示餐廳的用餐評(píng)價(jià)、今日優(yōu)惠、當(dāng)前空位等信息。

我們需要簡(jiǎn)潔的界面和交互，以便迅速找到想要的信息；但我們也需要在定位到具體信息后，進(jìn)一步了解更多相關(guān)的內(nèi)容。這個(gè)需求始終存在，所以Hover在未來(lái)也不會(huì)消失。

參考閱讀

https://www.creativebloq.com/design/Hover-dead-long-live-Hover-4132957

https://medium.com/simple-human/why-Hover-menus-are-problematic-b21d6c7de91c

https://www.nngroup.com/articles/mega-menus-work-well/

https://www.nngroup.com/articles/expandable-menus/

https://antv.vision/

作者：迷思特圓；作者公眾號(hào)：迷思特圓（ID:mryuan55）

本文由 @迷思特圓 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自 Unsplash ，基于 CC0 協(xié)議