在导航栏的设置能够有效地引导用户迅速访问目标页面，从而提升产品的可用性，并改善整体用户体验。那么，如何判断你的产品是否适合配置底部导航栏？如果答案是需要，那么底部导航栏应该如何进行设计呢？在本文中，小栈将结合几款国外产品，分享底部导航栏设计的策略与要点，总结了底部导航栏的设计策略，一起来看一下。
完整代码
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一样，确保你应该传达用户的确切位置，以方便导航。
结语
優(yōu)網(wǎng)科技秉承"專(zhuān)業(yè)團(tuán)隊(duì)、品質(zhì)服務(wù)" 的經(jīng)營(yíng)理念，誠(chéng)信務(wù)實(shí)的服務(wù)了近萬(wàn)家客戶(hù)，成為眾多世界500強(qiáng)、集團(tuán)和上市公司的長(zhǎng)期合作伙伴！
優(yōu)網(wǎng)科技成立于2001年，擅長(zhǎng)網(wǎng)站建設(shè)、網(wǎng)站與各類(lèi)業(yè)務(wù)系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)（品牌展示型、官方門(mén)戶(hù)型、營(yíng)銷(xiāo)商務(wù)型、電子商務(wù)型、信息門(mén)戶(hù)型、微信小程序定制開(kāi)發(fā)、移動(dòng)端應(yīng)用（手機(jī)站、APP開(kāi)發(fā)）、微信定制開(kāi)發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。
公安局備案號(hào)：
專(zhuān)屬顧問(wèn)
