烟台新睿网络是专业的烟台APP开发公司,提供烟台APP开发,烟台APP制作,烟台手机应用开发。

新睿官网

咨询热线:0535-6678111 0535-6667755

烟台APP开发公司:怎样和为什么要避免汉堡包菜

这种模式的问题现在得到广泛的认可,但实际的解决方案是什么?希望你阅读后了解问题、解决方案,在使用这种模式之前知道它的影响。

 

汉堡包导航这种模式的问题现在得到广泛的认可,但实际的解决方案是什么?希望你阅读后了解问题、解决方案,在使用这种模式之前知道它的影响。

 

 

汉堡包导航产生的问题:

1.较低的可发现性

2.效率不高

3.与平台导航模式冲突

4.不便于快速浏览

 

 

1)较低的可发现性


不在视线内的内容很容易被人遗忘。汉堡包菜单栏在其默认状态下,侧栏菜单及其所有内容都是隐藏的,所以人们需要花费一定时间来发现侧边菜单,并且操作它。就如同现在很多公司需要使用文字标签或提示,来补充单纯的图标,好让用户理解这个功能。(但是,这在主屏幕提供了主要功能的软件中是不适用的。)

 

 

2)效率不高

目前有人意识到并重视到汉堡包导航的弊端,汉堡包导航增加了导航摩擦,它迫使人们必须要打开菜单,只允许他们看到和到达他们的目的地。

以下是导航元素一直可见的即时导航对比

3)与平台导航模式冲突

除了这些问题之外,在诸如iOS的平台中,汉堡菜单根本不能实现,并且与标准的导航模式相冲突。

在ios平台里,左侧有返回上一层级的交互手势,但是此时左侧导航栏还需要为菜单保留。在用户点击到下几个层级后,想要直接通过菜单跳转层级时需要经过好几次的返回,才可以划出菜单,如下图:

 

4)不便于快速浏览

 

这里有两个软件的功能展示的对比(Jawbone UP的通知和twitter的通知)

 

 

 

当用户需要获得信息必须通过点击导航,跳转到另一个页面才能看到时,用户得到想得知的信息是很困难的。

 

 

就像Jawbone UP应用程序那样:在侧边栏菜单按钮旁边显示一个代表通知性质的图标。但是这也并不能很好的解决这个问题。并且它需要你提供更多的图标来让用户明白你的功能位置。作为设计师,你可能会被迫显示通用的通知图标,这样可以让用户更好的理解图标的意图,以免增加歧义。

相比之下,Twitter下面的Tab Bar可以让用户了解通知功能和内容,并直接导航到与之相关的界面。        

 

 

导航的认识

很多人可能会觉得,我们不得不使用汉堡包菜单栏来精简界面,但这实际上是对人们在现实中的误解。 你可能会认为人们会看着界面中的一切,被复杂的各种元素困扰,但实际上,用户更倾向于关注一个重点领域,自动忽略其他信息,即使是在缩小尺寸的屏幕上。

因此,我们不需要为了精简而使用不好用的导航,就如同不应该为了精简而放弃应用程序的信息反馈和状态的显示。

 
作者旁注:也许我们需要的是刷新我们对HCI的理解,当我们设计的时候,采用一些视觉方法可以避免很多设计错误。

 

 

 

解决办法

 

关于这些问题已经写了很多,但是解决方案并不是每个人都很清楚。

 

 

我们什么时候使用汉堡包导航?

 

 

可能有一些非常罕见的情况,这种模式实际上是有意义的,但一般情况下,我们应该是完全避免它的。

IRCCloud就是合理应用这种模式的例子,它允许在频道和频道成员之间导航。


这案例告诉我们,汉堡包导航还是可以使用的。因为该软件只需要主屏幕来展示功能,没有下一层需要导航来跳转。但是即使在这种情况下,我们可以看到,有时候标题栏已经被超载了,这其中还是需要重新考虑其内容。(如下图)

 

 

 

 

同时,侧边栏菜单按钮(右)占用了显示“操作”按钮的机会,无法放置所有与内容相关的动作。所以,设计师别无选择,只能将渠道,网络和帐户等不同背景的操作混合到一个单独的操作工作表中:

 

 

 

应该用什么代替?

 

 

 

 

Sidebar菜单模式非常适合信息架构不太清晰的产品,因为你可以直接添加一件事情,而不会有直接的后果,当然直到人们真正使用它就会发现问题。

 

 

 

 


以上是如何从侧栏菜单中移除的示例。可以按照颜色编码的点来了解元素如何在这两种解决方案之间转换

 

 

好处:

1.状态可以直接显示在消息选项卡中
2.物品总是可见的,一个可以立即访问
3.无导航手势冲突

 

 

我们可以通过在滚动方向上隐藏导航栏来保存一些垂直空间 – 如Facebook中看到,使用固定的Tab Bar在当前屏幕,允许我们不依赖导航栏来执行此操作。

如果产品很小,也许一个工具栏就够了。其中关键的是:不要隐藏导航;允许直接访问;不要与导航手势冲突;并提供与其相关的图标的反馈。

对于网站设计,我(作者)认为最好仍然是审查信息架构,而不是套用一些iOS模式。只需将导航显示为网站导航,人们就会发现和使用。

它如何扩展?

我在这里提供的示例基于iOS,在这种情况下,你会使用Tab或工具栏。但是Tab Bar的规模如何超过5个项目怎么办?

这种情况并不理想,它可能再次表明你的应用程序的信息架构有问题,但如果您必须扩展超过5个选项卡,通常的模式是使用最后一个Tab栏提供对其余选项的访问,类似于不幸的地下室菜单。

 

 

 

 

你可能看到一些滚动的工具栏,例如Rookie。这样可以避免边栏菜单的问题,但是可能会产生点击和滚动之间操作失误,因此可能会导致更高的导航摩擦,并导致更高的错误率。

 

 

 

 

 

请记住,第二个解决方案更适合于行为而不是导航。

 

 

Rookie为了解决工具栏实滚动后,未被显示的功能容易被忽视的状态,在选择一个功能并完成之后(例如裁剪,旋转等),将其在工具栏里隐藏。这样可以防止在工具栏中用户找不到所需的功能,根据用户行为,在下一次显示时重新设置功能的排序。

获取APP开发解决方案

APP活动运营工具

APP资讯文章推荐阅读

相关案例推荐