没那么简单？史上最强APP菜单栏设计解析！

静电说：菜单栏，也就是Tab Bar是UI设计中最基础的部分，99%的应用中，你都会找到菜单栏。但是，菜单栏设计有那么简单吗？作者Jaskaran Singh花了很久时间，研究了一些应用的菜单栏设计，这篇文章会告诉你，如何做能设计出更好的菜单栏。首先，我们必须来探讨一些问题。

你的应用真的需要菜单栏吗？

大多数流行的应用程序，如 Amazon、Spotify、YouTube、Pinterest、Twitter、Instagram、Snapchat，都在使用 Tab Bar，但这并不意味着您的应用程序确实需要它，或者您的受众会喜欢它。许多应用程序没有标签栏，如计算器应用程序、日历应用程序、Uber优步等。要知道是否应该在应用程序中使用 Tab Bar，我们需要进行一些研究和思考。

为何应用有菜单栏？

为什么大多数应用要使用Tab Bar呢？对此的答案是“方便用户使用”，这意味着通过Tab Bar，可以帮助用户更轻松地导航到不同的页面，而不是转到菜单和然后选择特定页面。

为什么要用菜单栏而不是菜单列表？

一些应用程序使用菜单列表的方式来呈现页面，这样占用屏幕空间更小，但是缺点是用户可能在点击菜单跳转到其它页面后就迷失了，这非常令人沮丧。

因此，为了易于使用，设计师发明了靠近拇指的酷炫小标签栏， 以便用户轻松点击它以获得更好的，更轻松的体验。

01显示最重要的栏目

Tab bar应该只包含最有用的目标页面入口，添加无用的入口会让Tab bar变得混乱。要记住，Tab bar的入口一定是用户使用的最高频的。

许多应用程序在其Tab bar上添加了搜索icon，因为这有助于用户更好的引导用户进入某个栏目。

Spotify的菜单栏，Home 页面用于播放或可能收听的所有内容，Search菜单用于搜索下一首歌曲和播客，Library 菜单用于播放列表中所有您喜欢和保存的歌曲，以及 Premium 菜单，这对公司盈利非常有用，因为用户可以轻松点击选项卡并立即付款，无需另外费心查找。

02 把相似的内容放在一起

大型应用程序更喜欢在标签栏内使用四到五个标签，这使得标签栏整洁。更易于用户点击。

在Pinterest菜单中，我们可以学到一点，因为 Pinterest 的标签栏上只有四个标签，可以帮助用户轻松点击它们，当然，Pinterest 还内置的标签系统，这有助于在特定标签中添加多个标签，如“通知”菜单中的消息选项卡。

03 在菜单中使用文字？看情况！

大多数市面上常见的应用都使用了文本+图标的形式，因为这种方式更加直观。但是，不一定所有的应用都需要这么做，你也可以使用没有文字的标签方式。但是前提是，这些标签一定要足够清晰的表明功能。

特别做法：Pinterest隐藏文字

Pinterest的做法非常特别，在用户刚开始使用应用的时候，会显示文本+icon的方式，随着时间的推移用户习惯了之后，Pinterest会隐藏标签。这种做法也是种很独特的方式，各位设计师可以参考使用。

04更简短的菜单文字

菜单栏内的标签应该简短而清晰，不要放过长的文本字段，否则会让整个菜单栏的视觉上不够平衡，且增加用户的辨识难度。

TikTok 的所有菜单栏目都使用短文本，并且还隐藏了创建按钮的文字，因为很多人会理解这是创建按钮，如果你想吸引用户的注意力，尝试下这么做吧！

05 避免隐藏菜单栏

避免自动隐藏菜单栏，因为它包含了最重要的内容，如果隐藏后会增加用户使用的难度。所以，确保始终显示你的菜单栏，几乎所有的应用都应该遵循这一准则。当然，也有一些特别的应用例外。

06 按约定顺序排列菜单

按顺序排列菜单内容是必要的，因为每个应用程序都是为了更好的清晰度和可用性而这样做的，用户喜欢看到排列好的东西，菜单栏就是其中之一。大型应用程序基本上遵循类似的设计规则。

Pinterest 过去常常首先显示主屏幕，搜索标签用于搜索内容，通知标签用于更新和配置文件用于其他东西。Spotify、Youtube、Pinterst、TikTok，几乎每个应用程序都使用这种安排。

07.标明当前页面位置

菜单栏必须标示出用户当前所在的页面。

08 通过监测数据来改进菜单设计

如果你想改进你的标签栏设计，数据是关键点，你可以测试我们的用户最喜欢哪个标签，不常使用哪个标签，我们的用户需要四个标签还是五个标签，等等。

要设计成功的应用，通过数据来改进设计是关键。正如我们上面所讨论的，Pinterest 是个有趣的公司，它不急于直接推出新事物，而是通过用户的反馈帮助他们完成测试，进而推出更成功的设计方式。

09 在菜单图标上使用提示标示

在菜单上使用圆点等角标可以让你的用户最快得到通知，并与内容进行互动。尝试在需要的地方加上提示角标吧！

设计菜单栏并不是看起来那么简单的事情。但是一旦你有了上面的这些基本的认识，你就会找到解决问题的方法，并设计出独特的具有创意的菜单。

原文：https://uxplanet.org/learn-to-design-tab-bar-from-tiktok-youtube-pinterest-spotify-instagram-slack-duolingo-etc-ee571c5943a5

翻译：静电