UI设计师必须知道的导航栏3大基础模式

一个好的导航能够对你的产品起到事半功倍的效果，就好比路标一样不会让你迷路。导航是一个产品的指路标，决定了用户怎么使用这个产品，作为交互设计和UI设计来说他的重要性就不言而喻了。

点击添加图片描述（最多60个字）

对UI设计师来说，在移动端要设计易于发现、易于访问的导航是个挑战。不同的导航模式都会通过不同的方式来解决这个挑战，但是它们也都会面临各种可用性的问题。

在本文中，我们将研究移动端应用程序的三种基础导航模式：汉堡菜单、标签栏和基于手势的导航，并且阐述每种导航模式的优点和缺点。

汉堡菜单

手机屏幕上的空间是非常宝贵的。汉堡菜单（或者说，侧边栏、抽屉菜单）是非常流行的移动端导航设计模式之一，它可以帮助你节省屏幕上的空间。使用抽屉面板，你可以将导航都隐藏在屏幕左边缘以外，当用户进行操作的时候再显示在屏幕内。如果你希望你的用户专注于屏幕上的主要内容，这种设计模式会比较合适。

点击添加图片描述（最多60个字）

在默认状态系下，汉堡菜单以及菜单中的内容都被隐藏起来了

例子

下面就是一个菜单被隐藏在汉堡图标内的例子。

点击添加图片描述（最多60个字）

优点

● 可以包含大量的导航选项。这种导航模式的主要优势在于：它可以在一个很小的空间内包含相当多的导航选项。

● 极简设计。将导航选项从屏幕中转移到侧边的菜单中，释放了屏幕空间。

缺点

● 隐藏起来的导航相对来说难以发现。不在视线范围内的东西，人们就很少会去想起它。当导航被隐藏起来以后，用户就变得不太使用导航。虽然这种导航模式已经变得越来越普遍，很多手机用户也熟悉这种模式，但是仍然有很多人根本想不到去展开导航。

● 与平台导航规则冲突。汉堡菜单已经成为Android上的一个标准模式（在Material Design中将这种导航模式称为“抽屉导航，Navigation Drawer”）。但是，在iOS中它根本无法实现，因为它会和原有的基本导航元素冲突，顶部的导航栏会堆积太多的元素。

尝试在iOS应用程序中使用汉堡菜单

● 汉堡菜单隐藏了导航内容。用户快速浏览页面的时候，汉堡菜单不能告诉用户目前的状态。只有当用户点击汉堡图标的时候，用户才能看到目前状态的信息。

● 需要额外的操作才能完成目标任务。用户通常需要点击两下（一下点击菜单图标，另一下点击目标选项）才能到达某个特定的页面。

小贴士

● 确定导航选项的优先级。如果你的导航很复杂，那么隐藏导航并不会让它变得对移动端友好。很多实际的例子清楚地表明，用更明显的方式展现菜单栏可以显著提高用户参与度和满意度。所以，问问你自己“什么东西重要到要显示在手机屏幕上？”。回答这个问题就需要你清楚地理解什么对你的用户来说是重要的。

点击添加图片描述（最多60个字）

● 如果你有几个（一般≤ 5个）的优先级都很高的导航选项，你可以考虑使用标签或标签栏。

点击添加图片描述（最多60个字）

YouTuBe使用标签栏，使用户可以通过1次点击到达核心功能，并能快速在功能中切换

● 仔细检查你的信息架构。好的APP会专注于某件事情。所以，如果你的APP非常复杂，你可以考虑将它拆分成两个（或更多）的简单的APP。Facebook发布了他们的Messenger应用程序来解决这个复杂性的问题。减少功能相应地也会减少导航选项，对汉堡菜单的需求就会减少。

点击添加图片描述（最多60个字）

标 签 栏

标签栏这种设计模式是从桌面端移植而来的。它通常包含一些相关的并且同等重要的信息，而这些信息需要从应用程序的任何地方都能让用户访问到。

点击添加图片描述（最多60个字）

标签栏不会隐藏导航信息，用户可以直接访问，并且它的图标也能给用户的操作以反馈

例子

Twitter中的标签栏设计使用户可以直接导航到相应的内容。

点击添加图片描述（最多60个字）

Tweet的iOS端

优点

● 标签栏能相对容易地告诉用户他现在所处的位置。恰当地使用视觉提示（图标、标签和颜色）可以使导航信息显而易见，不再需要其他的解释。

