什么是汉堡菜单？
这是您在应用和自适应网站的屏幕右上角看到的三条水平线。因此，当设计人员参考“汉堡菜单”时，我们实际上是在谈论用于将一个菜单选项的负载并置在一个幻灯片菜单中并将其收起的图标。
是的，您没看错-从字面上“收藏”它们以隐藏它们。但为什么？简单的答案是屏幕空间。要了解UI设计现在无处不在的汉堡菜单图标如何在Web和应用程序设计行业中达到如此极端的饱和度，我们需要从其诞生地开始。
汉堡菜单-简要历史
早在80年代，汉堡之父Norm Cox就设计了Xerox Star个人工作站。他开发了一个四行图标，象征一个按钮打开了一个项目列表。设计界后来将这个图标称为臭名昭著的“汉堡菜单”。后来，它在设计界继续受到与Sherwood Forest中的Robin Hood一样多的恶名。
Norm指出，当用户将鼠标悬停在某个元素上并单击鼠标右键以显示选项时，汉堡菜单最初具有许多弹出菜单的目的。完全不同的鱼锅吧？然后几十年过去了，我们进入了智能手机正迅速进入市场的中期。UI设计师再次为该图标注入了新的活力，并使其重新融入了设计词典。所有这些都是以利用移动设备的屏幕不动产为名。
随着平板电脑和手机等移动设备的分辨率降低，通常无法选择长条形菜单。将所有内容压扁并隐藏在三行之内，很快就成为响应式菜单设计的首选设计选项。
太好了吧？汉堡菜单的第二次机会。但这在设计界的各个角落都不受欢迎。实际上，它面对许多拒绝它的想法的敌人，说这是一个有争议的设计元素。他们全力以赴，希望汉堡包菜单跳到时光机上，直到80年代，并留在Xerox那里。
拒绝汉堡菜单
为什么这么讨厌不起眼的汉堡包菜单？答案在于创建一个额外的步骤来查看菜单选项。在设计领域，通常需要将用户需要执行任何额外步骤的任何事情视为禁忌。
但为什么？一切都取决于顺序访问与直接访问的争论。顺序访问涉及用户分阶段发现元素和内容，通常需要代表他们进行一些输出。另一方面，如果我们允许用户直接访问，则意味着他们看到了要立即单击的内容或链接。
汉堡菜单就是一个很好的例子，因为与传统的顶部菜单不同，用户看不到所有的选项。这意味着他们必须先点击或单击才能查看选项。在常规菜单上，他们可以立即看到所有选项。
UI设计元素的另一个示例是典型的轮播，该轮播显示几个不同的内容，通常是基于图像的。它要求用户点击，单击或在其中滑动。因此，它们不会一次遇到所有内容。但是，为什么这样不好？因为许多设计师坚持认为它会降低“可发现性”，从而使您隐藏在汉堡菜单，转盘或其他元素后面的某些功能根本没有被发现的风险。
也许您拥有一个菜单选项，该菜单选项会导致一个内容类别，这对于您的用户而言非常重要，并且将带来最多的网站转化。如果将其隐藏在汉堡菜单后面或在两者之间添加一个额外的步骤，则可能不会被发现。
汉堡菜单互动成本
当然，另一个明显的原因是引入额外的点击、滑动、敲击或其他方式-所有这些都会对用户造成伤害，这种现象称为交互成本。是的，我们这样说：由于发现的这一额外阶段，汉堡菜单的确增加了交互成本。
但是，当涉及到设计中的任何内容时，我们必须保持开放的胸怀，尤其是在为用户设计时，因此不要被汉堡菜单所吸引！事实证明，在某些情况下，它也可以带来好处。
汉堡菜单-已知的心理模型
汉堡菜单要做的最重要的事情之一就是，这是目前公认的心理模型。用户已经习惯了查看汉堡菜单，并立即知道它的用途。
别急着放弃汉堡包菜单的另一个原因是，要意识到每个应用程序和网站都是不同的，什么对一个人不起作用可能对另一个人很有效。什么时候会是这种情况？
何时使用汉堡菜单
因此，您不必为否定性所困扰，您已经决定在下一个设计中加入流行的汉堡包菜单。但是，在使用原型工具进行创建之前，您应该首先意识到UX点的潜在机会。
隐藏次要功能
想象一下，网站或应用程序的核心导航元素和功能已经可见，并且您拥有一些次要选项或子类别，它们对网站的转换目标而言并不那么重要。如果用户与您联系或查看“关于”部分（取决于网站的目标而变化）不是很重要，那么您可以选择将它们隐藏在汉堡菜单后面以节省一些屏幕空间。
节省屏幕空间
另一方面，也许您的屏幕上确实有空间可以显示这些次要功能，但您不希望屏幕过于混乱，因为屏幕过于混乱会增加用户的认知负担。
您可能会决定最好向他们显示最重要的选项（他们想首先看到的选项），然后将其他选项隐藏在汉堡菜单的后面，以免使信息不知所措。毕竟，根据哥伦比亚大学对选择动机的研究，当面对较少的选择时，用户在电子商务网站上购物的可能性要高出几倍。
何时不使用汉堡菜单
什么时候可以隐藏核心功能
如果隐藏的选项，设置或功能对用户体验很重要或至关重要，则不应使用汉堡菜单。一般的经验法则是，它们可以在顶部栏或固定选项卡栏上看到。这样做的原因是，这些选项应该开放供直接发现，因此不应该被汉堡菜单隐藏或收藏起来。
当您的网站已经有很多交互时
此外，假设用户已经必须进行多次单击，这些单击对于用户体验或网站目标至关重要。很自然，您希望减少在任何地方和任何时候都可以单击或轻击的额外步骤，以整体上减少交互成本。
什么时候可以隐藏本机导航
您要做的最后一件事是在一个会干扰设备的区域放置一个汉堡菜单，例如iPhone的本机导航元素。因为大多数用户习惯于使用这些本机选项进行导航，所以这将带来良好的可用性。
汉堡菜单最佳做法
屏幕的左侧还是右侧？
当设计人员决定选择汉堡菜单路线时，经常会出现一个问题，就是他们面临将其放置在屏幕左侧或右侧的难题。有双方都赞成的论点。
将其放在左侧的论点支持这样一种事实，即从左到右的母语人士会倾向于以F形页面的左侧内容开始。由于这个事实，许多菜单已放置在左侧，这也意味着用户将习惯于左侧的菜单。实际上，将其称为“导航抽屉”的“Material design”指南指出，您出于这个确切原因应该这样做。
相反，我们也可以争辩说，由于汉堡菜单现在是众所周知的且被接受的菜单图标，所以在找到菜单内容方面，在右边包括它不一定代表太多问题。我们还可以说，如果汉堡菜单隐藏了次要的导航选项，菜单和功能，则情况尤其如此。然后，应该将更重要的内容专用于屏幕左侧，这才有意义。
但是，将汉堡菜单放在右侧的另一个理由是简单的物理原理。对于智能手机设备，其屏幕似乎每年都在变大，对于用户来说，将他们的拇指抬起到屏幕的左上角更加困难，导致他们不得不改变其掌握手机的手势。将其放在右侧会稍微减少此物理工作量。然而，即使那样，如果手机非常大，则仍然可能迫使用户不得不改变他们的手势。
浮动汉堡包菜单
一个很好的解决方案是在用户滚动时在屏幕的右下角附近设置一个浮动的汉堡菜单按钮，该按钮在屏幕上的位置固定，只需轻按一下即可轻松访问。该动态汉堡包菜单还会向用户发送一条消息，提示用户在整个应用程序中进行操作时需要访问某些选项。它还可以帮助您在移动设备上节省大量屏幕空间，并有助于创建更加身临其境的体验。
但是，如果您计划包括“返回页首”按钮，则应避免这种情况，否则，您仅需在两者之间做出决定即可。您不希望用户在要按下另一个时意外按下一个。
缩小时使用
如果您确定汉堡包是最好的选择，那么通常的经验法则是，仅在网站缩小时才进行使用。
例如，假设您正在设计一个响应式网站，则可能无法以较小的分辨率显示主菜单，因此您将为平板电脑和手机带宽部署一个汉堡菜单。想法是，一旦分辨率下降到平板电脑布局的分辨率，便将所有内容压缩到汉堡菜单中。
如何与普通菜单结合使用
另一个解决方案可能是保留顶部菜单，并保留最基本的导航功能，然后在同一栏中放置一个汉堡菜单图标，以指示还有其他“溢出”菜单选项可用。这是节省屏幕空间的一种好方法，同时又使核心导航选项易于发现并可供用户立即使用。
顶级移动应用程序汉堡包菜单示例
我们已经建立了使汉堡菜单令人愉悦的方法。现在，让我们来看一些为我们提供汉堡包的市场上一些最受欢迎的应用程序的示例！
1.亚马逊
电子商务巨头亚马逊的应用程序是使用汉堡菜单进行流行电子商务的一个很好的例子。亚马逊的设计师完成了研究，并在打开应用程序后立即了解用户的需求。
向用户显示的第一个元素是搜索栏，以找到他们想要的产品，或者他们可以继续向下滚动应用程序，以根据他们先前的购买或愿望清单项目为他们推荐产品。通常，更新付款明细，检查购物清单或订单跟踪是次要的，但在基本的汉堡菜单下似乎还是很直观的。
2.Telegram
Telegram是市场上最快的消息传递应用程序，还设法使汉堡菜单得到了充分利用。
用户打开应用程序时，除了即时消息传递界面外，其他所有内容都存储在屏幕左上方的汉堡菜单下。诸如新的群组、秘密聊天、新频道、电话和已保存消息之类的选项都可以在此处找到。
关于以最小的干扰进入消息传递界面的即时性似乎有些沉浸。像在亚马逊上一样，其他任何地方都没有菜单选项，这使得导航到汉堡菜单对于大多数任务变得直观。
3.Discord
玩家消息传递平台Discord在汉堡菜单上颇有意思。在聊天或群组中时，用户会在左上角看到一个汉堡菜单，使他们可以退出聊天或群组并返回以查看其他可用选项，这些选项通常是其他聊天和群组。
虽然这些本身不是“选项”，但它们也不是设置，通常与齿轮图标相关联。实际上，它们是用户在应用程序中拥有的导航选项最接近的东西。使用汉堡菜单而不是返回按钮退出聊天是一个明智的决定。
4.亚马逊Alexa
Amazon Alexa的应用程序汉堡菜单具有独特的形状，但可以立即识别为带有额外或辅助选项的汉堡菜单，用户可以在屏幕左上方找到它们。
将它们的辅助选项列出在“汉堡包”按钮下是一个明智的选择，因为核心导航选项已经可以直接看到，例如可用的设备和房间组。
5. Google Pay
Google Pay是很好地使用汉堡菜单的另一个很好的例子。当然，该应用程序的主要功能是显示可用于支付的用户卡。汉堡菜单按钮下的所有其他选项都将从主UI中隐藏。
为什么？因为用户一旦打开Google Pay，他们通常会在商店结帐时处于繁忙状态，随时准备现金。他们需要做的最后一件事是大量分散第二选择的注意力。
6.Just Eat
送餐应用程序Just Eat在汉堡菜单上也做得很好。就像使用Google Pay一样，当饥饿的用户打开应用程序时，“订单历史记录”，“设置”和“帮助”可能并不是他们想到的第一个导航选项。
而是将这样的选项隐藏在汉堡菜单后面，并立即邀请用户在文本字段中输入其地址，以提示靠近他们的当地列表或浏览列表，食物种类。
7.领英
LinkedIn的应用程序对汉堡菜单也采用了一种非常独特的方法。他们没有将图标与文本“菜单”组合，而是将菜单放置在典型的左上角，而是将其与用户的圆形LinkedIn个人资料图片组合。
这立即向用户表明，菜单下直接存在与用户的帐户和个人资料直接相关的选项。
8. Dropbox
在Dropbox的应用程序的核心导航选项从他们的应用程序一开始就非常明确：一旦用户打开了应用程序的主部分，他们看到他们的所有文件的列表。他们还可以在每个文件旁边找到隐藏在kebab菜单下与那些文件有关的所有选项。
但是，在Android版本上，所有其他选项都位于您所猜测的后面：简洁的汉堡包菜单。在点击汉堡菜单时，用户可以看到其他导航选项列表，以过滤其文件，例如文件夹、文本、照片和离线文件。
9. Google云端硬盘
就像Dropbox一样，Google云端硬盘应用程序将向用户显示其所有最新文件作为优先级。无论是使用Google文档还是Google表格创建的，很显然它们都会向用户显示他们首先要寻找的内容。
其余的辅助导航选项被隐藏在汉堡菜单的后面，例如“最近访问”，“离线缓存”，“ 垃圾箱”，“通知”，“备份”以及其他类似的选项，例如“设置”。
10.优步
在Uber应用程序中，整个屏幕专用于帮助用户在打开应用程序后立即找到汽车。用户可能希望看到的所有辅助选项都隐藏在视图之外，直到他们希望通过单击左上方的汉堡包图标看到它为止。
毕竟，“设置”和“历史记录”等选项不太可能是用户每次打开应用程序时的直接目标，并且不太可能在每次打开应用程序时使用。
顶级响应式网站汉堡菜单示例
现在是时候检查一下网页设计中的一些优秀网站如何解决汉堡菜单的问题了。
1. Shopify
当将网站缩小为较小的分辨率时，Shopify会很聪明地选择将大多数导航选项隐藏在放置在屏幕右上方的汉堡菜单后面。
这是因为即使在使用移动设备浏览时，用户最有可能在设置电子商务网站之前查看Shopify的网站版本。汉堡菜单在屏幕右侧的位置意味着它不会遮挡左侧的徽标，并使用户有一项主要任务：注册并开始免费试用！
2. Github
最受欢迎的软件开发平台Github很好地缩小了网站规模，并使用汉堡包菜单摆放仪表板，将请求问题和市场排除在外。为什么？
他们主页的主要功能也倾向于充当核心导航：“浏览GitHub”，“阅读指南”，“启动项目”和“创建存储库”都是呼吁用户采取行动的主要功能。
3. NBC新闻
我们之所以将NBC新闻列入该列表，是因为他们似乎采用了不太传统的方法，即在网站的桌面版本中包含一个汉堡菜单。当网站缩小为较小的分辨率时，您会看到它们保留了相同的汉堡菜单。但这不是我们选择此示例的唯一原因。
NBC从用户体验与新闻相结合的独特角度进入汉堡菜单。在菜单顶部栏，它们包括用户阅读最多的故事类别，然后将不重要的类别捆绑到汉堡菜单中。
这些故事的明确偏好顺序是从左到右。当网站压缩为较小的分辨率时，这种偏好变得更加明显，汉堡菜单的后面隐藏了一个或两个以上的选项，仅留下了三个最重要的类别。
4. CSS技巧
CSS技巧展示了有关顺序访问与直接访问的丰富知识。在桌面版本上，用户可以自由发现和浏览顶部栏菜单上的不同类别，例如文章，视频，年鉴，新闻通讯等。这些类别的右侧是一个搜索栏，供用户查找感兴趣的主题，结果中将显示不同的媒体。
在移动版本上，所有这些类别都被压缩到一个汉堡菜单中，仅离开搜索栏。这表明CSS技巧理解了移动设备用户经常需要的即时性（NNG）和紧迫性。当他们直接访问网站时，通常是专门搜索某些内容，而不是浏览。
5.星巴克
星巴克干净利落地将其网站缩小到移动设备。在他们网站的桌面版本上，我们可以看到菜单选项，例如奖励，礼品卡，找到商店并登录。
但是在移动设备上，所有这些都整理成汉堡包菜单。并不会对可能要进入星巴克商店的用户造成任何明显的损害。他们不想看到奖励，礼品卡或登录他们的帐户，而是更希望看到当天提供的内容，这是他们在简洁的移动版本中看到的主要内容。
最后的想法
那么，您是否应该在下一个设计中使用汉堡菜单？与大多数设计一样，答案取决于两个因素：网站或应用程序的类型以及用户。
您的汉堡菜单应该在屏幕的左侧还是右侧？同样，答案通常是主观的。要采用真正客观的方法，我们必须在使用应用程序时充分考虑用户的思想并了解他们的需求。
最后，最重要的是：一切都归结为直接访问。是否在主菜单或汉堡菜单中包含菜单选项或功能，将取决于用户的优先级。