3分钟快速搞懂！导航栏/标签栏/应用栏的区别和设计规范

哈喽，这里是搞懂Clip设计夹，今天分享的导航是「导航组件设计」
。

导航组件的栏标栏命名很容易产生混淆
，即使是签栏区别相似的组件，在不同的应用设计指南中也可能具有不同的名称和功能界定。

例如在谷歌的和设Material Design 3设计指南（MD3）中，①为导航栏，计规用于切换应用内3-5个核心功能版块；②为顶部应用栏，分钟范③为底部应用栏，快速聚焦当前页面的搞懂导航控制（如返回）、功能操作（如搜索）与信息展示（如标题）。导航

但在苹果Human Interface Guidelines设计指南（HIG）中，将①定义为标签栏 ，将②定义为导航栏 。

为什么HIG中对导航栏的定义不同呢 ？

我认为iOS中的②不仅仅是展示标题 ，还是一个功能导航，可以返回上一级，强调层级导航与页面操作的整合；①聚焦跨版块快速跳转，用于切换不同的版块，因此被定义为标签栏 。

行业内还存在常见的别名：导航栏可称GNB（全局导航栏）、标签菜单；顶部应用栏可称操作栏 、标题栏（网页端常用）。多数团队会根据内部的沟通习惯灵活定义组件名称 ，核心是明确组件的功能边界而不是纠结专业的术语 。

一、导航栏设计规范与使用方法

导航栏是产品的全局导航核心，提供3-5个功能入口，确保用户快速切换核心功能版块 。

1. 基础构成

①为容器、②为激活指示器 、③为图标 、④为标签文本、⑤为数量提示徽标 (可选) 、⑥为状态提示徽标 (可选)

2. 布局设计

宽度分配：容器宽度按功能数量均分列宽，如4个功能则每列占1/4宽度，确保每个入口的视觉均衡。

背景处理：可通过填充色与背景内容区分，如果后面没有冲突的内容 ，容器的颜色可以与背景颜色相同 。

3. 图标规范

导航栏中的功能优先用图标展示 ，如果图标的含义比较模糊，可以根据需要搭配文本说明。

通常激活状态使用面性填充图标，未激活状态使用线性轮廓图标 。如果没有实心面性图标 ，可以在图标下面加一层激活背景，来强化选中状态。

4. 适配规则

导航栏作为第一优先级的导航 ，默认展示在页面的最上层，仅可以被对话框、底部面板、导航抽屉或键盘等元素临时覆盖。

在手机等小型设备中，导航栏固定于顶部或底部，节省页面空间 ，保障操作便捷性；

在平板等中型设备中，导航栏固定于页面边缘，作为主要导航入口；

在电脑等大型设备中 ，常采用抽屉导航形式 ，可以将导航设置成展开或折叠状态 ，适配高频页面切换场景。

二、顶部应用栏设计规范与使用方法

应用栏聚焦当前页面的功能支持 ，分为顶部应用栏与底部应用栏 ，主要是承载页面导航 、操作入口与信息展示的功能 。

1. 基础构成

①为容器 、②为导航型图标
、③为标题文本
、④为功能型图标。

导航型图标位于容器左侧，用于展示打开导航抽屉的菜单图标 、展示页面跳转的返回图标这两种形式 。

功能型图标建议最多配置3个常用的操作图标，优先级高的操作前置；当图标超过3个时，可以考虑将次要的操作折叠放到“更多”图标中。

2. 类型与适用场景

居中对齐型：适用于产品主页，展示产品名称或核心页面的标题。

小型尺寸：适用于子页面或滚动视图 ，支持返回导航与多操作入口。

中等尺寸
：页面滚动前的初始状态 
，用于展示较大尺寸的页面标题 。

大型尺寸：强化页面标题视觉权重，提升页面识别度。

三
、底部应用栏设计规范与使用方法

1. 基础构成

①为容器、②为查看更多图标 、③为功能按钮、④为悬浮按钮

2. 使用约束

底部应用栏仅适用于移动设备，能承载2-5个页面操作选项 。当底部的操作选项少于2个时，不建议使用底部应用栏这种组件样式。

底部应用栏与导航栏不同 。导航栏提供前往目标页面的路径，而底部应用栏可以同时包含目标页面和操作。

避免在底部应用栏中强行堆砌功能，次要操作可以考虑折叠；不建议放置含义模糊的图标，避免提高用户认知成本。

3. 全局适配规则

当顶部应用栏与底部应用栏组合使用时 ，需保持操作结构的一致性 ：

导航类操作集中在顶部应用栏 ，次要操作折叠为“更多”菜单 ，放到顶部应用栏的右侧；搜索等高频通用操作需要固定位置，保障用户操作习惯的连贯性；删除等操作放置在顶部应用栏中 ，强化视觉警示。

四、导航栏组件使用原则

精简原则
：导航栏操作图标不超过5个，应用栏操作图标不堆砌 
，避免视觉杂乱。

适配原则：根据设备的尺寸选择合适的导航组件央视，保障不同场景下的操作便捷性。

灵活原则：不需要严格拘泥于组件术语，先保证团队内部明确组件的功能和定义 ，确保沟通一致。

体验原则 ：组件使用需贴合用户认知，导航栏聚焦“跨版块切换”，应用栏聚焦“当前页操作”，清晰的边界可以降低用户的学习成本。

作者：Clip设计夹