App设计体系之导航栏

iOS和Android的导航称为原生导航，使用H5技术实现的界面的导航称为H5导航，H5导航的差异在于新界面不用跳转，因此多了“关闭”以便可以一键退出。

如今，两大系统的应用趋于统一，导航栏样式普遍以iOS的导航栏为准。

1、常规导航

1.1 基础标题导航栏

1.2 搜索框导航栏

1.3 选项卡、分段控件导航栏

2、通栏导航栏

通栏导航栏与常规导航栏最大的不同是，通栏导航栏的背景层一般与下方的模块打通了，在视觉上更为统一，还能在一定程度上节约界面空间。

通栏导航栏的背景处理方式有三种：图片背景、颜色背景、黑色透明渐变蒙层。

2.1 图片背景

图片、banner作为背景，整体风格保持一致。

2.2 颜色背景

采用纯色或渐变作为背景

2.3 黑色透明渐变蒙层

在图片、Banner上加一层渐变蒙层，保证导航栏文字的可识别性。

3、大标题导航栏

自ios11发布后，大标题风格的导航栏便开始流行起来，在实际运用中需要考虑与背景的搭配。

3.1 背景是颜色

大标题可以区分层级的模块

3.2 背景是图片 

当背景使用的是图片时，为了标题文字更易识别，考虑标题与背景的设计。

a 图和标题之间加渐变蒙层

b 图片内容尽量简洁

当图片内容有大量文字时，很容易把标题和图片文字混淆，因此在设计banner时需要注意。