如何设计底部导航栏？看看TikTok、Youtube、Pinterest是怎么做的
神译局17小时前
神译局是36氪旗下编译团队，关注科技、商业、职场、生活等领域，重点介绍国外的新技术、新观点、新风向。
编者按：导航栏的存在可以帮助用户快速找到所需页面，提升了产品的易用性，进而优化了用户的产品体验。那么，如何判断你的产品是否需要底部导航栏？如果需要，底部导航栏又应该如何设计？本篇文章里，作者结合几款海外产品，总结了底部导航栏的设计策略，一起来看一下。原文标题Learn to Design “Tab Bar” from TikTok, Youtube, Pinterest, Spotify, Instagram, Slack, Duolingo, etc，作者Jaskaran Singh。
过去几天，我一直在寻找一些值得UI设计师学习的东西......而我发现了Tab Bar（导航栏），这个元素是如此的基本，以至于无论何时何地做一个App，都会有一个导航栏。
我努力寻找了5个没有应用栏的App，这对我来说很酷，因为我找到了要找的东西。我花了几天时间进行研究，几天后我写了这篇很有意思的文章，希望对你学习如何设计一个漂亮的导航栏有帮助。
首先，要弄清基本情况。
问：你的App是否真的需要一个导航栏？
大多数流行的App，如亚马逊、Spotify、YouTube、Pinterest、Twitter、Instagram、Snapchat，都在用导航栏，流行的App都有，但并不意味着你的App也需要，或者你的用户就会喜欢。因为许多App没有导航栏，如计算器、日历、打车应用等。
要知道你是否应该在App中使用Tab Bar，你应该做一些研究，这可能需要一点时间和精力。
Q) 为什么App有导航栏？
第一个问题是，为什么App要有导航栏，答案是 “为了方便使用”，这个简单的东西可以帮助用户更容易地导航到页面，然后选择特定的页面，而不是进入菜单。
Tab Bars又称导航栏，基本上是有多屏的App使用的，而用户必须多次使用的计算器这类App就没必要用导航栏。
问：为什么用导航栏而不是菜单？
一些App使用菜单来列出他们的页面，是的，这样占用的屏幕空间更少（菜单图标），但缺点是，用户可能觉得点击菜单然后再点几次进入特定页面很麻烦。
因此，为了便于使用，设计师们发明了很酷的导航栏，它离你的拇指很近，你就可以很容易地点击，以获得更好的导航和更好的体验，而不需要太多麻烦的操作。
如果你知道自己的基本情况，你应该考虑是否应该使用导航栏，如果确实需要的话，让我们开始学习如何设计导航栏，以下是我的第一个建议。
#1 显示最重要的目的地
导航栏应该只包含最有用的目的地，你不能添加无用的屏幕，让你的导航栏变得混乱。一定要记住添加每个用户在进入你的App时大部分时间会使用的一屏。
许多App在导航栏上添加了一个搜索，因为这有助于更好地浏览内容，你也应该添加一些对你的用户最重要的东西。
Spotify使用了每个音乐播放器App都需要的简单的导航栏，主标签用于播放或探索收听的内容，搜索标签用于搜索新歌曲和播客，音乐库标签用于播放列表中你喜欢的和保存的歌曲，以及会员标签，这对Spotify很有用，因为用户可以轻松地点击标签并立即付款成为会员。
#2 杂乱无章的同类项放在一起
大的App喜欢在导航栏内使用四到五个标签，这使得导航栏很简洁，也有助于用户点击，因为如果有五个以上的图标，用户可能会点错，因为拇指相对比较大。
向Pinterest学习，Pinterest在导航栏上只有四个Tab，这有助于用户轻松地点击，令人敬佩的是，Pinterest也遵循内置的标签系统，这有助于在一个特定的Tab中添加几个Tab，比如在通知标签中添加一个消息标签。
#3 如果需要的话，使用标签（Labels）
任何流行的App都使用标签，因为它们提供了一个清晰的概念，即当用户点击一个特定的标签时会出现什么。但这完全是你的选择，10次中有9次设计师喜欢使用带标签的Tab，但在这10次中，有1次设计师不放标签，因为标签很简单，用户使用的太多，因为适合用户的想法。
Youtube和宜家的App有不同类型的复杂性，宜家的App主要是用于购买家具，没有用文字，用户也能直观的理解，Youtube也有点复杂，因此他们添加了文字标签，如果只放图标可能会看不懂，尤其是对于新用户。
Pinterest在用户使用了一段时间之后，自动隐藏文字。
在设计带有文字的导航栏方面，Pinterest是行家，因为他们在用户长期习惯后会隐藏文字，我个人喜欢这样，因此我也推荐这样做，但这一切都取决于你。
#4 文字应该简短
导航栏内的文字应该短而清晰，你应该注意它必须使用准确的文字，就像你在设计按钮标签时一样。
Tiktok在导航栏用简短的文字。
#5 避免隐藏导航栏
导航栏是一个应该避免隐藏的东西，因为它包括最重要的导航，应该一直向用户展示，几乎每个App都遵循这一规则。
Pinterest在用户滑动图片的时候隐藏导航栏，但这不一定适用于你的App。
Pinterest测试了它的导航栏，他们在用户滑动时候隐藏导航栏，这可能是因为用户不希望看图片的时候还有导航栏，这只是一个猜测。
#6 按顺序排列标签
按顺序排列标签是必要的，每个App都会这样做，以提高清晰度和可用性，用户喜欢看排列好的东西，导航栏也不例外。知名App基本上都遵循类似的规则来设计。
从主页到个人
Pinterest习惯于显示主页，因为App的安排，重要的东西都在主屏幕上，搜索标签用于搜索内容，通知标签用于查看更新，其他东西在个人资料。
Spotify、Youtube、Pinterst、TikTok，几乎每一个App都用这种安排。但这并不意味着你也应该照搬他们的做法，应该学习的是按顺序安排。
#7 传达位置
导航栏（又称导航栏）可以帮助用户轻松导航，但如果用户不知道他们的位置，就无法有效地四处浏览。
Duolingo把图标变成彩色，来显示目前用户在哪个标签。
Headspace在当前的图标上加一条线，同时把图标变成黑色
和Duolingo和Headspace一样，确保你应该传达用户的确切位置，以方便导航。
#8 从数据中学习并不断改进
如果你想改进导航栏设计，数据是关键点，因为如果你有活跃的用户群，你可以测试用户最喜欢哪个标签，用户不使用哪个标签，用户是否需要四个标签或五个标签等等。
Pinterest根据用户的反馈，在滚动图片时自动隐藏导航栏。
打造一个成功的App时，根据反馈改进和改善是你成功的关键。正如我们上面所讨论的，Pinterest是最有趣的公司，它不急于测试新的东西，重要的是用户，这有助于让用户参与其中。
在导航栏内显示标记
你看到了文章最后，我多讲一条，就是在你的App导航栏内使用通知标记（小点），Twitter用了，youtube用了，Pinterest用了，几乎所有的App都使用了它，能帮助获得更好的用户参与度。
Twitter用通知标记告诉用户有新推文。
设计导航栏可能很棘手，但一旦你的基本思路清晰了，就能找到解决大问题的方法，也可能从中找到创造性的想法。
译者：蒂克伟
本文来自翻译, 如若转载请注明出处。