toolbar

这是选项卡栏组件摘要的第三期，也是最后一期。本文落地真实产品，看看这些产品是如何升华标签栏的。

第三阶段主题预览:

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

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

结合前两期的内容，其实基本上就可以轻松搞定标签栏设计了。

但我掐了掐手指，发现事情没那么简单。在我日常对真实产品的使用和刻意观察中，我发现很多应用tab打破了常规。他们有的在展现层面有所创新，有的甚至利用标签栏来赋能和引流产品的部分功能。

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

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

选项卡栏存在于应用程序屏幕的底部，但存在于应用程序屏幕底部的控件必须是选项卡栏？我不知道。

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

我们在上一篇文章中提到，选项卡栏是一个容器，它构造了在多个屏幕之间切换的页面内容。而这个只执行当前页面操作的按钮容器，被iOS赋予了另一个名字:toolbar。

工具栏通常只在用户可能需要在当前页面上执行操作时显示。许多应用程序采用不同的操作手势来控制工具栏。

IOS人机交互规范特别强调设计师要区分标签栏和工具栏。只执行当前页面操作的工具不应该放置可以切换页面的标签。标签栏是用来体现产品的框架结构，而工具栏直接在当前页面进行交互，会让用户的认知模糊不清。

但是你有问题吗？你经常会看到这样的标签栏设计。他们不就是把操作工具混在标签栏里了吗？

二、方向舵标签及其衍生产品我们经常在社区app中看到如上图的标签栏——标签栏中间被称为方向舵标签，是因为一个大按钮使得标签栏形成了一个方向舵峰。

一般舵标的颜色、大小等视觉表现都会设计成不同于其他普通标签，通过视觉对比来吸引用户的注意力。

舵标通常与产品框架无关，大部分应用使用舵标承载系统功能。起初，基于社区的app为了鼓励和方便用户随时随地输出UGC内容，将触发用户创建/发布的功能按钮放在标签栏中。

那么这是否违反了iOS的标准定义，在标签栏中混合工具栏的功能？

答案是不会。通常，工具栏中的操作只与当前页面中的内容进行交互，而大多数方向舵选项卡都具有全局功能。用户可以在任何一个顶层页面随时随地操作主要功能，这个操作不属于任何一个页面。

久而久之，方向舵标签因为能很好的承载产品的重要功能，被很多应用程序(尤其是内容社区类)采用。

而舵标只是一种展示形式，使用的是背后“用标签栏承载重要功能”的方法，衍生出来的变形使用方式越来越普遍。越来越多的应用使用舵标或其原理，但不再用于承载产品功能，而是配合营销场景和支付场景，赋能产品实现和创新。

近一两年来，拼多多花大力气吸引新用户，以“邀请好友帮忙，攒够100元提现”的营销形式，推动用户疯狂分享。拼多多的病毒式营销主要依靠社交软件，这也引发了微信更新一波禁止外链的新规。从这个角度来说，拼多多的营销活动无疑是成功的。

以前拼多多的营销入口在首页、金刚区、“个人中心”页面都有Banner map，现在已经直接放在tab里了。同一个营销活动，居然改了很多次功能入口，最后落在了标签栏上。

我们可以从拼多多的动作中得出结论，标签栏承载的信息比Banner、功能列表等一系列形式更容易触发用户的行为。

宝贝饺子是腾讯出资的社交电商产品。弃婴的tab bar在UI性能层面早已脱离了标准的tab bar规范，做出了创新。他们还通过标签栏附加了“分享”操作，方便拥有者身份的用户获取客户。这与方向舵标签原理具有相同的效果。

但毕竟方向舵标签打破常规，把功能按钮设计到标签栏里，所以我还是劝你不要轻易尝试。因为一般的方向舵标签应该作用于什么功能或者什么场景，不仅仅是UI表示层的问题。毕竟是体现产品结构层的标签栏，无时无刻不在向用户传达产品调性。

如果要用方向舵标签，最好从产品需求、用户目标等方面进行分析讨论，再决定是否这样设计。

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

传统的标签栏通常包含图标和标签标题，但有些应用程序没有。

日活4亿的Tik Tok APP的标签栏，只包含标签文字，不使用图标。

以下是我个人的观点和看法:

从视觉角度来看，Tik Tok专注于短视频服务。当用户进入Tik Tok，视频将在主页上播放。视频内容比较复杂。如果我们把视频内容看作是一个页面的背景，那么背景仍然是复杂的、动态的。如果将图标添加到选项卡栏，则必须减小标签标题文本的大小。而页面中的信息基本都聚集在屏幕下方。添加图标会增加用户的认知成本。

从用户群体分析，Tik Tok拥有大量下沉用户，用户的知识水平和年龄分布极其广泛。直接使用大标签文本，有助于各级用户更清晰地理解应用程序结构。

相反，花瓣应用程序只使用图标，而不使用标签文本。

其实这样做是有一定风险的，请慎重尝试。如果标签栏中只有图标，那么传达图标的含义是极其苛刻的。即使设计出符合大众认知的图案，用户也会一头雾水。你应该试着点击验证你的猜测是否正确。

花瓣敢这么设计。一是因为用户群体多为设计师，对图案表达有一定程度的认知；其次，相比网页版的花瓣，移动端承载的功能相对简单，结构也相对清晰。

如果你的产品结构比较复杂，请不要轻易尝试省略标签文字。虽然减轻了用户的视觉负担，但是增加了用户的认知成本，导致用户无法轻松找到想要的功能，大大降低了用户体验，得不偿失。

所以综上所述，减少一些视觉元素可以减轻用户的视觉负担。但是，缩小图标的可接受性大于缩小标签文字。

四、优秀案例解析——马蜂窝标签栏的改版创新

年初，马蜂窝进行了10.0版本迭代。这个版本对整个移动页面做了很大的改变，其中标签栏的样式和交互方式更新，让我眼前一亮。

马尾之前的tab bar和市面上常见的应用没有什么区别，但这一次，马尾设计团队在tab bar上进行了新的尝试。

首先，标签种类减少，产品结构更加清晰。之前的“目的地”、“酒店”、“我的”全部移入页面，不再作为独立结构显示。只保留了“首页”和“旅行”(其中“旅行”部分=之前版本的“旅行商城”)，并增加了一个方向舵按钮，加强用户创建游记的操作。

并且当用户向下滑动页面时，“首页”和“去旅行”被缩小隐藏，为首页的内容流增加了更多可视化页面，方便用户阅读。

标签栏的改版一定与产品框架层的重组和产品重心的偏移有关。从这次马尾的标签栏改版可以明显看出马尾对主营收入业务的重视，排除了很多引导用户进入商城的干扰路径。而UGC内容的重要性也被提了出来。