看哪里 点底部的标签切换首页、发现、消息和我的，当前标签变成橙色并加粗；中间的橙色加号不切换页面，而是从底部弹出发布面板。消息标签上的小红点表示有未读。宽屏时显示在手机样机里，手机宽度下直接铺满
这是什么
底部标签栏（Tab Bar／Navigation Bar）是手机 App 最常见的导航：屏幕底部固定一排三到五个图标加文字，对应 App 的几个主要区域，当前所在的标签高亮。Apple 和 Material Design 的规范都建议标签数量控制在三到五个；国内 App 常在中间放一个突出的「发布」按钮
也叫App 底部导航Tab Bar底部 Tab移动端导航栏Bottom Navigation
关键特征
- 缺了就不像
- 底部固定的一排图标标签当前标签高亮三到五个标签
- 加了更像
- 中间突出的发布按钮未读红点底部弹出面板
容易混淆
- 液态玻璃Liquid Glass
液态玻璃讲底栏的材质；底部标签栏讲导航结构本身
- 材料设计Material Design
Material Design 有自己的导航栏规范；底部标签栏是各平台通用的模式
底部标签栏应用Bottom Tab Bar App
手机 App 底部一排三到五个图标标签，当前页高亮，中间常有发布按钮
你可能会说
- 手机 App 底下那排按钮
- 首页发现消息我的那种
- 中间有个加号的底栏
适合用在
- 设计 App 原型或给 AI 描述一个 App 界面
- 产品宣传视频和截图里的手机界面
- 小程序、H5 活动页的底部导航
这样描述给 AI
做一个底部标签栏（Bottom Tab Bar）的手机 App 界面：顶部状态栏和大号页面标题，右侧搜索图标；内容是浅灰 #f5f5f7 背景上的白色圆角作品卡片，带标题、说明和点赞心形；屏幕底部固定一排五个标签「首页／发现／发布／消息／我」，每个是线性图标加 10px 小字，当前标签用品牌橙色并加粗，其余灰色；中间「发布」是橙色圆角方块加号按钮，点击从底部弹出发布面板；「消息」图标右上角有红色未读小圆点；底栏半透明白色，上方一条细分隔线