● 标签栏是固定的。标签栏可以将导航选项始终固定在屏幕上，这样你的用户能清楚地了解APP的所有主页面，并且通过单次点击就可以达到某个主页面。

缺点

● 导航选项数量有限。如果你的应用程序有超过5个导航选项，那就很难做到既把它们放进一个导航栏，又使它们保持最佳的可点击大小。

在一个标签栏中不要设计超过5个选项

● iOS和Android的标签栏选项后面的逻辑不同。不同的平台关于UI和可用性有不同的规则和指南，你在为不同的平台设计标签栏的时候需要考虑这一点。标签栏可以出现在顶部（主要在Android平台）或者在底部（主要在iOS平台）。使用底部标签栏在APP中的各个视图之间切换在iOS平台中很常见。然而，Android的平台惯例是在屏幕的顶部显示视图切换的标签。此外，Android平台的应用程序可能会使用底部栏来展示操作项。

点击添加图片描述（最多60个字）

恰当的定位和逻辑可以帮助你的APP和平台上的其他APP保持一致的体验，防止操作和视图切换时造成的困惑

小贴士

● 点击目标需要足够大。你设计的点击区域要保证用户能轻松地触摸或点击。通过将导航栏的宽度除以导航操作的个数，就可以得到每个底部导航操作的宽度。

点击添加图片描述（最多60个字）

大多数用户能舒适地点击10mm*10mm的触摸目标

● 设计的图标需要经过可用性测试。可以使用“5秒规则”来测试：如果你需要超过5秒的时间来思考表达某个事物的图标，那这个图标不太可能有效地表达这个事物的含义。

● 图标和标签要同时使用。大多数图标都没有标准的使用规范，配合使用文字标签能有效表达含义和减少歧义。 用户需要清楚地知道，当他点击某个元素后会发生什么。

使用文字标签为底部导航图标提供简短的、意义明确的定义

基于手势的导航

2007年6月29日，游戏规则改变了。从苹果公司发布了第一款全触屏智能手机那一刻起，移动设备就开始了以触摸屏交互为主的时代。

“手势设计”立刻在设计师中流行起来，并且许多应用程序在设计中尝试使用手势控制。

点击添加图片描述（最多60个字）

这款叫Clear的日程管理APP也是风靡一时

如今，移动端应用程序的成功很大程度上取决于它的手势设计有没有给用户带来好的用户体验。

例子

Tinder通过“滑动”手势改变了他们的行业。慢慢地，滑动手势几乎成为了决定产品的手势。用户在使用APP时很自然地会想到“向左滑动”或“向右滑动”。

点击添加图片描述（最多60个字）

优点

● 减少杂乱的UI。将手势设计构建到设计的核心中，可以创造更多的微小的界面，并为有价值的内容节省出屏幕空间。

● “自然用户界面。”Luke Wroblewski在他的文章中，提供了一项研究的信息。这个研究调研了来自9个不同的国家的40位用户。他们被要求为28个不同的任务（包括删除、滑动、缩放等）创造手势。值得注意的是，尽管文化和经验不同，被测试用户创造的手势趋向于类似。例如，当提到“删除”时，大多数人（无论国籍）都会尝试将对象拖出屏幕。

缺点

● 隐形的导航。UI设计中有个重要的设计规则就是可见性：通过菜单，所有可能的操作都可见，也就是说易于发现。一个隐形的用户操作可能会使界面很好看。但是，因为操作不可见，所以它可能会带来很多可用性问题：由于手势总是被隐藏，用户需要先找到它们，就像汉堡菜单一样。然而，类似的，你隐藏起一个选项，就会减少使用它的用户数量。

● 增加用户操作量。大多数手势既不自然，也不易于学习或记忆。所以，当设计基于手势的导航时，请注意：每当你去除一个UI元素，该APP的学习曲线就会上升。如果没有适当的视觉提示和线索，用户会对如何和APP交互产生困惑。

小贴士

● 确保你不必教育用户一个全新的和界面交互的方式。设计用户所熟悉的体验。为了设计一个好的基于手势的导航，你应该从查阅目前移动端常见的手势开始。例如，如果你设计了一个电子邮件APP，你可以在邮件上采用滑动手势，因为很可能大多数用户都熟悉这个操作。

点击添加图片描述（最多60个字）

● 使用轻量的视觉提示，逐步告诉用户如何与你设计的界面进行交互。切记，你只需要展示和用户当前行为相关的信息。这和游戏类似：当你玩得越深入，游戏会慢慢向你展示它的游戏机制。