如何设计底部导航栏?看看TikTok、Youtube、Pinterest是怎么做的

宠物经济静悄悄起风

养宠人群扩大催生宠物经济的崛起。

神译局是36氪旗下编译团队,关注科技、商业、职场、生活等领域,重点介绍国外的新技术、新观点、新风向。

编者按:导航栏的存在可以帮助用户快速找到所需页面,提升了产品的易用性,进而优化了用户的产品体验。那么,如何判断你的产品是否需要底部导航栏?如果需要,底部导航栏又应该如何设计?本篇文章里,作者结合几款海外产品,总结了底部导航栏的设计策略,一起来看一下。原文标题Learn to Design “Tab Bar” from TikTok, Youtube, Pinterest, Spotify, Instagram, Slack, Duolingo, etc,作者Jaskaran Singh。

如何设计底部导航栏?看看TikTok、Youtube、Pinterest是怎么做的

过去几天,我一直在寻找一些值得UI设计师学习的东西……而我发现了Tab Bar(导航栏),这个元素是如此的基本,以至于无论何时何地做一个App,都会有一个导航栏。

我努力寻找了5个没有应用栏的App,这对我来说很酷,因为我找到了要找的东西。我花了几天时间进行研究,几天后我写了这篇很有意思的文章,希望对你学习如何设计一个漂亮的导航栏有帮助。

首先,要弄清基本情况。

问:你的App是否真的需要一个导航栏?

如何设计底部导航栏?看看TikTok、Youtube、Pinterest是怎么做的

大多数流行的App,如亚马逊、Spotify、YouTube、Pinterest、Twitter、Instagram、Snapchat,都在用导航栏,流行的App都有,但并不意味着你的App也需要,或者你的用户就会喜欢。因为许多App没有导航栏,如计算器、日历、打车应用等。

要知道你是否应该在App中使用Tab Bar,你应该做一些研究,这可能需要一点时间和精力。

Q) 为什么App有导航栏?

第一个问题是,为什么App要有导航栏,答案是 “为了方便使用”,这个简单的东西可以帮助用户更容易地导航到页面,然后选择特定的页面,而不是进入菜单。

Tab Bars又称导航栏,基本上是有多屏的App使用的,而用户必须多次使用的计算器这类App就没必要用导航栏。

问:为什么用导航栏而不是菜单?

一些App使用菜单来列出他们的页面,是的,这样占用的屏幕空间更少(菜单图标),但缺点是,用户可能觉得点击菜单然后再点几次进入特定页面很麻烦。

因此,为了便于使用,设计师们发明了很酷的导航栏,它离你的拇指很近,你就可以很容易地点击,以获得更好的导航和更好的体验,而不需要太多麻烦的操作。

如果你知道自己的基本情况,你应该考虑是否应该使用导航栏,如果确实需要的话,让我们开始学习如何设计导航栏,以下是我的第一个建议。

#1 显示最重要的目的地

导航栏应该只包含最有用的目的地,你不能添加无用的屏幕,让你的导航栏变得混乱。一定要记住添加每个用户在进入你的App时大部分时间会使用的一屏。

许多App在导航栏上添加了一个搜索,因为这有助于更好地浏览内容,你也应该添加一些对你的用户最重要的东西。

如何设计底部导航栏?看看TikTok、Youtube、Pinterest是怎么做的

Spotify使用了每个音乐播放器App都需要的简单的导航栏,主标签用于播放或探索收听的内容,搜索标签用于搜索新歌曲和播客,音乐库标签用于播放列表中你喜欢的和保存的歌曲,以及会员标签,这对Spotify很有用,因为用户可以轻松地点击标签并立即付款成为会员。

#2 杂乱无章的同类项放在一起

大的App喜欢在导航栏内使用四到五个标签,这使得导航栏很简洁,也有助于用户点击,因为如果有五个以上的图标,用户可能会点错,因为拇指相对比较大。

如何设计底部导航栏?看看TikTok、Youtube、Pinterest是怎么做的

向Pinterest学习,Pinterest在导航栏上只有四个Tab,这有助于用户轻松地点击,令人敬佩的是,Pinterest也遵循内置的标签系统,这有助于在一个特定的Tab中添加几个Tab,比如在通知标签中添加一个消息标签。

#3 如果需要的话,使用标签(Labels)

任何流行的App都使用标签,因为它们提供了一个清晰的概念,即当用户点击一个特定的标签时会出现什么。但这完全是你的选择,10次中有9次设计师喜欢使用带标签的Tab,但在这10次中,有1次设计师不放标签,因为标签很简单,用户使用的太多,因为适合用户的想法。

