设计不仅仅是为了美观，更是为了让用户高效地操作网站或app。这个过程就像人与人的交流。导航作为“交流”的第一步，直接影响着用户是否可以找到他们的需要。

为什么底部导航如此重要

Steven Hoober在研究中发现49%的用户单手操作手机，如下图所示，不同的颜色表示用户单手操作可以触及的区域。绿色区域表示可以轻易触及，黄色需要适当延展，而红色区域代表用户需要改变握持方式以实现操作。

单手交互的舒适区-屏幕底部，通常会展示频繁使用和层级最高的功能。

Tab Bar

很多app遵守这样的规则使用底部导航。Facebook通过一次点触展示核心功能，以实现快速功能切换。

3个重要原则

导航的作用是引导用户到达想去的地方。底部导航应该用来展示重要度相似的高级模块，而这些模块需要用户可以在任意页面直接点击进入。

好的底部导航需要遵循以下三条原则：

1. 只显示最重要的页面

通常底部导航展示三到五个模块，少于三个模块推荐使用tab标签栏。

避免超过五个模块，否则极易误操作，同时也会将app复杂化。如果必须展示超过五个模块，尝试在其他位置设置导航。

避免内容滚动

在小屏幕隐藏一部分导航模块，使用滚动方式展示或许是一个好的设计，但是滚动的交互效率低，因为用户必须滚动查看所有模块。

2. 标明现在的位置

不能表示当前位置的设计是导航的普遍存在的问题。合适的视觉线索可以帮助用户不借助其他指导，一眼就知道如何从A跳转到B。

Icons

仅仅使用icon表示的底部导航，icon需要能够表现其内容。但是这样可以让用户理解的导航并不多，比如搜索、email和打印。所以仅仅使用icon作为导航并不容易识别。

色彩

在底部导航避免使用不同色彩的icon和标签，可以尝试使用app的主色调给当前选中的模块着色。

如果底部导航已经上色，那么尝试给当前选中的模块黑色或白色。

文字标签

文字标签应该简短明确，避免过长的文字标签。每一个模块应该易扫，用户应该能够理解点击某模块页面会跳转到哪里。

模块尺寸

每一个模块的尺寸应该易点击，依据屏幕尺寸等分每一个模块的尺寸。安卓关于尺寸的指导如下图：

标记Tab

在模块上做标记可以表示相关页面的新消息。

3. 导航可以自圆其说

好的导航就像无形的手指导用户完成他们的“旅程”，毕竟如果没有用户能找到，即使最酷的功能和最炫的内容也是无意义的。

行为

点击底部导航的模块应该可以直接反馈新页面或刷新当前页面。

不要在底部导航给用户提供控制当前屏幕或app的元素。如果需要提供控制，尝试使用工具栏。

保证一致性

在每一个页面都展示相同的底部导航，保持视觉稳定性。某一个模块不可使用也不要移除这个模块，否则会使app的UI不稳定且不可预测。确保完整的底部导航，对于不可使用的模块做相关解释说明。例如，在Dropbox的设计中，如果用户没有离线文件，那么离线文件的模块会解释如何获取离线文件。这叫做空态。

隐藏

如果页面采用滚动流的设计，用户滚动页面的时候底部导航可以隐藏，当新的内容加载完成后再显示。

视觉效果

避免在底部导航使用横向移动。激活和未激活模块的转换应该使用交叉渐变动画。

总结

底部导航

. 可视和结构良好（三到五个模块且避免滚动）

. 清晰（模块应该易扫，并且足够大）

. 简单（确保每一个模块指示一个明确的页面，并且保持一致性）

导航是一个app的关键，目标是契合用户的心理模型。时刻注意不要偏离你的用户画像，思考用户的使用目标，使用导航帮助用户完成目标。越易用的产品，使用的用户也越多。

原文：uxplanet.org/perfect-bottom-navigation-for-mobile-app-effabbb98c0f

欢迎转载，记得标明出处哦

扫描下方二维码关注Yinteraction

【译文】底部导航栏