在导航栏的设置能够有效地引导用户迅速访问目标页面，从而提升产品的可用性，并改善整体用户体验。那么，如何判断你的产品是否适合配置底部导航栏？如果答案是需要，那么底部导航栏应该如何进行设计呢？在本文中，小栈将结合几款国外产品，分享底部导航栏设计的策略与要点，总结了底部导航栏的设计策略，一起来看一下。
完整代码
https://www.yuque.com/lch2021/bmg6es/kpk6wcg9eg9t6ckk?singleDoc# 《丝滑的导航栏底部动画效果》
其他导航栏欣赏
1. 显示最重要的目的地
Spotify使用了每个音乐播放器App都需要的简单的导航栏，主标签用于播放或探索收听的内容，搜索标签用于搜索新歌曲和播客，音乐库标签用于播放列表中你喜欢的和保存的歌曲，以及会员标签，这对Spotify很有用，因为用户可以轻松地点击标签并立即付款成为会员。
2. 杂乱无章的同类项放在一起
大的App喜欢在导航栏内使用四到五个标签，这使得导航栏很简洁，也有助于用户点击，因为如果有五个以上的图标，用户可能会点错，因为拇指相对比较大。
3. 如果需要的话，使用标签（Labels）
Youtube和宜家的App有不同类型的复杂性，宜家的App主要是用于购买家具，没有用文字，用户也能直观的理解，Youtube也有点复杂，因此他们添加了文字标签，如果只放图标可能会看不懂，尤其是对于新用户。
在设计带有文字的导航栏方面，Pinterest是行家，因为他们在用户长期习惯后会隐藏文字，我个人喜欢这样，因此我也推荐这样做，但这一切都取决于你。
4. 文字应该简短
Tiktok在导航栏用简短的文字。
5. 按顺序排列标签
从主页到个人Pinterest习惯于显示主页，因为App的安排，重要的东西都在主屏幕上，搜索标签用于搜索内容，通知标签用于查看更新，其他东西在个人资料。
Spotify、Youtube、Pinterst、TikTok，几乎每一个App都用这种安排。但这并不意味着你也应该照搬他们的做法，应该学习的是按顺序安排。
6. 传达位置
Duolingo把图标变成彩色，来显示目前用户在哪个标签。
Headspace在当前的图标上加一条线，同时把图标变成黑色
和Duolingo和Headspace一样，确保你应该传达用户的确切位置，以方便导航。
结语
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。
公安局备案号：
专属顾问
