移动端中，那些经常叫“错”的控件

同样的一个东西，在不同人的口中可能有不同的名字。那么，在沟通过程中，说的其实是同一个东西，但双方可能会诧异，对方说的那个是什么。

开篇一张截图送给大家

开篇截一张图，优酷最近更新的一个版本，很年轻的风格，当然，今天不是唠嗑优酷的新版本。图中用虚线标了三个区域，请问，他们分别叫什么名字？

答：导航栏！

对于这个回答不能说错了，只能说不够精准。没错，确实，他们三个都是叫导航栏，他们确实都起到导航功能的作用。工作中，就给他们分别标明一下，导航一号、导航二号、导航三号。很显然，这样是行不通的。

那么，上图中1、2、3个组件分别叫什么名字呢！我是这么叫的：①导航栏、②tabs选项卡、③标签栏。请注意我上一句话的用词[“我是”这么叫的]，我是，我是，我是，三遍强调，这个只是我个人的叫法。因为，这个真的没有统一的标准，不同的人叫法都有所不同。不信？您可以拿着上面的图去问问身边的设计朋友、开发朋友、产品朋友等等。我肯定，答案多少都会有些差异。

我写文章的特点就是，啰里啰嗦。我现在就是想告诉大家，我为什么这么叫这三个组件。说来话长，这个还得从ios设计规范和material设计规范说起……接下来，就简简单单唠嗑一下这两个规范。

ios设计规范和

在这里我并不是讲ios的全部设计规范噢，具体更多可移步https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/

在ios设计规范中，①叫导航栏，ios设计规范中没有②这个组件，③叫标签栏。

导航栏常见的内容有标题；全局功能，如返回、编辑等等；分段控件，它固定在页面顶部。在ios11中，新增了大标题，也有人称这个导航栏为标题栏。当时，这种大标题的风格在圈内还是很火的。一次偶然的机会，我看到过material早期的设计规范，其实在很早的时候大标题的设计在谷歌中就已经出现了。慢慢体会…

标签栏固定在页面底部，标签数量一般控制在3到5个最好，太少显得界面很空，像断开一样，太多显得功能选项过于冗余。注：在ipad是可以有更多的。记住了，页面底部常见功能切换组件叫标签栏，在ios系统中叫标签栏，不是几个圆巴巴在页面底部。

在ios中，没有上图②中的tabs选项卡，与其较为类型的组件有分段控件。但是分段控件没有tabs选项卡功能强大。有人会说：我用的就是苹果手机，我看到有的应用里面就是有tabs选项卡。这个问题的答案，下面再解释。

material设计规范

同理，具体可移步https://material.io

在material设计规范中，①叫顶部导航，②叫tabs选项卡，③叫底部导航。在早期的规范中，是没有底部导航这个组件的（当时代替它的是抽屉导航），后来才加上去的，而且material的底部导航是可以不用固定在页面底部的，在页面滚动的时候，底部导航是可以自动隐藏的。

tabs选项卡也有人叫它holo条，与苹果分段控件相比，首先数量上多，交互上支持左右滑动切换，正因如此，在很多应用中都能看到这个组件的身影。更为强大之处是，tabs选项卡从手机端到平板端再到PC端均可以使用。

统一组件名称

根据公司项目，制定设计规范，在宣讲设计规范的时候一定要记得解释一下组件的名称，在公司内部达成统一。出现组件名称不统一的情况，起因是因为ios和material两套设计规范的差异性，毕竟这两套规范所对应的都是两个手机操作系统下的规范。然后，国产手机UI定制化，不采用谷歌的material设计规范，更多倾向与ios的设计规范，将两者结合起来，当然其中也包含了很多创新的地方。最后，日常生活中的应用多以一套设计适配两套系统(苹果和安卓)，而这一套设计正好是更倾向苹果的设计。

随着移动互联网的快速发展，很多公司和设计师不再完全依赖ios和material这两套设计规范，两套规范中的组件使用也越来越模糊，可能在一个应用中你可以看到两个系统中的组件。这很正常，因为规范是别人家的，可能更加适用于别人家的产品。对于自家产品，在设计的过程中，肯定是要取其精华，去其糟粕，能让用户用得好用的舒服的，就是好的。我们可以完全不使用这两套设计规范中的任何一种，我们完全也可以打破这些规范，自己去设计，前提是保证减少用户的学习使用成本。

至于组件的名称，可在公司内部对名称进行统一，方便同事之间交流沟通。但是作为设计师，足够了解ios和material设计规范还是有必要的，因为这两套规范中培养大批用户。