24小时课程咨询热线
13481013014

UID简介 UI设计 UED 平面设计 网页设计 淘宝美工 PS培训 学员作品 学员就业 合作企业 设计教程 免费试听 更多课程

交互设计终极指南

  • 课程级别:
  • 课程数量:
  • 课程评分:
  • 课程简介:
  • 中级技能
  • 更新至第9套教程
  • 免费在线分享美工必备小技巧,快速学习美工技巧,全面掌握干货技能,从美工菜鸟变身达人。

达内数字艺术学院拥有众多业内权威实战讲师!名师面对面,巴拉拉……

预约试听 名师答疑

为什么要避免使用汉堡包菜单

交互设计终极指南2016-02-15

这种用法是可以接受的。它的内容界面只有一级结构,不再有下级界面,无需一层层的前后导航,因此不会发生导航冲突的情况。

不过即使是这样,我们也可以看到,导航栏中的信息负载已经相当严重了。

其他负面结果也比较明显。右侧的会员菜单按钮占据了通常情况下用来放置行动按钮的位置,与当前界面相关的操作无处摆放。设计师别无选择,只能将各种与上下文相关的操作集成在左下角设置按钮唤出的行动菜单当中。

这也引出了本文的下一部分。

替代方案

最简单直接的替代方案就是传统的tab栏。

顺便说一句,侧边栏菜单模式对于不良的信息架构永远是来者不拒的,因为你总能很轻易的向里面添加项目,而不会产生直接的后果,直到用户展开菜单。

将侧边栏菜单移入底部tab栏,你也有机会重新梳理产品的信息架构。下图演示了将侧边栏菜单各条目移入tab栏的方式,你可以根据里面的彩色小点看出信息架构是怎样重新整合的。

启示

1. 信息状态可以直接呈现在tab栏当中。

2. tab栏中导航项持续可见,点击一次即可切换不同的模块。

3. 不存在手势上的冲突。

使用传统形式的tab栏不意味着我们无法解决纵向空间缺乏的问题,例如在滚屏时隐藏顶部的导航栏;位置始终固定的tab栏本身就可以用来呈现当前界面属于哪个模块,使我们不需要一直依靠导航栏来呈现标题等信息。

关键就在于不要隐藏导航信息,允许用户直接访问导航项,并且不要在手势上与其他操作产生冲突。

扩展性如何?

我们举的例子都是基于iOS的,所以有可能用到的导航控件就是iOS的tab栏或工具栏。那么如果你的导航项超过5个该怎样处理呢?

这种情况本身不太理想,而且搞不好也说明着你的app在信息架构方面不是很合理。但是如果导航项确实超过5个,那么通常的做法就是让第5个tab成为入口,也就是“更多”,使用户能访问到更多的导航项。