APP的顶部导航栏（以下简称“导航栏”）对我们来说再熟悉不过了，它是UI设计中必不可少的组成部分，几乎每一个页面都会使用到。虽然看起来很简单，感觉不需要花费多少精力，但设计一个与产品需求、用户目标匹配度较高的导航栏并非那么容易，这里面有很多需要注意的设计细节。导航栏集合了用户常用或必用一些功能，复用率极高，当用户在进行部分路径操作时，导航栏就像黑暗中的一盏“明灯”，指引着用户进入下一步或回到上一步操作，所以做好用户体验是非常重要的。我们每天都在跟导航栏打交道，如果仔细观察就会发现，不同应用的顶部导航栏都或多或少的存在一些差异，为了让大家对导航栏有一个更清晰、全面的认识，本文将对导航栏的设计风格、组成结构、样式、交互等多方面做出总结，希望能帮到大家，一起来看看吧。
一、导航栏基本介绍二、导航栏的结构组成三、导航栏样式分类四、内容区域的交互关联五、导航栏的相同点/不同点六、结语
在UI设计组件中，如标签栏、菜单栏、Tab栏、应用栏、标题栏、导航栏...等诸多类型和叫法中，有很多新人设计师难以区分这些重复叫法以及对应的所在区域。导航栏位于应用程序的顶部，即状态栏下方，主要用于明确页面位置、层级等，并且连接着父/子级结构页面，权重应高于当前页面的所有内容。如果用户不知道当前所在位置、如何回到上一步的时候，就说明导航栏一定存在问题。虽然在iOS系统中叫做「导航栏」、Android系统叫「顶部应用栏」，叫法不一，但所在位置以及起到的作用几乎一致。
首先，导航栏能告知用户当前所在位置，并提供回到上一步或部分下一步操作入口，不至于让用户迷失方向；其次，以顶部Tab的方式将当前页面内容作出整理分类，并将各类型入口聚合在导航栏，给用户提供全局操作；最后，还能增加品牌曝光，例如容器品牌色、图标品牌色等，甚至在有必要的情况下放置品牌LOGO。
常见的导航栏分为左、中、右结构，主要由返回按钮（左）、标题（中）、辅助操作按钮（右）三部分元素组成，这也是基于大家最常用、常见的布局方式。在实际应用中，为了满足多元化的产品需求及用户目标，根据不同的场景，导航栏的布局方式也非常多，不管样式多么复杂，这也仅仅是站在设计角度，其目的还是为了让用户操作起来更简单、便捷。下面以iOS的2倍图为例对导航栏进行一一拆解，看看我们所见过形形色色的导航栏到底会用到哪些元素、组件。
即导航栏的范围约束容器，所有元素都应该在容器里面。在iOS系统应用中，常规导航栏的固定高度为88px，即便在大标题导航样式下，不管当前的高度是多少，随着界面的滚动，随后也会转换为88px的常规高度，例如iPhone界面、产品经理应用等。另外，部分应用为了释放更多界面空间，从表面上看不到容器的存在，实际是将容器的不透明度调整为0，逻辑上容器是依然存在的，且各元素依然受到容器的约束，例如滴滴打车界面。
标题用于描述用户当前所在位置或页面的具体所在场景，在iPhone全面屏出现之前，因设备屏幕空间有限，大部分使用常规标题，即34px~40px（栅格所需、笔者常用36px）加粗且居中标题文字。当全面屏设备逐渐普及后，屏幕的高度得到了进一步扩展，导航栏的可发挥空间必然增加，大标题风格开始兴起，随后也被引入了设计平台规范。大标题导航栏主要取决于产品定位与功能影响，并不单单是设计风格的问题，毫无疑问，大标题能让页面头部有更多的留白空间，呼吸感更强，非常适合产品结构不深、功能单一且体量级别较轻的应用，也就是我们常说的「小而美」，人人都是产品经理平台在这方面做的相当出色。大标题导航栏的容器高度为192px，字号通常设定在56px~68px（栅格所需、笔者常用64px）的范围，页面上滑后，会恢复到88px的常规高度，标题字号也随之减小。
主页面导航栏中的图标比较多元化，例如左侧常见的定位、品牌logo、抽屉菜单入口等，右侧例如搜索、消息、扫一扫、更多……。二级及以后的页面导航图标相对固定，左侧必定有一个返回到上级页面的“回退”图标，可以是向左剪头、向下剪头、关闭按钮等。需要注意的是，不管设计什么样式，都需要符合“回退”样式预期，确保用户不会产生疑惑。右侧一般放置功能图标，如次级功能延展、信息提交、删除等，最多不超过两个操作入口，避免造成功能层级混乱。
导航栏的左侧已被「返回」图标占领，按钮基本只能放在右侧，且以文字按钮样式居多，主要用于承载页面的辅助操作、功能入口。当导航有足够的纵向空间时，也可使用如圆形、方形、圆角矩形类型的容器按钮，需通过按钮的形状、大小、填充、描边等样式来确定在页面中的视觉权重，灵活区分主次层级关系，好的导航按钮总能抓住用户的注意力。
当搜索功能权重较高，用图标、按钮作为入口已不能满足用户频繁的搜索需求时，就会以输入框的方式占据导航栏大部分区域，不仅能突出搜索功能、向用户推荐搜索内容标签，还能提升产品的可操作性，随着搜索框区域的扩大，用户无需精准点击，触手可及。对于内容较多的首页，导航栏需要承载如标题、分类、头像、按钮等诸多信息，这是可适时增加导航栏的高度，搜索框放在第二行展示，可避免过度弱化搜索框给用户带来操作上的影响，例如京东、淘宝等电商类型的应用。如果想节省页面整体纵向空间，若条件允许，可在页面上滑后缩小导航栏高度，只显示搜索框，例如美团外卖。
导航栏的分类菜单包括分段控件和标签导航，分段控件通常包含2~4个标签，直接点击进行内容切换，不支持左右滑动；标签导航则相对灵活，很适合分类较多的内容，可通过左右滑动来查看所有分类，实现更方便的导航。
分隔线并不仅仅是一条线，它可以是线、面或投影，用于分隔导航栏与内容区域的一个边界线，通过视觉阻断的方式让用户感知内容区域，避免在页面产生上下滑动交互后重复扫视顶部位置。分割线是为了体现导航栏与内容界面的层级关系，缺少视觉分割可能会让用户感觉它们是一个平级，会增加感知难度。当然，并不是所有的应用或界面都需要视觉分割，例如：界面内容极少、界面背景色与导航栏容器背景色值有明显差异、多图/多卡片……
最常见的样式，95%以上的2级及后续界面使用的都是常规导航栏，部分较为简单的主页也会使用这种类型。以iOS的2倍图为例，容器高度固定在88px，基本只有按钮、标题组成，背景色多为白色或主体色。
在iOS11系统发布之后，大标题导航栏逐渐流行。大标题一般只出现在主页面（底部标签功能分类），至于基础规范上述有详细说明。大标题导航栏会给人一种高逼格、通透的空间感，整体风格偏向简约大气，并不适合电商类型应用，因所占空间较大，适合用在如新闻资讯、社交、工具型且功能较为单一的应用。
根据搜索功能的权重，在常规导航栏中添加一个搜索框并替代标题展示。因空间限制，搜索框高度一般设置在56px~64px，宽度随其他功能图标的多少而定，若图标较多，可将搜索框放在第二行。如无特别需要，尽量将搜索框整体居中，让两侧的间距相等或两侧图标数量相同，以提升视觉美观度。
Tab栏有分段控件和多标签导航两种，需明确突出已选中的标签即可，上述有详细规范说明，暂不做赘述。
通栏导航可以是上述类型中的任何一种，唯一不同的是在视觉层没有容器（或不透明度0%）的存在。在初始化状态下，它可以与背景/图片融为一体，对节省头部空间、渲染氛围起到很大的作用，同时也能减少导航栏与内容区域的割裂感，电商类应用中很常见。在页面上滑至背景消失后，会逐渐恢复至常规样式。尤其要注意背景色与导航栏中元素的色彩明暗对比（例如图标深色、背景就必须浅色），如若背景不可控，建议在导航栏下方增加一个黑色透明渐变蒙层，以确保证信息的可识别性。
不管是哪个平台的小程序，我们都可以理解为内嵌的“子级”APP，其导航栏右上角一部分区域为“父级”APP原生功能，是无法作出任何修改的，这是硬性规则。除此之外，至于放什么元素、用什么类型可随意发挥。
众所周知，导航栏最主要的作用是方便用户随时进行上一步或部分功能的下一步操作，帮助用户不迷路，但有时候，导航栏还能协助用户快速完成任务，以及交互后的内容管理、信息层级重新划分等。
随着界面的向上滑动，大标题、或带搜索功能且占据两行的大尺寸导航栏将恢复至常规尺寸，信息的数量、层级也将重新划分，以弱化导航栏吸引力的方式，减少对用户的干扰。
界面产生上滑交互后，原本常规样式的导航栏会自动增加信息内容。例如美团外卖，首屏上滑至一半时，将特色标签及筛选入口悬浮至导航栏，目的是为了帮助用户快速做出决策。
大多数用分隔线直接分割，但部分产品为了保持界面的干净整洁、减少无关信息的干扰，在无任何交互产生的情况下，导航栏与内容区域的元素间隔较远，利用空间留白自动形成视觉分割，当产生滚动交互后，留白不可控，就会在导航栏下方增加投影、分隔线或毛玻璃效果，进行视觉分割。
导航栏在同一个应用中的高度、位置及其部分属性（字号、图标大小、用色规范）需具备统一性，这也是格式塔心理学中的「一致性」对UI设计的硬性要求。即便是大标题样式，那么底部标签栏（主结构、功能）所对应页面的导航栏也会遵循一致性要求。当然，部分只在首页设定大标题样式的应用除外。
这里主要指的是iOS、Android两大系统，在同等比例、同宽度前提下，Android（MD设计规范）系统的标题为左对齐，且容器高度比iOS要高；iOS系统一般只会在大标题样式下让标题左对齐。
另外，Android一般会在容器底部增加投影，以区分导航栏与内容区域的分割；iOS除上述（2-9）提到的分割元素外，还可以使用高斯模糊且带不透明度的方式来区分，毛玻璃效果的味道。