一 、组件组件介绍

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 的组件
，今天就介绍到这里了。

作者：超人的电话亭