一
、组件组件介绍

Tab bars
，科普是计方解从属于 iOS 所规定的几种 App 全局组件之一，绝大多数 App 都遵从于 iOS 的设计s设式详交互规范，使用 Tab bars 来划分最顶层的组件功能页面，这种广泛性也反过来塑造了用户对不同 App 统一的科普使用习惯。

针对这个组件，设计s设式详iOS 官方给出了分别针对 3 tabs、组件4 tabs 和 5 tabs 的科普通用模版
。

由此可知 ，设计s设式详在 Tab bars 中使用 3-5 个选项是组件合理的，更少或更多的科普选项则应该考虑其他的组件形式
，或是重构 App 的功能结构 。

二、使用场景

与其说 Tab bars 有什么使用场景，倒不如说它有什么可以不使用的场景。Tab bars 是一个非常泛用的组件
，以至于，除非你有对 App 有自己的理解 ，或者 App 的功能极为专精没有顶层页面划分的需求，否则绝大多数时候都可以使用它。

有 Tab bars 的应用

无 Tab bars 的应用

在 App 内部的页面中 ，Tab bars 通常只会出现在一级页面上
，二级页面则视本身的情况在决定要不要使用 ，大部份情况是不加的。

三、设计要点

1.分布逻辑

基础的 Tab bars 通常采用等分的布局逻辑 ，不管有几个 Tab，视图都是对于全宽度等分的，而图标和文本则在视图中居中对齐。

但有一些比较特殊的 Tab bars，中间会出现不同的按钮样式 ，比如最常见的「发布按钮」 ，出现这种按钮时如果依然使用均分，视觉上会有些不大协调，这时候就需要调整视图的宽度，以达到一个视觉平衡的值
。

2. Tab 内容

①图标+文本

这种是比较常见的 ，Tab bars 的图标可以做得比较偏视觉，对信息传达形成一定的阻碍 ，这时候使用文本的补充说明能够明确图标的含义 。

②纯图标

使用纯图标有一定的潜在条件
，即：确保图标表意清晰。为了满足这个潜在条件，大部份使用纯图标的 Tab bars 不会使用视觉元素特别复杂的图标类型 ，而是力求简洁
、明确。

③纯文本

在少数内容权重很高的 App 中，我们可能还会看到只用文本的 Tab bars 样式，例如小红书 、抖音。这类 App 这么做的目的 ，是防止 Tab bars 图标干扰用户浏览内容，如果你也有此类需求
 ，则可以考虑纯文本的 Tab bars。

3. 高亮的形式

不管是何种内容类型，选中 Tab 和未选中 Tab 都要做到非常明确清晰的对比。

表达用户目前正处于哪个页面是 Tab bars 的意义之一 ，如果对比做得不够清晰 ，则完全丧失了组件本应达到的目的
。

很多同学做 Tab bars 时找图标，做样式 ，费尽心思做得特立独行 ，却在最基础的对比上付之阙如，这显然有些本末倒置了 。

在高亮的形式上，普遍有以下几种做法。

①色彩填充

顾名思义，给高亮选项的图标进行色彩填充 ，其余则保持中性色 (面性或线性都可)。所填充的色彩既可以使用主色，也可是加深的中性色，具体如何选择取决于 1、主色是否足够醒目，是的话可以选择填充主色；2、是否想要削弱 Tab bars 的存在感 ，是的话可使用加深的中性色；3、Tab bars 是否已经存在其他使用主色的控件，是的话选择填充中性色。

②强调指示线

有些 App 还会在选项区域内添加一条强调用的指示线，可以其他方式结合。这种做法多见于纯图标和纯文本的 Tab bars ，图标+文本的再添加一条提示线就有些没必要 (比如 bing 这个)。

③视觉反差

对高亮选项的图标细化视觉特征，例如
：渐变
、阴影、插图化、3D 化
、毛玻璃化等等，适合对图标绘制比较有经验的同学。

④切换图形

将图标整个替换为与原来不相干的图形，通常来说只会应用在有限的两个 Tab 上  ，如 ：将首页替换为 App logo
 ，或是将首页替换为其他功能按钮比如「回到顶部」和「刷新」 ，又或者将「我的」替换为用户头像等等。

⑤背景高亮

给高亮的选项一个可视的背景 ，在实际应用中应比较谨慎地使用。这种强调有些过于强烈了，尤其是配合前两种 ，背景的加入可能会夺取用户的注意力。

4. 不一样的 Tab bars

尽管苹果给出了通用的 Tab bars 样式，但你依然可以专门设计自己的 Tab bars
，让你的 App 更具风格。

①马蜂窝

没错又是马蜂窝，每次聊组件都有它，是因为马蜂窝不管在哪个组件上
，设计多别出心裁

仅论 Tab bars，马蜂窝使用了毛玻璃、悬浮式的模块，在滑动的过程中还可以收起不必要的展示，把更多的空间留给内容。

②闲鱼/知乎

闲鱼比较不一样的地方在于中间的发布按钮，是很多同学会考虑使用的「部分超出范围」的做法。

但很多同学不知道该如何把控「超出的度」以及中间按钮和周围按钮的位置 ，导致按钮的比例非常奇怪 。这里给一个可行的方案：中间的按钮超出不宜过多，4pt 左右即可，周围图标与中间的按钮垂直居中对齐，文字置于图标下方。

③Endel

Endel 就比较有意思了，把 Tab bars 做成了分页器 (一种控件) 的样式，这样做的好处是可以把选项增加到 5 项以上，多出的选项甚至能左右滑动，但因为较弱的视觉特征
，只适合用在功能比较简单 、专一的工具类 App 里。

④多邻国/ibetter

而像多邻国这样的，将 App 类游戏化设计的产品，则会在 Tab bars 引入更有趣 、更卡通的设计。

四、样式拓展

这里收集了一些 Tab bars 的线上案例 ，也可以作为设计时的参考：

结尾

Tab bars 的组件 ，今天就介绍到这里了。

作者：超人的电话亭