导航栏图标风格（帮你全方位掌握导航栏设计知识点）

导航栏图标风格（帮你全方位掌握导航栏设计知识点）不管是哪个平台的小程序，我们都可以理解为内嵌的“子级”APP，其导航栏右上角一部分区域为“父级”APP原生功能，是无法作出任何修改的，这是硬性规则。除此之外，至于放什么元素、用什么类型可随意发挥。Tab栏有分段控件和多标签导航两种，需明确突出已选中的标签即可，上述有详细规范说明，暂不做赘述。通栏导航可以是上述类型中的任何一种，唯一不同的是在视觉层没有容器（或不透明度0%）的存在。在初始化状态下，它可以与背景/图片融为一体，对节省头部空间、渲染氛围起到很大的作用，同时也能减少导航栏与内容区域的割裂感，电商类应用中很常见。在页面上滑至背景消失后，会逐渐恢复至常规样式。尤其要注意背景色与导航栏中元素的色彩明暗对比（例如图标深色、背景就必须浅色），如若背景不可控，建议在导航栏下方增加一个黑色透明渐变蒙层，以确保证信息的可识别性。

2. 大标题

在iOS11系统发布之后，大标题导航栏逐渐流行。大标题一般只出现在主页面（底部标签功能分类），至于基础规范上述有详细说明。

大标题导航栏会给人一种高逼格、通透的空间感，整体风格偏向简约大气，并不适合电商类型应用，因所占空间较大，适合用在如新闻资讯、社交、工具型且功能较为单一的应用。

3. 搜索框类型

根据搜索功能的权重，在常规导航栏中添加一个搜索框并替代标题展示。因空间限制，搜索框高度一般设置在56px~64px，宽度随其他功能图标的多少而定，若图标较多，可将搜索框放在第二行。

如无特别需要，尽量将搜索框整体居中，让两侧的间距相等或两侧图标数量相同，以提升视觉美观度。

4. Tab导航

Tab栏有分段控件和多标签导航两种，需明确突出已选中的标签即可，上述有详细规范说明，暂不做赘述。

5. 通栏导航栏

通栏导航可以是上述类型中的任何一种，唯一不同的是在视觉层没有容器（或不透明度0%）的存在。在初始化状态下，它可以与背景/图片融为一体，对节省头部空间、渲染氛围起到很大的作用，同时也能减少导航栏与内容区域的割裂感，电商类应用中很常见。

在页面上滑至背景消失后，会逐渐恢复至常规样式。尤其要注意背景色与导航栏中元素的色彩明暗对比（例如图标深色、背景就必须浅色），如若背景不可控，建议在导航栏下方增加一个黑色透明渐变蒙层，以确保证信息的可识别性。

6. 小程序

不管是哪个平台的小程序，我们都可以理解为内嵌的“子级”APP，其导航栏右上角一部分区域为“父级”APP原生功能，是无法作出任何修改的，这是硬性规则。除此之外，至于放什么元素、用什么类型可随意发挥。