Bottom Navigation
底部导航栏
Mobile上手难度: 容易
App 最底部那一排图标按钮，负责在 3–5 个顶级功能之间切换。
Live Demo
真的可以点你刚才看到的这个：微信底部的「聊天 / 通讯录 / 发现 / 我」，支付宝底部的「首页 / 消息 / 蚂蚁森林 / 我的 / 卡包」——都是底部导航。
它到底是什么
Bottom Navigation 是移动 App 的「主菜单」。它的存在意义是：拇指可达、随时可回。它只放最高频的 3–5 个入口，深层页面要能盖住它。
底部 tab 栏底部导航bottom tab barbottom navdock
Anatomy · 它由什么组成
Bar容器
贴底，含安全区 padding
Item导航项
图标 + 短标签
Active Item选中态
图标换色 + 标签加深
Badge角标
红点或数字，可选
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 移动 App 有 3–5 个平级主功能 | 用 |
| 用户需要在功能间频繁往返 | 用 |
| 单手握持、拇指可达性优先 | 用 |
| 桌面端 Web 应用 | 视情况 |
| 有 6 个以上平级入口 | 不用 |
入口多于 5 个时用户会开始乱点，应该收进「更多」或侧边栏。
用户正在沉浸阅读或编辑时，底栏应该隐藏，把空间还给内容。
Similar Patterns
别搞混Bottom Navigation当前
底部导航栏
App 最底部那一排图标按钮，负责在 3–5 个顶级功能之间切换。
Navigation Rail
侧边导航栏
竖着放在页面左侧的一列导航项，适合纵向空间比横向空间多的场景。
一句话区分：App 最底部那一排图标按钮，负责在 3–5 个顶级功能之间切换。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
在 App 底部加 Bottom Navigation，包含 首页 / 搜索 / 收藏 / 我的 四项，选中项图标和文字高亮。
不要只对 AI 说
Bad → Better不要这样对 AI 说
加个底部的菜单栏。
改成这样说
加 Bottom Navigation：首页 / 搜索 / 收藏 / 我的，选中态图标文字高亮并加底部安全区适配，未读项显示角标。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。