标签栏（Tab Bar）是UI设计师在设计中必不可少要接触到的一块。本篇文章主要是通过优设文章加以总结整理的相关标签栏的设计知识点，方便自己后期巩固知识点。具体文章内容，大家可移步去优设文章详读。
理解作用
根据 iOS 人机交互指南，标签栏（Tab Bar）是用于APP导航的基础控件，只做页面间的跳转导航。移动端的标签数量一般在 3-5 个（pad 端可以适当多一些）。如果超过5个，一般集合到更多的标签中。如果需要对标签执行操作，则需要选用工具栏（Tool Bar）。 标签栏的主要作用有以下 2 点： 【定位导航】一般情况下，标签栏常位于各一级页面底部。每个标签有选中和未选中两种状态，明确告知用户当前所处位置。当用户想要前往其他一级页面时，只需切换底部标签即可。 标签栏中的视觉元素，可以体现产品中的基础调性。包括选中标签的颜色、图标形式、组合样式等等无不体现了产品气质。 【标签分类】标签栏跟据：位置维度、功能为度、标签组合方式维度、图标风格维度和运营维度，可分为多种不同类型。
1.位置维度
一般是吸附于屏幕底部，不随用户手势滑动而发生位置变化。特殊标签栏为了切合用户的使用场景，做了一些位置上的调整，可能呈现悬浮状态或者会随着用户手势改变而发生位移。 【常规吸底的标签栏】 优势：更加符合用户心智，用户的认知和操作成本最低。可以随时方便地切换页面。 劣势：底部占用一定高度，在有限的屏幕中，内容展示的高度相对减少一些。 【悬浮类的标签栏】 优势：屏幕占位区域小，为用户争取了更多的内容展示空间。 劣势：用户第一时间会感到陌生，同时操作成本有所上升。一定程度上，会出现单手使用时，容易误操作的情况。 部分产品设计会跟据用户意图来显示/隐藏标签栏。当用户向上互动屏幕时，将标签栏隐藏，指导用户出现向下滑动屏幕操作时，显示标签栏的设计方案。
2.功能维度
每个标签的功能优先级是平级，视觉上展示形式也统一平衡不做侧重； 此外部分产品跟据用户需求，有重点标签需要突出，通常会将该功能对应的标签进行视觉上的强调，在中间最为显眼的位置，利用对比度如面积对比、颜色对比（主色VS消色）、图标质感对比（扁平VS微拟物）、辅助元素（添加文字说明）等制造强弱差，以突出重点。 舵式标签常用于UGC产品，目的是鼓励用户尽可能多地生产内容。
3.标签组合方式维度
纯文字样式 视觉上对用户注意力影响最小（众所周知，图像比文字天然更具视觉吸引力），用户可以更加集中地将注意力放在内容视图，专注于信息本身。常用于视频流产品、强工具性的产品如高德，用户需要快速聚焦内容上，给用户打造更高的沉浸感体验。 纯图标 用户不需要通过阅读文字理解标签的含义，更有可能是通过位置记忆来定位，图标很有可能只是起辅助识别的效果，用户群体更偏向年轻群体。纯图标设计大多用于海外产品。 图标+文字 最常见的、最稳妥的也是最安全的组合样式。 微信之所以一直沿用图标加文字的设计，是因为微信用户群体大部分占用了全年龄段，，相对于中老年用户来说，单频图标来理解含义比较困难。
4.图标风格维度
「线性图标」
由线条构成，选中状态和未选中状态均是线性图标。线条粗细一般是3~4.5左右，图标复杂程度较低的设计 优势：造型耐看、有质感。 劣势：只能用颜色或者透明度进行不同状态之间的区分，选中状态与未选中状态之间的差异相对较小（尤其在暗色模式下），可能会造成用户定位当前位置时发生偏差。 「面性图标」 由色块构成，选中和未选中状态都是面性。 优势：造型内收紧凑、色块更加容易吸引用户注意。 劣势：只能用颜色或者透明度进行不同状态之间的区分。
「线面结合图标」
选中状态是面性、未选中状态是线性图标。不同状态之间差异度大，用户更容易快速定位所在位置。选中和未选中对应线性和面性两套图标，视觉发挥空间大。是当前最被广泛采用的设计策略。 风格大概有：微立体、毛玻璃、多彩毛玻璃、选中状态由底板和轻拟物等。
5.运营维度
为了配合节日、大促、周年庆等活动做特殊设计，图标与专题气氛贴切。 优势：页面整体氛围一致，气氛热烈。 劣势：标签栏的图标识别度非常低，需要靠用户记忆位置或通过阅读文字来拾取信息，降低使用效率。