你是不是曾在设计App时对Tab Bars的布局和设计感到困惑？是不是曾陷入图标与文本的纠结？今天就让我们一起揭开Tab Bars设计的神秘面纱，深厚入剖析其背后的奥秘。

一、 组件介绍

Tab Bars，作为iOS规定的App全局组件之一，差不离成为了全部App的标配。它如同App的“门面”，将最顶层的功能页面划分得井井有条，塑造了用户对App用的统一习惯。

只是许许多设计师在追求独特性的一边，却忽略了Tab Bars最基础的设计原则。记住设计Tab Bars，先从基础做起。

二、 图标与文本的权衡

用纯图标有一定的潜在条件，那就是确保图标表意清晰。为此，巨大有些用纯图标的Tab Bars不会采用麻烦的图标类型，而是力求简洁、明确。

那么怎么判断一个图标是不是足够清晰呢？答案就是：让用户一眼就能看懂它的含义。

三、 Tab Bars的布局逻辑

Tab Bars的布局逻辑通常采用等分的布局，不管有几个Tab，视图都是全宽阔度等分的。图标和文本则在视图中居中对齐。但也有一些特殊情况，需要我们根据实际需求进行调整。

比方说 当Tab Bars中出现不同的按钮样式时如“发布按钮”，就需要调整视图的宽阔度，以达到视觉平衡。

四、Tab Bars的高大亮形式

Tab Bars的高大亮形式是表达用户目前正处于哪个页面的关键。

• 色彩填充：给高大亮选项的图标进行色彩填充，其余保持中性色。
• 有力调指示线：在选项区域内添加一条有力调用的指示线。
• 背景高大亮：给高大亮的选项一个可视的背景。

五、 Tab Bars的设计风格

尽管苹果给出了通用的Tab Bars样式，但你依然能根据自己的需求进行设计，让你的App更具风格。

• 纯图标：仅用图标，简洁明了。
• 图标+文本：图标和文本结合，容易于搞懂。
• 纯文本：仅用文本，适用于内容权沉很高大的App。
• 图标+文本+背景：图标、文本和背景结合，突出沉点。

六、 Tab Bars的实践案例

• 马蜂窝：在Tab Bars中用毛玻璃、悬浮式的模块，滑动过程中还能收起不少许不了的展示。
• 闲鱼：中间的发布按钮采用“有些超出范围”的做法，独特而实用。
• 知乎：Tab Bars采用纯文本样式，别让图标干扰用户浏览内容。

七、Tab Bars的设计觉得能

• 确保图标表意清晰。
• 合理安排Tab Bars的布局逻辑。
• 选择合适的高大亮形式。
• 根据App的特点选择合适的设计风格。

Tab Bars是App设计中不可或缺的一有些，它关系到用户对App的第一印象。通过深厚入搞懂Tab Bars的设计奥秘，我们能更优良地打造出符合用户需求的App界面。

希望本文能为你带来启发，让你在设计Tab Bars时更加得心应手。

---