起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Hover的設計方法和未來想象
Hover，一種在主界面中把輔助信息隱藏，但在用戶需要時以一種輕量級的方式展現出來的設計，是一種很有用的功能形式。而且在未來，也會有很廣闊的應用前景。
一、什么是Hover
首先，Hover通常指表示鼠標懸浮在某個元素上的狀態。
Hover可以用于高亮提示、說明信息懸浮框或下級導航等。
當用戶在尋找/思考/困惑/猶豫/回憶時，Hover可以幫助用戶更快地找到需要的功能。
當界面信息太多過于繁雜時，Hover也能夠容納額外的信息，在用戶需要時展開。
上圖為百度網盤界面
二、明確Hover設計的目的
需要運用到Hover的場景有很多，依據目的的不同主要分為以下四種：
1. 提高操作效率
密密麻麻沒有重點的信息，會極大地降低用戶的操作效率。
而Hover可以幫助我們在不干擾主線任務的同時，保留細節操作或信息。
對于各種dashboard而言，Hover能夠讓用戶在擁有直觀干凈的圖表的同時，也能了解各節點的具體數據。
圖片引用自AntV交互設計說明
除此之外，網站的導航區也經常會用到Hover。在網站的層級信息非常復雜時，通過Hover展開導航面板。
PS：關于導航欄內，是通過點擊展開下級導航還是Hover顯示下級導航，有人進行過測試：
用戶更傾向于在點擊導航后直接跳轉至相應頁面，而不是展開下級導航信息。所以當你的導航層級比較多時，還是應該優先選擇Hover的形式。
2. 解釋操作含義
我們現在習慣用icon來表示各種功能操作。盡管設計師通常已經用盡全力去把這些操作icon的含義表現出來，還是很難保證每一位用戶都能清楚理解和記憶這些icon的含義。
尤其是面對工具類或To B這類功能復雜的產品時，在測試后常常可以發現，總有一部分用戶不太理解或無法確定這些按鈕都是做什么的。
而Hover能夠在保持頁面的簡潔美觀的同時，解決這些用戶的困惑。
以Photoshop為例，用戶將鼠標Hover在icon上時，會顯示功能名稱和快捷鍵；而在2019的版本中，Hover內容進一步升級為示例動圖+功能名稱+快捷鍵+功能解釋。通過Hover信息，幫助用戶快速學習。
3. 增強可發現性
一些按鈕在Hover后，狀態會發生改變，通常是出現按鈕框或高亮，讓用戶注意到這個功能，并且明白鼠標已經進入該功能的可點擊區域。
尤其是對于點擊感不夠強烈的文字而言，Hover特征能告知用戶它是可以操作的。
此外，還有許多基礎的鼠標狀態，也起到了同樣的作用，例如手、光標、放大鏡等。
4. 引導用戶行為
行為引導可以是根據用戶自身的需求。例如在Medium網站內，用戶可以標記重點段落。當鼠標Hover在這些信息上時，會顯示相應的操作欄。
行為引導也可以基于商業需求。例如在用戶對著某商品思考猶豫的時候，通過Hover展示詳細信息，進一步誘導點擊。
三、設計觸發Hover的時機
設計Hover時，需要使用對的觸發時機。
1. 延遲反饋
以下圖的某個開放平臺為例：當用戶想從頂部導航欄的“產品”tab，進入到下方Hover出的二級面板時，通常會直線滑動鼠標。根據菲茲定律，直線的最短路徑和大面積的點擊區域本應帶來最便捷的操作。
然鵝，在上圖內，這種兩點之間直線最短的路徑是無法實現的，因為要從產品到下方藍色區域，一定會經過頂部“解決方案”這個tab。但當鼠標經過這個tab的一瞬間，整個Hover面板已變成了“解決方案”的二級面板：
在像上圖這樣出錯了之后，用戶才會知道需要小心翼翼地把鼠標先向下移到安全區域，再移動到自己要點擊的字段上。在操作效率和用戶體驗上，都大打折扣。
相比之下，淘寶Hover的細節就更成熟，設置了觸發的時長要求。鼠標停留不足1秒時不會觸發，也就沒有不小心經過其他菜單時，Hover面板胡亂切換的現象。
我們可以隨便打開一個網頁，抓著鼠標在頁面上一頓暴晃，看看它會不會變鬼畜？
2. 即時反饋
當然，我們并不用為每個Hover功能都設置延遲時間，還是要回歸具體的使用場景。如果設計的目的是增強元素的可發現性，讓用戶發現它是可以點擊或操作的，那么就需要提供即時的Hover反饋。
3. 延遲和即時的疊加
我們要根據具體場景的具體用戶需求進行分析。
以我現在正在使用的Chrome瀏覽器為例，當我把鼠標Hover在收藏的網頁上時，標簽會高亮，示意用戶這個標簽是可以點擊的。而第二秒時，會出現網頁完整名稱，對頁面信息進行補充。
四、移動端Hover的演變
我們說的Hover通常是指鼠標在界面上懸浮。而手機端的Hover也跟隨觸控手勢進行了演變。
AntV設計組建中，采用Touch and hold手勢（就是按住不要放手）來觸發詳細信息。在其他一些股票軟件中，也有使用Long Press長按手勢觸發Hover內容。
上圖引用自AntV設交互規范
五、關于未來Hover的想象
去年末MAX大會上Adobe發布了一段影片，描繪對未來MR世界的美好暢想（主要還是用來安利自己的新設計軟件AERO）。
其中有不少有趣的想法，但是看到最后用戶打開窗戶時，我昏迷了。如果我每天早晨起床打開窗要看到這么多可能有用但是亂七八糟的信息，這個設備大概率會躺在家里吃灰。
截圖來自Adobe 宣傳片
以上圖為例，確實是增強現實了，可是對用戶而言，信息也過載了。
我認為，未來MR環境中，Hover的觸發器可能是手、是視線，或者其他手柄控制器。在主界面中把輔助信息隱藏，但在用戶需要時以一種輕量級的方式展現出來的。
以購物環境為例，如果通過視線追蹤，識別到我盯住某商品超過5秒后，在AR界面內會彈出關于商品的價格描述優惠促銷等信息。再比當我如左顧右盼猶豫去哪家餐廳吃飯時，觸發Hover顯示餐廳的用餐評價、今日優惠、當前空位等信息。
我們需要簡潔的界面和交互，以便迅速找到想要的信息；但我們也需要在定位到具體信息后，進一步了解更多相關的內容。這個需求始終存在，所以Hover在未來也不會消失。
參考閱讀
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/
作者：迷思特圓；作者公眾號：迷思特圓（ID:mryuan55）
本文由 @迷思特圓 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自 Unsplash ，基于 CC0 協議
學習了 很有幫助~ 感謝作者：）
學習了，厲害
確實牛
寫的太好了吧！嘻嘻