鸿蒙底部标签栏（自绘示意）
鸿蒙 App 的底部主导航：按华为设计规范的要点自绘示意，非官方素材。
底部标签栏（移动端）
Bottom Tab Bar (Mobile)
App 底部那排一级入口：图标在上、文字在下，3–5 个，拇指最容易够到。
iOSAndroid 安卓HarmonyOS 鸿蒙移动 Web / 小程序导航底部标签栏组件
大白话说明
底部标签栏是 App 的主导航：把产品最重要的 3–5 个一级页面钉在屏幕底部，用户在任何一层都能一键切换。它由等宽的标签格组成，每格一个图标加一行小字，当前页的标签高亮，未读消息用角标提示。
什么时候用
App 有 3–5 个平级的一级功能，且用户会在它们之间频繁切换时——这是移动端的默认答案。
什么时候不用
一级功能超过 5 个（该用分组或抽屉）、或只有 1–2 个页面（不需要导航栏）时不用；也别把「发布」这种动作伪装成标签混进去（要做就做中间凸起按钮并明确它是动作）。
细节与变体
- 标签文字不超过 4 个字，图标用同一套线性图标，未选中态只描边、选中态填充或加粗
- 角标只标数字或红点，超过 99 显示 99+；角标是「有新东西」，不是装饰
- 高度适配安全区（Home Indicator），背景可带顶部 1px 分隔线或轻微毛玻璃
- 鸿蒙与安卓常用同样的结构，iOS 习惯高度略矮、图标略大
配套提示词（点开填空、复制）
参考实现（开源）
- TDesign（腾讯） ↗ MIT · 免费（MIT）
腾讯出品的全栈设计系统：Web、移动、小程序、桌面都有，国内生态最完整的一套。
- ArkUI（鸿蒙） ↗ Apache-2.0 · 免费（Apache-2.0）
HarmonyOS 的官方 UI 框架底座（开源部分）：做鸿蒙界面先看它，声明式写法与 ArkTS 配套。
- Material Design 3 规范 ↗ Apache-2.0 · 免费（代码 Apache-2.0）
Google 的设计语言全文：Android 与跨端项目的规范源头，Token 体系的参照系。
- Apple 人机界面指南 HIG（仅参考） ↗ NOASSERTION · 免费查阅（仅参考）
iOS 设计的官方规范：只读、只参考。本站绝不打包 Apple 官方套件与 SF Pro 字体。