标签栏外边框(标签栏工具栏傻傻分不清楚)

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

标签栏外边框(标签栏工具栏傻傻分不清楚)(1)

三期主题预览图:

标签栏外边框(标签栏工具栏傻傻分不清楚)(2)

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

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

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

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

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

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

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

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

标签栏外边框(标签栏工具栏傻傻分不清楚)(3)

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

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

标签栏外边框(标签栏工具栏傻傻分不清楚)(4)

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

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

标签栏外边框(标签栏工具栏傻傻分不清楚)(5)

二、舵式标签及衍生

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

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

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

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

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

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

标签栏外边框(标签栏工具栏傻傻分不清楚)(6)

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

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

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

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

标签栏外边框(标签栏工具栏傻傻分不清楚)(7)

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

标签栏外边框(标签栏工具栏傻傻分不清楚)(8)

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

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

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

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

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

标签栏外边框(标签栏工具栏傻傻分不清楚)(9)

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

从视觉层面分析:抖音主打短视频业务,用户进入抖音,首页即开始播放视频。视频内容纷繁复杂,如果我们把视频内容看做一个页面的背景,那么这个背景还是复杂的、动态的。如果在标签栏中增加图标,必定要缩小标签标题文字size。并且页面中的信息,基本都聚集在屏幕底部。增加图标反而还要增加用户的认知成本。

从用户群体分析:抖音下沉用户居多,并且用户知识层面及年龄分布极广。直接用大号的标签文字,反而有助于各个层面的用户更清晰地理解应用结构。

与此相反,花瓣APP就只采用了图标,而没有采用标签文字。

标签栏外边框(标签栏工具栏傻傻分不清楚)(10)

其实这么做有一定的风险,请设计师谨慎尝试。标签栏如果仅有图标,对图标的意义传达要求极高,即使设计出符合大众认知的图案,也会让用户产生疑惑,要通过尝试点击,来验证自己的猜想是否正确。

花瓣敢如此设计,一来是因为用户群体大部分都是设计师,对图案表达有一定的认知程度;二来是因为对比web版的花瓣,移动端所承载的功能相对比较简单,结构比较清晰。

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

所以综上所述,减少部分视觉元素可以减轻用户视觉负担。但减少图标的被接受程度是大于减少标签文字的。

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

年初,马蜂窝进行了10.0版本迭代。该版本对整个移动端页面进行了大幅改动,其中标签栏的样式与交互方式的更新,让我眼前一亮。

马蜂窝曾经的标签栏和市场内普遍的应用程序没有区别,而这一次大版本更新,马蜂窝设计团队对标签栏进行了新的尝试。

标签栏外边框(标签栏工具栏傻傻分不清楚)(11)

首先是标签类目减少,产品结构更加清晰。之前的“目的地”、“酒店”、“我的”全部移入页面之中,不再作为独立结构展示。仅保留了“首页”和“去旅行”(“去旅行”板块=前版本的“旅行商场”),新增了舵式按钮,强化用户创建旅行笔记的操作。

并且在用户下滑页面时,“首页”和“去旅行”被收缩隐藏,给首页的内容流增加了更多的视觉版面,方便用户阅览。

标签栏外边框(标签栏工具栏傻傻分不清楚)(12)

标签栏的改版,一定关系到产品框架层的重组和产品侧重面的偏移。从这一次马蜂窝标签栏改版,很明显地感受到了马蜂窝对主要营收业务的重视,剔除了许多引导用户进入商城的干扰路径。并且把UGC内容的重要程度也进行了拔高。

不论是从舵式标签的使用,还是合理减轻用户视觉负担,马蜂窝这一次标签栏改版都做的恰到好处,个人是非常欣赏的。但对于这次迭代,目前还没有相关用户数据可查,也没有查阅到相关设计师的改版总结文献,所以真实的用户效果和反馈我们可以再拭目以待一下。

五、总结

每一次讲到控件的进阶使用,我发现总离不开交互和产品商业价值。“进阶”就是为了突破规范的瓶颈,探索UI能够溢出表现层之外的价值。

所以标签栏也不例外,我们如果只关注于平台规范,那么标签栏只是一个承载框架的容器。但通过对众多应用程序的观察,许多产品、设计团队已经开始平衡控件的用户价值和商业价值。

多多去思考和学习,不仅仅能提升自己的视觉能力,对于产品思维方面也会得到一些进步。

作者:Howie_t;公众号:UCD耍家(ID:ucdplayer)

本文由 @Howie_t 原创发布于人人都是产品经理,未经作者许可,禁止转载。

题图来自Unsplash,基于CC0协议

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页