如何设计底部导航栏?看看TikTok、Youtube、Pinterest是怎么做的

如何设计底部导航栏?看看TikTok、Youtube、Pinterest是怎么做的

Youtube和宜家的App有不同类型的复杂性,宜家的App主要是用于购买家具,没有用文字,用户也能直观的理解,Youtube也有点复杂,因此他们添加了文字标签,如果只放图标可能会看不懂,尤其是对于新用户。

Pinterest在用户使用了一段时间之后,自动隐藏文字。

如何设计底部导航栏?看看TikTok、Youtube、Pinterest是怎么做的

前微软副总裁姚麒回归小冰,任首席技术官

带领技术团队推动小冰框架发展

在设计带有文字的导航栏方面,Pinterest是行家,因为他们在用户长期习惯后会隐藏文字,我个人喜欢这样,因此我也推荐这样做,但这一切都取决于你。

#4 文字应该简短

导航栏内的文字应该短而清晰,你应该注意它必须使用准确的文字,就像你在设计按钮标签时一样。

如何设计底部导航栏?看看TikTok、Youtube、Pinterest是怎么做的

Tiktok在导航栏用简短的文字。

#5 避免隐藏导航栏

导航栏是一个应该避免隐藏的东西,因为它包括最重要的导航,应该一直向用户展示,几乎每个App都遵循这一规则。

如何设计底部导航栏?看看TikTok、Youtube、Pinterest是怎么做的

Pinterest在用户滑动图片的时候隐藏导航栏,但这不一定适用于你的App。

如何设计底部导航栏?看看TikTok、Youtube、Pinterest是怎么做的

Pinterest测试了它的导航栏,他们在用户滑动时候隐藏导航栏,这可能是因为用户不希望看图片的时候还有导航栏,这只是一个猜测。

#6 按顺序排列标签

按顺序排列标签是必要的,每个App都会这样做,以提高清晰度和可用性,用户喜欢看排列好的东西,导航栏也不例外。知名App基本上都遵循类似的规则来设计

 

如何设计底部导航栏?看看TikTok、Youtube、Pinterest是怎么做的

从主页到个人

Pinterest习惯于显示主页,因为App的安排,重要的东西都在主屏幕上,搜索标签用于搜索内容,通知标签用于查看更新,其他东西在个人资料。

Spotify、Youtube、Pinterst、TikTok,几乎每一个App都用这种安排。但这并不意味着你也应该照搬他们的做法,应该学习的是按顺序安排。

#7 传达位置

导航栏(又称导航栏)可以帮助用户轻松导航,但如果用户不知道他们的位置,就无法有效地四处浏览。

如何设计底部导航栏?看看TikTok、Youtube、Pinterest是怎么做的

Duolingo把图标变成彩色,来显示目前用户在哪个标签。

如何设计底部导航栏?看看TikTok、Youtube、Pinterest是怎么做的

Headspace在当前的图标上加一条线,同时把图标变成黑色

和Duolingo和Headspace一样,确保你应该传达用户的确切位置,以方便导航。

#8 从数据中学习并不断改进

如果你想改进导航栏设计,数据是关键点,因为如果你有活跃的用户群,你可以测试用户最喜欢哪个标签,用户不使用哪个标签,用户是否需要四个标签或五个标签等等。

如何设计底部导航栏?看看TikTok、Youtube、Pinterest是怎么做的

Pinterest根据用户的反馈,在滚动图片时自动隐藏导航栏。

打造一个成功的App时,根据反馈改进和改善是你成功的关键。正如我们上面所讨论的,Pinterest是最有趣的公司,它不急于测试新的东西,重要的是用户,这有助于让用户参与其中。

在导航栏内显示标记

你看到了文章最后,我多讲一条,就是在你的App导航栏内使用通知标记(小点),Twitter用了,youtube用了,Pinterest用了,几乎所有的App都使用了它,能帮助获得更好的用户参与度。

如何设计底部导航栏?看看TikTok、Youtube、Pinterest是怎么做的

Twitter用通知标记告诉用户有新推文。

设计导航栏可能很棘手,但一旦你的基本思路清晰了,就能找到解决大问题的方法,也可能从中找到创造性的想法。

译者:蒂克伟

表情包只会收不会做?这 9 款超好用的 App,让你轻松自制 GIF 动图

iOS、Android、macOS、Windows 都有!看这一篇就够了

原创文章,作者:admin,如若转载,请注明出处:https://www.870t.com/archives/2099.html

联系我们

400-800-8888

在线咨询:点击这里给我发消息

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息