从真实产品案例出发分析高手是如何做好标签设计?

从真实产品案例出发（分析高手是如何做好标签设计？）

这是标签栏组件总结的第三期，也是最后一期了。

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

用三期干货，全方位解析「标签栏」控件设计

本系列将分三期全方位解析如何做好标签栏设计，第一期先从 iOS 人机交互规范和 Google Material Design 平台规范切入，来系统梳理一下「标签栏」。

阅读文章 >>

掏空家底！图标设计落地全方位指南

这一期真的是掏空了职业经验，总结出一套图标制作与落地方法，内容涵盖真实项目中的大多数坑点。

阅读文章 >>

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

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

首先分清标签栏和工具栏

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

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

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

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

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

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

舵式标签及衍生

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

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

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

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

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

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

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

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

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

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

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

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

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

合理减轻用户视觉负担

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

坐拥4亿日活