很多界面按鈕懸停不變色了，這是大勢所趨？

Sponsor

我最近發現有一種交互樣式已經越來越少，已經快被UI設計界拋棄了——那就是懸停高亮色：

現在很多懸停態樣式都改成了這種背景框：

也有用這種疊加色：

國內有些網頁設計里還保留著原來用懸停高亮色，例如阿里云的官網，基本都是這種：

淘寶就連紅色和綠色的按鈕（天貓、聚劃算和天貓超市），都還在用統一懸停高亮色：

百度雖然一級導航用懸停態高亮色，二級卻加上了個背景框：

然而在最新的設計系統里，幾乎都很少看到了這種懸停高亮色了。

例如 Ant Design 和 Arco Design 現在都是用這種樣式：

Ant Design

Arco Design

再來看看國外的B設計系統，IBM 的?Carbon Design?基本沒有懸停高亮色，面包屑雖然沒有背景框，但也是疊加色+下劃線。

Jira 母公司的?ADS?也差不多：

再來看看C端方面做得很全面的設計系統而 Material Design，早在第二版時，就把懸停背景框通過動效安排上了，而且他們的系統是所有終端統一的：

最新的第三版?MD3?就更不用說了：

可見，這個趨勢是比較確切的，只是有些產品未必這么快跟上潮流而已。

如果我們去看國外大廠，大多C端產品是早跟上潮流了，例如 YouTube、Twitter、FaceBook：

當然也有發揮隨意一點的，例如 Instagram 很多懸停態沒有背景框，但也不是高亮色，只是顏色變淺一點：

其實上面這種更符合國內的情況，雖然很多大廠的C端確實是拋棄了原本的懸停高亮態，但用的比較多的是疊加非高亮色，例如騰訊視頻和知乎：

還有就是像微博和WPS這種混搭形的：

然而，國內比較新的B端產品反而跟上節奏了，可能是起步晚沒有歷史包袱吧。例如飛書、騰訊文檔、Teambition（部分）都是這樣：

到了 Teambiton 這里，又有一點混搭風了：

國內B端產品比較能跟上節奏，C端卻不能，我想這里面的主要原因可能是——國內C端都是移動端優先，而移動端的懸停態能省就省，那么PC端也跟著做簡單點就正常了 。

不論如何，既然這個趨勢咱們是比較確定的了，那么我們就來看看為啥越來越多產品放棄懸停高亮色。

懸停高亮色有什么問題？

首先，如果文字比較細的話，這個高亮色其實未必那么清楚：

而且效果極大程度受到背景色的影響，如果背景色用了個灰度差不多的顏色，那么這個高亮還不如不不要：

更不要說，如果背景色是彩色或者圖片，那么這個高亮色就更不好處理了：

而且，有的按鈕默認就是高亮色，懸停態怎么辦？也只能疊加一個稍微深一點或淺一點的顏色了：

那么以此類推，為啥我不給非高亮色按鈕的懸停態，也疊加一個稍微深一點或淺一點的顏色呢？這樣才統一吧？

好的，按照上面的推論，其實按照國內C端產品那樣，懸停態給個深一點或淺一點的顏色就夠了，那為啥還要加個背景框呢？

懸停態背景框有什么好處？

首先，疊加背景框肯定比微調文字和圖標的顏色要顯眼：

而且這個背景色很淺，對視覺風格的影響很小的情況下，達到了比較明顯的提示作用。

另外，圖標和文字按鈕視覺面積很小，熱區肯定要擴大一圈，否則點擊不便。但是熱區到底有多大，這個用戶心理是沒譜的，只能盯著鼠標指針“探路”。

而如果有這么個懸停態背景框，用戶很容易就知道熱區在哪了，心里更有底。

最后，這個背景框也很適合移動端，因為手指比較粗，容易按錯，其實更需要清晰的視覺反饋。

雖然國內移動端基本不做懸停態，但是國外移動端的懸停態用起來確實更爽：

你對懸停態樣式有什么看法？

從用戶體驗的角度，我個人認為背景框會更加舒適，但是設計成本和開發成本都會增加。

例如設計一個導航，以前布局上只需要考慮文字間距：

加上背景框后，考慮的東西就多了：

也難怪這在國內C端產品里，在還沒有普及開。你怎么看呢？?

歡迎在評論區分享你的想法和投票理由～

來源：體驗進階（ID：Advanced_UX）

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。