自定义导航最佳实践
收藏
我的收藏适用场景
对于页面内容展示具有强氛围感、沉浸感诉求时,可申请使用自定义导航栏:
自定义范围
抖音开放平台为开发者提供了导航栏框架,除左侧小程序 logo 区、返回按钮及右上方胶囊区(反馈、更多、关闭)不可自定义外,剩余小程序业务区、导航栏拓展区均支持自定义,以帮助开发者打造符合自身产品特色、好用易用的小程序。
需注意:小程序 logo、返回及胶囊由平台统一下发,请避免重复设计造成信息遮挡。
最佳实践
导航栏拓展区
开发者可依据自身需求在拓展区增加标题、搜索、Tab、定位等内容
设计导航栏拓展区时需遵循以下原则:
排版美观
拓展区功能由左至右开始新增,需与平台提供的胶囊区水平居中对齐,且各元素间保留适当安全间距,避免排版错位,影响视觉体验
突出重点
建议保持拓展区功能简洁,突出1个主要功能,避免内容繁杂
简洁直观
尽量提炼小程序/页面标题,避免省略造成的信息丢失
导航栏背景
导航栏背景可采用纯色、渐变色或氛围图进行氛围感营造
设计导航栏背景时需遵循以下原则:
信息清爽
进行背景内容布局时,避免内容对导航栏框架形成信息遮挡,影响用户提取信息
清晰易辨
导航栏背景的主要作用为增强品牌氛围感,因此背景内容需清晰易辨,体现品牌调性,避免内容模糊,不易识别
内容完整
背景内容保持信息完整,且与下方小程序业务区内容保证一定的信息关联度,避免内容裁剪,造成视觉割裂感
轻量打扰
当用户需要以全屏幕查看页面内容时,可选择隐藏导航栏背景,并通过提供轻点等熟悉手势来恢复导航栏
优秀范例
风行视频 | 懂车帝 | 快看漫画 | 决胜圈 | 红果剧场 |