标签栏是什么

界面落地后，“标签栏”恰巧是在表现层层面向用户展现产品框架的最直接控件。作者全发那个味拆解标签栏的设计和交互，看看如何给用户更好的体验。

但业内较常受人所用的还是切入“用户体验五要素”的层层自检——战略层、范围层、结构层、框架层和表现层。

“用户体验”这个词常常被互联网行业的人挂在嘴边，然而用户众口难调，“体验”的标准难以具象，所以不同的产品团队可能有不同的用户体验验证方法。

作为一名无产阶级打工仔，有时候我们的职能可能并不允许我们直接地参与到公司的产品战略、范围和结构定义。但毕竟身为战斗在产品前线的一员，不论你是PM还是UI，和框架层与表现层打交道，几乎是你每天都无法避免的。

在界面落地后，“标签栏”恰巧是在表现层层面向用户展现产品框架的最直接控件。

虽然设计好标签栏，也许依旧无法让你把控一个产品的体验走向，毕竟战略层、范围层、结构层也是很重要的。但如果框架层和表现层垮了，那用户体验一定是糟糕的，并且和你有最直接的关系。

所以谈及到标签栏，我不得不锱铢必较一下，我会分三期来全方位地拆分详解。

那么第一期我们就先从 iOS 人机交互规范和 Google Material Design 平台规范切入，来梳理一下“标签栏”。

一、标签栏是什么？iOS 人机交互规范定义：出现在应用程序屏幕底部，并架构了多个屏幕之间页面内容切换的容器叫做“标签栏”（Tab Bar）。

标签栏在任何目标页面中的高度是不变的，iOS 规定它的高度为98px（iOS @2x）。但因为 iPhone X 之后的全面屏手机引入了 Home Bar ，所以在进行界面适配的时候，请务必要加上 Home Bar 自身的68px高度。

别让Home Bar遮挡标签栏中标签的展示，这会让两个控件发生操作手势冲突。

二、规范里告诉我们该怎么做从 GUI 层面出发，标签栏的视觉规范可以总结为以下三大点：标签数量、标签排版和标签栏视觉分割。

2.1 标签数量标签栏几乎是所有控件中，唯一一个有拉平顶级信息结构，并提供一次访问多个对等信息类别作用的控件。所以，想要规避用户在使用你的应用程序时迷路蒙圈的话，请确保标签栏表现清晰、反馈及时。

为了让标签栏表现清晰，两个平台在规范里都对标签数量都给出了相同的建议：建议标签栏内的标签个数为3个至5个。

因为标签过多，一是会增加产品结构的复杂性；二是会使每一个单元标签的可触空间降低，容易导致用户发生误触。

如果你因为产品结构非常繁杂，而硬着头皮胡来的话……其实 Material Design 也并不会把你怎么样啦，但在 iOS 在实施规范这一块可就强硬多了。

iOS 人机交互规范告诉产品设计者们：标签栏虽然可以包含任意数量的标签