在线产品标签栏的解构与分析 国泰金牛

股票行情  2021-03-12 23:54:17

编者按:我们在使用产品时,经常会使用标签或标题来查找,这样用户可以更快地找到预期目标;清晰有效的标签也能在一定程度上提升用户体验,用细节提升好感度;本文作者分享了对在线产品标题栏的解构和分析。我们一起来看看。

Tab Bar是界面设计中不可避免的话题。大多数产品需要一个视觉美观、反馈清晰的标签栏来传达品牌形象。

本文将讨论与标签栏相关的设计细节,并试图分析设计背后的思维;所有案例均来自各大在线产品,观点仅来自个人粗浅分析。如果有错,希望大家多多指教。

首先,了解标签栏的作用

根据iOS人机交互指南,Tab Bar是组织APP结构的基本控件,是平面的,只用于导航。

标签栏不应执行任何操作。如果需要执行操作,工具栏);应该选择。标签的数量一般为3-5个(对于手机来说,pad上可以有更多的标签)。如果标签太多,最后一个标签可以是“更多”,里面可以存储更多的标签。

标签栏的主要功能如下:

1.定位和导航&突出品牌

1)定位和导航

通常,标签栏位于每个一级页面的底部。选择标签以清楚地指示用户的当前位置。当用户想转到其他一级页面时,只需切换底部标签即可。

2)突出品牌

主页是产品给用户留下第一印象的关键一步。标签栏中的视觉元素,包括所选标签的颜色、图标形式、组合样式等。,都体现了产品的气质。

ii。整理标签列分类

在不同的维度下,标签栏可以分为多种类型;我们不妨从以下五个维度对标签栏进行分类,以便观察和研究不同分类方法下标签栏的不同特征。

1。位置维度

常见的tab条一般附着在屏幕底部,不随用户手势滑动而改变位置;然而,一些产品已经进行了一些位置调整以满足用户的使用场景,这些场景可能处于浮动状态或者可能随着用户手势的改变而改变。

常规底部抽吸的标签栏:

优点:更符合用户心意,用户认知和运营成本最低。您可以随时轻松切换页面。缺点:页面底部约90pt(刘海模式)被遮挡,内容层显示效率有一定程度的转移。悬挂等级的标签栏:

优点:屏幕遮挡面积小,为用户浏览信息赢得了更多的视觉空间。缺点:用户第一时间会觉得陌生,运营成本增加。尤其是在Vipshop的情况下,左侧三个标签比较拥挤,单手拿着容易被误操作。字典和马蜂窝给出了一个折中的解决方案:根据用户的操作手势推断出用户的意图,决定是否显示/隐藏标签栏。

当用户上滑屏幕时,我们认为用户的意图是浏览下面更多的信息,所以tab条一直隐藏到用户下滑屏幕,tab条才显示出来,为用户提供了方便的跳转操作。

2。功能维度

标签栏由多个标签组成。通常标签显示形式相同,没有重点;但是在一些产品中,为了突出某个核心功能,通常会在视觉上强调该功能对应的标签。

3。标签组合模式维度

组成标签栏的元素有:文本、图标、底板等...通过排列组合不同的元素,可以形成很多不同的组合结果,不同的组合对应不同的tab条样式。

纯文本:

两个简短的视频产品(颤音和:Aauto更快)和乐器高德地图选择了纯文本的风格;纯文本的风格对用户注意力的视觉影响最小(众所周知,图像比文字更具视觉吸引力),用户可以更多地关注内容视图和信息本身。

视频流产品需要创造沉浸感,让用户能够连贯自然地观看尽可能多的内容。因此,对标签条的视觉比例进行收敛是合理的、科学的。

同样,对于工具性很强的高德地图,用户的使用场景多集中在室外,物理环境混乱复杂,界面需要最大程度帮助用户快速聚焦;地图视图对于用户的视觉来说无疑是最重要的地方,弱化标签栏的视觉表现是一个很好的设计思路。

纯图标:

相比国内产品,国外产品往往使用纯图标型的标签条。个人认为,三个抽样产品(FB、IG、Twitter)都是高人气产品,用户对产品结构的心智模型已经建立和完善。

用户不需要阅读文字就能理解标签的含义,更容易通过位置记忆来定位,图标很可能只是起到识别的辅助作用。

继承了以上思路,也是知名度很高的产品。为什么微信、支付宝等国产国货没有去掉标签栏的文字?原因可能与目标用户群体的年龄分布有关。上面文章中使用纯图标的海外产品覆盖的用户群体比较年轻,而国内国货几乎达到各个年龄段的覆盖;去字对表意文字的影响相对不可控。对于相当一部分中老年人用户来说,仅仅靠图标是很难理解意思的。

