设计师知道设计不仅仅是好看。“设计就是它的工作方式”产品体验就像一场对话，导航在这个对话中扮演着重要的角色。无法在应用程序中导航感觉类似于无法在对话中找到正确的词。这就是为什么今天我们将探索创建良好的移动导航底部导航的最有效方法之一。

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

Steven Hoober 在他对移动设备使用情况的研究中发现，49% 的人依靠一个拇指在手机上完成工作。在下图中，出现在手机屏幕上的图表是近似的可达图，其中的颜色表示用户可以用拇指触及哪些区域与屏幕进行交互。绿色表示用户可以轻松到达的区域；黄色，需要拉伸的区域；和红色，这个区域需要用户改变他们拿着设备的方式。

将顶级和常用操作放在屏幕底部很重要， 因为通过单拇指交互可以轻松到达它们。

底部导航设计的 3 个关键时刻

好的底部导航设计遵循这三个规则。

1. 只显示最重要的目的地

底部导航应用于具有相似重要性的顶级目的地。这些目的地需要从应用程序的任何地方直接访问。在底部导航中争取三到五个顶级目的地。

不要在底部导航中放置超过 5 个目的地，因为点击目标会太小且彼此距离太近。因此，您将在标签栏中放置太多标签会使人们难以点击他们想要的标签。更重要的是，随着您显示的每个附加选项卡，您都会增加应用程序的复杂性。

如果您的顶级导航包含五个以上的目的地，请通过其他位置提供对底部导航中未涵盖的目的地的访问。

避免可滚动内容

部分隐藏的导航（例如可滚动标签栏）对于小屏幕来说是一个非常明显的解决方案。但重要的是要记住可滚动内容的效率较低，因为您必须滚动一次才能看到所需的选项。因此，不要将其用作主要导航方法。同时，可滚动标签可用于您产品的某些选项过多的区域（即移动应用程序中的照片编辑）

2. 传达当前位置

未能指示用户的当前位置可能是应用程序菜单上最常见的错误。“我在哪里？” 是用户需要回答才能成功导航的基本问题。您应该使用适当的视觉提示（图标、标签和颜色），以便导航不需要任何解释。

图标

由于底部导航操作以图标的形式呈现，因此它们应该用于可以与图标进行适当交流的内容。有一个用户熟悉的通用图标——搜索、电子邮件、打印等图标。不幸的是，“通用”图标很少见。应用程序设计人员经常将功能隐藏在实际上很难识别的图标后面。因此，当您选择图标时，请进行可用性测试以确保用户在解码含义时没有任何问题。

颜色

避免在底部标签栏中使用不同颜色的图标和文本标签，因为这会使您的应用看起来像一棵圣诞树，并分散用户的交互注意力。相反，使用应用程序的主要颜色来指示焦点视图。

遵循一个简单的规则——用应用的主要颜色为当前的底部导航操作（包括图标和任何存在的文本标签）着色。

如果底部导航栏是彩色的，请将当前操作的图标和文本标签设为黑色或白色。

文字标签

菜单元素应该易于浏览。用户应该能够理解当他们点击一个元素时到底发生了什么。文本标签应为导航图标提供简短且有意义的定义。不要使用超过两个词的标签。

目标尺寸

使目标足够大以便于轻敲或点击。计算每个底部导航操作的宽度并将视图的宽度除以操作数。或者，将所有底部导航操作设为最大操作的宽度。

3. 让导航不言而喻

可预测的行为

每个底部导航选项都必须通向目标目的地。点击底部导航图标应将用户直接引导到相关视图。它不应打开菜单或其他弹出窗口。

不要使用标签栏为用户提供对当前屏幕或应用程序模式中的元素进行操作的控件。如果您需要提供控件，请改用工具栏。

力求一致性

尽可能在产品的每个部分的标签栏中显示相同的选项。它会给用户一种稳定的感觉。

不要在其功能不可用时删除选项卡。如果您在某些情况下删除选项卡但在其他情况下不删除，则会导致应用程序的 UI 不可预测。最好的解决方案是确保启用所有选项卡，但要解释为什么某个选项卡的内容不可用。例如，如果用户没有离线文件，Dropbox 应用中的离线选项卡会显示一个屏幕，说明如何拥有它们。此功能称为Empty 状态。

把它藏起来

如果屏幕是滚动提要，则当人们滚动查看新内容时可以隐藏标签栏，并在他们开始下拉试图返回顶部时显示标签栏。

清除状态转换

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

结论

帮助用户导航应该是几乎每个网站和应用程序的重中之重。人们使用您的产品越容易，他们就越有可能使用它。并且在设计底部导航时，记得要做到：

可见且结构良好（在底部导航中使用三到五个顶级目的地和无效的可滚动内容）。

清晰（条形元素应易于扫描且目标应足够大以易于点击）。

简单（确保每个导航图标都指向正确的目的地，并在整个应用程序中一致地使用所有元素，包括底部导航）。

作者：Nick Babich