打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
初学者如何设计标签栏?
userphoto

2022.09.19 北京

关注

什么是标签栏?

标签栏 (iOS) 与底部导航栏 (Android)

标签栏的名称在iOS开发和设计中非常流行,在 android 中,它通常被称为底部导航栏或导航栏。

标签栏与轨道导航

手机的标签栏位于屏幕底部靠近用户拇指的位置,以便更好地触及和使用,但在平板电脑和台式机等大屏幕设备上,标签栏变成了导航栏,它提供了相同的功能,可以选择更多的项目或标签。

标签栏构造

Tab bar 的构造很简单,但是你需要了解它才能了解一些关于标签栏的知识,所以标签栏的构造包括:

  • 活动图标:这是当前选择的图标,用于显示用户在哪里以及用户可以去哪里或切换到哪里。

  • 活动标签:就像活动图标一样,活动标签显示当前选项卡。

  • 非活动图标:未选中的选项卡具有非活动图标。

  • 非活动标签:非活动标签是可见的,并且暗淡以显示非活动。

  • Container:包含所有选项卡的元素。

标签栏的大小

当设备为纵向和横向时,Android标签栏的首选大小是58px,以获得更好的可用性。此外,元素之间应该有相等的距离,这样用户就可以轻松地用拇指点击。

iOS 使用点系统,在纵向屏幕上的标签栏应该是 49像素,而在横向屏幕上,根据苹果的指导方针,它应该是32像素。

注意:不同的公司使用不同的标签栏高度,这取决于他们的应用数据和功能,我上面讨论的所有这些指导方针和大小都不是固定的,但它们可以为你提供更好的可用性起点。

标签栏的类型

应用程序设计中有多种类型的标签栏,其中两种最流行的类型是静态标签栏和动态/响应式标签栏。

静态栏附在屏幕底部,当我们在选项卡之间切换和滚动内容时,它永远不会离开它的位置。但是当你在屏幕之间跳转和滚动浏览内容时,动态/响应栏会隐藏和移动。

他们都有自己的用途,亚马逊应用程序,Airbnb 使用静态栏,而Pinterest则是一个响应栏。当用户滚动内容时,响应栏提供更多内容。

标签栏灵感

对于应用程序的标签栏设计,我基本上从 2 个网站中获得灵感。

  • Mobbin.com(前身为 mobbin.design):这是一个获得真正应用灵感的好网站,所有这些都是成功的应用,由来自世界各地的伟大设计师创建,所以它们的设计必须是伟大的,不是在趋势方面,而是在可用性方面。

  • Dribbble:我通常使用现实世界的设计,但如果我必须跳出框框思考,我就会去Dribbble,并开始寻找最近流行的设计,以获得一些关于标签栏的灵感。

如果你有任何最适合标签栏灵感的网站,可以在下方留言区评论。

标签栏最佳 Figma UI 套件

1. Adi Chakravarty 的终极底部导航栏组件

2. Alireza Rahmani 和 Ehsan Ezzati 的导航栏

想要了解汽车更多内容,就拨打电话或微信留言联系我们吧!
 作者:Vikalp Kaushik 
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
致新人:移动端(iOS&Android)应用界面设计入门指南
4个关键点,做好App底部导航设计
交互设计常见问题答疑:我的APP界面底部导航栏究竟应该如何设计?
交互设计之(三)标签栏&导航栏设计
iOS 10 人机界面指南(四)
5000字干货!全方位掌握「导航栏设计」知识点!
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服