收藏！UI Tabbar底部标签栏设计全攻略

底部标签栏（也称为导航栏）是移动设计中最流行的导航类型之一。它位于易于触及的区域，使用户的拇指可以轻松访问。尽管它相对简单，但要正确设计可能会很棘手。

在本文中，我将分享设计标签栏时要记住的 7 件事。

标签栏导航剖析

底部标签栏可以是纯图标导航：

或图标可以与文本标签的组合：

所选导航选项通常具有不同的视觉风格，可以帮助用户一目了然地了解当前位置。

苹果 iOS 标签栏

对于 Apple iOS，导航选项的容器大小等于 390x49。（也可以是375）

苹果iOS标签栏

容器中图标的大小为：

• 25x25 pt 用于常规标签栏
• 18x18 pt 用于紧凑的标签栏

对于方形字形，图标应该是：

• 23x23 pt 用于常规标签栏
• 17x17 pt 用于紧凑的标签栏

对于文本标签，Apple iOS 使用 SF 字体，中文使用思源黑体或者苹方，大小 10 和中等粗细。

标签栏设计的 7 个注意事项

1.不要在bar中放置触发动作的元素

标签栏包含导航目的地，而不是操作。不要放置触发动作的控件，例如创建。

❌“创建”是行动，而不是导航选项

此规则的唯一例外是使用视觉上区分的号召性用语元素，如下例所示。

✅ 带有特定号召性用语对象的标签栏

2.不要添加超过5个导航图标

Tab 栏最适合 3-5 个顶级导航目的地。使用超过五个选项会使目标彼此过于接近并损害可用性。用户可能会意外触发错误的选项。

❌ 导航选项太多。与拇指（红色圆圈）相比，触摸目标（导航选项）太小。

该怎么办：

• 如果您只有两个顶级导航选项，则可以进行分段控制。
• 如果您有五个以上的导航选项，则很有可能并非所有选项都是最重要的。您可以评估导航选项，如果您仍然有五个以上的目的地，您可以使用像汉堡菜单这样的控件。

3. 不要设计可滚动的标签栏

可滚动的标签栏会损害可发现性。由于一次并非所有导航选项都可见，因此用户可能很容易错过重要选项。另外，当用户滚动标签栏时，当前位置可能会消失。

❌ 可滚动的标签栏

4. 不要使用不熟悉的图标

您在标签栏中使用的图标对您的目标受众来说应该是非常清晰的。如果您怀疑图标的含义是否明确，则应始终将图标与标签一起使用。

❌ 用户可能不清楚第二个导航选项

5. 不要使用“灰+灰”的颜色组合

图标颜色对比度差和标签字体小是标签栏设计的两个常见问题。

• 始终检查文本和图标的颜色对比度。3 : 1 是活动用户界面组件和图形对象（如图标和图形）的最小比例（根据WCAG）
• 确保文本标签清晰易读。

❌ 导航图标颜色对比度差

6. 不要截断标签

您在标签栏中没有太多空间，所以当涉及到文本标签时，每个字符都很重要。切勿截断标签，因为用户不清楚其含义。相反，尝试编写清楚地传达选项的简短标签。

❌ 第二个标签被截断

7. 不要使用花哨的动画过渡

花哨的动画对于初次使用的用户来说可能看起来很酷，但一旦您开始定期使用该应用程序，很快就会变得烦人。每个需要太多动作但没有提供实用价值的对象都会成为让用户感到沮丧的视觉噪音。这就是为什么要尽量避免在选项之间使用花哨的转换。

❌ 避免使用花哨的动画效果来更改导航

作者：Nick Babich

原文：https://uxplanet.org/bottom-tab-bar-design-best-practices-ef3ee71de0fc