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

释放双眼,带上耳机,听听看~!
本文经过剖析海外多款主流产品,带我们把握底部导航栏(Tab Bar)的基本知识。

咱们好,我是 Clippp。今日为咱们带来的文章是「底部导航栏」规划。许多受欢迎的产品中都有咱们值得学习和借鉴的规划考虑点,经过分析海外干流产品,带咱们掌握底部导航栏(Tab Bar)的基本知识,找到解决问题的办法并开辟构思思想。

在开端之前,请咱们先考虑下面两个问题~

问题 1:你的产品真的需求 Tab Bar 吗?

如同并不是。虽然淘宝、微信、微博、美团等大大都干流的产品都在运用 Tab Bar,但这并不意味着所有产品都需求它。

从干流海外产品中,提炼了 8 个底部导航栏规划技巧

从干流海外产品中,提炼了 8 个底部导航栏规划技巧

许多APP没有Tab Bar,比如日历、计算器、滴滴、Uber等。对于是否要在APP中运用Tab Bar,应该分不同的情况灵敏考虑。

问题 2:为什么产品要有 Tab Bar?

答案是为了易于运用,意味着经过 Tab Bar 这种简单的规划可以轻松协助用户导航到页面。

理解了上面的问题后,接下来就要考虑如何来规划 Tab Bar,能更好的满足用户的需求和体会。

1. 显现最重要的信息

导航栏应该只包括最有用的信息,不能增加过多无用的标签使导航栏紊乱。许多 App 在导航栏上增加查找功用,由于这有助于用户更快地导航和检索内容。

从干流海外产品中,提炼了 8 个底部导航栏规划技巧

从干流海外产品中,提炼了 8 个底部导航栏规划技巧

Spotify底部导航中,主页选项用于播映或收听所有内容,查找选项用于查找下一首歌曲和播客,音乐库选项用于播映列表中喜欢和保存的歌曲,单独的会员选项便利用户轻松点击并快速完结购买操作。

2. 扩展导航的功用

干流 App 更喜欢在底部导航栏中运用 4-5 个标签,这样能保持导航栏的整洁,还防止了标签过多导致用户难以准确点击选项的情况。

从干流海外产品中,提炼了 8 个底部导航栏规划技巧

从干流海外产品中,提炼了 8 个底部导航栏规划技巧

Pinterest的导航栏上只要四个选项,这有助于用户轻松点击。音讯选项会实时更新音讯数量,对用户来说这样的提示很直观。另外查找功用包括在导航栏中,便利轻松地在主页和查找成果之间来回切换。

3. 容纳多种标签方法

大都 App 底部导航栏会运用「图标+文字」的标签方法,这样能清楚地告知用户点击标签之后的成果。

有时分咱们也会看到有些产品的导航栏只要图标没有文字,但这种方法并不会影响咱们的操作,由于当导航栏的标签运用了用户特别了解的形状和内在,完全可以省略文字。

从干流海外产品中,提炼了 8 个底部导航栏规划技巧

从干流海外产品中,提炼了 8 个底部导航栏规划技巧

宜家App的导航栏运用了群众都很了解的图标,所以即使不加文字,咱们也能清楚地知道这3个图标别离代表了主页、分类、我的。

从干流海外产品中,提炼了 8 个底部导航栏规划技巧

从干流海外产品中,提炼了 8 个底部导航栏规划技巧

相对于宜家,Youtube的导航栏就显得有点杂乱,由于Youtube的图标意义用户或许并不是很了解,加上文字说明很有必要。

4. 文字标签应该简略

文字标签应该简略而清晰,准确的文字说明能对用户运用正确导航起到关键效果。

从干流海外产品中,提炼了 8 个底部导航栏规划技巧

从干流海外产品中,提炼了 8 个底部导航栏规划技巧

TikTok导航所有的文字标签都简略,并且中间的增加图标还躲藏掉了文字,以此来引吸引用户的注意力。

5. 防止躲藏导航栏

Tab Bar 通常包括了最重要的导航信息,应该一直向用户展现,防止在用户滚动页面的情况下被躲藏掉。

从干流海外产品中,提炼了 8 个底部导航栏规划技巧

从干流海外产品中,提炼了 8 个底部导航栏规划技巧

Pinterest导航栏的规划是个例。当滚动页面时,底部的导航栏会躲藏,这么规划的原因或许是为了防止导航栏遮挡图画,保证用户看到更多的图画内容。

6. 传达方位

Tab Bar 协助用户轻松导航,但假如用户不知道自己的方位,将会影响他们浏览和运用产品的体会。

从干流海外产品中,提炼了 8 个底部导航栏规划技巧

从干流海外产品中,提炼了 8 个底部导航栏规划技巧

多邦邻App经过改动导航图标的样式来让用户清晰的知道自己所有的板块。

从干流海外产品中,提炼了 8 个底部导航栏规划技巧

从干流海外产品中,提炼了 8 个底部导航栏规划技巧

Headspace在底部导航栏加上了线条装修,每次切换选项,线条都会跟着一起切换,保证告知用户切当的方位。

7. 从反应中学习并不断改进

反应是关键,假如想改善产品的导航栏规划,就要考虑并测验用户最喜欢哪个导航选项,不运用哪个导航,需求四个仍是五个选项等等。

从干流海外产品中,提炼了 8 个底部导航栏规划技巧

从干流海外产品中,提炼了 8 个底部导航栏规划技巧

Pinterest经过收集用户的运用反应情况来不断改进导航栏的规划,协助用户更便利地运用产品,这些不断打磨的改进真是产品成功的关键。

8. 在导航栏中显现更新

Tab Bar 不仅仅起到导航的效果,许多时分还能经过状况改变告知用户更多的信息。

从干流海外产品中,提炼了 8 个底部导航栏规划技巧

从干流海外产品中,提炼了 8 个底部导航栏规划技巧

在Twitter主页导航中,当有新内容推送时,主页就会呈现更新的状况,提示用户查看新内容。这样的规划在Youtube、Pinterest等许多干流产品中都有运用。

更多底部导航栏的规划技巧:

欢迎关注作者微信大众号:「Clip规划夹」

从干流海外产品中,提炼了 8 个底部导航栏规划技巧

从干流海外产品中,提炼了 8 个底部导航栏规划技巧

给TA打赏
共{{data.count}}人
人已打赏
教程分享

UI/UX 设计师必备的 16 款 Figma 插件

2021-8-1 17:16:24

教程分享

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

2021-8-4 0:53:20

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索