在北京网站制作领域中，我们常常面临是否采用大型下拉悬停菜单的抉择，我们需要大型下拉悬停菜单吗？可能不是。让我们探讨一下在设计和构建大型下拉菜单时要记住的事项、悬停菜单的替代方案以及设计更好的用户体验的细节。

复杂的网站通常依赖于复杂的导航。当一个网站包含数千个页面时，最终导航将变得深入而广泛。对于如此复杂的多级导航，显示选项的广度需要相当大的空间。想想大型电子商务零售商和大型企业网站，它们迎合了许多受众并拥有大量切入点。

处理这种常见方法是快速向客户展示大量导航。这就是为什么巨型下拉列表在某种程度上已经成为网络上的一种机制——尽管主要是针对复杂和大型项目。巨型下拉列表本质上是出现在用户操作上的大叠加层。通常，它包括链接、按钮、缩略图的混合包，有时还包括嵌套的下拉列表和叠加层。

几十年来，这种导航的常见行为是在鼠标悬停时打开菜单。用户对这种模式的抱怨是，对子导航打开和关闭的方式和时间完全缺乏确定性和控制。

有时子菜单会意外出现，有时会突然消失，有时它会在屏幕上停留一段时间，尽管鼠标指针已经在页面的一个不同的部分，或者完全在另一个页面上。

为什么大型下拉菜单悬停菜单令人沮丧？

大型下拉列表使用起来很麻烦的主要原因是因为意图和期望不匹配。使用悬停菜单，我们试图通过跟踪鼠标行为来推断和执行特定意图，但我们的客户在访问页面时可能具有非常不同的目标和非常不同的限制。

客户的行为通常是不可预测的，在较长的时间内收集用户数据点，我们很少能准确地预测行为。

我们通常探索的常见场景是：

客户瞄准类别链接，并直接前往该类别以浏览该类别中的子导航项。

客户正在将鼠标移向屏幕上的目标，但鼠标必须移动的轨迹覆盖了打开大型下拉菜单的导航链接。

但是，还有很多其他情况需要考虑。举几个例子：

客户会使用鼠标来操作，这将导致每次用户在前往页面顶部的 CTA 或购物车时，大型下拉菜单都会不由自主地打开。

客户想要打开类别页面，因此他们前往类别链接，单击它，但会遇到闪烁，因为大型下拉菜单出现延迟。

使用大型下拉菜单中的嵌套子菜单，客户希望在他们当前所在的类别中探索类似的项目，但由于嵌套，他们必须一遍又一遍地重新打开大型下拉菜单。

想象一下，当您想要调整窗口大小时，就在您即将捕捉到窗口的右边缘时，悬停菜单不断出现 - 只是因为您将鼠标光标移动得太近了。

用户开始缓慢向下滚动以评估页面上的内容，但菜单不断弹出。每次用户用光标来阅读巨型下拉菜单的内容时，菜单都会意外消失。

问题在于，我们需要支持所有这些意图操作，但与此同时，我们需要确保我们不会为任何这些操作情况创造令人讨厌的体验。当然，作为设计师和开发人员，我们已经发明了许多技术来解决这个问题。

悬停进入/退出延迟

最早的解决方案之一，也是最常见的解决方案之一，是引入悬停进入/退出延迟。我们需要确保菜单不会打开，也不会过早关闭。为了实现这一点，我们引入了延迟，通常约为 0.5 秒。这意味着我们为客户提供了大约 0.5 秒的缓冲时间。

换句话说，只要客户停留在巨型下拉列表叠加层内，我们就会继续显示它。一旦客户将鼠标光标移出子导航覆盖层至少 0.5 秒，我们就会隐藏叠加层。

虽然它解决了页面上意外闪烁的问题，但在用户离开大型下拉列表超过 0.5 秒的情况下，它会引入延迟。因此，它减慢了与整个站点中大型下拉菜单的每次交互。很快他的缺点就变得非常明显，尤其是在大量使用导航的情况下。

有些添加了淡入/淡出过渡，以使大型下拉列表的出现不那么突然，但实际上它会导致进入/退出延迟增加到 0.8-0.9 秒，这也引入了更明显的延迟。

显然，叠加层保持可见的时间越长，对那些想要关闭叠加层的人的体验感就越差。

此篇为《北京网站制作：大型下拉列表当悬停菜单失败时（上）》敬请期待下部。