新闻

小议移动APP汉堡菜单和APP汉堡图标的优缺点

时间:2015-02-06 10:27:59

也许很多APP设计师新手还不知道什么是汉堡菜单和汉堡图标。我们先来看下图:

APP汉堡菜单和汉堡图标

 

只要有三条横杠的这样的图标。我们简称汉堡图标。

移动设计的专业术语如下:汉堡菜单 (hamburger menus),也叫做左滑菜单 (left nav flyouts),或者叫抽屉菜单 (drawer menus),或者叫做 basements,或者叫做 slide out menus… 总之就是长着三条线,通常出现在屏幕左上角,导航栏左边位置,用于代替 tab bar 的菜单,兼顾导航的功用。

app汉堡图标

 

25学堂的小编相信大伙对这个图标不陌生吧!也有很多人在自己的移动APP项目里面 使用了这样的汉堡图标。

抽屉式导航设计

我们来看下知乎里面一位牛人是这样点评APP汉堡图标的优缺点。

 

使用APP汉堡图标优点:

这是个懒惰得无须用脑的设计,只需要把所有的视图切换按钮,所有你想给人看不想给人看的东西放在这个汉堡图标点击之后出现的一个汇总视图里面即可,不担心对象太多,就让它可以滚动。并不要过于考虑,总之全部堆砌在一起就行了。那么好处是什么?当然有好处,节省了宝贵的屏幕空间,屏幕下端固定出现的一条 tab bar 现在只需要导航栏的一个按钮就可以取代。

使用APP汉堡图标的缺点:

太多了。通常我们说一个好的交互界面最重要两点是,让使用者在一个视图里面可以看见自己在哪里 (tells where you are),还可以去哪里 (shows you where else you can go),但汉堡菜单非常直接了当地把这两件事情都搞砸了。所有的门都隐藏在另外一个没有名字的门后面。

也有不少媒体报道称越来越多的研究及测试表明,侧边栏菜单,也就是我们俗称的汉堡包菜单,很可能是一种弊大于利的设计模式。

问题所在

1、可发现性较低

2、效率较低

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

4、不够一目了然

 

汉堡图标得到采用和推崇,还是因为设计师(更多时候是客户)没有完全遵循移动优先的设计方法。他们想要一个“常规”站点,却把它硬塞进外孙女的手机中。

汉堡图标的反对者往往用“菜单”二字代替它,他们这么做完全不得要领。不论是否形似,汉堡图标如今已经达到了它的含义,但用户理解这个按钮是干什么的,并没有解决最大的问题,它隐藏了导航,隐藏了用户的选择,这是相当严重的自残。

简单说,汉堡图标是一种象征,象征着我们在一心一意全方位拥抱移动优先的道路上,集体失败了。

 

总之:移动APP汉堡菜单的价值有些被过分夸大放大了。仅仅适用于极少数只需要单一视图 (single view) 便能够很好工作的应用。譬如说 Maps,但这时候是不是一定要使用汉堡菜单?难道不可以三个小点,或者一个 ‘i’ 按钮?或者 nav bar 或者 tool bar 控件上的其它按钮?或者其它信息组织形式?这时候一个适用范围并不十分广泛的 “标准” 汉堡菜单,只会局限思维。

 

那么我们到底如何合理有效的使用app的汉堡菜单呢?

第一种用法:它的内容界面只有一级结构,不再有下级界面,无需一层层的前后导航,因此不会发生导航冲突的情况。比如界面搜索切换。

第二种用法:传统的tab栏是汉堡菜单的最简单直接的替代方案。

第三种用法:拆分APP的结构和目录,细化这些菜单。如果我们的APP功能比较复杂,菜单比较多,汉堡图标将会是表现菜单的最佳形式。

 

还是老毛的那句话比较真理:“具体问题,具体分析”

移动APP汉堡菜单和APP汉堡图标有利也有弊。就看各位一定APP大师们如何来设计好它。

因为如今的汉堡式菜单很多被滥用了。

优秀的app都极为专注,他们通过远比网页严苛的用户测试进化。要打造app一样的体验,我们得简化网站,再简化,然后再多简化一点点。如果有必要,将建筑结构打散成可管理的小片,近似于迷你站点。当我们为用户展现一组简单的选择,复杂菜单的问题再也不会出现了。

当然25学堂也希望有新的表现形式出现。可以完美的解决汉堡菜单带来的弊端。

最后,我们也只有用开放的心态去拥抱移动优先的方式,不仅将它用于设计,也用于我们的内容和信息结构,让移动汉堡菜单和汉堡图标才会成为APP设计的历史。

loading

官方微博

电话:020-38677071

Email: service@eastdraw.com

地址:广州市天河区五山路141号尚德大厦A座20层2008室

立即咨询
在线咨询