导航和 可寻性 用户体验设计的核心要素是什么. 如果用户无法到达他们想去的地方或找到他们需要的东西, 他们会变得沮丧，并可能决定放弃 看其他地方. 在信息架构特别复杂的网站上, 多级菜单是改善导航和可查找性的有效方法, 从而提供高效的网络体验 促进产品信任 和 提高转化率.

因为产品和使用它们的设备差别很大, 没有一个放之四海而皆准的解决方案能够产生完美的多级菜单. 然而, 这里有一些经验法则可以帮助你构建多层次菜单，从而在任何屏幕尺寸上增强导航和可查找性.

任何尺寸屏幕的设计技巧

一个好的多级导航菜单应该通过清晰地呈现信息，让用户快速到达他们需要去的地方, 直观的方式. 在我们进入特定于大小的指导方针之前，让我们看一下适用于所有菜单的一些实践.

不要使用超过两层的子菜单. 超过两层的子菜单可能会让用户感到困惑和不知所措. 保持相对导航 平 提高用户的可查找性，并减少记住他们在哪里所需的认知负荷. 如果网站的页面结构比较深，可以考虑添加一个 本地导航菜单 到密切相关的页面的顶部. 例如, Zoho, 谁设计复杂的业务支持产品, 是否在每个产品页面的顶部放置了特定于产品的本地菜单, 就在主菜单下面. 而顶部的主菜单列举了Zoho的核心产品, 本地菜单提供对包含更详细信息的页面的访问, 比如用例和定价.

用图标标记子菜单. 当有子菜单可用时，要始终明确地管理用户的期望. 常见的选择包括一个小的向下角度图标或三角形图标. 另外，考虑在打开子菜单时翻转指针图标.

直观地组织信息. 确保信息的层次结构与用户的心智模型保持一致. 在电子商务网站, 例如, 考虑购物者是否更有可能期望商品按品牌或商品类型进行组织. 如果用户点击“鞋子”类别, 他们会期望子菜单提供运动鞋的选项吗, 凉鞋, 和靴子? 或者他们希望看到一个列出商店出售的所有品牌鞋子的子菜单? 同时查看你的用户研究和竞争对手研究将会澄清这一点.

确保用户始终知道他们在哪里. 始终突出显示主菜单上与用户所在页面相对应的链接. 如果当前页面在子菜单中, 突出显示子菜单链接和主菜单上的父项. 例如, 如果有人使用政府网站更新驾驶执照，从主菜单上的“居民”链接导航到子菜单上的“驾驶员服务”链接，然后进入一个带有更新表单的页面, “居民”和“司机服务”链接将继续突出显示.

保持文案简洁. A menu isn’t the place for clever wordplay; make sure link labels have a strong 信息的气味. 这意味着保持标签名称的直接和描述性，这样用户就会知道当他们点击时会发现什么. 文案越清晰，用户就能越快地找到他们需要的东西.

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

让点击和点击变得容易. 要使有精细运动控制障碍的用户能够访问菜单，请遵循谷歌 材料设计 指引和可点击元素的格式至少为48 x 48像素.

桌面设计技巧

尽管手机游戏的发展趋势越来越明显，但仍然存在 有很多原因 客户端可能需要功能齐全的桌面站点. 例如, 他们可能需要在网上提供比移动网站(如大学或金融机构的网站)更多的信息. 或者他们的研究可能表明，他们的用户只是更依赖台式机.

桌面菜单应该易于浏览，提供清晰的交互，当然，还应该具有响应性. 它还应该尽可能与手机网站保持一致，以便为回头客提供直观的体验.

菜单应该在点击时打开，而不是悬停. 您需要做出的最基本的决定之一是用户将如何访问网站的菜单. 仅仅将指针悬停在父项(类别名称)上就足以触发菜单的外观，还是用户需要单击它?

鼠标悬停的方式很流行，但是点击打开才是 最好的方法 确保菜单在所有设备上可靠、直观地工作. 点击方式使网站在传统的电脑显示器和触摸屏上都能更一致地工作, 避免了很多 挫折 在悬停方法中出现的问题，包括:

