抖音开放平台Logo
控制台

自定义导航最佳实践

更新时间 2024-07-24 02:58:49
收藏
我的收藏

​适用场景​

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

​自定义范围​

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

​最佳实践​

​导航栏拓展区​

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

​排版美观​

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

​突出重点​

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

​简洁直观​

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

​导航栏背景​

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

​信息清爽​

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

​清晰易辨​

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

​内容完整​

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

​轻量打扰​

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

​优秀范例​

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