APP 的顶部导航栏（以下简称“导航栏”）对我们来说再熟悉不过了，它是 UI 设计中必不可少的组成部分，几乎每一个页面都会使用到。下面主要总结了导航栏的作用、导航栏的样式。
1.导航栏的作用
首先，导航栏能告知用户当前所在位置，并提供回到上一步或部分下一步操作入口，不至于让用户迷失方向；其次，以顶部 Tab 的方式将当前页面内容作出整理分类，并将各类型入口聚合在导航栏，给用户提供全局操作；最后，还能增加品牌曝光，例如容器品牌色、图标品牌色等，甚至在有必要的情况下放置品牌 LOGO。
但是为什么有的页面没有导航栏，主要是当系统想要给用户提供更多信息或用户需要沉浸式的使用体验，这时系统需要弱化、隐藏导航栏来释放更多的页面空间，以备增加单屏页面信息量的空间资源预留。
例如在线上读书、地图导航过程中，系统会将导航栏进行隐藏，因为这时用户的关注点只会长时间停留在内容本身，没有频繁的操作需求，隐藏导航栏既能预留空间，还能减少无关元素对用户的干扰；使用滴滴出行在选择服务车型时，会暂时隐藏导航栏的背景容器，只保留了相关图标操作入口，虽然没有全部隐藏，但对本就不宽裕的地图空间能起到一定的缓解作用，相比上述处在导航过程中，线下场景的操作需求、频率显然要高出许多。
2.导航栏的样式
（1）常规样式
最常见的样式，95%以上的二级及后续界面使用的都是常规导航栏，部分较为简单的主页也会使用这种类型。以 iOS 的 2 倍图为例，容器高度固定在 88px，二级及以后的页面导航图标相对固定，左侧必定有一个返回到上级页面的“回退”图标，可以是向左箭头、向下箭头、关闭按钮等；中间是标题；右侧一般放置功能功能按钮。背景色多为白色或主体色。
（2）大标题
在 iOS11 系统发布之后，大标题导航栏逐渐流行。大标题一般只出现在主页面。大标题导航栏会给人一种高逼格、通透的空间感，整体风格偏向简约大气，并不适合电商类型应用，因所占空间较大，适合用在如新闻资讯、社交、工具型且功能较为单一的应用。
（3）小程序
不管是哪个平台的小程序，我们都可以理解为内嵌的“子级”APP，导航栏一般为标题加其右上角一部分区域为“父级”APP 原生功能，是无法作出任何修改的，这是硬性规则。除此之外，至于放什么元素、用什么类型可随意发挥。
（4）搜索框
根据搜索功能的权重，在常规导航栏中添加一个搜索框并替代标题展示。因空间限制，搜索框高度一般设置在 56px~64px，宽度随其他功能图标的多少而定，若图标较多，可将搜索框放在第二行。
如无特别需要，尽量将搜索框整体居中，让两侧的间距相等或两侧图标数量相同，以提升视觉美观度。
（5）标签/分类
导航栏的分类菜单包括分段控件和标签导航，分段控件通常包含 2~4 个标签，直接点击进行内容切换，不支持左右滑动；标签导航则相对灵活，很适合分类较多的内容，可通过左右滑动来查看所有分类，实现更方便的导航。
（6）图标
主页面导航栏中的图标比较多元化，例如左侧常见的定位、品牌 logo、抽屉菜单入口等，右侧例如搜索、消息、扫一扫等等。
（7）用户头像
很多社交类产品，会在导航栏的左、右侧放置用户的头像信息，方便随时调用与用户相关的功能。例如点击后进入个人设置、个人信息展示、会员中心、个人主页等。
（8）通栏导航栏
通栏导航在视觉层没有容器（或不透明度 0%）的存在。在初始化状态下，它可以与背景/图片融为一体，对节省头部空间、渲染氛围起到很大的作用，同时也能减少导航栏与内容区域的割裂感，电商类应用中很常见。
在页面上滑至背景消失后，会逐渐恢复至常规样式。尤其要注意背景色与导航栏中元素的色彩明暗对比（例如图标深色、背景就必须浅色），如若背景不可控，建议在导航栏下方增加一个黑色透明渐变蒙层，以确保证信息的可识别性。
（9）分割线
分隔线并不仅仅是一条线，它可以是线、面或投影，用于分隔导航栏与内容区域的一个边界线，通过视觉阻断的方式让用户感知内容区域，避免在页面产生上下滑动交互后重复扫视顶部位置。
分割线是为了体现导航栏与内容界面的层级关系，缺少视觉分割可能会让用户感觉它们是一个平级，会增加感知难度。当然，并不是所有的应用或界面都需要视觉分割，例如：界面内容极少、界面背景色与导航栏容器背景色值有明显差异、多图/多卡片……
以上内容分享了导航栏的作用和样式，本文章仅作个人学习笔记，如需了解详情可移步到优设网查看@大漠飞鹰CYSJ原文章。