自定义导航最佳实践

收藏
我的收藏

适用场景​

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

自定义范围​

抖音开放平台为开发者提供了导航栏框架,除左侧小程序 logo 区、返回按钮及右上方胶囊区(反馈、更多、关闭)不可自定义外,剩余小程序业务区、导航栏拓展区均支持自定义,以帮助开发者打造符合自身产品特色、好用易用的小程序。​
需注意:小程序 logo、返回及胶囊由平台统一下发,请避免重复设计造成信息遮挡。

最佳实践​

导航栏拓展区​

开发者可依据自身需求在拓展区增加标题、搜索、Tab、定位等内容​
设计导航栏拓展区时需遵循以下原则:​

排版美观​

拓展区功能由左至右开始新增,需与平台提供的胶囊区水平居中对齐,且各元素间保留适当安全间距,避免排版错位,影响视觉体验​
此外,为进一步降低开发者适配成本,平台提供了getCustomButtonBoundingClientRect API,帮助开发者快速获取胶囊区的位置信息​

突出重点​

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

简洁直观​

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

导航栏背景​

导航栏背景可采用纯色、渐变色或氛围图进行氛围感营造​
设计导航栏背景时需遵循以下原则:​

信息清爽​

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

清晰易辨​

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

内容完整​

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

轻量打扰​

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

优秀范例​

风行视频​
懂车帝​
快看漫画​
决胜圈​
红果剧场​