UI必看 | 组件应用 - Tab bars设计方式详解
往期文章阅读：
Tab bars，是从属于iOS所规定的几种App全局组件之一，绝大多数App都遵从于iOS的交互规范，使用Tab bars来划分最顶层的功能页面，这种广泛性也反过来塑造了用户对不同App统一的使用习惯。
针对这个组件，iOS官方给出了分别针对3 tabs、4 tabs和5 tabs的通用模版。
由此可知，在Tab bars中使用3-5个选项是合理的，更少或更多的选项则应该考虑其他的组件形式，或是重构App的功能结构。
与其说Tab bars有什么使用场景，倒不如说它有什么可以不使用的场景。Tab bars 是一个非常泛用的组件，以至于，除非你有对App有自己的理解，或者App的功能极为专精没有顶层页面划分的需求，否则绝大多数时候都可以使用它。
在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的组件，今天就介绍到这里了。
新一期B端课程已经开课，课程和作品集输出方式再次升级，有提升需要的同学快来！
