设计原则

视觉规范

自定义导航最佳实践

我的收藏

适用场景

对于页面内容展示具有强氛围感、沉浸感诉求时，可申请使用自定义导航栏：

抖音开放平台为开发者提供了导航栏框架，除左侧小程序 logo 区、返回按钮及右上方胶囊区（反馈、更多、关闭）不可自定义外，剩余小程序业务区、导航栏拓展区均支持自定义，以帮助开发者打造符合自身产品特色、好用易用的小程序。

需注意：小程序 logo、返回及胶囊由平台统一下发，请避免重复设计造成信息遮挡。

开发者可依据自身需求在拓展区增加标题、搜索、Tab、定位等内容；

设计导航栏拓展区时需遵循以下原则：

拓展区功能由左至右开始新增，需与平台提供的胶囊区水平居中对齐，且各元素间保留适当安全间距，避免排版错位，影响视觉体验。

此外，为进一步降低开发者适配成本，平台提供了getCustomButtonBoundingClientRect API，帮助开发者快速获取胶囊区的位置信息。

建议保持拓展区功能简洁，突出1个主要功能，避免内容繁杂；

尽量提炼小程序/页面标题，避免省略造成的信息丢失；

小程序胶囊区需要保证在最高层级，横屏沉浸播放器场景可豁免，但仍需保障明确退出路径。

导航栏背景可采用纯色、渐变色或氛围图进行氛围感营造

设计导航栏背景时需遵循以下原则：

进行背景内容布局时，避免内容对导航栏框架形成信息遮挡，影响用户提取信息

导航栏背景的主要作用为增强品牌氛围感，因此背景内容需清晰易辨，体现品牌调性，避免内容模糊，不易识别

背景内容保持信息完整，且与下方小程序业务区内容保证一定的信息关联度，避免内容裁剪，造成视觉割裂感

当用户需要以全屏幕查看页面内容时，可选择隐藏导航栏背景，并通过提供轻点等熟悉手势来恢复导航栏