导航在 UI 界面当中是相当常见、直接影响用户体验的基础组件。通常底部导航，会用到图标、文本标签等元素，看起来不复杂，但是想要设计出效果，在视觉、交互、体验、逻辑上确保质量，还是有很多注意事项的。这篇文章就系统梳理一下 UI 导航栏的设计。
为什么要设计导航栏？
- 用户可以快速检索到他们在哪个区域
- 允许用户快速在不同的功能模块间切换
- 让用户快速了解到不同界面的功能
导航栏的重要性
将导航栏置于底部，很大程度上是基于用户拇指交互的覆盖区域。无论使用左手交互还是右手交互，底部导航栏都处于用户拇指可以自然覆盖的区域，
除了结合汉堡菜单之外，底部导航还需要横跨多页，保持不变。
底部导航栏结构
底部导航栏的基本布局结构：
- 1、承载导航元素的控件容器
- 2、激活状态下的文本标签（可选）
- 3、非激活状态下的文本标签（可选）
- 4、激活状态下的图标
- 5、非激活状态下的图标
导航栏尺寸
虽然图标的形状会因为设计的差异而有所不同，但是在图标外观的现实格式和基础尺寸上，应该保持一致。
激活状态下的图标尺寸可能会有所增加，配色和轮廓会微调，以达到抓人眼球的目的，但是不应差异太大。
在具体的设计上，底部导航栏形成了如今的一套最佳实践。
1、使用3-5个按钮
确保底部导航的按钮控制在3-5个之间。5个按钮通常会让导航的空间比较紧凑局促，用户可能会误触，这样会让体验非常差。
如果真的有超过5个导航图标的话，建议参考 Google 的做法，使用汉堡菜单将它们隐藏在其他更加易于访问的地方。
2、不要使用滚动式的导航栏
这同样是为了解决导航栏图标过多的问题而诞生的一个思路，但是这个方案其实解决不了问题，因为总会有图标被遮住，这样带来的不确定的问题更多！
3、保持视觉和风格的一致性
保持图标在设计上的一致性其实非常重要，这是保证 APP 在设计上，有着最基本的专业性。不一致的设计非常容易被用户注意到，带来的用户体验的隐患是非常之大的。比如图标的样式尽量保持一致，风格保持统一，等等等等。
4、避免使用多种颜色
作为一个对功能性要求较高的控件，导航栏本身是需要传递「触发」和「非触发」的概念的，而信息的传达更多时候是借助色彩和不透明度来呈现的，使用过多的色彩会导致导航栏失去这种基础的辨识度。
5、文本标签不要截断或换行
文本标签为导航栏提供了快速且易于理解的信息提示，尽量使用单个词汇来予以说明才符合它所处的位置，所以，尽量不要让它被截断或者换行。
结语
提供完美的导航设计并不复杂，确保导航简单、清晰，确保一致性的前提下，挑选一套精心制作的图标，通常就能很快地出效果。和很多别的设计不同，导航栏的设计通常是越简单明了，越容易出效果。
承担因您的行为而导致的法律责任，
本站有权保留或删除有争议评论。
参与本评论即表明您已经阅读并接受
上述条款。