移动应用上的导航应该是直观的和可预见的。无论是新老用户，都应该能够清楚如何轻松操作这款应用。但由于受限于小尺寸的屏幕和优先考虑UI元素上的内容，制作显而易见的和平易近人的导航是非常困难的。不同的导航样式用于解决不同的难题，但它们都面临者各种各样的可用性问题。
在这篇文章中，我们将介绍三种基本的移动导航样式——汉堡菜单、标签栏和手势导航，并讨论每种导航的优势与不足。
汉堡菜单
在移动设备上，屏幕空间可谓寸土寸金，而汉堡菜单（或称侧边抽屉）正是一种在节约空间方面非常流行的移动导航样式。 抽屉面板允许你将导航栏隐藏在超出左侧屏幕边界外，只有在用户操作后才会展示出来。对于希望用户专注于主要的内容，这种方式特别实用。
在默认状态下，汉堡菜单和所有内容都保持隐藏。
示例
正如你所见，实际菜单隐藏在汉堡菜单图标之后。
早期版本的Foursquare。图片来源：lmjabreu
Pros
- 存在大量导航选项的情况。汉堡菜单的主要优势在于能在有限的空间内容纳大量导航选项。
- 整洁的设计。通过将选项从屏幕中移动到侧边栏菜单，从而释放屏幕的实际空间。
Cons
- 隐藏导航不明显。不在视野内就不会进入脑中。当导航处于隐藏状态时，用户不太可能使用导航。即使这种导航成为标准，并且许多手机用户非常熟悉，仍然有许多人不会想着去打开它。
- 与平台导航规则冲突。汉堡菜单已经成为Android系统（该样式在Material Design中已被命名为导航抽屉），但在iOS中，由于与系统导航元素冲突，这一导航模式无法被付诸实施，而且它可能使导航栏超负荷（与手势操作特别是返回冲突）。
在iOS app中使用汉堡菜单的尝试。图片来源：lmjabreu
- 汉堡图标掩盖住了上下文。汉堡菜单没有直观地表达当前位置，展现当前位置的信息会存在困难，因为只有用户点击菜单按钮才会显示信息。
- 移动到目标位置需要额外的操作。到达详情页面通常需要至少两次点击（一次点击菜单图标，另一次点击目标页面）。
Tips
- 将导航选项按重要性分级。如果你的导航非常复杂，将之隐藏并不能令它友好地移动。大量实例证明以更明显的方式展示菜单选项会增加参与度和用户满意度。你可以问自己：在移动设备上让什么足够明显才是重要的？回答这个问题需要理解对于你的用户而言什么是重要的。
图片来源：lukew
- 如果你需要设计有限数量的高度优先导航栏，可以考虑使用标签或标签栏。
YouTube将核心功能的主要区块置于一个区块，使之可以快速切换。
- 回顾你的信息架构，优秀的APP应该是高度集中的。如果你设计了一款复杂的APP，你可以将它的功能分解为两个（或多个）APP。为了解决这个复杂的问题，Facebook发布了他们的通讯APP（Messenger）砍掉功能的结果就是减少菜单选项的设置，同时更少地依赖汉堡菜单。
标签栏
标签栏继承于桌面设计。它通常包含了一些相似重要性的目标功能（Tab），并且这些目标功能需要可以从APP的任何地方直接访问。
标签栏不隐藏导航，允许直接访问并且在关联图标上展现反馈。
示例
Twitter上的菜单栏让用户直接定位到与该项目关联的屏幕上。Twitter iOS客户端。图片来源：Mashable
Pros
- 标签栏非常适宜地表达（用户的）当前位置。恰当地运用视觉线索（图标、图层和颜色）使元素显而易见，因此不需要任何说明。
- 标签栏非常持久。它们在任何时候都会在屏幕上保留所有导航选项，这样你的用户就能对对所有的APP视图拥有明确的可见度，然后和单击进入。
Cons
- 有限的导航选项数量。如果你的APP有超过五个选项，那将很难在一个标签或导航栏上对它们进行适配并保持适合的触控尺寸。
标签栏上最多超过5个选项
- iOS和Android的标签栏选项背后有不同的位置和逻辑。就UI和用户可用性而言，不同的平台有不同的规则和指导方针，在设计为一个特定的平台设计标签栏时，你必须将这些考虑在内。标签栏可以出现在页面顶部（通常是Android）或者底部（通常是iOS）。同样在iOS，在APP中采用底部标签栏来切换视图是十分常见的。Android平台的惯例则是在屏幕顶部展示控制视图切换的标签。另外，Android的APP可能采用底部标签来展示动作。
适当的位置和逻辑对与同平台的其他APP保持一致的操作体验会起到一定帮助，并能防止将动作和视图切换混淆。图片来源：Google
Tips
- 确保触控区域足够大。保证目标区域足够大而能够轻松触碰和点击。为计算每个底部导航动作的宽度，可按动作的数量划分视图的宽度。另外，确保所有底部导航动作都有最大的动作宽度。
绝大多数用户可以舒适和确切的点击一个10*10mm的点击区域。图片来源：uxmag
- 你的图标需要进行可用性测试。采用五秒原则：如果你花了超过五秒时间来为某个软件考虑一个适合的图标，那么这个图标不太可能有效地表达那个意思。
- 图标与标签文字通常一起搭配。由于大多数图标缺乏使用标准，因此文字标签用来表达含义和减少歧义是非常有必要的。用户应该能够明白当他们点击一个元素究竟会发生什么。
使用文字标签来为底部导航图标提供简短、明确的定义。
手势导航
2007年6月29日是一个游戏规则被颠覆的日子。彼时苹果公司向市面推出了第一款全触控屏幕的智能手机，触控屏交互开始统治所有移动设备。
图片来源：Aaron Wade
手势操作瞬间在开发者中变得流行起来，越来越多的APP开始采用手势控制进行设计。
采用手势的代办事项软件Clear
当今世界，移动APP的成功取决于手势操作如何更好地落实用户体验。
示例
Tinder用滑动手势改变了他们的行业，因此这演变手势的产品规范。人们采用左滑或右滑来操作APP。
Pros
- 移除UI的冗杂元素。以手势作为设计核心，能让你创建更多的小界面，同时为有价值的内容节省屏幕空间。
- 自然的用户界面。Luke Wroblewski在他的文章中提供了一个案例，让来自9个不同的国家的40个人为28项不同的任务比如删除、滚动、缩放创建手势。值得关注的是，这些手势跨越了文化和经验趋于相同。比如，当提示“删除”时，大多数人——不论国籍——尝试将目标拖拽出屏幕。
Cons
- 不可见的导航。UI设计准则之一就是可见：通过菜单，所有可能的操作都是可见的，并且是显而易见的。一项不可见的用户界面可以充满诱惑力地美丽的，但因为不可见， 会存在很多可用性问题：由于手势是永远隐藏的，用户需要发现它们，就像汉堡菜单：如果你隐藏了选项， 没几个用户会用到它。
- 增加用户的尝试。绝大多数手势既不是天然的也不是容易学习或记忆的。当设计手势导航时，需要注意到每次移除UI冗杂元素，应用的学习曲线将会上升，同时由于没有视觉提示和线索，用户会对如何与APP互动产生疑惑。
Tips
- 确认你没必要在界面上教用户一套全新的交互方式。依据（用户）熟悉的经验来设计。为了设计一套不错的手势导航，你必须审视移动领域手势的现状。例如，你设计一款Email APP，你可以在在Email手势操作上使用滑动，因为许多用户在很大程度上熟悉这种操作。
- 采用小的视觉提示逐步解密来教导用户如何与你的界面进行交互。记住，只有在该信息与用户当前行为有关时进行显示，与游戏类似，随着游戏的深入，用来揭示游戏的玩法。
Conclusion
对每个APP来说，帮助用户导航都是一项高优先级的功能。经常思考你的用户角色，考虑他们使用你的APP的目的，使用你的导航帮助他们实现目标。对他们而言你的产品越容易操作，他们就越可能去使用。
Thank you!