汉堡菜单：电商示例及优缺点分析

随着越来越多的人选择手机在线购物，网站必须实现移动端自适应并且易于使用。然而，手机屏幕的空间非常有限。如果你的网站导航元素杂乱无章，访客很可能会直接离开，转而去其他地方购物。

正因如此，许多网站和应用都采用了移动导航界的“瑞士军刀”——汉堡菜单。这个由三条横线组成的简洁图标，已经成为“更多导航选项在此”的国际通用符号，将整个网站的菜单整合到一个显眼的按钮中。

下面就来详细聊聊汉堡菜单的强大之处与潜在陷阱——它的历史、核心功能，以及如何在移动网站设计中有效运用它。

什么是汉堡菜单？

多年以来，标准的网站导航方式一直是水平菜单——一行代表各个分类的文字横贯屏幕顶部。但随着智能手机技术和移动网络的进步，移动端浏览在2000年代末到2010年代初迅速兴起，网页设计师需要一种更节省空间的方案。

于是汉堡菜单（☰）应运而生——一个由堆叠的平行横线组成的简单图标（不妨把上下两条线看作汉堡包的面包，中间那条线则是肉饼），让用户可以按需展开和收起导航选项。你通常会在网站或应用的左上角或右上角找到这个汉堡菜单按钮。

汉堡菜单的历史

其实汉堡菜单的出现比移动设备还要早。上世纪80年代初，设计师NormCox为施乐Star工作站的图形用户界面设计了它，而这套界面正是最初Apple Macintosh界面的前身。Cox希望有一个简单、辨识度高的图标，点击一下就能打开一个可操作项目的列表。

刚问世时，汉堡菜单的应用范围有限，一度几乎被人遗忘，直到2009年前后手机的普及才让它重新焕发生机。在小屏幕上既要清晰呈现菜单选项，又不能让用户眼花缭乱，这种需求让紧凑整洁的汉堡菜单图标成为理想之选。

当Twitter及其他手机应用采用汉堡菜单后，它的人气便稳固下来；随后iPhone 3GS上的语音备忘录以及配套的iOS4也开始使用它，进一步奠定了它作为隐藏导航常见符号的地位。

汉堡菜单的优点与缺点

汉堡菜单非常适合移动设备，但对桌面端用户来说，导航栏和标签式菜单可能更合适。原因如下：

优点

汉堡图标的存在价值就在于它的紧凑尺寸。它能节省宝贵的屏幕空间，让网站设计更加简洁，在智能手机这类小屏幕上尤为明显。点击或轻触汉堡图标就能展开网站导航，形式可以是滑出式菜单、下拉菜单或全屏覆盖层。这有助于提升移动端顾客体验。

缺点

节省空间的优势毋庸置疑，但也有人认为，桌面浏览器上的汉堡菜单会影响内容的可发现性。如果用户不熟悉这个菜单图标，就可能完全忽略它，从而错过重要的网站内容或导航选项。

要解决这个问题，可以考虑采用自适应设计模板，为不同设备设置不同的菜单结构。比如，网站可以在桌面端显示传统的水平导航栏，而在移动设备上切换为汉堡菜单，以节省屏幕空间。

真实案例：汉堡菜单实战

你常会看到网站采用了自适应设计，因此汉堡菜单只出现在移动版，桌面版则采用另一种菜单样式。下面是几个有效运用汉堡菜单的电商网站：

TCB Jeans

TCB Jeans在移动版网站顶部采用了标准的三线汉堡菜单按钮，保持简洁。点击后，一列链接会从左侧滑出，包括首页、产品和关于我们等选项。产品链接旁边有一个小加号，暗示点击后还有更多选项。

TCB的桌面版网站同样采用了汉堡菜单，从而让一张全幅背景照片和促销活动占据视觉中心。在移动版上，汉堡菜单以覆盖层的形式滑入，给用户一个视觉提示，表明菜单可以收起，露出背后的页面。TCB的汉堡菜单设计具备以下特点：

• 简洁。在狭小的手机屏幕上把菜单按钮堆在一起可不是好主意，把它们藏进汉堡菜单里会更好。
• 熟悉。汉堡菜单在移动网站上很常见，因此对大多数用户来说不会造成困惑。
• 让产品成为焦点。把菜单藏在汉堡按钮背后，产品照片就能更加突出，强化了在售商品的展示效果。

Gymshark

Gymshark的网站是一个绝佳例子，展示了桌面版与移动优化版之间可以有怎样的差异。桌面版没有汉堡菜单；而在移动版上，汉堡菜单出现在左上角。轻触它会显示搜索框和产品分类子菜单。想返回首页，只需轻触右上角的X图标即可。

Gymshark的汉堡菜单之所以效果出色，是因为它优先呈现最重要的内容——先展示优惠和新品，以立即吸引用户。它也很符合用户习惯，菜单按钮放在你预期的位置，展开后是一个简单易懂的列表。

汉堡菜单成功运用的小贴士

使用汉堡菜单的网站所有者可以牢记以下六条建议，以提升用户体验并改善转化率：

让它始终清晰可见

大多数情况下，汉堡菜单都很小，因此要确保它依然容易被发现。把它放在屏幕的左上角或右上角，也就是用户习惯查看的位置。同时，要让它在你网站的每个页面上都保持一致的位置。

坚持使用标准的汉堡图标

为你的汉堡菜单使用广为人知的三条平行横线（☰）。这类图标随处可见，绝大多数用户一眼就能明白它的用途。

优先安排菜单项的层级

合理地组织你的菜单项。你可以添加一个搜索框，然后从上到下依次排列最重要、访问频率最高的分类或页面。

兼顾移动友好性与可访问性

确保你的菜单在所有移动设备和触摸屏上都能良好运行。菜单项要足够大，方便用手指轻松点击。

添加动画与视觉反馈

当用户与菜单交互时，细微的动效能提供视觉提示。例如，横线可以旋转并变形为 X 或 +，表示打开或关闭；线条可以改变粗细或略微扩展；淡入淡出和位移效果能在用户交互时增添层次感；你也可以在轻触时改变颜色，或让它轻微弹动。

测试并收集反馈

在最终确定你的汉堡菜单之前，先在真实用户身上进行测试。观察他们的使用方式，并收集反馈。

将汉堡菜单与其他导航工具结合使用

有时候，提升网站可用性的最佳办法就是把不同的按钮和菜单搭配组合起来。每种类型都各有长短，但组合使用时，能带来更流畅、更有效的用户体验。

电商网页设计师可以运用各种组合，让产品发现变得更轻松，同时提供清晰、直接的购物车和结账入口。要确认所有导航元素在触摸屏上都容易点击。多尝试不同组合，看看哪种最适合你的目标受众：

• 顶部导航加汉堡菜单。用顶部导航呈现商店、购物车等核心分类和功能，而把关于我们、联系方式、客户服务和政策等不常用的导航功能留给汉堡菜单。这样既能保持主屏幕整洁，又能快速访问必要的页面。
• 标签式导航加汉堡菜单。在产品分类页面内使用标签式导航来筛选或排序产品，比如新品、畅销款和按价格排序。这样用户在通过汉堡菜单进行整体网站导航之后，可以快速细化产品搜索。
• 固定顶栏加汉堡菜单。固定顶栏包含通往主要分类的关键快捷链接，并在你滚动页面时始终停留在屏幕顶部。汉堡菜单则用于那些次要页面。

举例来说，Fly by Jing的网站用汉堡菜单来呈现宽泛的菜单选项，而商店页面本身则使用带有四个选项（酱料、套装、食品柜、周边商品）的标签式菜单来进一步细分。