当前位置: 首页 > 科技观察

从海外主流产品中,我们提炼出8个底部导航栏设计技巧

时间:2023-03-14 00:47:55 科技观察

大家好,我是Clippp。今天给大家带来的文章是“底部导航栏”的设计。很多热门产品都有值得学习和借鉴的设计思维点。通过分析海外主流产品,引导您掌握底部导航栏(TabBar)的基础知识,找到解决问题的方法,培养创造性思维。在开始之前,请思考以下两个问题~问题一:你的产品真的需要TabBar吗?好像没有。虽然淘宝、微信、微博、美团等大部分主流产品都在使用TabBar,但这并不意味着所有产品都需要它。很多APP是没有TabBar的,比如日历、计算器、滴滴、Uber等,关于APP中是否使用TabBar,要根据不同的情况灵活考虑。问题二:为什么产品会有TabBar?答案是为了易于使用,这意味着像TabBar这样的简单设计可以轻松帮助用户导航到页面。了解了以上问题之后,接下来就是要考虑如何设计TabBar才能更好的满足用户的需求和体验。1.显示最重要的信息导航栏应该只包含最有用的信息,不能添加太多无用的标签使导航栏混乱。许多应用程序将搜索功能添加到导航栏,因为它可以帮助用户更快地导航和检索内容。在spotify的底部导航中,主页选项用于播放或收听所有内容,搜索选项用于搜索下一首歌曲和播客,音乐库选项用于喜欢和保存播放列表中的歌曲,以及单独的会员选项方便用户轻松点击并快速完成购买操作。2.扩展导航功能。主流应用更喜欢在底部导航栏中使用4-5个标签,这样可以保持导航栏的整洁,避免标签过多导致用户难以准确点击选项的情况。Pinterest的导航栏只有四个选项,方便用户点击。消息选项会实时更新消息数量,对用户来说非常直观。此外,导航栏中包含了搜索功能,方便快捷地在首页和搜索结果之间来回切换。3.容纳多种标签形式大多数APP的底部导航栏都会采用“图标+文字”的标签形式,可以清晰的告知用户点击标签后的结果。有时候我们也会看到一些产品的导航栏只有图标,没有文字,但是这种形式不会影响我们的操作,因为当导航栏的标签使用了用户特别熟悉的形状和内涵时,文字可以被省略。IKEAApp的导航栏使用了大家耳熟能详的图标,所以即使不加文字,我们也能清楚地知道这3个图标分别代表首页、分类和我的。与宜家相比,Youtube的导航栏有点复杂,因为用户可能不太熟悉Youtube的图标的含义,需要加上文字说明。4.文字标签要简短文字标签要简短明了。准确的文本描述可以在使用户正确导航方面发挥关键作用。TikTok导航中的所有文字标签都很短,中间的添加图标也隐藏了文字以吸引用户的注意力。5.避免隐藏导航栏TabBar通常包含最重要的导航信息,应该始终向用户显示以避免在用户滚动页面时被隐藏。Pinterest导航栏的设计就是一个例子。滚动页面时,底部的导航栏会被隐藏。这样设计的原因可能是为了避免导航栏遮挡图片,保证用户看到更多的图片内容。6.传达位置TabBar帮助用户轻松导航,但如果用户不知道自己的位置,会影响他们浏览和使用产品的体验。Duolingo应用程序通过更改导航图标的样式让用户清楚地了解他们的所有部分。Headspace为底部导航栏添加线条装饰。每次切换选项时,线路都会随之切换,以确保通知用户确切位置。7.从反馈中学习并不断改进。反馈是关键。如果您想改进产品的导航栏设计,请考虑并测试用户最喜欢哪些导航选项,他们不使用哪些导航,是否需要四个或五个选项等。Pinterest通过收集不断改进导航栏的设计用户反馈,帮助用户更方便地使用产品。这些持续改进确实是产品成功的关键。8、导航栏中的显示和更新TabBar不仅起到了导航的作用,很多时候还可以通过状态的变化来告知用户更多的信息。在推特主页导航中,当有新内容推送时,主页会出现更新状态,提示用户查看新内容。Youtube和Pinterest等许多主流产品都采用了这种设计。