今天，我们来一起谈谈 Bottom navigation，也就是在 Material Design 中新近增加的，对于「底 Tab」的相关定义。

适合与否，这是个问题

有些客户端看到 Google 都开始搞底部 Tab 了，于是一言不合就要搞个大改版。这样搞是不行的！要不要把导航方式改成 Bottom navigation，还是要按照应用的具体情况决定的，胡乱改版只会让 App 的导航越改越糟糕，反而失去了改的意义。

首先，使用 Bottom navigation 的应用的顶级导航项目最好在 3-5 个之间。如果顶级导航太少，建议使用 Tabs 切换，如果太多，建议使用 Drawer.

像上图所示的 6 个导航项的 Buttom Navigation，显然是错误的，这样会让整个 Buttom Navigation 区域显得十分拥挤，也增加了误操作的可能性。事实上，在 iOS 平台上也鲜有底部 Tab 的导航项超过 5 个的应用。可以说，将导航项控制在 3-5 个已经成为了某种程度上的共识。

如果你的 Android 应用之前使用的是 Drawer 等导航方式，而由于各种原因需要改为 Bottom navigation, 那么我建议你先梳理一下应用的导航逻辑，以尽量避免由于更改导航方式而造成的逻辑混乱等问题。如果应用有 5 个以上的导航项，则可能需要重新安排各个项目。

啊，这又是一个错误的用法。Bottom navigation 和 Tabs 不同，Bottom navigation 的项目不滚动。请务必留意。

最后，如果你的 App 较为强调横屏模式下的使用体验，我建议你不要使用 Bottom navigation，这种导航方式会极大地损失横屏模式下的可视空间。

那些值得一提的

当有三个导航项时，同时显示图标和标签文字。当有 4-5 个导航项时，对于不活动的项目仅显示图标。

个人推测 Google 建议这么做的原因是因为标签文字的标准大小较大（激活状态 14sp, 不活动时 12sp），在英文文本下会显得较为拥挤，Google+ 就是反面教材之一，然而这样的情况在「短小精悍」的汉语环境下较少出现。

我个人更倾向与为所有的项目加上标签文字，或者全部去掉标签文字，只显示图标。

另外，或许是考虑到 Bottom navigation 会对可视面积造成损失，Bottom navigation 可以选择当向下滚动时自动隐藏，而当向上滚动时自动显示。当然你不一定要这么做，如果你觉得没必要，也可以一直固定 Bottom navigation.

此外，点击激活项可以回到当前列表的顶部。值得注意的是，进入子级界面时，Bottom navigation 将依然显现。这个设定在 iOS 上也存在，然而是否有必要这么做是存在着一些争议的，很多应用抛弃了这一点，相关的讨论也一直没有停止。

另外，Google 认为 Bottom navigation 不需要通过滑动进行切换，恕我无法同意这一观点，众所周知在手机屏幕日渐增大的现在，滑动显然是比点击更为舒适也更为顺手的。实在是不明白为什么要放弃滑动切换导航项的设计。

与 iOS 不同的一点是，Bottom navigation 切换项目时不保存当前导航项的状态，也就是说，切换到另一个导航项时，当前项目的状态将会被清除重置。这点需要注意。

Bottom navigation 理论上可以与 Tabs 共存，虽然 Google 并不建议你这么做（会造成可能的导航方式混乱）。同时它也可以和 Drawer 共存，并且目前来说有很多应用了 Bottom navigation 的应用都保留了 Drawer. 但是需要考虑到的一点是，由于 Drawer 是 Android 上较为常见的一种导航方式，保留 Drawer 仍然会造成可能的导航方式混乱。因此我同样不建议你这么做。

Bottom navigation 的项目只对应导航项切换，不包括菜单或者其他视图。因此类似 Instagram 和微博等在底部 Tabs 里插入 action 的行为似乎并不被提倡，不过你还有 Floating Action Button 之类的选择。

一个采用 Bottom navigation 的应用的层级结构如下：

可以看出，除了 Drawer 或者 Bottom sheets 等少数元素，Bottom navigation 比绝大多数元素的层级都要高。FAB 等元素应该在 Bottom Navigation Bar 的后方出现（如果你要做自动隐藏/显示的话，这点很重要）。

YGOMobile 为一款游戏王对战平台软件 YGOPro 的 Android 移植版，其主界面遵循了 Material Design 并采用了 Drawer 作为导航方式。

但是这个应用的顶级导航项过少，使用 Drawer 其实并不是一个特别方便的选择。因此，我去掉了 Drawer，选择使用 Bottom navigation 重构导航，效果如下：

可以看出，由于只有三个导航项，这个应用更适合使用 Bottom navigation. 在使用 Bottom navigation 之后，在导航项之间切换会比过去方便许多。

出于对应用的特性考虑，自动隐藏/显示 Bottom Navigation Bar 似乎并无特别大的必要，因此我选择在滚动列表时固定显示 Bottom navigation.

如果点击某个项目进入子视图，Bottom navigation 会依然存在。

以上就是我对一个简单的应用进行的 Bottom navigation 改造。这是个很适合 Bottom navigation 的应用，同时导航层级也较为简单，因此改起来并没有特别吃力。在实际操作上，像这样简单的应用会较为少见，所需要考虑的也会更多，因此这次的 Redesign 只是一个试手，我可能会在后面的设计作品中根据具体需求来决定是否使用 Bottom navigation.

写在最后

Bottom navigation 是很多 PM 和设计师的心头好，但并不是所有的应用都适合 Bottom navigation. 有些应用使用 Drawer 和 Tabs 很明显会更好，因此，不要胡乱上马更改导航方式，因地制宜，选择适合应用的导航方式才是最重要的。

Bottom navigation 不是万金油，也不是药丸，它是一种新的导航方式，一种可供选择的解决方案。具体怎么用，如何用好，这是大家都要思考的一个问题。

理性看待变化，不要盲目跟风，这也是一款优秀应用的自我修养。