【解构ui】导航设计（3） 底部导航栏
底部导航栏是我们平日最长见的手机端导航方式，今天单独拿出来研究一下，顺便再来讨论一下底部导航栏和抽屉栏这一对相爱相杀的导航模型。
关于底部导航栏的位置优势
之前，在提到底部导航栏的合理性的时候，通常都会提到其位置的优越性，因为在相较于顶部底部导航栏有着更加显著的优点，用户能在使用一直手指操作的时候就能触到。
但是近两年来大屏手机越来越受欢迎，iPhone里面很快iPhone5的尺寸就要成为最小的尺寸了。（写这篇文章的时候我刚得到信息，Apple将停止对iPhone4的支持）。因此，从下图屏幕大小的趋势来看，底部导航栏的位置优势其实正在逐渐减弱。
底部导航栏的设计注意点
- 仅显示最重要的
- 告知用户当前所在位置
- 一目了然
仅显示最重要的
底部导航栏上最重要的是要将几个具有相同重要性的导航标签放在一起，如果硬是为了添加而添加就没有必要了。
一般来说， 底部导航栏至少显示3个，至多显示5个，如果超过5个，根据iOS HIG，可以考虑将最后一个导航标签变成More，如果少于3个，根据Material Design，可以考虑使用选项卡(Tabs)
当导航栏上的标签太多的时候也不要使用滚动方式，因为滚动会降低使用效率。
告诉用户当前所在位置
导航栏最大的作用就是告知用户现在所处的位置。 之前在提到底部导航栏和树形结构的时候，有提到说树形结构的一大缺点就是，当深入应用里面的时候，每次都要后退好几次才能回到顶部，但是现在看来这个问题底部导航栏也有存在。
举个例子，豆瓣，之前有提到豆瓣就由于层级很深，每次逛久了后，就要连按好几次才能回到主页，仔细看可以发现，其实豆瓣的主页上是放置了底部导航栏的，但是在进入更深层次的层级之后，底部导航栏就消失了。
这个问题其实不只是豆瓣，微信，支付宝都是这样，我在手机上来来回回把弄了不少应用，结果发现，国内的应用大底都如此设计，而ios HIG上有提到
Tab bars are translucent, may have a background tint, maintain the same height in all screen orientations, and are hidden when a keyboard is displayed.
底部导航栏需要在所有的界面上保持相同高度，而且只有在显示键盘的时候才隐藏，这也就意味着，其实底部导航栏是一直显示的，包括在子试图里。
这一原则在iPhone自带的应用里实行的很好，不管是App Store, 电话应用，都将底部导航栏放置在了所有页面上。 真正起到了告知用户所在位置的作用。
与此同时，告知用当前位置的表现得形式有如下几点：
图标
通常来说，底部导航栏都是有图标的，但是如果你的应用使用的不是那种普世的图标，比如，邮件，电话这些图标的话，用户是很难猜测出应用中每个图标所代表的含义。
颜色
避免在底部导航栏里使用多种颜色的icon和文本标签。要使用app的主色调来表示选中的状态。
文本标签
文本标签应该是简短并且易理解的。 不要使用太长的文本。更不要将文本折叠或者缩小。
目标区域尺寸
让目标的可点击区域足够大，不应只局限于图标大小。
角标
你可以在标签栏上添置角标，来告知用户有消息
一目了然
行为
点击任一底部导航栏都应该能够快速的帮助用户到达目标页面，而不是点开什么菜单或者弹窗。点击导航按钮应该引导用户去到相关内容，或者刷新当前页面内容。
iOS HIG中规定，底部导航栏里不能防止任何动作按钮，如需要，则应放在工具栏里。
但是之前我们再谈到目前的几种常见导航方式的时候，也有看到Path这种将工具融合到底部导航栏的形式，
个人认为，这一违规的行为，反而在某种程度上更加直接的告知用户该应用中最重要的功能，并且相比于ios的顶部导航栏来说，底部相对来说更容易触到。
保持一致性
在每个页面保持标签的一致性。 最好能提供给用户一种稳定的有视觉连续性的标签 .
不要在某个标签不可用的时候就拿走。 如果拿走的话， 你的UI看起来就会不稳定，而且难以预测。
最好的方式就是确保所有的标签都存在，但当一些标签内容不存在的时候，一定在要解释。 比如在Dropbox上面， 如果用户没有离线文件，dropbox就会解释原因，， 这就是所谓的空状态。
在顶级界面中, 点击 bottom navigation 当前激活的项目会回到当前列表的顶端.
隐藏
如果屏幕采用了Feed的形式，则可以考虑用户在上下滑动的时候，将底部导航栏隐藏。 当用户上拉的时候才显现。
关于底部导航栏和抽屉导航栏
底部导航栏的优点有很多，最大的优势就是可见性，以及可触性。 而反对抽屉导航栏的声音也往往是同样的这两个理由，可见性差，可触性差。
根据Material Design的规定，抽屉栏放置的位置为屏幕右上角，这的确是一个相当难碰到的位置，为了避免抽屉栏的这个缺陷，Google在应用第一次打开的时候就展示了抽屉，以此来告知用户这里有个导航，同时，当用户往右拉的时候，也会若隐若现的出现抽屉的影子，告诉用户这里有个东西可以拖拽。
而Material Design 也有提到，抽屉导航推荐用于不常见试图较多的应用，也就是说Google希望当主屏能尽量的满足用户的需求，换句话说，用户能在主屏幕上完成大部分需要的任务，而无需时常展开抽屉栏去寻找。
同样的抽屉栏的好处也很多：
- 帮助在寸土寸金的手机屏幕上节约空间
- 创造更加沉浸式的内容浏览
- 在任一页面都能打开导航
- 支持添加任一多项导航标签
- 在App信息架构整合上更加便利
- 良好的跨平台性
为了解决抽屉导航栏的可触性，不少应用也将抽屉菜单挪到了屏幕右下角。
底部导航栏存在的一大问题是，iOS规定每一页面上都要有底部导航栏，那么当我点击当前页面多激活的标签的时候，是回到上一页还是顶层页面，这总是让人搞不清，而规定是，点击底部导航栏的时候当前激活的项目会回到当前列表的顶端.
比如Instagram，当我点击natgeo进入到主页，接着点击Tim Laman进入其主页之后我想要回到主页的时候，我会想说底部导航栏上的主页按键点击之后是带我去到上一页还是主页呢，这个问题长期让我困扰。
而且仔细想来不少应用完全是凑标签才把底部导航栏给塞满的，完全没有考虑顶部导航栏上的标签是否都是顶级导航。 因为，如果放置的标签不是同一层级的导航标签，就会使得看上去很好用的底部导航栏变得无所事事，用户几乎用不到，那为何还要把让底部导航栏占据着这宝贵的屏幕界面呢。
由此看来，很多的国内应用并没有将每一页面都放置底部导航栏，是不是就是因为其使用率并非如此之高。。。
除此之外，我们可以看到，抽屉导航栏在跨平台上的表现也极为突出，当一款应用有着极强的跨平台性的时候，用户体验将得到更好的一致性。这是底部导航栏无法比拟的。 毕竟菜单栏在网页上以及很常见了。
小结
而抽屉导航栏，特别是其标志三条杠，其实个人看来，现在的接受度已经很高了，导航没有孰优孰劣，只有信息架构没有设计好的应用，挑选最合适自己的应用的导航才能让导航在无形之中帮助用户。
参考文章
UX Design for Mobile: Bottom Navigation
Material Design 中的 Bottom Navigation 并不是无脑移植 iOS 导航模式的许可证
Bottom Navigation —— 如果要用, 请认真用
Material Design-Bottom Navigation
Principles of Mobile App Design: Engage Users and Drive Conversions
