多级菜单设计最佳实践

导航和可查找性是用户体验设计的核心方面。如果用户无法找到他们需要的东西，他们就会感到沮丧并可能决定去别处寻找。在信息架构特别复杂的网站上，多级菜单是提高导航和可查找性的有效方式，从而提供有效的网络体验，促进产品信任和促进转化。

由于产品和使用它们的设备千差万别，因此没有一刀切的解决方案。但是，有一些经验法则可以帮助您构建多级菜单，从而增强在不同屏幕尺寸上的导航和可查找性。

不同尺寸屏幕的设计技巧

一个好的多级菜单应该通过以清晰、直观的方式呈现信息，让用户快速找到他们需要的信息。在我们进入特定于尺寸的指南之前，让我们看看一些适用于所有菜单的做法。

使用不超过两级的子菜单。任何多于两级的子菜单都可能使用户感到困惑。保持导航相对平坦可以提高用户的可查找性，并减少记住他们所在位置所需的认知负担。如果站点的页面结构很深，请考虑在密切相关的页面顶部添加本地导航菜单。例如，设计复杂业务支持产品的 Zoho 在每个产品页面的顶部放置了一个特定于产品的本地菜单，就在主菜单的下方。虽然顶部的主菜单列举了 Zoho 的核心产品，但本地菜单提供了对包含更详细信息的页面的访问，例如用例和定价。

用图标标记子菜单。通过始终明确何时有可用的子菜单来管理用户的期望。熟悉的选项包括一个小的下角图标或三角形图标。此外，请考虑在子菜单打开时翻转指针图标。

直观地组织信息。确保信息的层次结构与用户的心智模型一致。例如，在电子商务网站上，考虑购物者是否更有可能期望按品牌或商品类型组织商品。如果用户单击“鞋子”类别，他们是否希望子菜单显示运动鞋、凉鞋和靴子的选项？或者他们是否希望看到一个子菜单列出商店出售的每个品牌的鞋子？

确保用户始终知道他们在哪里。始终突出显示主菜单上与用户所在页面相对应的链接。如果当前页面在子菜单中，则在主菜单上也突出显示子菜单链接。

保持简单。菜单不是进行巧妙文字游戏的地方；确保链接标签具有强烈的信息气息。这意味着保持标签名称简单明了和描述性，以便用户在点击时立即知道他们会找到什么。文案越清晰，用户就越快找到他们需要的东西。

优先考虑可读性。使用简单的无衬线字体并确保项目周围有足够的间距以避免混乱。确保背景足够不透明以遮挡菜单后面的任何内容。但不要忽视网站的整体品牌。虽然可读性是第一位的，但要确保菜单的样式与网站的其他外观和感觉相得益彰。

使点击变得可访问。为了让有精细运动控制障碍的用户可以访问菜单，请遵循 Google 的Material Design指南，并将可点击元素的大小设置为至少 48 x 48 像素。

网站菜单设计技巧

即使移动趋势日益增长，客户可能需要功能齐全的网站的原因仍然很多。例如，他们可能需要在网上提供比移动网站可行的更多信息。或者他们的研究可能表明他们的用户只是更多地依赖台式机。

网站菜单应该易于浏览，提供清晰的交互，当然还有响应性。它还应尽可能与移动网站保持一致，以便为回访者提供直观的体验。

菜单应该在点击时打开，而不是悬停。您需要做出的最基本的决定之一是用户将如何访问站点的菜单。将指针悬停在菜单上是否足以触发菜单的外观，还是用户需要单击它？

悬停方法很流行，但点击打开是确保菜单在所有设备上可靠、直观地工作的最佳方式。单击方法使网站能够在传统的计算机显示器和类似的触摸屏上更一致地工作，并避免悬停方法出现的许多问题，包括：

a) 狭窄的悬停空间。悬停空间是鼠标在保持菜单打开的同时进行导航的路径。如果它太窄，菜单可能会在用户到达他们想要的链接之前消失。

b) 意外打开。如果用户在前往页面上的另一个位置的途中尝试浏览悬停菜单，则很容易无意中打开悬停菜单。设置一个短暂的延迟可以解决这个问题，但当用户确实想要打开菜单时可能会导致不适。

c) 触摸屏上的用户体验不一致。悬停菜单在触摸屏上不起作用。他们需要一个代码来检测触摸屏并切换到点击打开；随着笔记本电脑和平板电脑之间的界限越来越模糊，这些变通办法可能会过时。

d) 关于什么是可点击的问题。使用悬停菜单，用户在尝试单击之前并不总是知道父链接是否可单击。这与直觉相反。

e) 可访问性。悬停菜单可能会给使用屏幕阅读器或通过键盘导航的用户带来问题。

选择正确的布局：下拉菜单与超级菜单。如果网站使用传统的菜单布局（位于页面顶部的水平菜单栏），您可以考虑两种类型的子菜单：标准的单栏下拉菜单或多栏超级菜单。