图标加文本:

最常见的组合形式是最安全且不易出错的。

特殊风格:

视觉传达是为功能表达服务的,用更高调、更醒目的视觉形式突出需要强调的功能是自然的。在某些情况下,可以单独突出一个强功能,比如传递的释放功能;在其他情况下,应该突出的不是某个特定的功能,而是帮助用户更好地定位自己的选定状态(比如美团外卖)。

4.图标样式维度

根据图标的形状,图标可以分为三类:线性图标、平面图标、线平面组合图标。根据图标的视觉风格,可以分为:平面、微立体、双色、毛玻璃效果等…

线性图标:选定的图形和未选定的状态都是线性图标。

优点:外形美观,有质感。缺点:不同的状态只能通过颜色或透明度来区分,选中状态和未选中状态的差异相对较小(尤其是在黑暗模式下),这可能会导致用户定位当前位置时出现偏差。

区域图标:选定状态和未选定状态都是区域图标。

优点:外形紧凑,色块更容易吸引用户注意力。缺点:只能用颜色或透明度来区分不同的状态。

line-surface组合图标:选中状态为平面,未选中状态为线性图标。

不同状态差异大,用户更容易快速定位自己的位置;选择和取消选择两组对应线性和面积的图标,具有较大的视觉显示空间,是目前采用最广泛的设计策略。

5。操作维度

为了配合节日、庆典、纪念日等活动,标签栏可能需要特殊设计。

为了营造特殊氛围,需要对标签栏进行或多或少的修改。当特殊氛围需要浓厚的时候,比如大促销,春节等。,标签栏中的图标在外观上与平时有很大不同。

优点:页面整体氛围一致,温馨。缺点:标签栏中图标的识别度很低,需要用户记忆位置或阅读文字来拾取信息,降低了使用效率。

第三,细化视觉规范

从整体角度对标签条进行分类,然后从四个细节对标签条进行拆解。

1。布局模式&分段模式

在大多数情况下,根据标签的数量平均划分页面宽度。对于非列的特殊标签列,标签的宽度不受屏幕宽度的影响,中间悬浮在视图底部;“拆分”是指标题栏和顶部内容视图之间的拆分。

如何营造分裂感?有三种方法:

越来越多的产品选择平面视觉风格,投影风格已经失去了势头。以微信为符号,去掉头上的黑色导航条,换成磨砂玻璃效果;结合其他巨头产品的迭代情况,不难看出,目前的界面设计思路是一个不断变繁为简、去伪存真的过程。

降低视觉噪音,让用户更加关注信息本身,削弱不必要的视觉感知,也是信息爆炸时代的大势所趋。

2.背景

会从颜色、形状、大小等角度进行分析比较。

3。图标

下面只讨论一些标题栏中图标的细节。关于画图标的细节太多,适合单独开新话题。这里不展开。

4。文本

根据iOS人机交互指南,界面中的文字不能小于11pt。但是国内大部分产品把标题栏大小定在10pt。个人分析是因为同样大小的汉字视觉效果大于英文。

第四,组织互动细节

用户向系统发送操作指令,系统给出反馈。当用户接收到反馈信息时,就完成了完整的交互。

我们将重点讨论几种常见的标签点击反馈形式。

观察上述点击反馈模式,结合直观感受和产品属性:

硬切:给人一种稳定可靠的感觉。微信、支付宝、美甲、蚂蚁财富、京东金融、天猫等产品均采用无过度动画的机型;可以看出,这种类型适合功能较重的社交类产品和稳定性严谨的金融类产品,给用户传达了一种稳重、稳定的感觉。如果过多的视觉装饰是不必要的,那就麻烦了。

规模类:稳定感和活力相对均衡。大多数在线产品都使用这种动画模式,如qq、淘宝、美团、网易云音乐、今日头条等。值得探讨的是,微信和qq,一个采用非过度动画模式,一个采用缩放模式;同样,天猫采用非过动画模型,淘宝采用缩放模型;可见,在产品功能高度相似的情况下,不同的产品定位和品牌传播是设计的重要依据。

线长:视觉效果复杂华丽,吸引用户注意力,动画耗时长。使用该模式的代表产品有JD.COM和马蜂窝;视觉表达非常丰富,容易与同类产品区分开来,向用户传达一种产品细节饱满的感觉;但是,会不会对用户产生一定程度的视觉干扰?个人认为与产品使用频率密切相关。

