什么是标签栏?
标签栏 (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 的导航栏
联系客服