导航栏篇 | 帮你全方位掌握导航栏设计知识点！

APP的顶部导航栏（以下简称“导航栏”）对我们来说再熟悉不过了，它是UI设计中必不可少的组成部分，几乎每一个页面都会使用到。虽然看起来很简单，感觉不需要花费多少精力，但设计一个与产品需求、用户目标匹配度较高的导航栏并非那么容易，这里面有很多需要注意的设计细节。

导航栏集合了用户常用或必用一些功能，复用率极高，当用户在进行部分路径操作时，导航栏就像黑暗中的一盏“明灯”，指引着用户进入下一步或回到上一步操作，所以做好用户体验是非常重要的。

我们每天都在跟导航栏打交道，如果仔细观察就会发现，不同应用的顶部导航栏都或多或少的存在一些差异，为了让大家对导航栏有一个更清晰、全面的认识，本文将对导航栏的设计风格、组成结构、样式、交互等多方面做出总结，希望能帮到大家，一起来看看吧。

一、导航栏基本介绍

1. 导航栏在哪里？

在UI设计组件中，如标签栏、菜单栏、Tab栏、应用栏、标题栏、导航栏……等诸多类型和叫法中，有很多新人设计师难以区分这些重复叫法以及对应的所在区域。

导航栏位于应用程序的顶部，即状态栏下方，主要用于明确页面位置、层级等，并且连接着父/子级结构页面，权重应高于当前页面的所有内容。如果用户不知道当前所在位置、如何回到上一步的时候，就说明导航栏一定存在问题。虽然在iOS系统中叫做「导航栏」、Android系统叫「顶部应用栏」，叫法不一，但所在位置以及起到的作用几乎一致。

2. 导航栏能起到什么作用？

首先，导航栏能告知用户当前所在位置，并提供回到上一步或部分下一步操作入口，不至于让用户迷失方向；其次，以顶部Tab的方式将当前页面内容作出整理分类，并将各类型入口聚合在导航栏，给用户提供全局操作；最后，还能增加品牌曝光，例如容器品牌色、图标品牌色等，甚至在有必要的情况下放置品牌LOGO。

3. 为什么有的页面没有导航栏？

当系统想要给用户提供更多信息或用户需要沉浸式的使用体验，这时系统需要弱化、隐藏导航栏来释放更多的页面空间，以备增加单屏页面信息量的空间资源预留。

例如在线上读书、地图导航过程中，系统会将导航栏进行隐藏，因为这时用户的关注点只会长时间停留在内容本身，没有频繁的操作需求，隐藏导航栏既能预留空间，还能减少无关元素对用户的干扰；

使用滴滴出行在选择服务车型时，会暂时隐藏导航栏的背景容器，只保留了相关图标操作入口，虽然没有全部隐藏，但对本就不宽裕的地图空间能起到一定的缓解作用，相比上述处在导航过程中，现下场景的操作需求、频率显然要高出许多。

二、导航栏的结构组成

常见的导航栏分为左、中、右结构，主要由返回按钮（左）、标题（中）、辅助操作按钮（右）三部分元素组成，这也是基于大家最常用、常见的布局方式。

在实际应用中，为了满足多元化的产品需求及用户目标，根据不同的场景，导航栏的布局方式也非常多，不管样式多么复杂，这也仅仅是站在设计角度，其目的还是为了让用户操作起来更简单、便捷。下面以iOS的2倍图为例对导航栏进行一一拆解，看看我们所见过形形色色的导航栏到底会用到哪些元素、组件。

1. 容器

即导航栏的范围约束容器，所有元素都应该在容器里面。在iOS系统应用中，常规导航栏的固定高度为88px，即便在大标题导航样式下，不管当前的高度是多少，随着界面的滚动，随后也会转换为88px的常规高度，例如iPhone界面、产品经理应用等。

另外，部分应用为了释放更多界面空间，从表面上看不到容器的存在，实际是将容器的不透明度调整为0，逻辑上容器是依然存在的，且各元素依然受到容器的约束，例如滴滴打车界面。

2. 标题

标题用于描述用户当前所在位置或页面的具体所在场景，在iPhone全面屏出现之前，因设备屏幕空间有限，大部分使用常规标题，即34px~40px（栅格所需、笔者常用36px）加粗且居中标题文字。

当全面屏设备逐渐普及后，屏幕的高度得到了进一步扩展，导航栏的可发挥空间必然增加，大标题风格开始兴起，随后也被引入了设计平台规范。大标题导航栏主要取决于产品定位与功能影响，并不单单是设计风格的问题，毫无疑问，大标题能让页面头部有更多的留白空间，呼吸感更强，非常适合产品结构不深、功能单一且体量级别较轻的应用，也就是我们常说的「小而美」，#

大漠飞鹰；公众号：能量眼球。致力于产品需求的驱动、产品体验的挖掘，利用设计的手段为受众用户带来更好的体验，即好看、好用。

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！