如果你致力于数码产品的开发，你应该早就阅读过一大堆吐槽汉堡状导航是如何因其低发现性和低效率而影响用户体验范式的文章。

 

幸运的是，越来越多的网站和APP正在进行各种实验，并且已经许多行之有效的解决方案了。下面列举的方案没有谁比谁更好，它们的具体可用性都是依照内容和情景来确定的。

 

1.Tabs

如果你网站或APP的分区有限，用户就应该能在这些分区之间快速切换，这时候Tab栏就阔以了。

Tab栏看起来像是最简单的导航,然而当你在设计它们的时候需要考虑到一些事情：

·最多只能展示五个分区

·Tab的顺序应该根据它们的优先级和逻辑顺序进行排列。

·根据具体情境，Tab既可以在屏幕上方展示也可以在屏幕下面展示。

·不加文字标注的ICON只能用于为大众所熟知并且经常使用的ICON。

举例：领英和谷歌照片

 

2.有“更多”这项选择的Tab栏

当分区超过五个的时候，一个比较有效的解决方案就是先展示四个最具优先等级的分区然后将第五个分区写上“更多”

这个解决方案的设计原则基本上和上面的单行Tab是一样的。“更多”这一项既可以链接到一个导航页也可以是一个下拉的菜单项。

你可能会说“更多”这个选项不如汉堡菜单（因为“更多”也是一种隐藏式菜单并且它的标注一点儿都没展示出它的内容），然而，如果你能正确的进行优先级划分，大多数的用户可以快速找到那四个重要的分区，所以这种丢车保帅式的导航依旧会提升用户体验。

 

举例：Facebook

新资讯，朋友请求，通知和搜索依旧位于标头，剩下的所有功能都可以在“更多”上找到。

 

3.逐渐缩减的菜单：

“Tab+更多”式的导航还有一个更智慧的版本根据屏幕的宽度来设计菜单，尽可能多的展示导航，并将其他东西都放在“更多”栏底下。

这意味着在比较低的分辨率底下“更多”菜单将包含更多的内容——当没有足够的空间去展示它们时，项目就会跳进“更多”之中。这个解决方案提供了比“tab+更多”更好的体验。

 

4.可滑动的导航：

如果你有一堆并不具备明显等级区分度的导航项目，并且“更多”式导航并不是一个好的选择时，另一个策略就是以可以左右滑动的方式展示出导航的所有项目。

这项解决方案的缺点在于如果不滑动，顶部就只有几个项目是可视的，所有剩下的项目都被藏了起来。然而，当开发者希望让用户去对内容进行探索时，这是个可行的方案。例：在网络商店上或者在新闻分类时。

 

从视觉设计的角度来说，你需要确保能提供充足的视觉线索来暗示横向滑动将会有更多可选择的元素。（例如通过将最后一个可视元素进行半隐藏）。

举例：Medium和Google

 

5.下拉式菜单：

一个并不普遍但却有趣的形式是：当其他分区的可见性和易用性并不重要时，运用下拉式菜单。

下拉式菜单实际上在这里扮演了两个角色：首先，它充当了一个页面的标题，下拉按钮暗示着这里可以对同级的分区进行快速的转换。即便在这种情况下选项是被隐藏的，下拉式设计也会暗示这个列表会包含目前页面的同级或者子集选项。

例子：Barnes&Noble and Duolingo

 

有时候，汉堡菜单可能是一个令人惊喜的好选择

由于汉堡菜单的主要缺点是不易发现性，当它设计用来作为主要导航菜单式，还是推荐选择考虑其他方式。但是，当设计第二等级的导航选项时，这个形式可能是一个合适的解决方案。

 

如果首选项要在屏幕要和屏幕上的行动召唤按钮一样明显，那么对于二级导航来说汉堡菜单是一个合适的地方。

当主要导航是围绕着用户流来设计的并且相关选项在屏幕上清晰可见的时候，就可以使用这个类型。Uber就是个很好的例子。

由于这个界面的所有内容都为叫车服务，类似于历史和设置之类的二类选项不需要过于明显，放在汉堡菜单里就是比较合适的。

 

谷歌翻译和这个很像：

由于它的主要功能（语言切换和输入文本进行翻译）是屏幕上最重要显眼的部分，隐藏类菜单就是最适合放置类似帮助和社区之类的辅助功能的地方。

 

 

总结：

没有一种能适用于所有场景的解决办法，它通常取决于你的产品，你的用户和具体的情境。在其他软件上工作良好的导航菜单不一定适用你的软件。然而，每个好的导航设计的基础是信息架构——清楚的结构，优先级，以及根据用户需求所做的标记。所以从现在开始来寻找最适合你的产品的移动导航吧！