首页 昆明信息港 下载客户端 关于彩龙 论坛须知

底部标签栏的设计技巧

本期黑马哥将会给大家分享 10 个关于底部标签栏设计的优秀案例,开启你对底部标签栏设计的不同认知。

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

可滑动交互的自定义设计

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

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

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

上下滚动的切换式设计

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

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

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

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

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

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

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

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

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

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

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

点击音效提升用户关注度

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

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

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

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

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

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

网友评论

0条评论

发表

网友评论

0条评论

发表

最新评论

推荐文章

彩龙

Copyright © 2008-2021 彩龙社区 版权所有 All Rights Reserved.

免责声明: 本网不承担任何由内容提供商提供的信息所引起的争议和法律责任。

经营许可证编号:滇B2-20090009-7

下载我家昆明APP 下载彩龙社区APP