原文地址：https://mp.weixin.qq.com/s/oNxaS056wY0E1WsYPFjx9A

一、标签栏基础规范

1、尺寸

iOS 规定高度为98px(@2x)。随着iPhone X 的全面屏手机引入了 Home Bar ，需要底部适配增加68px的高度，避免Home Bar遮挡标签栏造成两个控件发生操作手势冲突。

2、数量

iOS和安卓两大操作系统的设计规范里都对标签数量给出了相同的建议：建议标签栏内的标签个数为3个至5个。主流APP更喜欢在底部导航栏中使用4-5个标签，这样能保持导航栏的整洁。标签过多会导致用户难以精确点击选项的情况，除此之外还会增加应用程序结构的复杂性。

二、标签栏样式

常见的样式有三总：图标+文字、纯图标、纯文字。

1、图标+文字

图标+文字是最常见的标签展示形式。因为有文字提示，所以没有必要过于担心图标的识别性问题，那么图标就可以得到更深的延展，可以做的更有趣，更具有产品气质，甚至可以代入更深层次的动效。例如京东APP的标签栏就是这种。

2、纯图标

纯图标的方式较少使用用。因为没有文字说明会导致用户很难理解，那么就必须要保证图标的识别性，舍弃图标可能的延展性，让图标变得简洁规矩。适用的产品一般功能较单一、领域垂直、用户群体接受度高。即使满足这些条件，用户第一次使用也会比较迷茫，所以一定要慎用。例如花瓣APP是典型纯图标样式的标签栏。

3、纯文字

纯文字展示形式能够更直观的让用户进行操作，遵循简单易用的原则。适合用户群体跨度较大的产品，多用于直播类、内容类、简单工具类APP中。缺点也显而易见，图标样式比较单一，没法加入更多趣味化、产品特性的元素到标签中。例如抖音的标签栏就是纯文字为主。

4、舵式

舵式标签栏，是通过视觉对比的方式突出强调一个标签并居中放置，以此吸引用户。因为这种样式能很好的承载产品的重要功能，多为UGC发布按钮，营销场景，付费场景，拉新场景等。例如拼多多的拉新裂变入口就是这种。