很多界面按钮悬停不变色了，这是大势所趋？

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群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。