从TikTok、Youtube、Pinterest在主流海外产品中，学习如何设计底部导航栏

导航栏的存在可以帮助用户快速找到所需的页面，提高产品的易用性，进而优化用户的产品体验。那么，如何判断您的产品是否需要底部导航栏呢？如有必要，底部导航栏应如何设计？在本文中，作者结合了几种海外产品，总结了底部导航栏的设计策略。大家好，我是Clippp。今天给大家带来的文章是「底部导航栏」设计。许多受欢迎的产品都有我们值得学习和的设计思路。通过对海外主流产品的分析，我们将带您掌握底部导航栏（Tab Bar）找到解决问题的方法，开拓创造性思维。在开始之前，请虑以下两个问题~问题1:您的产品真的需要Tab Bar吗？好像不是。虽然淘宝、微信、微博、美团等主流产品都在使用Tab Bar，但这并不意味着所有的产品都需要它。 很多APP没有Tab Bar，如日历、计算器、滴滴、Uber等。是否要在APP中使用Tab Bar，应灵活考虑不同的情况。问题2:为什么要有产品Tab Bar？答案是为了方便使用，这意味着通过使用，Tab Bar这种简单的设计可以帮助用户轻松导航到页面。了解以上问题后，接下来要考虑如何设计Tab Bar，能更好地满足用户的需求和体验。首先，显示最重要的信息导航栏应该只包含最有用的信息，不要添加太多无用的标签来混淆导航栏。许多APP在导航栏上添加搜索功能，帮助用户更快地导航和检索内容。 在Spotify在底部导航中，主页选项用于播放或收听所有内容，搜索选项用于搜索下一首歌曲和播客，音乐库选项用于播放列表中喜欢和保存的歌曲，单独的会员选项方便用户轻松点击并快速完成购买操作。二、扩展导航功能主流APP更喜欢在底部导航栏中使用4-5个标签，以保持导航栏的清洁，并避免过多的标签使用户难以准确地点击选项。 Pinterest导航栏上只有四个选项，帮助用户轻松点击。消息选项将实时更新消息数量，这对用户来说非常直观。此外，搜索功能还包含在导航栏中，便于在主页和搜索结果之间来回切换。三、容纳多种标签形式APP将使用底部导航栏「图标 文字」标签形式，可以清楚地告知用户点击标签后的结果。有时我们会看到一些产品的导航栏只有图标没有文本，但这种形式不会影响我们的操作，因为当导航栏的标签使用用户特别熟悉的形状和内涵时，文本可以完全省略。 宜家APP导航栏使用了大众熟悉的图标，所以即使没有文字，我们也可以清楚地知道这三个图标代表主页、分类和我的。 与宜家相比，Youtube导航栏有点复杂，因为Youtube用户可能不太熟悉图标的含义，加上文字说明是必要的。四、文字标签要简短，文字标签要简短清晰，准确的文字说明对用户使用正确的导航起着关键作用。 TikTok导航中的所有文本标签都很短，中间的添加图标也隐藏本，以吸引用户的注意。5、避免隐藏导航栏Tab Bar通常包含最重要的导航信息，应始终向用户显示，避免在用户滚动页面时隐藏。 Pinterest导航栏的设计是个案。当滚动页面时，底部的导航栏会隐藏起来，这可能是为了防止导航栏阻挡图像，并确保用户看到更多的图像内容。六、传达位置Tab Bar帮助用户轻松导航，但如果用户不知道自己的位置，就会影响他们浏览和使用产品的体验。 多邻国APP通过改变导航图标的样式，用户可以清楚地知道自己所有的板块。 Headspace底部导航栏增加了线条装饰，每次切换选项，线条都会一起切换，以确保告知用户确切的位置。7、从反馈中学习并不断改进反馈是关键。如果你想改进产品的导航栏设计，你需要考虑和测试用户最喜欢哪个导航选项，不使用哪个导航，需要四五个选项等等。 Pinterest通过收集用户的反馈，不断改进导航栏的设计，帮助用户更方便地使用产品。这些不断的抛光改进确实是产品成功的关键。8.在导航栏中显示更新Tab Bar它不仅起到导航的作用，还通过状态变化告知用户更多的信息。 在Twitter在主页导航中，当有新内容推送时，主页会出现更新状态，提示用户查看新内容。这种设计在Youtube、Pinterest许多主流产品都有使用。参考：uxplanet.org/learn-to-design-tab-bar-from-tiktok-youtube-pinterest-spotify-instagram-slack-duolingo-etc-ee571c5943a#专栏作家#作者：Clippp，微信微信官方账号：Clip设计夹。每周选择设计文章，重点分享产品、互动、UI视觉设计思维。本文最初发表于每个人都是产品经理，未经作者许可，禁止转载。题图来自Unsplash，基于CC0协议。