对于以出行策略为主要功能的马细胞来说,打开产品本身的频率并不高。在有限的曝光时间内,尽量给用户留下记忆体验,让竞争产品有所区别;JD.COM的标签转换效应个人认为略复杂;动画包括线增长+填充增长+细节点缀。这么多变化加在一起,难免会引起过度关注。

填充成长类:视觉上丰富饱满,给人温暖活泼的印象。Qq空间和自由使用这个表达。

补飞班:很有活力,风格新颖。虎牙直播和花椒两个直播产品采用了这种方式。新颖的风格和情感细节拉近了产品与用户的距离,同时进一步增加了产品的娱乐性。

除了视觉反馈,触觉(振动)和听觉(提示音)也可以结合。

视觉与触觉相结合的产品有百度网盘、淘宝电影等。触摸的加入使得反馈更加清晰,点击感知更加强烈和具体。

视觉和听觉结合的产品是淘宝。每次点击标签,都会伴随着一个淡淡的提示音,增强了你的愉悦感。还没有观察到集视觉、触觉和听觉于一体的产品。

IOS自带的AirDrop功能也有类似的体验:发送方将文件传递给接收方时,发送方会有视觉和触觉反馈,接收成功后会有声音提示。对于用户来说,其实用户同时接收到了三维的信息反馈。

我们上面讨论的是从标签a切换到标签B的反馈..那么,当你在选择标签a后再次点击标签a时,反馈是什么?我们不妨分几类进行讨论:

1)内容流页面

点击对应的页面标签=回到顶部或者刷新内容(淘宝首页和微淘);点击对应的页面标签=直接刷新(颤音首页的下拉刷新只适用于第一个视频,后续的下拉手势是看前一个视频。点击标签栏首页直接刷新,解决了手势冲突的问题)。2)非内容流页面(固定内容)

点击对应页面标签:无反馈(微信阅读的书架页面)

v .趋势分析&优秀案例赏析

观察几个产品的迭代,不难发现不同的产品在视觉上无一例外的做减法。

VI。总结

以上是我个人对标签栏的整理和总结。虽然标签栏是一个相当基本的控件,但有许多设计细节值得深入挖掘。

感谢阅读,欢迎交流!

这篇文章最初是@doo_W发表的,大家都是产品经理。未经作者许可,禁止转载。

标题图来自Unsplash,基于CC0协议


以上就是在线产品标签栏的解构与分析国泰金牛的全部内容了,喜欢我们网站的可以继续关注希兴金融网其他的资讯!

相关推荐

建筑维修的第一个迹象可以赚到多少钱,300958建筑维修达到了新的收入预测和上市价格
新股建设和认购的认购时间为3月16日,股票代码为300958,上市地点为深圳证券交易所创业板,发行价格为8.53元/股。股,市盈...
洪磊:建立现代金融体系是当前最紧迫的任务
HongLei在私募股权投资基金与国家技术创新峰会上发表了演讲厦门,9月11日(作者李琳,本报记者))9月10日下午,私募股权投...
富春股份:拟与字节跳动子公司QuantumJump共同增资收购宝石航空股份
1月11日,首创获悉,富春股份发布公告称,已与北京量子跃迁科技股份有限公司(以下简称"量子跃迁")、上海盖迈尔网络科技有限公司合...
医药研发走
11月19日,首都国家获悉,杭州百诚医药科技股份有限公司(公司简称:百诚医药)创业板IPO申请已于2020年11月17日获深交所...
轻松获得IPO批文:用研发构筑技术壁垒,用创新构筑竞争优势
近日,国家知识产权局发布公告,公示第22届中国专利奖评审结果。专注于健康产品创新和研究的高新技术企业因入围两项专利而受到更多关注...
招商局基金王晓庆:深入研究把握时代历史机遇
法律逐渐年轻化,年更新。值此春节之际,我谨代表招商基金,向投资者致以诚挚的祝愿。一年来,中国多层次资本市场全面优化顶层设计,全面...
股市中常见的错误方法
市场预测和股票交易是两回事,交易心理和交易方式也是。无论交易者对市场了解多少,是否准确,交易心理是否正常,错误的交易方式还是层出...
信托收益年内首次出现向上的房地产信托
临近年底,信托公司争相规模化,房地产信托产品集中发布。11月,集合信托产品的募集规模出现反弹,结束了下半年以来监管收紧导致的下滑...
k线形图大全洛阳集资平台哪些集资公司比较安全_
k线图最近,知名不良资产投资管理公司oakcapital的董事长兼联合创始人霍华德。霍华德马克在他的官方网站上发布了最新的备忘录...

友情链接