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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
10 个底部标签栏设计技巧
16.0°
原创文章 / 经验/观点 / / 举报
1600 61 30 1

2021-11-29

感谢大家对感官体验日记栏目的关注和支持,本期黑马哥将会给大家分享 10 个关于底部标签栏设计的优秀案例,开启你对底部标签栏设计的不同认知。


我们在使用移动端产品的时候,为了方便用户进行功能模块之间的频繁切换,采用底部标签式导航是最常见的设计解决方案。随着感官体验的不断升级,在设计形式上面也是五花八门,今天黑马哥便借此机会为大家体验了一些优秀的案例,希望这些案例可以带给你更多帮助。





一、可滑动交互的自定义设计


最近在体验阿里云盘 APP 的时候,底部标签栏的设计给了我不一样的设计认知。该产品去掉了传统的图标+文字形式,而直接以纯文本形式设计功能模块。通常底部标签栏是设计 3~5 个功能模块,而阿里云盘的设计采用了左右可滑动的交互形式,方便展示更多功能入口。



右侧设计了全部功能的入口,点击之后以图标+文字的形式展示所有功能模块,图标设计也是非常的精致美观。用户也可以通过编辑来自定义设置底部导航的排序,方便根据用户自己的使用习惯来进行自定义,提高用户的使用体验。



设计灵感:在功能数量超过 5 个时,可以考虑左右滑动的交互形式。




二、上下滚动的切换式设计


微动效运用到图标设计中已经非常普遍,动效的表达相较于静态形式来说更能吸引用户的关注度。开眼 APP 利用上下滚动的动效来设计底部标签栏,给设计师们提供了另一种设计解决方案。


纯图标展示会增加用户的理解成本,而通过点击之后的文字表达可以提高用户的理解度。通过点击之后的滚动形式切换文字和图标,动效非常顺畅自然,体验度非常友好。



设计灵感:不一定只关注于图标本身的动效,图标与文字之间的滚动效果也是不错的选择。




三、底部拓展设计承载更多功能模块


对于一些功能模块较多的产品,设计师会尽可能的开发每一个常规的功能,拓展出更多可以进行设计延展的模块。钉钉 APP 在进行底部标签栏设计的时候,就将更多功能模块隐藏在上拉展开栏中,方便用户进行快捷操作。


充分的对底部标签栏进行了深度挖掘,利用手势的变化实现更多功能模块的切换,提高了用户的操作体验。



设计灵感:当功能很多的时候,可以考虑底部拓展的形式,提高隐藏功能的曝光度。




四、方寸之间的操作转场式设计


由于底部标签栏位置区域较小,通常都是直接呈现功能模块,进行繁琐交互转场的较少。而记账城市 APP 由于新增记录属于重点功能,其他功能模块采用了隐藏式的设计,在这个方寸之间的区域进行了各功能之间的转场设计。


点击左侧图标会转场到分析报告相关的功能展示中,右侧图标点击会延展出更多的功能模块,关闭恢复初始状态下的底部导航。在这个操作手势区域通过简单的转场式设计,提高了隐藏功能的操作便捷度,算是一个不一样的设计解决方案。



设计灵感:充分的利用好方寸之间的操作转场,来实现多功能之间的切换。




五、点击音效提升用户关注度


除了通过视觉层的设计提高关注度以外,声音传递的吸引力也是较为明显的,通过点击触发带来的音效可以有效地吸引用户的关注度。


宝宝巴士儿歌 APP 的底部标签栏点击功能模块时,会有点击音效的设计,由于都是小朋友使用的产品,俏皮可爱的设计更能吸引他们的关注。(这里由于是图片格式,音效的体验大家可以下载 APP 体验)



设计灵感:音效的使用也是提高用户关注度的一种形式,只是要考虑用户使用的场景,不能造成使用干扰。




六、趣味性的情感化设计融入


情感化的设计能够拉近产品与用户之间的亲和力,这也是设计师在不断探索并延展的设计方向。


QQ 作为社交工具而言,如何更加符合年轻化的设计需求,在底部标签栏图标的设计上面也是用尽了心思。消息模块的图标设计成各种搞怪的表情,在拖拽的时候会切换不同的表情,带给用户更加趣味性的体验,让人会心一笑。



设计灵感:表情化的图标设计可以提升情感化的融入,也是结合 IP 形象的一种表达。




