## What 「悬浮工具」其实很常见，在 PC 端，就是当用户鼠标掠过对象时就悬浮显示一些工具和功能；在移动端，当用户点击对象时，悬浮工具就会显示在旁边。 ## When 在大多数时间里，我们想要一个干净整洁的界面， - 操作项较多，如果这些操作项总是可见的话，会使界面看起来拥挤而杂乱。 - 通常用在使用鼠标控制的界面上，触摸屏设备则需要点击或长按才会唤起相应的功能界面。 ## Why 「悬浮工具」在大多数时候是不可见的，可以保持界面的干净整洁。当用户需要它们时，通过响应用户的操作，立即出现并吸引用户的注意力。 弹出菜单 Pop-up（右键菜单 right-click ）、下拉菜单 Pull-down 和菜单栏都符合这些条件，但它们在某些类型的界面上不太容易被发现 —— 它们最适合用于传统桌面应用程序，而不是基于网页的界面。悬浮工具更加容易被发现，因为它们随用户手势而产生和消失，简单而自然。 ## How 快速响应悬停动作，但不要使用过于夸张的动画转换，简单直接的显示： - 在用户将鼠标指针移动到其上时，不要放大悬停区域，或者是重新布置页面。 - 让悬停动作尽可能地轻量和快捷，以便用户可以更加容易地触及到所需要的工具。 - 在用户将鼠标指针移开之后立即隐藏所有工具。 如果悬停区域是一个列表中的某一个对象，你也可以通过改变背景色或增加边框的方式来高亮突出该对象。显示工具的动作会将用户的目光吸引到该区域，但高亮对象会带来更好的效果。 ## Example ### 1 例如：花瓣网在鼠标滑动在图片卡片上时，图片上方就会出现放“采集”和喜欢的功能。  ### 2 京东良研  ## 资源 [悬浮工具 Popup Tools · 语雀](https://www.yuque.com/ant-design/design-pattern/popup-tools#vidA0)