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

2021-08-06 11:15:00 浏览数 (2)

静电说:菜单栏,也就是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

翻译:静电

0 人点赞