t从TikTok、Youtube、Pinterest等主流海外产品中,学习如何设计底部导航栏( 二 )


五、避免隐藏导航栏Tab Bar通常包含了最重要的导航信息,应该始终向用户展示,避免在用户滚动页面的情况下被隐藏掉。
t从TikTok、Youtube、Pinterest等主流海外产品中,学习如何设计底部导航栏
文章插图
Pinterest导航栏的设计是个例。当滚动页面时,底部的导航栏会隐藏,这么设计的原因可能是为了防止导航栏遮挡图像,保证用户看到更多的图像内容。
六、传达位置Tab Bar帮助用户轻松导航,但如果用户不知道自己的位置,将会影响他们浏览和使用产品的体验。
t从TikTok、Youtube、Pinterest等主流海外产品中,学习如何设计底部导航栏
文章插图
多邻国APP通过改变导航图标的样式来让用户清晰地知道自己所有的板块。
t从TikTok、Youtube、Pinterest等主流海外产品中,学习如何设计底部导航栏
文章插图
Headspace在底部导航栏加上了线条装饰,每次切换选项,线条都会跟着一起切换,确保告知用户确切的位置。
七、从反馈中学习并不断改进反馈是关键,如果想改善产品的导航栏设计,就要考虑并测试用户最喜欢哪个导航选项,不使用哪个导航,需要四个还是五个选项等等。
t从TikTok、Youtube、Pinterest等主流海外产品中,学习如何设计底部导航栏
文章插图
Pinterest通过收集用户的使用反馈情况来不断改进导航栏的设计,帮助用户更方便地使用产品,这些不断打磨的改进真是产品成功的关键。
八、在导航栏中显示更新Tab Bar不仅仅起到导航的作用,很多时候还能通过状态变化告知用户更多的信息。
t从TikTok、Youtube、Pinterest等主流海外产品中,学习如何设计底部导航栏
文章插图
在Twitter主页导航中,当有新内容推送时,主页就会出现更新的状态,提示用户查看新内容。这样的设计在Youtube、Pinterest等很多主流产品中都有使用。
参考:uxplanet.org/learn-to-design-tab-bar-from-tiktok-youtube-pinterest-spotify-instagram-slack-duolingo-etc-ee571c5943a
#专栏作家#作者:Clippp,微信公众号:Clip设计夹。每周精选设计文章,专注分享关于产品、交互、UI视觉上的设计思考。
本文原创发布于人人都是产品经理,未经作者许可,禁止转载。
题图来自Unsplash,基于CC0协议。

推荐阅读