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

前言

APP顶部导航栏(以下简称导航栏)对我们来说再熟悉不过了，它是UI几乎每个页面都使用了设计中不可或缺的组成部分。虽然看起来很简单，感觉不需要花费太多精力，但设计一个与产品需求和用户目标高度匹配的导航栏并不那么容易，有很多设计细节需要注意。
导航栏集成了一些常用或必要的功能，重用率非常高。当用户操作某些路径时，导航栏就像黑暗中的灯，引导用户进入下一步或回到上一步，因此做好用户体验非常重要。
我们每天都在处理导航栏。如果我们仔细观察，我们会发现不同应用的顶部导航栏或多或少存在一些差异。为了让大家对导航栏有更清晰、更全面的了解，本文将总结导航栏的设计风格、组成结构、风格、交互等方面，希望对大家有所帮助。让我们看看。

分享目录

一、导航栏基本介绍
二、导航栏的结构组成
三、导航栏样式分类
四、内容区交互关联
五、导航栏的相同点/不同点
六、结语

一、导航栏基本介绍

1.导航栏在哪里？

在UI在设计组件中，如标签栏、菜单栏、Tab栏、应用栏、标题栏、导航栏...在许多类型和名称中，许多新设计师很难区分这些重复的名称和相应的区域。
导航栏位于应用程序的顶部，即状态栏的底部，主要用于明确页面的位置和级别，并连接父子结构页面，权重应高于当前页面的所有内容。如果用户不知道目前的位置，以及如何回到上一步，那么导航栏肯定有问题。虽然在iOS系统中叫做「导航栏」、Android系统叫「顶部应用栏」，名称不同，但位置和作用几乎相同。

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

首先，导航栏可以告知用户当前位置，并提供回到上一步或部分下一步操作入口，以免让用户迷失方向；其次，顶部Tab整理分类当前页面内容，将各类入口聚合在导航栏中，为用户提供全球操作；最后，可以增加容器品牌颜色、图标品牌颜色等品牌曝光率，甚至在必要时放置品牌LOGO。

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

当系统想要为用户提供更多的信息或需要沉浸式使用体验时，系统需要削弱和隐藏导航栏来释放更多的页面空间，以保留空间资源，以增加单屏页面的信息量。
例如，在在在线阅读和地图导航过程中，系统会隐藏导航栏，因为用户的注意力只会长时间停留在内容本身，没有频繁的操作需求，隐藏导航栏不仅可以预留空间，还可以减少无关元素对用户的干扰；在选择服务模型时，使用滴滴旅行会暂时隐藏导航栏的背景容器，只保留相关图标操作入口，虽然没有全部隐藏，然而，它可以缓解不足的地图空间。与上述导航过程相比，目前场景的操作需求和频率明显要高得多。

二、导航栏的结构组成

常见的导航栏分为左、中、右结构，主要由返回按钮（左）、标题（中）、辅助操作按钮（右）三部分组成，这也是基于最常用、最常见的布局。
在实际应用中，为了满足多样化的产品需求和用户目标，根据不同的场景，导航栏的布局也很多，无论风格多么复杂，这只是从设计的角度，其目的是让用户操作更简单、更方便。iOS以2倍图为例，逐一拆解导航栏，看看我们看到的各种导航栏会使用哪些元素和组件。

1.容器

也就是说，导航栏的范围限制了容器，所有元素都应该在容器中。在容器中。iOS在系统应用中，常规导航栏的固定高度为88px，即使在大标题导航风格下，无论目前的高度如何，随着界面的滚动，也会转换为88px常规高度，如iPhone界面、产品经理应用等。
此外，为了释放更多的界面空间，一些应用程序表面上看不到容器，实际上将容器的不透明度调整为0。逻辑上，容器仍然存在，各种元素仍然受到容器的限制，如滴滴出租车界面。

2.标题

