恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反??!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
从主流海外产品中,学习如何设计底部导航栏!
78.4°
自译外文 / 经验/观点 / / 原作者: Jaskaran Singh / 举报
15497 71 240 7

2021-07-26

大家好,我是Clippp。今天为大家带来的文章是「底部导航栏」设计。很多受欢迎的产品中都有我们值得学习和借鉴的设计思考点。通过分析海外主流产品,带大家掌握底部导航栏(Tab Bar)的基本知识,找到解决问题的方法并开拓创意思维。

在开始之前,请大家先思考下面两个问题~

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

好像并不是。虽然淘宝、微信、微博、美团等大多数主流的产品都在使用Tab Bar,但这并不意味着所有产品都需要它。

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

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

答案是为了易于使用,意味着通过Tab Bar这种简单的设计可以轻松帮助用户导航到页面。

明白了上面的问题后,接下来就要考虑如何来设计Tab Bar,能更好的满足用户的需求和体验。

#1显示最重要的信息

导航栏应该只包含最有用的信息,不能添加过多无用的标签使导航栏混乱。许多App在导航栏上添加搜索功能,因为这有助于用户更快地导航和检索内容。

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

#2扩展导航的功能

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

Pinterest的导航栏上只有四个选项,这有助于用户轻松点击。消息选项会实时更新消息数量,对用户来说这样的提示很直观。另外搜索功能包含在导航栏中,方便轻松地在主页和搜索结果之间来回切换。

#3容纳多种标签形式

多数App底部导航栏会使用「图标+文字」的标签形式,这样能清楚地告知用户点击标签之后的结果。

有时候我们也会看到有些产品的导航栏只有图标没有文字,但这种形式并不会影响我们的操作,因为当导航栏的标签使用了用户特别熟悉的形状和内涵,完全可以省略文字。

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

相对于宜家,Youtube的导航栏就显得有点复杂,因为Youtube的图标含义用户可能并不是很熟悉,加上文字说明很有必要。

#4文字标签应该简短

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

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

#5避免隐藏导航栏

Tab Bar通常包含了最重要的导航信息,应该始终向用户展示,避免在用户滚动页面的情况下被隐藏掉。

Pinterest导航栏的设计是个例。当滚动页面时,底部的导航栏会隐藏,这么设计的原因可能是为了防止导航栏遮挡图像,保证用户看到更多的图像内容。

#6传达位置

Tab Bar帮助用户轻松导航,但如果用户不知道自己的位置,将会影响他们浏览和使用产品的体验。

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

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

#7从反馈中学习并不断改进

反馈是关键,如果想改善产品的导航栏设计,就要考虑并测试用户最喜欢哪个导航选项,不使用哪个导航,需要四个还是五个选项等等。

Pinterest通过收集用户的使用反馈情况来不断改进导航栏的设计,帮助用户更方便地使用产品,这些不断打磨的改进真是产品成功的关键。

#8在导航栏中显示更新

Tab Bar不仅仅起到导航的作用,很多时候还能通过状态变化告知用户更多的信息。

在Twitter主页导航中,当有新内容推送时,主页就会出现更新的状态,提示用户查看新内容。这样的设计在Youtube、Pinterest等很多主流产品中都有使用。

最后

最后为大家整理了一波高质量的底部导航栏设计素材,点击下载即可获取高清素材图!

慢慢来比较快,希望对你有帮助~

Powered by Froala Editor

下载
收藏

71人已收藏

Clippp

微信:Clip设计夹

  • 22

    作品

  • 549

    粉丝

  • 27

    关注

  • 让数据更有趣!全面总结图表设计的思路和方法
  • 细节见真章!有效提升设计体验的10个细节
  • 用户体验设计法则应该怎么用?来看看这些应用原理!
  • 想抓住产品第一印象?看看这些引导页设计方法!

猜你喜欢

    Clippp

    Clippp

    微信:Clip设计夹

    身经百战首页达人话唠收藏家lv.2
    • 549

      粉丝

    • 916

      人气

    • 9001

      颜值

    作品

      最新推荐

      职业化设计师的自我修养(二)

      168 0 1

      相关佳作
      换一换

        Clippp

        点赞:240

        收藏:71

        评论:7

        从主流海外产品中,学习如何设计底部导航栏!

        你确定要举报从主流海外产品中,学习如何设计底部导航栏!?

        如果查出恶意举报,十天内禁止提交任何举报申请。

        0/200

        上传证据: 超过10M的附件请使用网盘地址

        点击上传附件

        对谁可见:

        全部设计师
        • 全部设计师
        • 推荐设计师和认证设计师

        您确认要推荐?

        该作品发布时间:2021年07月26日

        评分

        完整度

        启发性

        勤奋性

        排版布局

        推荐心得

        建议20-200字以内

        0/200

        账号或密码错误,请重新输入

        账号或密码错误,请重新输入

        登录

        账号或密码错误

        发送验证码 120s 验证码错误

        登录
        全网福利资源合集搜索处解压码