无论是网站或应用，设计师都明白要设计的好看，以及更好的用户体验，而导航栏就是一个核心，因为网站或应用程序从其他方面设计的多么完美，如果用户无法找到他们所需要的功能，也将会是白搭。

Steven Hoober在研究移动设备使用情况时，发现49%的人依靠一个大拇指来完成手机上的所有操作。在下图中，就是手机屏幕近似的范围图，其中不同的颜色代表不同的含义，而用户通过大拇指来与屏幕操作的位置中，绿色表示用户很容易达到的区域，而黄色表示需要一定延伸区域，红色即用户需要移动整个手才能正常使用。所以将导航栏放置在顶层以及经常会使用在底部的，这是很重要的，因为它能和拇指相互感觉到舒适。

许多的APP都遵循这个规则，并使用底部的导航栏作为最重要的功能入口。例如下面图片中的Facebook对其核心功能进行快速的切换。

对于底部导航栏设计中有三个关键点注意的，因为它是引导用户想要去的地方的入口，和顶部状态栏的功能类似，这些地方主要是方便用户直接快速的访问和查看的。好的底部导航栏设计应该遵循以下的三个规则：

1 .仅显示最重要的功能上

底部菜单的数量尽量保证只3到5个，如果少于三个的，请考虑使用标签来替代。

避免使用超过五个菜单的底部导航标签栏，这样会使彼此之间看上去比较拥挤。在导航栏中太多的菜单会使用户比较难以选择出想要的，另外每个额外增加的选项卡都会导致APP变得更加的复杂。如果导航栏超过了五个菜单，可以将第五个菜单设置为其它，而不是在导航栏中显示全部。

2.可滚动的标签栏

部分隐藏的导航栏中对于小屏幕是一个很明显的解决方案，不必担心有限的屏幕空间，只需要将导航栏的选项设置为一个可以滚动的标签。但滚动是比较低效率的，因为在用户想要得到自己需要的功能时，需要在选项中滑动。

3.指明当前位置

在底部标签栏中未指明用户当前所处在的位置，这是很多APP都在犯的一个错误，当用户进入界面时，应该很清楚的知道从A点到B点，而不需要任何指导说明。可以在适当的位置提供适当的视觉提示（icon、标签、颜色）这样导航栏就不用解释说明了。

Icon：因为底部导航栏的菜单使用icon来表示，那么就应该用来适当融会贯通所要表达菜单的背后意义。一个常规的icon，已经有很多人都知道了，例如那些代表搜索的、电子邮件、打印等功能的。当然万能的icon是罕见的，而设计时更多的是要考虑这个icon背后所要传达的具体功能含义。

颜色：在底部但导航栏中使用不同的颜色的icon和文字标签，相反，使用APP的主要颜色来表明当前的显示位置。

按照一个比较简单的规则来对底部导航栏的选中菜单进行颜色填充，（这里包括icon和文字标签），颜色可以使用APP的主色。

如果底部导航栏是彩色的，使得当前的选中icon和文本标签变成黑色或者是白色。

4.文本标签

文本标签应该提供简短明确和有意义的，避免使用较长的文本标签，因为这些标签或许会被截断或缩小。

菜单的内容是易于浏览的，用户一看就能明白这些菜单背后隐藏的功能具体是什么。

5.可点击区域的大小

使可点击区域足够的大，避免误操作，而计算的每个底部导航的可点击宽度，由底部导航栏的数量来计算，以可使用的最大宽度为准（注：避免菜单之间出现空隙）。以下是android的对底部导航栏的尺寸指导建议。

6.Icon上的标签

这个通常是提示用户有否有新的消息提醒

7.导航栏是易于理解

好的导航栏应该是用户感觉到就像自己一只看不见的手在引导他们的一步步操作。毕竟即使是很酷的功能和引人注目的内容，如果用户无法找到，那都将是无用的。

行为：每个底部导航栏都必须明确的指向目标位置，并避免无法打开菜单或者有其他的弹出窗口。利用底部导航栏中的icon能引导用户直接看到所预期的视图，或者是刷新当前的活动视图。

在当前的视图上不要使用标签栏为用户提供帮助，如果需要使用，可以使用工具栏的操作来替代

8.尽量保持一致性

尽可能在每个界面上显示相同的标签，因为给用户提供一致性的标签会使用户在视觉中保持一种平衡。

当该功能是不可使用时，不要删除它，如果删除了就会导致APP变得很不稳定和不可预测性。最好的解决方案是确保所有的选项都能使用，但要解释为什么有的选项卡的内容是无法使用的，例如在Dropbox中，如果用户没有上传文件，那么就会解释这种状态的原因，被称为“空白页”

9.把它们隐藏起来

如果屏幕中上下滚动出新的内容，那么标签栏容可以被短暂的隐藏起来，并在用户试图返回到顶端时能显示出来。

10.美观的界面和动效

底部导航栏要避免在导航区间进行横向的自由切换。运动的窗口和非运动的窗口之间应该有淡入淡出的过度动画。

总结：

底部导航栏应该是：

a、可见、井然有序的

b、易于操作

c、简单

帮助用户在导航中的引导优先级是每一个网站和APP都应该注意的。这个目的的背后目标就是创建一个符合用户心理预期的交互系统化的模型。

为用户而设计。当我们站在用户的角度的时候，想想使用APP是有目的性，并使用导航栏来帮助我们实现这些功能目标，这将会提高用户体验，并越来越喜欢使用上它。

作者：Nick Babich

https://uxplanet.org/perfect-bottom-navigation-for-mobile-app-effabbb98c0f#.y8frm42j6