导航栏图标风格（帮你全方位掌握导航栏设计知识点）
导航栏图标风格（帮你全方位掌握导航栏设计知识点）例如在线上读书、地图导航过程中，系统会将导航栏进行隐藏，因为这时用户的关注点只会长时间停留在内容本身，没有频繁的操作需求，隐藏导航栏既能预留空间，还能减少无关元素对用户的干扰；当系统想要给用户提供更多信息或用户需要沉浸式的使用体验，这时系统需要弱化、隐藏导航栏来释放更多的页面空间，以备增加单屏页面信息量的空间资源预留。在UI设计组件中，如标签栏、菜单栏、Tab栏、应用栏、标题栏、导航栏……等诸多类型和叫法中，有很多新人设计师难以区分这些重复叫法以及对应的所在区域。导航栏位于应用程序的顶部，即状态栏下方，主要用于明确页面位置、层级等，并且连接着父/子级结构页面，权重应高于当前页面的所有内容。如果用户不知道当前所在位置、如何回到上一步的时候，就说明导航栏一定存在问题。虽然在iOS系统中叫做「导航栏」、Android系统叫「顶部应用栏」，叫法不一，但所在位置以及起到的作用几乎一致。首先，导航栏能
编辑导语：APP的顶部导航栏是UI设计中必不可少的组成部分，它集合了用户常用或必用的一些功能，指引用户进行操作，所以做好导航栏的用户体验是非常重要的。本文作者对导航栏的设计风格、组成结构、样式、交互等方面进行了总结，一起来看一下吧。
APP的顶部导航栏（以下简称“导航栏”）对我们来说再熟悉不过了，它是UI设计中必不可少的组成部分，几乎每一个页面都会使用到。虽然看起来很简单，感觉不需要花费多少精力，但设计一个与产品需求、用户目标匹配度较高的导航栏并非那么容易，这里面有很多需要注意的设计细节。
导航栏集合了用户常用或必用一些功能，复用率极高，当用户在进行部分路径操作时，导航栏就像黑暗中的一盏“明灯”，指引着用户进入下一步或回到上一步操作，所以做好用户体验是非常重要的。
我们每天都在跟导航栏打交道，如果仔细观察就会发现，不同应用的顶部导航栏都或多或少的存在一些差异，为了让大家对导航栏有一个更清晰、全面的认识，本文将对导航栏的设计风格、组成结构、样式、交互等多方面做出总结，希望能帮到大家，一起来看看吧。
一、导航栏基本介绍1. 导航栏在哪里？
在UI设计组件中，如标签栏、菜单栏、Tab栏、应用栏、标题栏、导航栏……等诸多类型和叫法中，有很多新人设计师难以区分这些重复叫法以及对应的所在区域。
导航栏位于应用程序的顶部，即状态栏下方，主要用于明确页面位置、层级等，并且连接着父/子级结构页面，权重应高于当前页面的所有内容。如果用户不知道当前所在位置、如何回到上一步的时候，就说明导航栏一定存在问题。虽然在iOS系统中叫做「导航栏」、Android系统叫「顶部应用栏」，叫法不一，但所在位置以及起到的作用几乎一致。
2. 导航栏能起到什么作用？
首先，导航栏能告知用户当前所在位置，并提供回到上一步或部分下一步操作入口，不至于让用户迷失方向；其次，以顶部Tab的方式将当前页面内容作出整理分类，并将各类型入口聚合在导航栏，给用户提供全局操作；最后，还能增加品牌曝光，例如容器品牌色、图标品牌色等，甚至在有必要的情况下放置品牌LOGO。
3. 为什么有的页面没有导航栏？
当系统想要给用户提供更多信息或用户需要沉浸式的使用体验，这时系统需要弱化、隐藏导航栏来释放更多的页面空间，以备增加单屏页面信息量的空间资源预留。
例如在线上读书、地图导航过程中，系统会将导航栏进行隐藏，因为这时用户的关注点只会长时间停留在内容本身，没有频繁的操作需求，隐藏导航栏既能预留空间，还能减少无关元素对用户的干扰；
使用滴滴出行在选择服务车型时，会暂时隐藏导航栏的背景容器，只保留了相关图标操作入口，虽然没有全部隐藏，但对本就不宽裕的地图空间能起到一定的缓解作用，相比上述处在导航过程中，现下场景的操作需求、频率显然要高出许多。
二、导航栏的结构组成
常见的导航栏分为左、中、右结构，主要由返回按钮（左）、标题（中）、辅助操作按钮（右）三部分元素组成，这也是基于大家最常用、常见的布局方式。
在实际应用中，为了满足多元化的产品需求及用户目标，根据不同的场景，导航栏的布局方式也非常多，不管样式多么复杂，这也仅仅是站在设计角度，其目的还是为了让用户操作起来更简单、便捷。下面以iOS的2倍图为例对导航栏进行一一拆解，看看我们所见过形形色色的导航栏到底会用到哪些元素、组件。
