标签栏？工具栏？傻傻分不清楚

这是标签栏组件总结的第三期，也是最后一期了。本文我们着陆在真实的产品上，看看这些产品是如何升华标签栏的。

三期主题预览图：

我们在前两期的归纳里，分别解析了平台规范下的标签栏、和标签栏最重要的图标元素的设计与落地。可回顾：

1. 搞明白标签栏，再来说用户体验
2. 了解图标规范，用Lottie动画让图标落地

结合前两期的内容，其实基本已经可以驾轻就熟地搞定标签栏设计了。

但我掐指一算，发现事情并没那么简单。在我日常真实产品的使用过程和刻意的观察中，发现有很多应用程序的标签栏打破了常规。一部分在表现层层面有所创新，一部分甚至还利用标签栏来为产品的部分功能赋能引流。

所以最后一期我们着陆在真实的产品上，看看这些产品是如何升华标签栏的。

一、首先分清标签栏和工具栏

标签栏存在于应用程序屏幕的底部，但存在于应用程序屏幕底部的控件，就一定是标签栏吗？这可不一定。

Safari的底部有一组操作图标，它们主要执行与当前页面相关的动作的按钮。它在用户开始向下滑动页面阅读时隐藏，但点击屏幕底部或上滑页面时它又会再次显示。

我们在前面的文章中提到：标签栏是架构了多个屏幕之间页面内容切换的容器。而这种只执行当前页面操作的按钮容器，iOS给它定义了另外一个名称：工具栏。

工具栏一般只有在用户可能需要对当前页面执行操作的时候，才会显示的控件，许多应用程序对工具栏都采用了不同的控制显隐的操作手势。

iOS人机交互规范特意强调需要设计者们区分标签栏和工具栏。对于只执行当前页面操作的工具，不应该和能够切换页面的标签放置在一起。标签栏是用于体现产品的框架结构，而工具栏却是直接在当前页面产生交互，放在一起会使用户认知产生歧义。

但你是不是会有一个疑问，常常看见这样的标签栏设计。他们不就是在标签栏中混入了操作工具吗？

二、舵式标签及衍生

我们常在社区类APP中看到上图这样的标签栏——标签栏中部因为一个大型按钮使标签栏形成了舵峰，所以被称为舵式标签。

一般舵式标签的颜色、大小等视觉表现会被设计得和其他普通标签有所差异，通过视觉对比的方式吸引用户关注。

舵式标签通常和产品框架体现无关，大多数应用程序使用舵式标签是用来承载系统功能。起初是因为社区类APP为了激励和方便用户随时随地地输出UGC内容，所以把触发用户创作/发布的功能按钮放置在标签栏中。

那么这算不算是违背了iOS的规范定义，把工具栏的功能，糅杂在了标签栏中呢？

答案是不尽然。工具栏中的操作一般只对当前页面中的内容产生交互，而大部分舵式标签承载的是全局性的功能，用户可以在任意的顶级页面中随时随地进行主要功能的操作，该操作并不隶属于任何一个页面下。

久而久之，因为舵式标签可以很好地承载产品的重要功能，而被许多的应用程序设计所采用（尤其是内容社区类）。

但舵式标签毕竟只是一种展现形式，利用其背后“以标签栏承载重要功能”的方法，而衍生出的变形使用手法也越来越普遍。越来越多的应用采用舵式标签或其原理，却不再单一地用于承载产品功能，而是配合营销场景、付费场景，给产品的变现、拉新赋能。

拼多多近一两年在用户拉新上下足了功夫，以“邀请好友助力，攒够100元可提现”的营销形式，促进用户疯狂分享。拼多多的病毒式营销主要依附于社交软件，由此还触发了微信更新了一波封禁外链的新规章。从这个层面看来，拼多多的这次营销活动无疑是成功的。

之前拼多多的营销入口有首页的Banner图、金刚区和“个人中心”页面，而现在已经直接将营销入口放在了标签栏中。同一个营销活动竟然多次改变了功能入口，最后还是落在了标签栏上。

我们可以通过拼多多这样的动作总结出：标签栏所承载的信息，能触发用户行为的可能性比Banner、功能列表等一系列表现形式要更胜一筹。

甩甩宝宝是腾讯融资的一款社交电商产品。甩甩宝宝的标签栏，在UI表现层面本已经脱离了标准的标签栏规范，进行了创新，他们还通过标签栏依附了“分享”操作，方便店主身份用户获客。这一点和舵式标签原理有着异曲同工的作用。

但毕竟舵式标签算是打破了常规，将功能按钮设计进了标签栏中，所以我还是奉劝大家不要轻易尝试。因为一般舵式标签应该作用于什么功能或场景，这已经不单单是UI表现层的问题了。毕竟是体现产品结构层的标签栏，是在无时无刻地向用户传递着产品调性。

如果想使用舵式标签，最好是从产品需求、用户目标等各个层面进行分析、讨论之后，再决定是否要如此设计。

三、合理减轻用户视觉负担

常规的标签栏一般都会包含图标和标签标题，但有一些应用程序却并没有这么做。

坐拥4亿日活的抖音APP的标签栏就只包含了标签文字，而没有使用图标。

以下是我个人的观点及看法：

（编辑：源码网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!