何时使用汉堡包菜单设计

Posted 2020-09-29

汉堡包菜单，也叫侧边栏菜单。它由三个堆叠线条（你可以形象的想象成汉堡包中上下的两个面包和中间的肉）的图标用于表示菜单。点击图标时，会显示可用的导航选项。很多设计师写的有关汉堡包菜单设计的文章，都不看好这种设计。总结其缺点，主要体现在：1.可发现性较低；2.效率较低；3.与系统的导航模式冲突；4.不够一目了然。大家如果感兴趣的话，可以搜索相关文章详细了解一下。但究其根本，并不是图标本身，而是隐藏在图标后面导航选项。

尽管如此，在某些情况下，汉堡包菜单设计可能是一个不错的选择。

如：汉堡包菜单作为辅助导航

由于汉堡包菜单的主要缺点是其低可发现性，因此不推荐将其使用为主导航菜单。但是，在设计辅助导航选项时，这种模式可能是一个合适的解决方案。如果主导航选项在屏幕上以CTA按钮（即用户响应行动或叫用户行为召唤）或其他形式展现，在辅助导航中使用汉堡包菜单设计会是一个好的方法。

下面以Uber主屏幕作为例子：

地图和搜索（Uber屏幕的两个重要导航元素）始终是可见的。

由于主屏幕的所有内容都是为了打车，所以诸如历史记录和设置等次要选项可以隐藏在汉堡菜单的后面(这些功能在每个人打开应用程序时不太可能都去使用)。这个汉堡包图标不会分散用户打车的注意力，而且仍然允许他们访问里面的辅助功能。

在这种特殊情况下：

导航元素越少意味着当用户与应用程序交互时受到的干扰就越少。而且，最小化导航使用户的注意力集中在打车上。

一般来说，在你选择是否使用汉堡包菜单时，请考虑“80%规则”。也就是，你想要隐藏在汉堡图标后面的导航选项会低于正常使用的80%吗? 如果你的答案是肯定的，那么把它们放在汉堡菜单里就没问题了。

结论：

虽然隐藏的导航通常不利于用户体验，但任何设计决策都必须对应用程序的目标情景进行综合考虑。换句话说，没有“好”或“坏”的设计模式。最重要的是使用情景。

原文作者：Nick Babich

原文链接：http://babich.biz/hamburger-good-ux/

更多设计类相关干货（文章及经验教程），尽在：UI/UX专业博客