此文章为《北京网站制作：大型下拉列表当悬停菜单失败时（下）》第二章，让我们继续探讨在设计和构建大型下拉菜单时要记住的事项。

鼠标移动路径：轨迹三角形

与其引入延迟，不如尝试对客户将要划过的路径做调整。由于鼠标移动本质上是不准确的，为了尽量减少误操作，我们可以避免狭窄的悬停并使划过的路径更大。

例如，我们可以使用亚马逊的三角形技术，在该技术中，我们构建了一个轨迹三角形，将鼠标指针的当前位置与巨型下拉区域的边缘连接起来。如果该区域应该出现在右侧的类别旁边我们将鼠标指针与列出类别的容器的右上边缘和右下边缘连接起来。

只要用户停留在三角形内或整个巨型下拉区域内，叠加层仍会显示。如果用户选择在三角形之外，则巨型下拉列表叠加的内容将相应更改。当然，一旦用户完全移出类别列表，它就会立即完全消失。

通过这种技术，我们最大限度地减少了子导航突然消失和重新出现的摩擦。但是，如果类别链接的位置彼此太近，或者我们通过将鼠标悬停在较大的按钮上来显示悬停菜单，它可能会变得无效。我们可以在 SVG 路径出口区域做得更好一些。

SVG 路径出口区域

当使用以前的技术计算轨迹三角形时，有时我们不仅会跟踪鼠标指针的确切位置，还会在每次指针移动时重新计算三角形。我们可以通过计算一次整体 SVG 覆盖区域并跟踪鼠标指针是否在其中来改进策略，而无需一直重新计算三角形。

虽然此选项是精确的，并且完全消除了我们在悬停延迟中看到的滞后，但当客户意外地划过一个大型类别列表时，它会导致闪烁，该列表会提示在每个导航项上打开大型下拉列表。

同样，问题的根源在于客户无法控制大型下拉菜单何时打开和关闭，他们通常也不知道这些菜单何时出现或消失。这种缺乏可预测性往往会导致错误和挫折。但有时大型下拉菜单还有更深层次的、隐藏的可访问性问题。

悬停时打开的大型下拉菜单的陷阱

如上所述，上面列出的所有技术都具有相同的目标。他们试图预测用户打开和关闭导航菜单的意图，依赖于对鼠标移动速度、在单个区域停留的持续时间或屏幕上的确切位置的一些观察。

悬停时打开的大型下拉菜单存在大量可访问性问题。我们需要为使用键盘的用户支持大型下拉菜单中的导航，并且我们需要确保这些项目也正确地向屏幕阅读器公布。但在总体布局方面，我们需要谨慎对待巨型下拉列表的放置位置。

搜索被大型下拉菜单打断

如果任何重要功能显示在靠近大型下拉导航的位置，这通常会引起大量的麻烦。例如，如果在大型下拉区域上方显示搜索栏，这最终将导致摩擦z。

除非使用足够长的悬停进入/退出延迟，否则巨型下拉列表叠加将始终妨碍搜索和搜索结果之间的障碍。

类别标题做了太多事情

有时类别标题具有两种不同的功能。一方面，每个类别标题都可以链接到该类别的页面，因此客户可以单击它们直接进入该页面。另一方面，他们也可以打开一个大型下拉列表叠加层。因此，如果用户将鼠标悬停在标题上足够长的时间，则将打开大型下拉菜单，但用户可能已经点击了链接，这将导致闪烁。对于客户来说，当界面没有真正提供任何提示时，很难有正确的期望。

有几个选项可以解决此问题：

为了表明类别的标题是一个链接，给它加下划线可能会有所帮助，

为了使类别标题和下拉列表之间的区别更加明显，添加垂直分隔符（例如垂直线）和图标（V 形），

将类别的标题保留为仅打开大型下拉列表，并在大型下拉列表叠加中添加指向类别的“主页”部分的链接。它也可以是一个突出的“查看所有选项”按钮。

有时您可以看到一个额外的图标用于指示菜单打开叠加层，而类别的标题是一个链接。在我们的可用性测试中，我们注意到，每当出现一个图标时（不管是哪个图标），用户通常会在心理上区分单击图标提示的操作和单击类别标题提示的操作。

在前一种情况下，他们通常希望打开一个下拉列表，而在后一种情况下，会显示类别页面。更重要的是，他们似乎希望菜单在点击时打开，而不是悬停。

设计更好的大型下拉列表：单击菜单

大型下拉菜单经常在悬停时打开的原因之一是因为许多大公司希望快速向客户展示网站上可用的广泛选项。随着导航选项在悬停时的变化，我们可以更快地显示更多选项，客户也可以更快地探索更多选项。这就是为什么很难想象一个大型电子商务零售商没有大型导航覆盖。

但是，最好测试一下，如果将悬停导航替换为点击导航，则参与时间和点击率是否保持不变的。上面列出的大多数问题都可以通过这样做轻松解决：只有当用户明确提示此特定操作时，才会打开和关闭。因此，无需跟踪鼠标指针，也无需微调悬停进入/退出延迟。另外，由于移动设备上没有悬停，因此我们需要提供一个选项，以一种方式打开移动设备的单击菜单，因此我们也可以在更大的屏幕上保持这种方式。

在移动设备上，巨型下拉列表是一组手风琴，可以选择颜色对比度和缩进来指示导航的层次结构。每个折叠线一次显示的导航项永远不会超过 4 个。对于运行良好的复杂大型下拉导航来说，这是一个很好的参考示例。

我们的想法是完全避免复杂的大型下拉菜单，并为客户提供一种清晰、结构化的方式来浏览网站，从一个页面到另一个页面。它似乎是通过经过深思熟虑的信息架构和指南来实现的，这些架构和指南引导访问者通过可预测的步骤实现目标。

大型下拉导航设计清单

每次我们提出关于大型下拉菜单的对话时，一些同事喜欢悬停，其他人喜欢点击，有些人喜欢两者兼而有之，而其他人则不介意，只要有一个类别链接和一个图标打开菜单。

不可能说一种方法总是比其他方法更好，但无论是在技术实现还是用户体验方面，在单击时打开菜单通常会导致更少的麻烦，同时允许简单的实现，从而产生可预测的导航。在转到悬停菜单之前，我们可以尝试先保持点击行为，衡量参与度，并研究是否需要悬停。

如果可能，请避免使用大型下拉悬停菜单，作为北京网站制作的头部企业，希望我们提供的建议对您有所帮助。