何时使用（不使用）导航的巨型菜单

巨型菜单与用户体验

使用巨型菜单的主要原则应该能解答一个简单的问题：

巨型菜单能让用户更轻松地浏览我的网站吗？

你不应该仅仅因为它们是最新潮的东西就添加一个。在你的网站上添加巨型菜单应该考虑到用户体验 (UX)。如果你的巨型菜单能让导航过程更流畅、更直观，那就添加一个。如果不是，或者你只需要菜单中很少的项目，那就坚持使用常规的下拉菜单。

在决定是否使用巨型菜单时，你可能还想问自己另一个问题：

巨型菜单能否帮助我的网站实现其目标？

你可能认为这是一个模糊的问题，很难回答，但网站设计和内容的所有方面都应该与你的网站试图实现的目标相关联。这可能是以下几种情况之一：

• 在线销售产品
• 鼓励人们联系你购买你的服务
• 发展追随者
• 推广慈善机构
• 创建社区
• 获取订阅者
• 销售活动门票

我相信网站可能还有更多目标，但这些是最常见的一些。了解你的目标将帮助你准确地知道你希望用户访问网站中的哪些页面以实现你的目标。

因此，如果你希望人们在线购买产品，并且你拥有一个大型且复杂的商店，巨型菜单很可能是最佳选择。但是，如果你只有一个非常具体的商品或服务，并且你希望将人们引导到该商品或服务的销售页面，那么巨型菜单可能会分散注意力。

在你决定是否添加巨型菜单之前，花些时间考虑一下你希望你的网站实现什么目标，你希望鼓励访问者去网站的哪个位置，以及什么样的导航将鼓励他们这样做。

下面是一些巨型菜单可能增强你的网站的具体示例。

何时使用巨型菜单

让我们来看一些巨型菜单作为网站的有用补充的情况。

1. 当用户期望使用它时

如果你的网站是一个零售网站，那么用户将习惯于看到巨型菜单并使用它们来浏览商店的各个部门。

例如，下面显示的 John Lewis 网站为商店的每个主要部分使用不同的巨型菜单。下面的是女装部分：

人们习惯于在大型百货商店的网站上使用巨型菜单，并且不会感到困惑。例如，如果我访问该网站寻找一件连衣裙，我可以轻松地通过一次点击进入该网站的相应部分。

2. 当下拉菜单太大时

在某些情况下，下拉菜单或一系列下拉菜单将包含如此多的选项，以至于会降低用户体验。

Jakob Nielsen 和 Angie Li 进行的一项研究表明，对于大型导航菜单，与下拉菜单相比，巨型菜单增强了用户体验。这是因为包含大量内容的下拉菜单将要求用户向下滚动，有时需要向下滚动然后再次向上滚动。这需要更长的时间，会给短期记忆带来更大的压力，并且可能会令人困惑。

因此，如果你的网站需要在导航菜单中包含许多元素，巨型菜单很可能会增强用户体验。但是，请确保如果你确实使用了一个巨型菜单，你以一种对用户直观的方式来构建它，并且你使用诸如颜色、文本效果和字体等设计提示来使其易于浏览。

下面的 Game 网站是巨型菜单系列的一个很好的例子，每个菜单都与网站的一个部分相关。这些菜单使用了间距和文本效果（如粗体文本和背景）来使菜单直观且易于导航。

### 3. 当菜单的设计增强网站时

有时，你有机会向你的网站添加不仅仅是文本链接的内容。

下面显示的 Moleskine 网站有一个与众不同的巨型菜单。除了文本链接外，它还有一些关键产品的照片，这些照片与覆盖在它们上面的文本一起充当链接。

这鼓励访问者访问这些页面，并使巨型菜单不仅仅是网站的功能方面——它增强了设计并有助于实现销售目标。

何时不使用巨型菜单

有时你不应该使用巨型菜单。以下是一些示例。

1. 当你没有很多链接时

如果你的网站没有数百个页面，那么巨型菜单将显得多余。对于普通的小型企业网站或博客，巨型菜单只会让访问者感到困惑——而且它看起来也会很空。

Envato Tuts 网站结合使用了巨型菜单和普通下拉菜单。对于网站中链接不多的部分，普通下拉菜单可以完成任务，并且覆盖的页面较少：

### 2. 当你的主页只是链接时

如果你的主页只是一页链接到子页面的页面，那么你也不需要巨型菜单。

英国政府网站就是一个例子，它的主页是一页全是链接的页面：

一旦你进一步导航到网站，就会有一个可以展开的左侧导航菜单：

这也是在用户可能不期望使用巨型菜单的环境中不使用巨型菜单的一个很好的例子。例如，在公共部门网站中，巨型菜单不如在零售网站中常见。

3. 当你希望将访问者引导到特定页面时

有时你的网站的设计是为了销售一两种产品或服务，或者鼓励注册邮件列表。

如果是这种情况，你可能在主页上有一个横幅，将访问者引导到一个登录页面。

在这种情况下，你希望导航保持最少。巨型菜单会给访问者提供如此多的选择，以至于他们访问你希望他们访问的页面的可能性会大大降低。因此，请将导航保持在最低限度，并专注于将访问者引导到你的登录页面。

