BeFor Web
为网而生 - 关注移动互联网及AR/VR产品的用户体验设计

关于汉堡包图标的闲言碎语

关于汉堡包图标的闲言碎语

想起来貌似真的有几天没有开空调了,夏天真的过去了吗?回头看看觉得恍恍惚惚的,好像过去两个多月只发生了一件事,就是从早到晚的照顾喵以及替喵揪心。眼看着秋天快来了,希望什么事情都能好好的好起来。

前面在微信里有朋友问到美工和设计师的区别在哪里。不很常见的一类问题...记得2006年刚刚入行在博客大巴做网页设计师时还专门叮嘱别人不要叫我设计师,还是美工更好。而现在无论听到别人这样称呼自己还是其他同行,都会蛮气愤的吧。为什么这样呢,大约当年确实觉得自己不够“设计师”的头衔,毕竟不是专业出身,又刚刚入行;而如今大概入了门。说回美工这个话题,我个人觉得应该特指各行各业当中负责对既有结构、内容进行美化工作,而无需考虑结构与内容本身以及业务需求和框架的人。吧?

最近越来越多的看到关于汉堡包图标的议论文章,工作当中也觉得这方面的讨论多了起来;有些观点还是值得参考借鉴的。今天就是这样一篇,也许接下来会做个小系列?不知道,这里进入译文先。

如今,汉堡包图标已经是很常见的移动导航设计模式了;它的三道杠形式非常简单,包括迪士尼、星巴克、Facebook、Google等知名公司都在自己的移动应用及移动版网站当中使用了这一模式。

不过在UX设计圈子当中,关于“汉堡包菜单图标属于反直觉模式”的质疑声也此起彼伏。一些替代方式开始出现,三道杠图标有逐渐被更符合直觉的设计方案所取代的趋势。

本文中,我们将对汉堡包图标进行简单的讨论,看看UX圈子中的同行们对它有怎样的看法,在使用时有哪些设计原则。

趋势伊始

几年前,汉堡包模式刚刚兴起时,一些设计师做了相关研究,并发现这种模式可以在不破坏用户体验的前提下有效提升转化率。

他们认为,汉堡包菜单图标的简单形式不会在用户完成任务的流程当中产生干扰;而且用户在需要的时候仍可通过点击该图标来访问菜单,进而导航到其他界面。那些在平时过于抢眼的导航元素被隐藏在汉堡包菜单当中,使用户在真正需要的时候才会打开,交互行为的情境感更强。

Linda Bustos曾经在她的文章“避免这些移动菜单设计上的错误”当中分析了汉堡包菜单的潜在问题。她并没否认该模式作为导航菜单的优点,不过她坚持认为在使用这种模式之前一定要考虑得当,关键在于怎样使用。

为了支持这个想法,Linda列举了一些移动应用的设计案例,进行比对后给出了一些设计原则:

正确的做法

  • 尝试在初次使用时为汉堡包图标提供视觉指引,让用户明确的知道在哪里进行导航。
  • 如果附近还有其他交互元素,那么要确定一个合理且统一的布局顺序。例如将汉堡包菜单图标放在顶部最左侧,其他元素例如搜索或购物车等排列在右侧。
  • 如果空间允许,可以尝试在图标旁边直接标注“菜单”标题,使表意更清晰,更容易识别。

错误的做法

  • 在布局上,将汉堡包菜单图标放的与logo过近,以至于让人误以为它是logo的一部分。
  • 汉堡包菜单图标周围的留白空间过多。

与此同时,越来越多的大公司,例如迪士尼、星巴克、Facebook、Google等等都开始逐渐在自己的应用和网站当中采用汉堡包菜单的设计模式。

几个月前,Morten Rand在他的文章中说了一些不好听的,在他看来,汉堡包菜单图标的样式本是在逻辑和数学当中用来表示“绝对相等”的;从效果上来说,这个图标更加适用于表示某种内容列表,而不是导航菜单的概念。

在我个人看来,他所讲的是有道理的。汉堡包菜单图标本身看上去并不像“菜单”;除非用户已经明确的知道这个图标就是用来展开菜单的,否则他们很难了解这两者之间的关系。在汉堡包菜单的潮流开始之后,我们作为设计师开始越来越多的采用这种模式,并认为它是符合常识和直觉的,实际上这只是我们自己的经验而已。而实际的认知效果则更多的取决于产品的用户群体,以及他们是否得到了足够明显的指引去了解这个图标的用途。

Morten的话切中了要害,他认为这个图标本身是反模式的,它不该与导航菜单建立起关联,因为它的样式无法代表导航菜单,它只是三道杠,仅此而已。

hamburger-icon.jpg

根据Morten的建议:

  • 试着直接使用“菜单”一词代替三道杠图标。
  • 试着使用箭头或其他能够表达出内容元素增减的图标来代替。
  • 重新考虑导航菜单本身的位置。
  • 试着使用“画布外菜单”,并通过带有箭头的tab来暗示操作方式。

新近的研究

2014年初,Luke Wroblewski推荐了一篇研究文章“移动菜单AB测试:汉堡包不是最佳选择?”,这篇文章带来了3点研究结论:

  1. 35岁以上的用户似乎不理解汉堡包菜单图标的含义。
  2. 用户群体的人口结构对测试结果的影响很大。
  3. 推荐在三道杠图标旁边直接加注“菜单”一词,明示含义。

这篇文章同时指出,汉堡包菜单及其图标的设计模式不适用于所有产品。Jeffrey Zeldman也在他的Twitter中支持这一观点:

针对特定产品的设计决策要高于约定俗成的设计模式。要进行测试,并根据结果选择最恰当的方案;不要盲目采用汉堡包一类的模式。

结论

综合各方面的看法,我们可以认为,汉堡包图标并非在所有情况下都适用;测试是关键。可用性测试或AB测试可以帮助你更有效的了解它是否适用于你家的产品。

一种设计模式的普及,一种设计约定的形成,在很多时候可能只是由于设计者之间不断的互相复制,而并非某种经过认真思考的原因。这样的设计模式也许碰巧适用于某些类型的产品,但对于你来说未必是最合适的解决方案。记得聚焦于自家产品的特定需求,不要盲从。

译文代表原作者观点。欢迎发表评论,或到译者微博进一步交流探讨。

本站原创编译文章。如需转载,请注明:本文来自Be For Web
译者信息: C7210 - 交互设计师、UX热爱者、译者、猫奴、音乐玩家,现就职于大众点评网用户体验设计部(DPUX)
评论 (3)
非常喜欢你的博客,对设计的理解很独特,非常喜欢。 最近发现很多iOS的应用原来使用这种方式,现在都改为系统的原始tab方式了。 像网易新闻 QQ 。
是的;多多交流:)
汉堡包这种模式在android里面不是经常用么。。。怎么还会不知道。顺便说一句,你的验证码太长了吧!!!
发表评论