底部tab导航是现在应用里非常常见的一种组件。关于这种最常用到的组件，你了解的全面吗？下面我们来分别看一下Material Design设计规范以及iOS设计规范里是怎么规定的。
往期回顾：
- 高手帮你学规范！iOS和Android规范解析之提示框+警告框
- 高手帮你学规范！iOS和Android规范解析之简易菜单+弹框
- 高手帮你学规范！iOS和Android规范解析之底部浮层
- 高手帮你学规范！iOS和Android规范解析之按钮
- 高手帮你学规范！IOS和ANDROID规范解析之标签导航和分段控件
Google Material Design Guideline
MD规范，先是给这个控件来了总述：底部导航栏可以使用户通过点击一下，就在顶层视图间的进行方便的切换。
用法
底部导航栏主要是为手机的导航设计的。如果是在较大的显示屏上，比如桌面，则可以使用侧边导航，如下图：
底部导航栏主要用于以下两种情况：
3至5个同等重要的页面间切换（注：在Material Design中，这种情况也可视情况使用抽屉导航，如下图：
△ ?抽屉导航
需要在应用里方便地对页面进行切换（注：如果是1或者2个页面，则可以使用标签导航）。
△ ?底部Tab导航和标签导航
△ ?选项位置是固定的
△ ?注意选项个数
样式
首先，Material Design中关于底部导航栏中的图标和文字有如下说明：
- 当某个选项是被选中状态，则展示该选项的图标和文字。
- 如果只有3个选项，则一直展示所有选项的图标和文字；如果有4或5个选项，则被选中的选项展示图标和文字，未被选中的只展示图标（实际中这一条好像很多应用都没有严格遵守这一条，笔者也觉得没有必要严格遵守）。
其次，关于颜色，MD比较提倡使用简单的颜色，避免复杂，如下图：
最后，关于每个选项的文字，需要注意文字不要折行（就是不要有两行的情况），不要出现标题使用“…”来省略的情况，不要为了节省空间而缩小文字的字号。这几点国内的应用都做的很好啦，没有什么好说的。
行为
当用户选择点击某个选项时，则应该直接展现相应的页面，或者刷新当前的页面；注意不要在点击后展示菜单或者弹出框（pop-up)。另外，如果点击系统返回键，不会切换到底部导航栏上一次点击的页面。
另外，有以下三点需要注意：
△ ?点击当前选项的图标，则页面返回顶部
△ 点击底部导航栏中的选项后，应该返回该页面顶部并刷新该选项的页面（这一点笔者认为也不是必要，需要根据应用自身的场景来判断）
下面这个是错误的案例，需要注意不要这样做：
△ ?【错误案例】当点击不同选项时，避免时页面发生横向切换
MD中，对各个组件都规定了它们在垂直方向上的高度。可以看到，底部导航栏的垂直高度还是比较高的，规范中提到，底部导航栏仅仅比底部浮层、抽屉栏以及键盘低一些，如下图：
△ ?MD中各控件垂直高度示意
iOS Human Interface Guidelines
相对而言，苹果的规范要简单的多，大部分都是我们平时用到的状态，也比较少用错。大家只需要注意以下几点就可以了：
- 如果底部导航栏中的某个选项暂时不可用，不要把该选项置灰。在不可用而又点击了的情况下，页面只要展示这个页面为什么没有内容就可以了。
- 避免使用过多的选项。当然，如果选项过少也会有问题。一般在iPhone上，3到5个选项比较合适。在iPad上可以适量增加。
- 可以使用肩标来提示信息数量，如下图：
△ ?肩标示意
需要注意的一点是，底部导航栏和之前介绍过的工具栏，是不能同时出现的。
△ ?工具栏示意
以上介绍了MD和iOS设计规范中，对底部导航栏的定义。
最近把这个系列的专题都做成了音频+幻灯片形式的分享，同时整理了交互方面对实战很有帮助的一些知识点，在千聊上跟大家分享，希望可以帮助大家提高交互技能。分享是一个系列，总共包含6次主题分享：
- 场景思维的运用
- 心理模型和流程设计（一）
- 流程设计（二）
- 流程设计（三）
- 正确使用iOS和Material Design控件
- 方案测试和验证
千聊分享的形式，是PPT + 语音，通过PPT展示重点内容，结合语音讲解，效果较好，感兴趣的朋友可以通过链接报名（价格是66元，包含6次分享）：https://m.qlchat.com/live/channel/channelPage/850000134259058.htm
作者系列文章：
- 高手帮你学规范！iOS和Android规范解析之提示框+警告框
- 高手帮你学规范！iOS和Android规范解析之简易菜单+弹框
- 高手帮你学规范！iOS和Android规范解析之底部浮层
- 高手帮你学规范！iOS和Android规范解析之按钮
欢迎关注作者微信公众号：新设计青年
================明星栏目推荐================
优优教程网： UiiiUiii.com 是优设旗下优质中文教程网站，分享了大量PS、AE、AI、C4D等中文教程，为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章，按照我们的专栏一步步学习，一定可以迅速上手并制作出酷炫的视觉效果。
设计导航：国内人气最高的设计网址导航，设计师必备：http://hao..com
