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细节更加成熟，设定了触发时间要求。鼠标停留不到一秒钟就不会触发，也不会意外通过其他菜单，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） 特别说明：本网站的主要目的是收集与互联网运营相关的干货知识，为运营伙伴提供便利。本网站收集的公共内容来自互联网或用户的贡献，这并不意味着本网站同意其观点，也不对网站内容的真实性负责。如有侵权行为，请联系网站管理员删除，。