标签栏（Tab Bar）是界面设计绕不开的一个课题，绝大多数产品都必需一个视觉美观、反馈清晰的标签栏来传达品牌形象。本篇文章将讨论与标签栏相关的设计细节，并尝试分析设计背后的思考。所有案例均来源于各大线上产品，观点仅来源于个人粗浅的分析，如果有哪里说得不对的地方，希望大家多多指点。

根据 iOS 人机交互指南，标签栏（Tab Bar）是用于组织 APP 结构，以扁平层级，只用于导航的基础控件。标签栏不应承载任何操作，如果需要执行操作，应选用工具栏（Tool Bar）。标签数量一般在 3-5 个（针对手机，pad 端可以适当多一些），如果标签太多，最后一个标签可以是“更多”，将更多的标签收纳其中。

标签栏的主要作用有以下 2 点：定位导航 & 凸显品牌

1. 定位导航

一般情况下，标签栏常驻于各一级页面底部。选中标签明确提示用户当前所处位置，当用户想要前往其他一级页面时，只需切换底部标签即可。

2. 凸显品牌

首页是产品给用户留下第一印象的关键一步。标签栏中的视觉元素，包括选中标签的颜色、图标形式、组合样式等等无不体现了产品气质。

不同维度下，标签栏可以被分为多种类型。

我们不妨从以下 5 个维度依次对标签栏进行分类，以便观察研究不同的分类方式下标签栏的不同特点。

1. 位置维度

常见的标签栏一般是吸附于屏幕底部，不随用户手势滑动而发生位置变化。

然而也有一些产品为了切合用户的使用场景，做了一些位置上的调整，可能呈现悬浮状态或者会随着用户手势改变而发生位移。