3分钟快速搞懂！导航栏/标签栏/应用栏的区别和设计规范
· 2026-08-02 01:08:15
哈喽 ，这里是搞懂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设计夹
文章推荐：
《失控玩家》彩蛋有哪些 ？ 《失控玩家》影评如何 好看吗 ？