初学者如何设计标签栏？

什么是标签栏？

标签栏 (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