Social Media Examiner 网站就是一个很好的例子。现在，他们希望访问者做两件事中的一件：注册他们的邮件列表或购买他们会议的门票。横幅反映了第二点，而占据主页顶部部分的号召性用语反映了第一点。

如果他们给访问者一个大型的巨型菜单，它会降低他们做这两件事中任何一件的可能性，因此他们改为保持导航简单。

### 4. 在移动设备上

在小屏幕上创建易于阅读的巨型菜单将很困难。为了使其有效，你必须要么使链接很小，这意味着人们将无法点击它们，要么引入滚动。将巨型菜单与滚动相结合可能会令人困惑，因为很难知道巨型菜单在哪里结束以及页面内容在哪里开始。

在移动设备上，最好使用汉堡菜单：一个直到你点击其符号才会可见的菜单。它通常被称为汉堡菜单，因为符号：三条垂直线看起来有点像汉堡包。

上面提到的 John Lewis 网站就有这样的菜单。点击符号，菜单选项就会在其下方展开。

在你的网站上添加巨型菜单时需要注意的事项

我们刚刚讨论了何时应该以及不应该在你的网站上添加巨型菜单。如果你认为巨型菜单会提高你网站的可用性，那么是时候了解一些在将巨型菜单添加到你的网站之前值得记住的重要事项了。

链接应该井然有序

巨型菜单通常会包含许多链接。因此，重要的是链接井然有序，并被划分为适当的部分。这在 John Lewis 网站上的巨型菜单屏幕截图中很明显。女性部分下的链接进一步被放入不同的易于导航的类别中。

链接应该易于阅读和点击

你还需要确保巨型菜单中的所有链接都易于阅读和点击。链接之间应该有足够的间距，以便用户不会意外点击他们不想访问的内容。它们应该包含有限的文本，但仍然能够帮助用户理解一旦点击它们将把用户带到哪里。

添加视觉提示以帮助用户

你可能还想向导航菜单添加一些视觉提示，以帮助用户了解链接是如何组织的。例如，箭头图标将向用户指示点击特定子菜单项将显示一堆新链接。可点击和不可点击的项目应该很容易区分。

优化性能

巨型菜单复杂且资源密集型。它们需要大量的标记、CSS 和 JavaScript 才能在任何地方都能按预期工作。有些巨型菜单也大量使用图像。这可能会对菜单以及网站的加载时间产生不利影响。你不会希望你的潜在客户因等待而感到厌烦，然后转而选择你的竞争对手。因此，保持巨型菜单的优化应该是一个优先事项。

为移动设备提供替代方案

正如我们前面讨论的那样，由于屏幕尺寸小，巨型菜单在移动设备上效果不佳。你应该考虑在较小的屏幕上提供另一种导航方式，以保持网站的响应能力。例如，你可以在移动设备上使用汉堡菜单，并且可能在小屏幕上的导航菜单中删除图像，只使用基本链接。

添加号召性用语按钮

用户将经常使用你的巨型菜单在网站的一个部分跳转到另一个部分。你可以利用这些知识通过巧妙地在正确的位置添加一些号召性用语或促销活动来提升用户参与度。

通过用户测试改进可用性

对你来说在巨型菜单中看似显而易见和正确的内容，对用户来说可能并非如此。因此，重要的是你必须持续对你的巨型菜单进行 A/B 测试，以找出哪种布局最适合你的情况。

在多个设备上测试巨型菜单

同样重要的是，你应该在尽可能多的浏览器和设备上测试你的巨型菜单。巨型菜单是复杂的 UI 元素，使它们看起来正确可能有点棘手。同时，还要确保巨型菜单中的所有链接都正常工作。

向你的网站添加巨型菜单

如果你已经决定巨型菜单是你的网站的正确选择，那么添加巨型菜单最简单的方法是通过插件。

CodeCanyon 提供许多可供你选择的巨型菜单插件。一些最受欢迎的包括：

• UberMenu 是最畅销的巨型菜单插件。它允许你为你的网站创建完全自定义的巨型菜单。它包括 CSS 选择器，以帮助你使用字体和文本效果设计一个外观精美的巨型菜单，并且有多种布局。
• Mega Main Menu 允许你将各种对象类型放置到你的菜单中。因此，如果你想要像上面的 Moleskine 网站那样的图像，这可能会有所帮助。
• Hero Menu 的设计易于使用，并且可以帮助你在几分钟内启动并运行巨型菜单，并配有拖放式菜单构建器。

有关创建巨型菜单的更多灵感，你可能想查看 Envato Tuts 上的这些其他帖子：

明智地使用巨型菜单，它们将增强你的网站

巨型菜单可以成为改进网站用户体验的好方法。如果你有一个大型网站，有很多链接，那么添加一个巨型菜单将帮助你的用户进行导航。如果你的网站符合要求，请尝试今天添加一个巨型菜单。

以上是何时使用（不使用）导航的巨型菜单的详细内容。更多信息请关注PHP中文网其他相关文章！