编辑导语:导航栏的存在可以帮助用户快速找到所需页面，提高产品的可用性，进而优化用户的产品体验。那么，如何判断你的产品是否需要底部导航栏呢？如果有，底部导航栏应该怎么设计？在这篇文章中，作者总结了基于国外几款产品的底部导航栏的设计策略。让我们一起来看看吧。

大家好，我是Clippp。今天的文章是“底部导航栏”设计。很多热门产品都有我们可以借鉴和学习的设计考虑。通过分析海外主流产品，帮助你掌握底部导航标签栏的基础知识，找到解决问题的方法，开发创造性思维。

在开始之前，请思考以下两个问题~

问题1:你的产品真的需要Tab Bar吗？

我不这么认为。虽然淘宝、微信、微博、美团等大部分主流产品都在使用Tab Bar，但并不代表所有产品都需要。

很多app没有标签栏，比如日历、计算器、滴滴、优步等APP中是否使用标签栏，要根据不同情况灵活考虑。

问题二:产品为什么要有标签栏？

答案是为了易用，这意味着像标签栏这样的简单设计可以很容易地帮助用户导航到页面。

了解以上问题后，接下来就要考虑如何设计标签栏，才能更好的满足用户的需求和体验。

导航条应该只包含最有用的信息，不能因为添加太多无用的标签而混淆。许多应用程序在导航栏中添加了搜索功能，因为它可以帮助用户更快地导航和检索内容。

在Spotify底部导航中，主页选项用于播放或收听所有内容，搜索选项用于搜索下一首歌曲和播客，音乐库选项用于播放列表中喜欢和保存的歌曲，个人会员选项方便用户轻松点击并快速完成购买操作。

主流app更喜欢在底部导航栏使用4-5个标签，这样可以保持导航栏的干净整洁，避免因为标签太多导致用户无法准确点击选项的情况。

Pinterest的导航栏只有四个选项，方便用户点击。消息选项会实时更新消息数量，对用户来说很直观。此外，导航栏中还包含搜索功能，可以方便地在主页和搜索结果之间来回切换。

APP底部的导航栏大多会采用“图标+文字”的标签形式，点击标签后可以清晰的告知用户结果。

有时候，我们会看到有些产品的导航栏只有图标没有文字，但这种形式并不会影响我们的操作，因为当导航栏的标签使用了用户特别熟悉的形状和内涵时，文字完全可以省略。

宜家APP的导航栏使用了大众熟悉的图标，所以即使没有文字，我们也能清楚地知道这三个图标分别代表了首页、品类和我的。

相比宜家，Youtube的导航栏有点复杂，因为用户可能不熟悉Youtube图标的含义，需要添加文字描述。

文字标签要简短清晰，准确的文字描述对用户使用正确的导航能起到关键作用。

抖音导航所有的文字标签都很短，中间增加的图标隐藏了文字以吸引用户的注意。

选项卡栏通常包含最重要的导航信息，这些信息应该总是显示给用户，以避免在用户滚动页面时被隐藏。

Pinterest导航栏的设计就是一个例子。当页面滚动时，底部的导航栏将被隐藏。这样设计的原因可能是为了防止导航条遮挡图像，保证用户可以看到更多的图像内容。

标签栏帮助用户轻松导航，但如果用户不知道自己的位置，就会影响用户浏览和使用产品的体验。

多邻居应用程序通过改变导航图标的风格让用户清楚地知道他们所有的部分。

Headspace为底部导航栏添加线条装饰。每次切换选项时，线条都会随之切换，确保用户知道准确的位置。

反馈是关键。如果要改进产品的导航栏设计，就要考虑和测试用户最喜欢哪个导航选项，不使用哪个导航选项，需要四个还是五个选项等等。

Pinterest通过收集用户的反馈不断改进导航栏的设计，帮助用户更方便地使用产品。这些持续的打磨改进真的是产品成功的关键。

标签栏只起到导航的作用，还经常通过状态变化告诉用户更多的信息。

在Twitter主页导航中，当推送新内容时，主页会更新，提示用户查看新内容。这种设计在Youtube、Pinterest等很多主流产品中都有使用。

参考:uxlanet . org/learn-to-design-tab-bar-from-tiktok-YouTube-Pinterest-Spotify-insta gram-slack-duo lingo-etc-ee 571 c 5943 a

#专栏作家#

作者:clipp，微信微信官方账号:Clip Design Clip。每周精选设计文章，重点分享关于产品、交互、UI视觉的设计思考。

本文由人人作为产品经理原创发布，未经作者允许，禁止转载。

图片来自Unsplash，基于CC0协议。