• 狭窄的悬浮隧道. 悬浮隧道是鼠标在保持菜单打开的情况下必须经过的路径. 如果它太窄，菜单可能会在用户到达他们想要的链接之前消失.
• 意外打开. 如果用户在浏览到页面上的另一个位置时试图穿过悬停菜单，那么悬停菜单很容易在无意中打开. 设置一个短暂的延迟可以解决这个问题，但当用户想要打开菜单时，可能会造成挫败感.
• 触摸屏上不一致的用户体验. 鼠标悬停菜单在触摸屏上不起作用. They require a code fix to detect touchscreens 和 switch to tap-to-open; as the line increasingly blurs between laptop 和 tablet, 这些变通方法可能会过时.
• 关于什么可以点击的问题. 使用悬停菜单, 用户在尝试点击之前并不总是知道父链接是否可点击. 这与直觉相反.
• 可访问性. 悬停菜单可以显示 问题 对于使用屏幕阅读器或通过键盘导航的用户.

选择正确的布局:下拉vs. 超级菜单. 如果桌面站点使用传统的菜单布局(位于页面顶部的水平菜单栏), 您可以考虑两种类型的子菜单设计:标准的单列下拉菜单或多列超级菜单.

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

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

在设计大型菜单时，请考虑以下几点:

• 添加图像或图标，使信息更容易扫描.
• 向组相关页面添加标题.
• 如果类别名称不明显，则添加描述.

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

添加清晰的悬停状态. 即使是点击打开菜单, 为所有可点击的元素包括清晰的悬停状态，使交互令人满意，并向用户保证链接是活动的. 您可以使可点击区域的背景颜色稍深，以指示悬停状态. 只需确保悬停区域与可点击区域匹配. 如果测试显示用户需要更多的指导或背景, 考虑添加更多描述性标签名称或工具提示, 只要它不妨碍任何重要的事情.

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

开启桌面键盘导航功能. 并不是每个人都用鼠标导航, 因此，菜单应该允许用户仅使用键盘进行导航. 这意味着所有链接都应该有不同的聚焦状态，这样用户就可以一目了然地看到它们在哪里. 通常深色的框架可以很好地表示聚焦状态.

手机屏幕设计技巧

如果你还没有设计移动优先，你需要为手持设备优化菜单. 传统的菜单布局很少能在很小的屏幕上很好地工作——如果你只是简单地缩小桌面菜单栏, 没人能看懂. 这些指导方针将帮助您成功地过渡到小屏幕.

简化主菜单. 因为智能手机的屏幕太小了, 你在桌面菜单中找到的很多信息一开始都必须隐藏起来. 主菜单栏必须非常简单, 但是，把最重要的链接放在表面上，以提高可查找性是个好主意. 您可以将菜单栏固定在屏幕的底部或顶部.

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

将菜单放在侧边栏中. 有许多不同的方式可以设计手机菜单. 您可以使用全宽布局, which works in any situation; a bottom drawer, which is best when there are only a few links; or a 圆形的角 菜单，这是一个没有子菜单的小菜单的未来主义选项. 一个不错的选择是使用带有深色的侧边栏, 屏蔽页面内容的半透明背景, 从而消除干扰, 并允许用户轻松点击关闭它. 还可以考虑使用从左边滑动的动画来避免不和谐的体验. 用于边栏和底部抽屉菜单, 确保菜单是垂直可滚动的，这样在小屏幕或横向模式下就不会被切断.

允许用户轻松关闭菜单. 用户可能会直观地点击菜单来关闭它，但也可以考虑添加一个X按钮. 您可以将汉堡包图标转换为X或将其添加到菜单的右上角.

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

用重叠的菜单替换超级菜单和多个子菜单. 如果您需要展开多个子菜单或重新配置一个超级菜单, 选择重叠的方法:而不是在父菜单的下面或旁边展开子菜单, 子菜单是否替换父菜单. 使用这种方法，除了第一层，你必须在所有面板上包含一个“返回”链接. 对于顶层菜单，考虑使用直角图标或右箭头表示父项.

Pre-open子菜单. 在桌面上，突出显示当前页面及其父页面是很有帮助的. 在小屏幕上，可以考虑更进一步. 如果用户点击打开主菜单，而他们当前所在的页面在子菜单中, 也可以考虑自动打开子菜单, 这样用户就能理解他们相对于其他菜单项的位置.

保持清晰和一致

导航是用户体验的重要组成部分. 用户不想玩寻宝游戏，也不想花太多时间浏览菜单. 如果他们不能轻易找到他们需要的东西, 他们可能会占用你客户的资源给你打电话或者, 更糟糕的是, 把他们的业务转移到别处.

一个设计良好的多级导航菜单是一个复杂的信息架构的网站的关键组成部分. 虽然这些指导方针不应该取代用户研究和测试, 它们将在各种各样的用例中很好地为您服务.