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/

https://antv.vision/

译者：迷思特圆；译者大众号：迷思特圆（ID:mryuan55）