网站设计中的汉堡菜单

任何使用互联网的人都可能在互联网上看到过数十个汉堡菜单示例。 这个简单的三行图标是当今最知名的按钮之一。 许多网站正在使用它来隐藏通常强大的导航元素并节省空间。 然而，尽管它们很有用，网站设计中的汉堡菜单仍然是最有争议的网页设计选项之一。 对于某些人来说，这是一个真正的解决方案，应该完全融入所有响应式设计。 对于其他人来说，这是一个不幸的副作用，来自对实际结构设计的误解。

网站设计中的汉堡菜单介绍

不仅如此，当它们适应小屏幕显示时，通常会在响应式网站和应用程序上找到汉堡菜单。 无论是在左侧还是右侧，专业的设计师和开发人员都使用汉堡包手工来节省宝贵的空间。 这是一种流行的解决方案，因为它们隐藏了主导航以为其余内容留出更多空间。 但是，并不是每个人都认为这是一个合适的解决方案。 许多人声称恰恰相反。

为了帮助您更好地理解汉堡菜单，我们将在这里讨论：

• 什么是汉堡菜单
• 网站设计中汉堡菜单的概念
• 背后的争议
• 替代实施
• 网站设计中汉堡菜单的一般优点和缺点

什么是汉堡菜单？

简而言之，汉堡菜单是大型导航栏的简单且较小的替代品。 它基本上用作抽屉，您可以在其中放置所有使您的网站混乱的导航。 汉堡菜单通常看起来像三行重叠。 这个名字来自它与汉堡包的明显相似之处。

一切都始于 1981 年。在 Xerox Star 工作站。 当时的图形用户界面设计师 Norm Cox 制作了一个图标来打开隐藏元素的列表。 其目的是为长长的选项列表提供另一种节省空间的解决方案。 类似于桌面计算机上的右键单击概念菜单。 但是，直到 2009 年，汉堡菜单并没有获得太多荣耀。 只有当 Facebook 和其他一些网站再次推出它时，汉堡菜单才开始了它的旅程。 在当时新兴的移动设备上节省宝贵的屏幕空间几乎是完美的解决方案。

但是，是吗？

关于汉堡菜单的永恒争论

最初的创造者的意图是创造一些简单而有效的东西。 一个小按钮，通过遵循右键菜单背后的相同原理来减少混乱。 它应该是相似的、令人难忘的、易于使用的。 它是，即使是它最初不打算用于的当前形式。

然而，并不是每个人都对汉堡菜单有同样的热情。 许多设计师批评它，因为它隐藏了网站导航最重要的部分。 因此，游客将很难找到它。 他们建议仅在菜单中有四个以上导航元素时才使用汉堡菜单。 另一方面，这些说法在未来可能会改变，因为大多数人已经习惯了汉堡菜单的外观和功能。

替代使用和实施

除了“四要素”规则外，还有其他关于如何提高汉堡菜单可用性的建议。

• 将汉堡菜单与其他功能相结合。 例如，您可以将搜索功能和汉堡菜单并排放置。
• 使用不同形状、边框和颜色的占位符，让“汉堡包”更有辨识度。
• 找到不一定是角落之一的替代定位。
• 访问者开始滚动页面后，创建一个具有固定位置的浮动汉堡菜单。

这个想法是为移动用户提供一个干净但可区分的设计，无论他们的设备屏幕大小如何。

网站设计中汉堡菜单的一般优缺点

从 UX（用户体验）的角度来看，汉堡菜单可以是一把双刃剑。 虽然它可以在大多数情况下工作，但在其他情况下会造成混乱。 要了解何时使用它，最好检查一下汉堡菜单的所有优点和缺点。

优点：

• 汉堡菜单减少了混乱——它在最重要的时候起作用。 正确使用空间有时可能意味着移动网站和应用程序的一切。 考虑到您可以使用的屏幕尺寸，任何能给您更多空间的东西都是好的。 此外，屏幕上过多的元素只会分散访问者对正确内容的注意力。
• 保持导航易于理解——今天几乎每个人在看到汉堡菜单时都明白它的用途。 我们是视觉动物，很容易注意到一个看起来像一列中三条水平线的图标。 特别是如果它让我们想起最喜欢的快餐之一。 想想你知道多少个不同的图标和品牌标志。
• 可以是一个很好的选择，让辅助导航元素不碍事——没有规则说你需要将整个导航放在汉堡菜单中。 通常，最好的解决方案之一是将主要导航元素留在网站上，并将所有其他次要选项放在汉堡菜单中。 这基本上从两个世界中汲取了最好的东西，并且仍然达到了它的目的。

缺点：

• 重要的导航是不可见的——当您将导航转换为汉堡菜单时，您将使其几乎不可见。 一些研究证实，由于这个原因，网站参与度可能会大大下降。 换句话说，有些人不会进一步点击，因为它没有立即引起他们的注意。
• 不是每个人都能理解——不太可能，但仍有游客第一次接触汉堡菜单。 它可能看起来很熟悉，但不够激励或不言自明，无法让他们采取行动。 他们会保持原样，因为没有其他迹象表明它的用途。 这种情况正在发生变化，但有时可能是不直观的。 特别是当设计师使用过多的自由并使其完全抽象时。 或者“汉堡包”本身在视觉上的区分度不够。
• 汉堡菜单需要额外的“努力”才能使用——虽然听起来很傻，但从技术上讲，汉堡菜单确实比典型的导航多几步。 更不用说不是每个人都可以在一只手拿着手机时用拇指够到它。

无论您的主观意见是什么，永远不要忘记考虑对您的用户来说什么是最佳选择。 您可能喜欢汉堡菜单，但如果情况看起来不对，最终还是不会使用它们。 或者，您可以完全讨厌它，但它可能是您的网站或应用程序的最佳解决方案。 请记住，汉堡包手册在网站设计中的正确应用可能因情况而异，并且因情况而异。 要查看它是否适合您，请运行一些 A/B 测试，看看您的受众对此有何看法。