从主流海外产品中，提炼了 8 个底部导航栏设计技巧

咱们好，我是 Clippp。今日为咱们带来的文章是「底部导航栏」规划。许多受欢迎的产品中都有咱们值得学习和借鉴的规划考虑点，经过分析海外干流产品，带咱们掌握底部导航栏（Tab Bar）的基本知识，找到解决问题的办法并开辟构思思想。

在开端之前，请咱们先考虑下面两个问题～

问题 1：你的产品真的需求 Tab Bar 吗？

如同并不是。虽然淘宝、微信、微博、美团等大大都干流的产品都在运用 Tab Bar，但这并不意味着所有产品都需求它。

许多APP没有Tab Bar，比如日历、计算器、滴滴、Uber等。对于是否要在APP中运用Tab Bar，应该分不同的情况灵敏考虑。

问题 2：为什么产品要有 Tab Bar？

答案是为了易于运用，意味着经过 Tab Bar 这种简单的规划可以轻松协助用户导航到页面。

理解了上面的问题后，接下来就要考虑如何来规划 Tab Bar，能更好的满足用户的需求和体会。

1. 显现最重要的信息

导航栏应该只包括最有用的信息，不能增加过多无用的标签使导航栏紊乱。许多 App 在导航栏上增加查找功用，由于这有助于用户更快地导航和检索内容。

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

2. 扩展导航的功用

干流 App 更喜欢在底部导航栏中运用 4-5 个标签，这样能保持导航栏的整洁，还防止了标签过多导致用户难以准确点击选项的情况。

Pinterest的导航栏上只要四个选项，这有助于用户轻松点击。音讯选项会实时更新音讯数量，对用户来说这样的提示很直观。另外查找功用包括在导航栏中，便利轻松地在主页和查找成果之间来回切换。

3. 容纳多种标签方法

大都 App 底部导航栏会运用「图标+文字」的标签方法，这样能清楚地告知用户点击标签之后的成果。

有时分咱们也会看到有些产品的导航栏只要图标没有文字，但这种方法并不会影响咱们的操作，由于当导航栏的标签运用了用户特别了解的形状和内在，完全可以省略文字。

宜家App的导航栏运用了群众都很了解的图标，所以即使不加文字，咱们也能清楚地知道这3个图标别离代表了主页、分类、我的。

相对于宜家，Youtube的导航栏就显得有点杂乱，由于Youtube的图标意义用户或许并不是很了解，加上文字说明很有必要。

4. 文字标签应该简略

文字标签应该简略而清晰，准确的文字说明能对用户运用正确导航起到关键效果。

TikTok导航所有的文字标签都简略，并且中间的增加图标还躲藏掉了文字，以此来引吸引用户的注意力。

5. 防止躲藏导航栏

Tab Bar 通常包括了最重要的导航信息，应该一直向用户展现，防止在用户滚动页面的情况下被躲藏掉。

Pinterest导航栏的规划是个例。当滚动页面时，底部的导航栏会躲藏，这么规划的原因或许是为了防止导航栏遮挡图画，保证用户看到更多的图画内容。

6. 传达方位

Tab Bar 协助用户轻松导航，但假如用户不知道自己的方位，将会影响他们浏览和运用产品的体会。

多邦邻App经过改动导航图标的样式来让用户清晰的知道自己所有的板块。

Headspace在底部导航栏加上了线条装修，每次切换选项，线条都会跟着一起切换，保证告知用户切当的方位。

7. 从反应中学习并不断改进

反应是关键，假如想改善产品的导航栏规划，就要考虑并测验用户最喜欢哪个导航选项，不运用哪个导航，需求四个仍是五个选项等等。

Pinterest经过收集用户的运用反应情况来不断改进导航栏的规划，协助用户更便利地运用产品，这些不断打磨的改进真是产品成功的关键。

8. 在导航栏中显现更新

Tab Bar 不仅仅起到导航的效果，许多时分还能经过状况改变告知用户更多的信息。

在Twitter主页导航中，当有新内容推送时，主页就会呈现更新的状况，提示用户查看新内容。这样的规划在Youtube、Pinterest等许多干流产品中都有运用。

更多底部导航栏的规划技巧：

欢迎关注作者微信大众号：「Clip规划夹」