前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >没那么简单?史上最强APP菜单栏设计解析!

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

作者头像
用户5009027
发布2021-08-06 11:15:00
2K0
发布2021-08-06 11:15:00
举报
文章被收录于专栏:静Design

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

翻译:静电

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-08-04,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 静Design 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档