美国上市职业教育机构

Adobe创意大学指定UI培训机构

24小时课程咨询热线

130-5158-9300

交互设计指南

  • 课程级别:
  • 课程数量:
  • 课程评分:
  • 课程简介:
  • 中级技能
  • 更新至第9套教程
  • 免费在线分享美工必备小技巧,快速学习美工技巧,全面掌握干货技能,从美工菜鸟变身达人。

达内数字艺术学院拥有众多业内实战讲师!名师面对面,巴拉拉……

预约试听 名师答疑

为什么要避免使用汉堡包菜单

交互设计指南2016-02-15

近来,越来越多的研究及测试表明,侧边栏菜单,也就是我们俗称的汉堡包菜单,很可能是一种弊大于利的设计模式。不过我们也要知道,这个问题实际上是很微妙的,我们很难以一种非此即彼的标准来判断;我在一系列可用性测试当中所观察到的情况也证明了这一观点。

所以我个人仅希望各位在制定设计决策之前能够充分了解这种模式当中所存在的问题,有可能导致的结果,以及一些相关的替代方案。

问题所在

1.可发现性较低

2.效率较低

3.与系统的导航模式冲突

4.不够一目了然

1.可发现性较低

若不在视线中,便不在认知中。

默认状态下,侧边栏菜单和其中的所有内容都是不可见的。

此外,要使界面真正可用,首先要让人们了解到触发侧边栏展开的图标是可点击的按钮。我们见过不少产品都会在汉堡包图标旁边加注“菜单”,或使用气泡提示来告诉用户这里是可以点击的;显然,他们也感觉到了这一问题。这种做法并非不可取,但在应用最重要的界面中平白增加这样的元素,对于核心功能来说仍然属于一种干扰。

2.效率较低

即使用户知道了侧边栏菜单的存在,他们在使用导航时仍然会感受到摩擦力,因为这种模式要求用户首先打开菜单,然后才能寻找自己的目标。

而下图所展示的是拥有传统的固定导航系统(tab栏)的模式,其中的功能模块一目了然,入口始终保持可见:

3.与系统的导航模式冲突

所有问题当中最突出的就是这一点了。例如在iOS当中,我们很难在不引起冲突的情况下将菜单按钮与标准的回退按钮同时放置在导航栏里。

我们即需要在导航栏里放置汉堡包图标来唤出菜单,也需要回退按钮使用户能够退回上一级内容。最后,要么就是如上图所示的拥挤不堪的方案,要么就是取消显性的导航,强迫人们一次次的右滑来回到初始界面并唤出侧边栏菜单。

4.不够一目了然

在默认状态下,你无法获取某个特定模块的信息,因为菜单本身就是隐藏的,要了解模块当中的信息,你首先要经由菜单进入模块才可以。

当然,也可以像Jawbone UP应用那样直接通过图标来代表信息。但这种方式的扩展性不强,你很可能需要针对不同类型的内容维护一套多个图标,最终不得不通过一种更通用的方式来呈现信息提示,以减少复杂性;从“一目了然”的角度讲,结果还是差不多。

而固定的tab栏,在任何上下文环境中都可以让用户清晰的了解到每个模块当中所发生的事情,并让他们能够随时进入相关界面。

用户的认知

作为设计师,我们可能会为了节约可用空间而不得不使用汉堡包模式;不过,在现实当中,人们究竟是怎么看待界面的?这方面我们可能存有误解。你认为人们可以看到眼前的一切,其实他们只能注意到某个焦点区域,即使整个屏幕的尺寸很小。

节约屏幕空间——我们可以尝试通过其他不会对导航造成负面影响的方式来达成这一目标;那些最基本的人机交互设计原则仍然需要遵守,例如通过一目了然的方式为用户提供反馈、展示应用当前的状态等等。

何时使用汉堡包菜单

严格的讲,按照我们之前的分析,汉堡包菜单真正有意义的用法不是很多,多数情况下还是要尽量避免使用;不过例外也仍然存在。

IRCCloud是一个不错的例子,在这里,汉堡包菜单模式是利大于弊的,因为IRCCloud同时存在两套导航,通过汉堡包菜单,用户可以在同一个界面环境中去到频道菜单和会员菜单中进行导航。