自2022年9月6日起,本文档站不再更新内容,相关文档已迁移至全新“抖音开放平台”前往

导航栏 Navigation Bar

清晰的导航能告诉用户当前在哪里、能到哪里去、并能原路返回。

导航栏组件构成

  • 导航栏分为一级导航栏和二级导航栏

一级导航栏包括:

1.开发者品牌 logo

2.页面标题

3.小程序导航按钮(反馈、更多、关闭)

4.导航栏背景

二级导航栏包括:

1.二级页面导航按钮(返回上一级)

2.页面标题

3.小程序导航按钮(反馈、更多、关闭)

4.导航栏背景

  • 根据页面【深色模式】和【浅色模式】,导航栏组件有深、浅两种模式可适配,开发者需在保证可读性的前提下,对页面配色和组件进行选择及使用。

导航栏类型

  • 根据开发者可自定义程度的递增,可分为默认导航、自定义导航、特殊导航三种类型。

默认导航栏:仅可配置导航背景色值(不含透明度),其余元素均不可配置;

自定义导航:标题、背景色值(含透明度)可配置;

特殊导航:可通过申请,标题、背景色值(含透明度)、logo 均可配置。

X 分屏导航

  • 在 X 分屏场景下,为保持容器在有限空间内的使用效率,右侧小程序导航按钮需遵循以下原则:

仅展示一个按钮;

默认展示【更多】按钮;

可通过 schema 或者 settings 配置其他参数。

导航栏品牌透出原则

为保证更好地传递开发者品牌信息,导航栏 logo 透出遵循以下原则:

  • 小程序内常规路径:一级导航栏左侧必须显示品牌 logo,二级页面显示返回按钮
  • 从小程序外部链接进入的第一个页面:无论是一级或二级页面,导航栏左侧须显示品牌 logo,二级页面的 logo 点击可返回首页
点击纠错
该文档是否对你的开发有所帮助?
有帮助
没帮助
该文档是否对你的开发有所帮助?
有帮助
没帮助