标签栏（Tab Bar）是界面设计绕不开的一个课题，绝大多数产品都必需一个视觉美观、反馈清晰的标签栏来传达品牌形象。
本篇文章将探讨与标签栏相关的设计细节，并尝试预测设计背后的探讨；所有实例均来源于各大线上产品，观点仅来源于个人粗浅的预测，如果有那里说得不对的地方，希望你们多多指点。
一、理解标签栏作用
根据iOS人机交互指南，标签栏（Tab Bar）是用于组织APP结构，以扁平层级，只用于导航的基础控件。
标签栏不应承载任何操作，如果必须执行操作，应采用工具栏（Tool Bar）；标签数量通常在3-5个（针对手机声光查找标签，pad端可以适度多一些），如果标签很多，最后一个标签可以是“更多”，将更多的标签收纳其中。
标签栏的主要作用有下面2点：
1. 定位导航 & 凸显品牌
1）定位导航
一般情况下，标签栏常驻于各一级页面顶部。选中标签明确提醒用户当前所处位置，当用户想要到达其它一级页面时，只需切换底部标签即可。
2）凸显品牌
首页是产品给客户留下第一印象的关键一步，标签栏中的视觉元素，包括选中标签的样式、图标形式、组合风格等等无不体现了产品个性。
二、整理标签栏分类
不同维度下，标签栏可以被分为多种类型；我们不妨从下面5个维度依次对标签栏进行分类，以便观察研究不同的分类方法下标签栏的不同特点。
1. 位置维度
常见的标签栏通常是吸附于屏幕上方，不随用户手势滑动而出现位置差异；然而还有一些产品为了切合用户的使用画面，做了一些位置上的微调，可能展现悬浮状态以及会随着用户手势改变而出现位移。
常规吸底的标签栏：
悬浮类的标签栏：
有道词典和马蜂窝给出了一个折中两全的解决方案：根据用户的操作手势推测用户意愿，决定能否展现/隐藏标签栏。
当用户向上滑动屏幕时，我们觉得，用户的动机是浏览下方更多信息，此时就将标签栏隐藏，直到用户出现向右滑动键盘的手势时，显示标签栏，给客户提供方便的跳转操作。
2. 功能维度
标签栏是由多个标签构成，通常状况下，标签的展现方式相似，没有侧重；然而在一些产品中，为了突出某一核心功能，通常会将该功能对应的标签进行视觉上的指出。
3. 标签组合方法维度
组成标签栏的元素有：文字、图标、底板等…将不同元素排列组合，可以产生许多不同的组合结果，不同的组合对应不同的标签栏样式。
纯文字：
两大短视频产品（抖音&快手）以及重工具性的高德地图，都采用了纯文字的风格；纯文字的颜色在触觉上对用户注意力影响最小（众所周知，图像比文字天然更具视觉吸引力），用户可以非常集中地将注意力放在内容视图，专注于信息本身。
视频流产品必须成为沉浸感，以便客户可连贯自然地看尽可能多的内容。因此收敛标签栏视觉占比十分合理科学。
同理，对于强工具性的高德地图来说，用户的使用画面多集中在户外，物理环境混乱复杂，界面必须最大程度帮助客户快速聚焦；地图视图无疑是用户视觉的更重要落点，减弱标签栏的视觉表现是一个不错的设计模式。
纯图标：
相较于国内产品，海外产品最常见纯界面种类的标签栏。个人理解是，采样的3款产品（FB、IG、Twitter）都是已经高度普及的产品，用户对产品结构的心智模型尚未制定规范。
用户不需要通过阅读文字能够理解标签的涵义，更有可能是借助位置记忆来定位，图标最有也许也是起辅助识别的效果。
继承上文思路，同样是普及性很高的产品，为什么中国的国民产品如微信、支付宝并没有去掉标签栏文字呢？原因或许跟目标客户群体的年龄分布状况有关，上文中使用纯界面的国外产品包括的客户群体相对最年轻，而中国的国民产品近乎达到了全年龄段的覆盖；去掉文字对表意的妨碍相对不可控，对于比较数量的中老年用户来说，单凭图标来理解意义非常困难。
图标加文字：
最常用的组合方式，最为稳妥、不易出错。
特殊样式：
视觉传递服务于功能表达，对于应该指出的功能，自然应使用非常低调醒目的视觉方式加以凸显。某些状况下，单独凸显一个强势功能就能，如转转的发布功能；而另外的状况下，要体现的不是某一具体功能，而是选中的状况，帮助客户更好定位（如美团外卖）。
4. 图标风格维度
线性图标：选中状图跟已选中状态均是线性图标。
面性图标：选中状态跟未选中状态均是面性图标。
线面结合界面：选中状态是面性、未选中状态是线性图标。
不同状态之间变化度大，用户更容易快速定位所在位置；选中跟未选中对应线性和面性两套图标，视觉发挥空间大，是当前更被广泛运用的设计思路。
5. 运营维度
为了配合新年、大促、周年庆等活动，标签栏可能会需要特殊设计。
为了营造专题气氛，需要对标签栏做或多或少的更改。当专题气氛需要更浓烈时，如大促、春节等，标签栏界面在外形上会跟以前有巨大差别。
三、细化视觉规范
上面从整体的视角对标签栏进行了分类，接下来将从4个细节的视角对标签栏进行拆解。
1. 布局方式 & 分割方式
大多数情况下，根据标签个数将页面宽度等分即可。对于非通栏的特殊标签栏，标签的厚度不受屏幕尺寸影响，居中悬浮于视图底部；“分割”指的是标题栏和上面内容视图的分割。
如何建立分割感？方式有下列3种：
越来越多的产品选择扁平的视觉样式，投影风格势头不再。以微信为标识，去掉头部黄色导航栏，用毛玻璃效果取代；结合其它巨头产品的迭代情况，不难看到，当前的界面设计模式是不断化繁为简、去伪存真的过程。
降低视觉噪音，让用户的注意力更好的聚焦信息本来，减弱不必要的触觉感知相同是信息爆炸时代下的大势。
2. 背景
将从形状、造型、尺寸的视角进行探讨相当。
3. 图标
以下只讨论个别标题栏中的界面细节，关于字体的勾画细节太多，适合单独开辟一个新话题。此处不加以展开。
4. 文字
根据iOS人机交互指南，界面中的文字不能小于11pt。然而中国产品大多数将标题栏字号定为10pt，个人分析是因为同样字号的汉字视觉效果大于英字。
四、整理交互细节
用户向平台发出操作指令，系统给出反馈，反馈信息被客户接收到，就完成了一次完整的交互。
我们着重来讨论几种常见的标签点击反馈形式。
观察上面几种点击反馈模式，结合直观感觉跟产品属性：
硬切类：给人稳重可靠的觉得。微信、支付宝、钉钉、蚂蚁财富、京东金融、天猫等产品均采取无过于动画的模型；可见该类别适用于重功能的社交类产品、严谨稳重的金融类产品，给客户传达一种踏实稳定的觉得，过多的视觉装点如无必要，即是累赘。
缩放类：稳定感与活力感较为平衡。大多数线上产品运用这些动画建模，如qq、淘宝、美团、网易云音乐、今日头条等。值得探讨的是，微信和qq，一个采用了无过于动画建模一个采用了缩放模型；同样地，天猫采用了无过于动画建模而淘宝使用的是缩放模型；可见，在产品用途高度类似的状况下，不同的产品定位跟品牌传达是设计的重要根据。
线条生长类：视觉效果较为复杂华丽，吸引用户注意，同时动画耗时较长，使用该模型的代表产品是京东和马蜂窝；视觉表现上最丰富声光查找标签，容易与同类产品产生差异化，给客户传达一种产品细节满满的觉得；然而，是否会对用户造成一定程度的视觉干扰？个人觉得跟产品的使用频率有紧密联系。
对于以旅行攻略为主打功能的马蜂窝来说，产品原本被开启的频率不高，在有限的曝光时间内，尽量帮用户留下有记忆点的使用感受，制造与竞品的差别；而淘宝的标签切换动效，个人觉得稍显复杂了一些；动画包含线条生长+充填生长+细节点缀，如此多的差异组合在一起，难免有过于吸引注意力的状况出现。
填充生长类：视觉上丰富细腻，给人热烈欢快的印象。qq空间和自如都使用了这些表现形式。
填充飞入类：极具动感，样式别致。两款直播类产品，虎牙直播和花椒采用了此种方式。新颖的风格跟情感化的细节，拉近了产品跟客户的距离，同时也进一步提高了产品的娱乐性。
除了视觉反馈之外，还可以结合视觉（振动）和触觉（提示音）。
视觉结合触觉的产品有：百度网盘、淘票票等，触觉的加入非常明确了反馈，使得点击感知非常强烈和具象。
视觉结合听觉的产品有：淘宝。每次点击标签都伴有轻盈的提示音，提升愉悦感。尚未观察至将视觉、触觉、听觉结合使用的产品。
iOS自带的AirDrop功能有类似体验：发送端将文件寄送到接收端，发送端会有听觉和视觉反馈，接受成功后接收端会有声音提醒，对于用户来说，实际上的同时得到了3个维度的信息反馈。
上面我们讨论的是从标签a切换至标签b的反馈情况。那么在即将选中标签a的情况下继续点击标签a，反馈情况既是怎样？我们不妨分类讨论：
1）内容流页面
2）非内容流页面（内容固定）
