赞助商
立即赞助

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

交互设计3年前 (2021)发布 流光
1.9K 0 0

这是标签栏组件总结的第三,也后一了。

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

我们两的归纳里,分别解析了平台规范下的标签栏、标签栏重的图标元素的设与落。可回顾:

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

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

首先分清标签栏和工具栏

标签栏存在于应程序屏幕的,但存在于应程序屏幕的控件,就一定是标签栏吗?这可一定。

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

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

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

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

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

iOS人机交互规范调需要计者标签栏和工栏。对于只执行当前页面操作的工,不应该和能够切换页面的标签放置在一起。标签栏是用于体现产品的框架结构,而工栏却是直在当前页面产生交互,放在一起会使用户认知产生歧义。

你是不是会有个疑问,常常看见这样标签栏设计。他们不是在标签栏混入了操作工具吗?

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

舵式标签及衍生

常在社类APP中上图这的标签栏——标签栏中部因为一个大型按钮使标签栏形成了舵峰,所以被称为舵式标签。

般舵标签颜色、大小等视觉表现会被设计和其他普标签有所异,过视觉比吸引用户关注。

舵式标签通常产品框架体无关,多数应用程序使用舵式标签用承载系统功能。起初因社区类APP了激励方便用户随时随输出UGC内,所以把触发用户创作/发布的功能按钮置标签栏中。

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

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

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

舵标签毕竟是展现形,利用其背后「以标签栏承载要功能」法而衍生出变形使用手法也越来越普遍。越来越多应用采用舵标签或其原理,却不再单地用于承载品功能,而是配合销场景、付费场景,品变现、新赋能。

拼多多近一两用户拉新下足了功夫,以「邀请好友力,攒够100元可提」的营形式,促用户疯狂分享。拼多多的病毒式营主依于社交软件,由此还触发了微信新了一波封禁外链的新规章。从这层面看,拼多多的这次营活动无疑功的。

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

我们以通拼样的动总结出:标签栏所承载的信息,能触用户行为的能比Banner、功能列表等一系列表现形式要更胜一筹。

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

甩甩宝宝是腾融资的一款电产品。甩甩宝宝的标签栏在UI表现面已经脱离标准的标签栏规范进行创新,他们还通标签栏依附「分享」操,方便店主身份用户获客。一点和舵式标签原理有着异曲同工的用。

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

但毕竟舵式标签是打破常规,将功能按钮设计进标签栏中,所以我还是奉劝大家不要轻易尝试。因为一般舵式标签应该用什么功能或场,已经不单单是UI表现的问题。毕竟是现产品结构的标签栏,是在无时无刻地向用户传递着产品。

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

合理减轻用户视觉负担

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

坐拥4亿日活抖音APP标签栏含了标签文,而没有使用图标。

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

以下是我个观及看法。

从视觉层面分析:抖音主打短视频业务,用户入抖音,首页即始播视频。视频内纷繁复杂,如果我们把视频内看一页面的背景,那么这背景还复杂的、动态的。如果标签栏中增加图标,必缩小标签标题文字size。并且页面中的信息,基本都聚集屏幕底部。增加图标反还增加用户的认知本。

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

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

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

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

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

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

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

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

初,马蜂窝行了10.0版本迭。该版本对整移动端页面行了幅改动,其中标签栏的样式与交互方式的新,让我眼一亮。

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

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

首先是标签类目减,产结构更清晰。之前的「目的地」、「酒店」、「我的」全移入页面之中,再作为独立结构展示。仅保留了「首页」和「旅行」(「旅行」=前版本的「旅行商场」),增了舵式按钮,强户创建旅行笔记的操作。并且在户滑页面时,「首页」和「旅行」被收缩隐藏,给首页的容流增了更多的视觉版面,方户阅览。

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

标签栏的改版,一定系到产框架层的重组和产侧重面的偏移。从这一次马蜂窝标签栏改版,很明显地感受到了马蜂窝对要营收务的重视,剔除了许多引导户进入商城的干扰路径。并且把UGC容的重要程进行了拔。

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

总结

每一次讲到控件的进阶使用,我现总离不开互和产品业价值。「进阶」就是为突破规范的瓶颈,探索UI能够溢出表现之外的价值。

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

多多去思考和学习,不仅仅能提升自己视觉能力,于品思维也会到些进步。

欢迎家关注作者微信公众:「UCD耍家」

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

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

弹窗现在越来越成为了个磨人的小妖精。 早年我们受够了太多不明错误弹窗的骚扰,现在又却要承受各种广告弹窗的轰炸。 我...
ui设计
这两天一直在构思36氪评论优化方案,也就整理了行业内做评论的常见方法,这篇文章我们就来聊聊设计评论功能时,需要考虑的那...
ui设计
本文为设计团队内部的模拟项目「医疗魔方」,目的是帮助设计师们在这个过程中学会建立有效的用户画像,掌握产品设计中的全局...
交互设计
QQ-自习室是一款以学习为特色,基于手机QQ平台的陪伴型多人直播产品,简单来说就是一个线上的自习室。作为疫情期间诞生的创新...
QQ自习室
日活应该是产品 App 最核心的指标之一。 日活是每天用户使用产品的人数。只有日活持续增长,公司才能继续发展盈利。提升不了...
DAU
区分取消与关闭,可以很大程度上避免丢失用户已操作的内容。在关闭视图之前保存用户的更改,使用文本标签而不是「X」图标,并...
交互设计
推荐算法出现之前,寻找信息的主场景是通过搜索获取。 用户通过搜索框,输入目标的关键词进行查询。这一过程是用户的主动行...
交互设计
对于设计师而言,作品集是体现自身工作能力和项目经验的面试依据。本文将结合示例,说明初中级交互设计师在准备作品集时,应...
交互设计