汉堡菜单最初的问题所在
汉堡图标——代表折叠菜单的三条水平线——在20世纪80年代为屏幕受限的界面而引入，并在2012年前后随着智能手机的普及在移动网页设计中重获新生。当时设计师需要隐藏导航以保留屏幕空间。它优雅地解决了一个实际问题：在3.5英寸的手机屏幕上，完整的导航菜单占用了太多空间。将其折叠在一个小图标后面既节省了空间，又保持了内容的可见性。
汉堡菜单造成的问题是，隐藏的导航是访客不使用的导航。跨多个平台和场景的研究一致表明，汉堡菜单获得的互动少于可见导航替代方案——尤其是在首次访问时，以及对于不熟悉这一惯例的用户。这个图标无法向那些尚未准备好寻找它的访客传达"点这里找到这家商店的一切"。对于相当一部分移动访客来说，汉堡菜单在功能层面是不可见的：他们看不到导航，不探索分类，要么通过搜索到达预期目的地，要么在未发现商店真正提供什么的情况下离开。
「我们对汉堡菜单和具有相同五个分类的标签栏配置进行了为期三周的A/B测试。标签栏版本的导航互动次数多出3.4倍——当访客能够看到分类链接时，点击频率大幅提高。更重要的是，从标签栏导航点击开始的会话，其加入购物车率高于从汉堡菜单点击开始的会话。导航在将访客引导至相关产品方面表现更好，因为他们在决定点击之前就能看到这些选项。」
— Navi+的一位客户，美妆品牌
替代或补充汉堡菜单的导航模式
移动电商中替代纯汉堡导航的方案，在不牺牲促使汉堡菜单诞生的屏幕空间的前提下解决了可见性问题：
标签栏：持久、可见、始终可访问。标签栏——屏幕底部带有图标标签的4至5个导航槽位的行列——是经过最全面测试的汉堡替代方案。原生移动应用使用标签栏导航已超过十年，因为它表现出色：所有主要导航目的地无需交互即可见，无论滚动位置如何，一次点击即可到达，并且位于拇指自然放置的屏幕底部。将此模式转移到移动网页导航可产生同样的优势。标签栏的底部位置是关键——它在不与屏幕顶部内容竞争的情况下保持主要导航的可访问性，并且符合大屏幕手机单手使用的人体工程学，在这些设备上，顶部标题导航已真正难以触及。
浮动操作按钮：始终可访问的导航入口点。对于无法将导航精简至4至5个主要目的地的商店（因为目录深度需要更多），浮动操作按钮提供了一个持久的、可见的全导航入口点，而不占用任何固定屏幕空间。FAB浮于内容之上，随滚动移动，一次点击即可打开完整的滑动菜单。与汉堡菜单的关键区别：FAB在视觉上更加突出（它是一个圆圈，通常带有品牌色，而不是简约的三线图标），并且位于屏幕底部的拇指可及区域，而非需要伸展的左上角。可能注意不到左上角汉堡图标的访客，会注意到飘浮在拇指附近的品牌色圆圈。
混合方案：标签栏加可访问的滑动菜单。最强大的移动导航架构将两者结合：标签栏始终显示五个最重要的导航目的地，以及从标签栏的"更多"槽位或FAB触发的滑动菜单用于全面导航。这为访客提供了无需交互即可立即访问主要目的地的能力，以及再点击一次即可进行完整目录导航的便利。滑动菜单不再是主要导航——而是全面的参考工具。这种混合方案正是设计优良的原生应用所使用的，并通过Navi+的组合标签栏和滑动菜单组件直接移植到网页导航中。
带标签的汉堡菜单：以最小的结构改变提升可见性。对于尚未准备好完全重构导航的商店，将三线图标替换为带标签的按钮——"菜单"或"浏览"——会显著提高点击率。标签向不认识三线惯例的访客传达按钮的功能。这是付出最少努力却有实质回报的干预措施：研究表明，带标签的汉堡菜单比纯图标汉堡菜单多获得20至40%的点击，仅仅因为传达了按钮的功能。
| 模式 | 可见性 | 最佳使用场景 |
|---|---|---|
| 标准汉堡图标 | 低 — 对不熟悉的访客不可见 | 仅用于遗留系统；在所有场景中都有更好的替代方案 |
| 标签栏（4至5个槽位） | 最高 — 所有主要目的地始终可见 | 具有4至5个明确主要导航目的地的商店 |
| 浮动操作按钮 | 高 — 显眼、拇指区域、不依赖滚动 | 需要完整目录访问且不受标签栏限制的商店 |
| 标签栏+滑动菜单混合 | 最高的主要导航+一键完整目录 | 中大型目录商店的最佳整体模式 |
汉堡替代方案的创意维度
替换汉堡菜单不仅是一个可用性决策——它也是一个品牌表达决策。标签栏、FAB和滑动菜单是完全可样式化的导航组件，能够以三线图标无法实现的方式体现商店的品牌标识。品牌色FAB、带自定义图标且激活状态使用商店强调色的标签栏、将品牌字体系统应用于分类标签的滑动菜单——这些导航体验让人感受到品牌本身，而非通用的移动基础设施。汉堡菜单在设计上什么都不传达；它的替代方案传达了品牌希望导航所表达的一切。