写在前面：

Google在上一个月更新了Andorid的设计规范，将bottom bar即iOS中的tabbar重新加入到MD的设计规范中。详情大家可以看：原文／译文

PS：因为私人原因，导致了断更一个月，非常抱歉。以后会产出更好的内容，还有还请大家到时留意一下我的个人博客，即将上线哦！

Bottom bar/Tab bar使用指南与规范

设计师要知道，设计本身比好看更重要。设计还涵盖了用户如何使用一个产品，用户是不会理会它是网站还是应用，这就好比是产品跟用户的对话，导航栏就是其中的对话之一。无论你的网站或应用程序功能有多好视觉设计有多好看，如果用户无法找到使用的方法，那都是一文不值的。

为什么底部导航是如此重要？

Steven Hoober在自己的移动设备使用量的研究发现，49％的人在手机上依靠一个拇指把事情完成。下图中，该手机的屏幕上显示的图是近似的范围图，其中的颜色代表用户可以用拇指与屏幕接触的区域。绿色表示用户可以很容易到达的区域；黄色，这需要一个伸展的区域；红色的，即需要用户的区域移位。

它需要放置在顶层和经常使用的屏幕底部，因为它们是单手操作最舒适的区域。

Tab Bar

许多应用程序使用底部导航栏（又称tab bar）时都遵循把最重要的功能展示的原则。例如Facebook的tab上都放置核心功能，使功能之间快速切换。

底部导航设计的三个关键时刻
导航就好比是一辆能载用户去他们想去的地方的车辆。还有底部导航应该用于类似重要性的功能切换，而这些目的地，需要在应用的任何地方都可以直接访问。
良好的底部导航设计遵循以下三个规则。

1.仅显示最重要的“目的地”。
在底部导航栏最好使用三到五个的顶级功能点／目的地。如果有少于三个目的地，请考虑使用标签来代替。
避免在底部导航使用五个以上的功能点／目的地，因为它们之间会太靠近彼此。而且在标签栏有太多的功能会使用户选择困难症突发。请记住每增加一个选项卡，应用的复杂性也会相应增加。

如果您的顶级导航已经超过五个标签，请提供其他方式进入。

避免滚动的标签栏
部分隐藏的导航是小屏幕一个解决方案 - 你不必担心有限的屏幕大小，只需将您的导航选项变成一个可滚动的标签。但是滚动内容是低效率的，因为需要滚动才能看到想要的选项。

2.与当前位置的关系
未指明当前位置可能是在底部导航设计上最常见的错误。 用户最常问，“我在哪里？”，这是最需要解决的根本问题之一。
用户应该知道一眼就知道如何从A点到B点，而且不需要任何来自外部的指导。应该使用适当的视觉线索（图标，标签和颜色），从而使导航不言而喻。

图标
因为底部导航最重要的部分是图标，它们应该被用于连通的内容的沟通媒介。一个通用型强的图标，用户就会一目了然，如搜索，电子邮件，打印等功能。不幸的是“万能”的图标是罕见的，而应用设计师往往设计上都很容易弄巧反拙。

我在上一篇文章就指出过这个问题。

颜色
避免在底部标签栏用不同颜色的图标和文字标签，而是使用应用的主要颜色来表示视觉焦点。
一个简单的规则 - 用应用的主要颜色作为底部的导航操作选中的状态（包括图标和任何文字标签）。

如果底部导航栏是彩色的，使得当前选中的图标和文本标签设为黑色或白色。

文本标签

文本标签应提供简短和有意义的定义导航图标。避免长时间文本标签，因为这些标签会截断或包裹。

菜单内容应易于浏览。用户应该能够明白，当他们点击标签栏会去到哪。

目标大小

使目标足够大，可以很容易地点击。计算每个底部导航动作的宽度，由动作的次数除以该视图的宽度。另外，使所有底部导航的宽度能满足最大动作时候的操作。

Android的设计规范建议在移动的底部导航栏的尺寸。

标签栏上的徽章

您可以在标签栏的图标上显示徽章，表明存在与该视图或模式相关的新信息。

3.使导航不言而喻

良好的导航应该像一只看不见的手引导着用户。毕竟，如果人们无法找到那些最酷的功能还是最引人注目的内容这都是无用的。

行为

每个底部的导航图标必须指向一个目标位置，但不要显示无法打开菜单或其他弹出窗口。点击底部导航图标应该直接引导用户到相关的视图或刷新当前活动视图。

不要使用标签栏为用户提供了在当前屏幕或应用模式元素控制。如果您需要提供控制请使用工具栏来代替。

尽力争取一致性

尽可能，使所有标签的视觉保持一致性。你可以通过在底部导航蓝提供相同的标签给用户带来视觉的稳定感。

当它的功能将不可用，不要删除标签。如果删除了选项卡，你会让应用程序的UI变得不稳定和不可预测。最好的解决办法是确保所有选项卡都可用，但解释为什么一个选项卡的内容不可用。例如，如果用户没有脱机文件，在Dropbox的应用程序离线选项卡显示不可用，解释如何有他们。这项称为空状态。

把它藏起来

如果屏幕滚动内容中，标签栏可以当人们滚动新的内容时候隐藏，并透露如果他们开始拉回到顶端时会重新出现。

视觉享受

避免使用横向运动之间进行转换。活动和非活动视图之间的过渡应该使用淡入淡出动画。

小贴士

底部导航应该是

• 可见，井然有序的（用三到五个的顶级标签栏，避免底部导航滚动内容）。

• 清晰（bar里元素应该是很容易辨认和目标应足够大，可以很容易地点击）。

• 简单（确保每个导航图标引到正确的目标，并使所有元素，包括底部导航和整个应用程序一致）。

结论

在每个网站和应用设计中帮助用户定位想要的页面都应该予以高度的重视。通常在这种时刻，背后的目标是创建一个自然与用户的心理模型对齐的交互系统。

你是为了你的用户而设计，永远把用户放在第一位。你的产品越清晰易用，用户就越有可能使用它。