首页 > 代码库 > 何时使用汉堡包菜单设计

何时使用汉堡包菜单设计

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

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

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

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

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

技术分享

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

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

在这种特殊情况下:

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

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

结论:

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

原文作者:Nick Babich

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

更多设计类相关干货(文章及经验教程),尽在:UI/UX专业博客

 

何时使用汉堡包菜单设计