UI设计

汉堡包导航的由来及使用方法

作者:口袋使者 2016-10-26 我要评论

今天无意中发现了几篇关于汉堡包导航的文章,之前在分析软件时也多次遇到,但是对其并不是很熟悉,正好补充一下。 图片来自http://www.beforweb.com/ 汉堡包导航...

今天无意中发现了几篇关于汉堡包导航的文章,之前在分析软件时也多次遇到,但是对其并不是很熟悉,正好补充一下。


图片来自http://www.beforweb.com/

汉堡包导航,也就三条横线的导航按钮,是一种很常见的导航方式。与抽屉式导航类似,只不过汉堡包更强调的是使用的图标,抽屉式是指导航展开的方式。关于汉堡包菜单的讨论,主要就是针对图标的使用问题,该图标的意义是什么,是否适合用来表示导航菜单,使用时应该注意些什么。下面具体来讲。

Morten Rand在2014年的一篇文章中建议最好不用使用汉堡包图标。最直接的原因就是有人做了相应的研究,发现用户不能直观地从汉堡包图标联想到导航菜单,而是需要经过一定的学习。而且图标本身是逻辑和数学当中用来表示绝对相等的,跟导航没有半点关系。那为什么一开始会使用这个图标呢,作者觉得没必要去深究,应该就是某个设计师随手使用,然后再逐渐流行开来的。但是即使在设计师看来很普遍,很流行的图标,对于一些新手来说,还是很难直观地明白汉堡包图标的意义。

汉堡包的图标,其实就是三条线,当然,你也可以赋予它其他各种意义,一个货架,斑马线。相比这些,导航的喻意更显得与三条线毫无关系,只是因为别人告诉你,这个图标就代表导航,然后你才知道这个就是导航。

作者相信应该有一个更好的图标可以用来表示导航的意义,只是现在还没找到而已。那么在使用汉堡包图标的时候,应该注意以下几点。

  1. 尝试使用文字“菜单”代替图标
  2. 考虑使用下拉箭头或者其他有更好的暗示更多操作的图标
  3. 重新考虑导航的位置和功能
  4. 尝试使用画布外菜单,然后使用tab和箭头来表示可操作。

下面补充一些具体的例子。
1、在一开始的时候应该提示用户,引导其点击汉堡图标。

2、注意好图标与logo的关系,不要让两者混在一起。

3、如果界面上有其他按钮,可以将其放在一起,这样汉堡图标的可点击性就更明显。但是同时也要注意按钮的顺序,导航按钮一般放在左侧。下图最右的例子就不太好。

最后,贴一下汉堡图标相关的一些A/B测试结果。

从这个测试可以看出,简单的三条线的表现是最差的,然后是加文字的,最好的是加边框的。同时也可以发现,只有大概2.0%的点击率,也就是只有大概2%的用户通过点击此处进入导航菜单。在此基础上还做了第二个测试,具体见下图。


在这个测验中,表现最差的是单独的“菜单”标签,最好的是菜单加上边框。

综上,汉堡包图标本身没有很明确的可点击性,然后也没有直接使用文字那么好理解。但是同时也说明这个图标对用户的干扰是比较小的,用于阅读类的界面也许比较合适,用户不需要频繁地在导航之间切换,所以在大部分时间导航并没有引起用户的注意,而当用户需要时,稍微找找就可以发现。



阅读原文 本文来自:口袋知识网 news.papocket.com

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 没灵感?这里是最全的15个设计风格总结

    没灵感?这里是最全的15个设计风格总结

  • 没灵感?这里是最全的15个设计风格总结

    没灵感?这里是最全的15个设计风格总结

  • 淘宝刚发布的新版本,可能会引领2017年

    淘宝刚发布的新版本,可能会引领2017年

  • 学会这个教程,可以把任何一张人物照都

    学会这个教程,可以把任何一张人物照都