标题用于描述用户当前位置或页面的具体场景。iPhone在全屏出现之前，由于设备屏幕空间有限，大多使用常规标题，即34px~40px(网格所需，笔者常用36px）加粗和中标题文字。
当综合屏幕设备逐渐普及时，屏幕高度进一步扩大，导航栏的空间不可避免地增加，大标题风格开始兴起，然后引入设计平台规范。大标题导航栏主要取决于产品定位和功能的影响，不仅是设计风格的问题，毫无疑问，大标题可以让页面头部有更多的空白空间，呼吸感更强，非常适合产品结构不深，功能单一，体积水平轻，也就是我们常说的「小而美」，每个人都是产品经理平台在这方面做得很好。
大标题导航栏的容器高度为192px，字号通常设置在56px~68px(网格所需，笔者常用64px）页面滑动后，页面的范围会恢复到88px常规高度，标题字号也相应减小。

3.图标

主页导航栏中的图标更加多样化，如左侧常见的定位、品牌logo、抽屉菜单入口等右侧，如搜索、消息、扫描、更多……。
二级及以后的页面导航图标相对固定，左侧必须有一个退货图标，可以是左剪、下剪、关闭按钮等。需要注意的是，无论设计什么样式，都需要满足退货样式的预期，以确保用户不会感到困惑。功能图标通常放置在右侧，如二次功能扩展、信息提交、删除等，最多不超过两个操作入口，以避免功能级别的混乱。

4.按钮

导航栏栏的左侧「返回」图标占用，按钮只能放在右侧，以文本按钮风格为主，主要用于承载页面的辅助操作和功能入口。
当导航有足够的纵向空间时，也可以使用圆形、方形、圆角矩形类型的容器按钮过按钮的形状、大小、填充、边缘描述等风格确定页面的视觉权重，灵活区分主次关系，良好的导航按钮总能吸引用户的注意。

5.搜索框

当搜索功能权重高，图标、按钮作为入口不能满足用户频繁的搜索需求时，将占据导航栏的大部分区域，不仅突出搜索功能，向用户推荐搜索内容标签，而且提高产品的可操作性，随着搜索框区域的扩大，用户无需准确点击，触手可及。
对于内容较多的主页，导航栏需要携带许多信息，如标题、分类、头像、按钮等，可以及时增加导航栏的高度。第二行显示搜索框可以避免过度削弱搜索框对用户操作的影响，如JD.COM、淘宝等电子商务类型的应用。如果你想节省页面的整体纵向空间，如果条件允许，可以在页面上滑动后缩小导航栏的高度，只显示搜索框，比如美团外卖。

6.用户头像

许多社交产品将用户的头像信息放置在导航栏的左右两侧，以便随时调用与用户相关的功能。例如，点击进入个人设置、个人信息显示、会员中心、个人主页等。

7.标签/分类

导航栏的分类菜单包括分段控制和标签导航。分段控制通常包含2~4个标签，直接点击切换内容，不支持左右滑动；标签导航相对灵活，非常适合分类内容，可以通过左右滑动查看所有分类，实现更方便的导航。

8.更多菜单

上述标签是对产品内容的分类，这里更多的是指产品、系统的辅助功能。
当页面的某些功能操作频率较高或与当前页面信息相关，但不方便直接显示入口，或由于导航栏剩余空间不足，将功能放在更多菜单中，不仅可以适当地为用户提供操作入口，而且可以满足产品的隐藏需求。

9.分割线

分离线不仅仅是一条线，它可以是一条线，表面或投影，用来分隔导航栏和内容区域之间的边界线，让用户通过视觉阻断感知内容区域，避免在页面上下滑动交互后反复扫描顶部位置。
分割线的目的是反映导航栏与内容界面之间的层次关系。缺乏视觉分割可能会让用户觉得自己是一个层次，增加感知的难度。当然，并不是所有的应用程序或界面都需要视觉分割，例如：界面内容很少，界面背景色与导航栏容器背景色值有明显差异，多图/多卡……

三、导航栏样式分类

1.常规样式

最常见的款式，95%以上的二级和后续界面都是常规导航栏，一些简单的主页也会使用这种类型。iOS以2倍图为例，容器高度固定在88px，基本上只由按钮和标题组成，背景色多为白色或主色。

2.大标题

在iOS11系统发布后，大标题导航栏逐渐流行起来。大标题通常只出现在主页上（底部标签功能分类），对基本规范有详细说明。
大标题导航栏会给人一种高假装能力、透明的空间感，整体风格倾向于简单的氛围，不适合电子商务类型的应用，因为空间大，适合新闻信息、社交网络、工具类型和相对单一的功能应用。

3.搜索框类型

根据搜索功能的权重，在传统的导航栏中添加一个搜索框，而不是标题显示。由于空间限制，搜索框的高度一般设置在56px~64px，宽度取决于其他功能图标的数量，如果图标较多，可将搜索框放在第二行。
如无特殊需要，尽量将搜索框整体放在中间，使两侧间距相等或两侧图标数量相同，以提高视觉美感。