如果父类别包含的链接少于八个，请考虑使用下拉菜单。如果下拉菜单足够长，需要垂直滚动，您应该考虑以不同的方式组织信息——也许作为一个大菜单或通过细化父类别。

超级菜单是一种嵌套菜单，通常使用可以扩展浏览器宽度的宽布局。如果子菜单包含许多可以按列分组的不同链接，您应该使用这种类型的菜单。通常，您会在大型电子商务网站上看到这样的菜单。

设计大型菜单时，请考虑以下事项：

a) 添加图像或图标，使信息更易于浏览。

b) 添加标题以对相关页面进行分组。

c) 如果类别名称不言自明，请添加说明。

大型菜单在移动设备上可能难以阅读和导航，但有时在更大屏幕上用户体验的改进使得为移动设备重新配置信息而做额外的工作是值得的。

添加清晰的悬停状态。使用点击打开菜单，包括所有可点击元素的清晰悬停状态，会使户确信链接处于活动状态。您可以使可点击区域的背景稍微变暗以指示悬停状态。只要确保悬停区域与可点击区域匹配。如果测试表明用户需要更多指导或上下文，请考虑添加更多描述性标签名称或工具提示，只要它不会阻止任何重要的内容。

单击以关闭子菜单。当用户点击别处或打开另一个子菜单时，通过关闭菜单来保持直观。这就是下拉输入字段在表单中的工作方式，因此大多数用户会觉得这很熟悉。

在桌面上启用键盘导航。并非每个人都使用鼠标进行导航，因此菜单应允许用户使用键盘进行导航。这意味着所有链接都应该具有不同的焦点状态，以便用户可以一目了然地看到它们的位置。通常，深色框可以很好地指示聚焦状态。

移动屏幕的设计技巧

如果您尚未设计移动优先，则需要优化手持设备的菜单。传统的菜单布局在非常小的屏幕上很少能很好地操作——如果你只是缩小桌面菜单栏，没有人能够阅读它。

简化主菜单。由于智能手机屏幕很小，您在桌面菜单中找到的大部分信息最初都必须隐藏。主菜单栏必须非常简单，但最好显示最重要的链接以提高可查找性。您可以将菜单栏固定在屏幕底部或顶部。

添加菜单触发器。由于移动菜单的全部或部分可能被隐藏，用户需要一种方法来找到它。在菜单栏或易于触及的浮动按钮中添加汉堡图标是一种流行的解决方案，许多用户都会认可。然而，汉堡菜单并不是唯一的选择。例如，如果您正在为年长的用户设计，则最好使用带有“菜单”一词的框。或者，如果您想让网站的功能更加突出，您可能希望将它们显示在顶部或底部的选项卡式菜单中。

将菜单放在侧边栏中。您可以通过多种不同的方式设计移动菜单。您可以使用全宽布局，适用于任何情况；底部抽屉，最好只有几个链接；或圆形菜单。一个不错的选择是使用带有深色半透明背景的侧边栏来遮挡页面内容，从而消除干扰，并允许用户轻松点击它以将其关闭。还可以考虑使用从左滑动的动画来避免不和谐的体验。对于侧边栏和底部抽屉菜单，请确保菜单可垂直滚动，以便在较小的屏幕或横向模式下不会有任何内容被遮挡。

允许用户轻松关闭菜单。用户可以直观地点击菜单来关闭它，但也可以考虑添加一个关闭按钮。您可以将汉堡图标变成 X 或在菜单的右上角添加一个。

对单个子菜单使用扩展部分。如果菜单只有一级子菜单，请考虑使用扩展部分。您可以将它们展开到父项下方，并使用不同的背景颜色来清晰显示。您还可以允许用户同时展开多个子菜单。考虑使用父项右侧的下角或三角形图标来指示子菜单可用。

用重叠菜单替换大型菜单和多个子菜单。如果您需要展开多个子菜单或重新配置大型菜单，请选择重叠方法：不要在父菜单下方或旁边展开子菜单，而是让子菜单替换父菜单。使用这种方法，您必须在除第一级之外的所有面板上都包含一个“返回”链接。对于顶级菜单，请考虑为父项使用直角图标或右箭头。

预打开子菜单。在小屏幕上，如果用户点击打开主菜单并且他们当前所在的页面在子菜单中，请考虑自动打开子菜单，以便用户了解它们相对于其余菜单项的位置。

总结

导航是客户体验的重要组成部分。用户不想进行寻宝游戏，也不想花更多的时间浏览菜单。如果他们无法轻松找到他们需要的东西，他们可能会放弃网站或界面，将他们的注意点转移到其他地方。

精心设计的多级菜单是具有复杂信息架构网站的关键组成部分。希望这些方法在各种用例中为您提供良好的帮助。