鸿蒙底部标签栏(自绘示意)

HarmonyOS Bottom Tabs (Schematic)

鸿蒙 App 的底部主导航:按华为设计规范的要点自绘示意,非官方素材。

HarmonyOS 鸿蒙导航底部标签栏组件

大白话说明

本条目为自绘示意 + 规范要点(鸿蒙官方资源未获书面许可,本站不打包):结构与通用底部标签栏同源——3–5 个一级入口、图标加文字、选中态高亮;差异在规范细节:标签栏与系统手势条的安全距离、图标的线性风格与字重、以及与鸿蒙多设备(手机/折叠屏/平板)形态的适配要点,实现以 ArkUI 的 Tabs 组件为准。

什么时候用

开发 HarmonyOS NEXT 应用、需要底部主导航时参考其规范要点与本站自绘示意。

什么时候不用

不要把本示意当官方设计文件使用;正式产品请以华为开发者官网最新规范与 ArkUI 组件为准。

细节与变体

  • 示意图为本站自绘,仅表达结构与比例,不是华为官方设计稿
  • 选中态用主色填充图标 + 加粗文字,与未选中态的线性图标拉开层级
  • 折叠屏与平板形态下标签栏可考虑迁到侧边,规范要点见鸿蒙设计指南(仅参考外链)

配套提示词(点开填空、复制)

参考实现(开源)

  • ArkUI(鸿蒙) ↗ Apache-2.0 · 免费(Apache-2.0)

    HarmonyOS 的官方 UI 框架底座(开源部分):做鸿蒙界面先看它,声明式写法与 ArkTS 配套。

  • HarmonyOS 设计指南(仅参考) ↗ NOASSERTION · 免费查阅(仅参考)

    鸿蒙官方设计指南:只读、只参考。官方资源在取得书面许可前不打包,本站鸿蒙条目为自绘示意 + 规范要点。

相关条目