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

写在前面：

上个月，Google更新了Andorid的设计规范，并更新了bottom。 bar即iOS中的tabar再次添加到MD的设计规范中。详见：原文／译文

PS：很抱歉，因为个人原因，断了一个月。以后会产生更好的内容，请关注我的个人博客，即将上线！

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

设计师应该知道，设计本身比好看更重要。设计还涵盖了用户如何使用产品。用户忽略了它是网站还是应用程序。这就像产品与用户之间的对话。导航栏就是对话之一。无论你的网站或应用程序功能有多好，视觉设计有多好，如果用户找不到使用方法，那就毫无价值了。

底部导航为何如此重要？

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

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

Tab Bar

许多应用程序使用底部导航栏(也称为tabb) bar）始终遵循展示最重要功能的原则。例如，核心功能放置在Facebook的tab上，以快速切换功能。

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

1.只显示最重要的“目的地”。最好在底部导航栏中使用三到五个顶级功能点／目的地。如果目的地少于三个，请考虑用标签代替。避免在底部导航使用超过五个功能点／目的地，因为它们彼此太近了。而且标签栏中的功能太多，会让用户突然选择困难。请记住，每次添加选项卡，应用程序的复杂性都会相应增加。

如果您的顶级导航有五个以上的标签，请提供其他进入方式。

隐藏在滚动标签栏中的导航是小屏幕的解决方案 - 不用担心屏幕尺寸有限，只需要把导航选项变成滚动标签。但是滚动内容效率低下，因为需要滚动才能看到想要的选项。

2.与当前位置的关系并不意味着当前位置可能是底部导航设计中最常见的错误。 用户经常问：“我在哪里？”，这是最需要解决的根本问题之一。用户应该知道如何在没有任何外部指导的情况下一目了然地从a点到B点。应使用适当的视觉线索（图标、标签和颜色），以使导航不言而喻。

因为底部导航最重要的部分是图标，所以它们应该用作连接内容的通信媒介。用户可以一目了然地看到一个通用图标，如搜索、电子邮件、打印和其他功能。不幸的是，“通用”图标很少见，应用程序设计师在设计中往往容易弄巧反拙。

我在上一篇文章中指出了这个问题。

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

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

文本标签

文本标签应提供简短而有意义的定义导航图标。避免长时间的文本标签，因为它们会被切断或包裹。

菜单应该很容易浏览。当他们点击标签栏时，用户应该能够理解他们会去哪里。

目标大小

使目标足够大，可以轻松点击。计算每个底部导航动作的宽度，将动作次数除以视图的宽度。此外，所有底部导航的宽度都可以满足最大动作时的操作。

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

标签栏上的徽章

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

3.使导航不言而喻

良好的导航应该像一只看不见的手一样引导用户。毕竟，如果人们找不到最酷的功能或最引人注目的内容，那就没用了。

行为

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

在当前屏幕或应用模式下，不要使用标签栏来控制用户。如需提供控制，请使用工具栏代替。

努力争取一致性

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

当其功能不可用时，不要删除标签。如果选项卡被删除，您将使应用程序的UI不稳定和不可预测。最好的解决方案是确保所有选项卡都可用，但解释为什么选项卡的内容不可用。例如，如果用户没有脱机文件，则不能显示Dropbox应用程序的离线选项卡，并解释如何拥有它们。这被称为空状态。

把它藏起来

如果在屏幕滚动内容中，当人们滚动新内容时，标签栏可以隐藏，并透露如果他们开始拉回顶部，它将再次出现。

视觉享受

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

小贴士

底部导航应该是

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

清晰(bar中的元素应该很容易识别，目标应该足够大，可以很容易地点击)。

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

结论

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

您为您的用户设计，始终把用户放在第一位。您的产品越清晰易用，用户就越有可能使用它。