如何设计出体验更好的 UI 底部导航栏？

编者按：规划 UI 底部导航栏可以说是绝大多数 UI 项目傍边必然会遭受的规划内容，而这篇来自规划师 Vikalp Kaushik 的文章详细梳理了底部导航栏的最佳实践：

导航在 UI 界面傍边是相当常见、直接影响用户体会的根底组件。一般底部导航，会用到图标、文本标签等元素，看起来不杂乱，可是想要规划出作用，在视觉、交互、体会、逻辑上保证质量，仍是有许多注意事项的。这篇文章就系统梳理一下 UI 导航栏的规划。

为什么要规划导航栏？

• 用户可以快速检索到他们在哪个区域
• 答应用户快速在不同的功用模块间切换
• 让用户快速了解到不同界面的功用

导航栏的重要性

将导航栏置于底部，很大程度上是根据用户拇指交互的掩盖区域。不管使用左手交互仍是右手交互，底部导航栏都处于用户拇指可以天然掩盖的区域，

除了结合汉堡菜单之外，底部导航还需求横跨多页，坚持不变。

底部导航栏结构

底部导航栏的根本布局结构：

• 1、承载导航元素的控件容器
• 2、激活状态下的文本标签（可选）
• 3、非激活状态下的文本标签（可选）
• 4、激活状态下的图标
• 5、非激活状态下的图标

导航栏尺度

尽管图标的形状会由于规划的差异而有所不同，可是在图标外观的实际格式和根底尺度上，应该坚持一致。

激活状态下的图标尺度可能会有所增加，配色和轮廓会微调，以到达抓人眼球的目的，可是不该差异太大。

在详细的规划上，底部导航栏构成了如今的一套最佳实践。

1、使用3-5个按钮

保证底部导航的按钮控制在3-5个之间。5个按钮一般会让导航的空间比较紧凑短促，用户可能会误触，这样会让体会十分差。

假如真的有超越5个导航图标的话，建议参阅 Google 的做法，使用汉堡菜单将它们隐藏在其他愈加易于访问的地方。

2、不要使用滚动式的导航栏

这同样是为了解决导航栏图标过多的问题而诞生的一个思路，可是这个方案其实解决不了问题，由于总会有图标被遮住，这样带来的不确定的问题更多！

3、坚持视觉和风格的一致性

坚持图标在规划上的一致性其实十分重要，这是保证 APP 在规划上，有着最根本的专业性。不一致的规划十分容易被用户注意到，带来的用户体会的危险是十分之大的。比如图标的样式尽量坚持一致，风格坚持统一，等等等等。

4、防止使用多种色彩

作为一个对功用性要求较高的控件，导航栏本身是需求传递「触发」和「非触发」的概念的，而信息的传达更多时分是凭借色彩和不透明度来出现的，使用过多的色彩会导致导航栏失去这种根底的辨识度。

5、文本标签不要切断或换行

文本标签为导航栏供给了快速且易于理解的信息提示，尽量使用单个词汇来予以说明才符合它所在的方位，所以，尽量不要让它被切断或者换行。

结语

供给完美的导航规划并不杂乱，保证导航简略、清晰，保证一致性的前提下，选择一套精心制作的图标，一般就能很快地出作用。和许多别的规划不同，导航栏的规划一般是越简略明了，越容易出作用。

另外，这篇导航栏规划的文章能够帮你进一步搞定导航栏的规划：