为什么要避免使用汉堡包菜单
交互设计指南2016-02-15这种用法是可以接受的。它的内容界面只有一级结构,不再有下级界面,无需一层层的前后导航,因此不会发生导航冲突的情况。
不过即使是这样,我们也可以看到,导航栏中的信息负载已经相当严重了。
其他负面结果也比较明显。右侧的会员菜单按钮占据了通常情况下用来放置行动按钮的位置,与当前界面相关的操作无处摆放。设计师别无选择,只能将各种与上下文相关的操作集成在左下角设置按钮唤出的行动菜单当中。
这也引出了本文的下一部分。
替代方案
最简单直接的替代方案就是传统的tab栏。
顺便说一句,侧边栏菜单模式对于不良的信息架构永远是来者不拒的,因为你总能很轻易的向里面添加项目,而不会产生直接的后果,直到用户展开菜单。
将侧边栏菜单移入底部tab栏,你也有机会重新梳理产品的信息架构。下图演示了将侧边栏菜单各条目移入tab栏的方式,你可以根据里面的彩色小点看出信息架构是怎样重新整合的。
启示
1. 信息状态可以直接呈现在tab栏当中。
2. tab栏中导航项持续可见,点击一次即可切换不同的模块。
3. 不存在手势上的冲突。
使用传统形式的tab栏不意味着我们无法解决纵向空间缺乏的问题,例如在滚屏时隐藏顶部的导航栏;位置始终固定的tab栏本身就可以用来呈现当前界面属于哪个模块,使我们不需要一直依靠导航栏来呈现标题等信息。
关键就在于不要隐藏导航信息,允许用户直接访问导航项,并且不要在手势上与其他操作产生冲突。
扩展性如何?
我们举的例子都是基于iOS的,所以有可能用到的导航控件就是iOS的tab栏或工具栏。那么如果你的导航项超过5个该怎样处理呢?
这种情况本身不太理想,而且搞不好也说明着你的app在信息架构方面不是很合理。但是如果导航项确实超过5个,那么通常的做法就是让第5个tab成为入口,也就是“更多”,使用户能访问到更多的导航项。