七、悬浮层设计突破底部标签栏常规表现


设计师都在不断的探索设计的差异化,敢于创新才能寻求新的可能性。


脉脉 APP 将底部标签栏的设计采用悬浮层的形式表现,使得界面内容呈现的呼吸感更强,也增加了界面结构的空间感。在保持基本设计规范的前提下进行小小的变化,就能带来设计的差异表现,也能带给用户较为新颖的感官体验。



设计灵感:要敢于突破规范的束缚,带来不一样的设计体验。




八、悬浮层设计结合交互动效的双向运用


交互动效是 UI 设计师在静态设计稿中要逐步突破的一种技能,交互动效可以让我们的设计表达更加直观,提高产品的互动性和趣味性。


马蜂窝旅游 APP 在进行底部标签栏突破的过程中,除了采用新颖的悬浮层设计以外,在上滑浏览内容时采用隐藏局部功能的处理方式,让内容的输出面积更大。在下滑或者停顿的过程中恢复默认导航,探知用户行为习惯并给出不同的交互反馈,带给用户更高的操作体验和互动趣味性。



设计灵感:结合动效的创新可以让静态的表达更加直观,显示和隐藏的切换可以带给用户更多的可视区域,有利于更多内容的呈现。




九、通过视觉风格强化关注度


大部分产品底部标签栏都是通过面性图标和线性图标来做区分,也有一些通过颜色深浅对比区分。视觉风格上面整体属于较为低调的处理形式,不会过于突出。会通过动效的形式和图标质感等来突出,但是通常点击和默认都是区分比较明显的形式。


百度网盘 APP 通过较强的图标视觉风格把底部标签栏的视觉感突出,而点击和默认的图标设计风格一致,都成为了视觉焦点,通过图标大小差异来进行点击状态的区分。如果是突出展示底部导航来说也算是一种解决方案,立体质感的图标设计风格显得也非常精致,视觉体验感很强。



设计灵感:图标的设计除了常规的线性和面性以外,微质感、立体感、动态感等形式也是一个突破的方向。




十、强化图标设计的品牌基因


将品牌基因融入到图标设计中来增强品牌感,除了从 LOGO 图形中进行提炼,也可以从吉祥物中提炼。品牌形象结合到图标设计中是比较常见的形式,除了直接运用吉祥物造型以外,也可以提炼形象局部特征。


比如飞猪旅行 APP 除了将吉祥物形象作为“首页”点击状态的图标使用,也将形象右上角的特征部位提取出来,结合到“首页”和“我的”两个功能模块的默认图标设计中。



设计灵感:从品牌形象入手定义图标设计基因,可以提高产品设计的品牌感。立足于品牌做设计,这是设计师需要不断强化和结合的。




小结


底部标签栏设计可以在图标设计风格上面做差异化表现;也可以在结构上面突破规范的束缚;还能在图标动效、音效、品牌感等方面加强创新。没有一成不变的规则,只有不断突破的创新。


关于底部标签栏设计的优秀案例很多,这里只是列举了 10 个不同的方向,还有很多别的设计突破的方向之后继续为大家补充。希望本期的分享可以带给大家关于底部标签栏设计的新认知,我们互相进步。



作者:黑马青年(vx: heimaux)

本文由 @黑马青年 原创发布。未经许可,禁止转载。

Powered by Froala Editor

微信公众号:黑马家族

黑马青年

设计交流微信:heimaux

  • 84

    作品

  • 2.2w

    粉丝

  • 134

    关注

  • 2022日常输出作品合集(一)
  • 你今年的目标完成了吗?
  • 底部标签栏动效设计10佳案例
  • 毁掉设计职场路径的9大表现

猜你喜欢

    黑马青年

    黑马青年

    设计交流微信:heimaux

    2016年度最佳作品集TOP10得主2017年度最佳作品集TOP10得主国民爱豆首页霸主2016年度最佳作品集TOP50得主
    • 2.2w

      粉丝

    • 2396.6

      人气

    • 7.4w

      颜值

    作品

      黑马青年

      点赞:30

      收藏:61

      评论:1

      10 个底部标签栏设计技巧

      你确定要举报10 个底部标签栏设计技巧

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2021年11月29日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

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

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

      登录

      账号或密码错误

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

      登录

      可云端编辑的专业级UI设计工具

      立即体验