# 底部标签栏应用（Bottom Tab Bar App）

镜语 · 版式与界面 / 布局方式

- 别名：App 底部导航、Tab Bar、底部 Tab、移动端导航栏、Bottom Navigation
- 口语：「手机 App 底下那排按钮」「首页发现消息我的那种」「中间有个加号的底栏」
- 一句话：手机 App 底部一排三到五个图标标签，当前页高亮，中间常有发布按钮
- 是什么：底部标签栏（Tab Bar／Navigation Bar）是手机 App 最常见的导航：屏幕底部固定一排三到五个图标加文字，对应 App 的几个主要区域，当前所在的标签高亮。Apple 和 Material Design 的规范都建议标签数量控制在三到五个；国内 App 常在中间放一个突出的「发布」按钮
- 缺了就不像：底部固定的一排图标标签；当前标签高亮；三到五个标签
- 加了更像：中间突出的发布按钮；未读红点；底部弹出面板
- 适合用在：设计 App 原型或给 AI 描述一个 App 界面；产品宣传视频和截图里的手机界面；小程序、H5 活动页的底部导航
- 看哪里：点底部的标签切换首页、发现、消息和我的，当前标签变成橙色并加粗；中间的橙色加号不切换页面，而是从底部弹出发布面板。消息标签上的小红点表示有未读。宽屏时显示在手机样机里，手机宽度下直接铺满
- 注意：标签超过五个，图标挤在一起看不清；把「设置」「退出」这类低频操作放进底栏；图标没有文字，用户猜不出含义
- 描述示例：做一个底部标签栏（Bottom Tab Bar）的手机 App 界面：顶部状态栏和大号页面标题，右侧搜索图标；内容是浅灰 #f5f5f7 背景上的白色圆角作品卡片，带标题、说明和点赞心形；屏幕底部固定一排五个标签「首页／发现／发布／消息／我」，每个是线性图标加 10px 小字，当前标签用品牌橙色并加粗，其余灰色；中间「发布」是橙色圆角方块加号按钮，点击从底部弹出发布面板；「消息」图标右上角有红色未读小圆点；底栏半透明白色，上方一条细分隔线
- 易混：
  - [液态玻璃](https://idea.ameng.dev/terms/liquid-glass.md)：液态玻璃讲底栏的材质；底部标签栏讲导航结构本身
  - [材料设计](https://idea.ameng.dev/terms/material-design.md)：Material Design 有自己的导航栏规范；底部标签栏是各平台通用的模式
- 相关：[扁平化](https://idea.ameng.dev/terms/flat-design.md)

## 来源与延伸阅读

- [Apple HIG · Tab bars](https://developer.apple.com/design/human-interface-guidelines/tab-bars)
- [Material Design 3 · Navigation bar](https://m3.material.io/components/navigation-bar/overview)
- [NN/g · Basic Patterns for Mobile Navigation](https://www.nngroup.com/articles/mobile-navigation-patterns/)

网页版（含演示）：https://idea.ameng.dev/terms/mobile-tab-app