超多案例|不容小觑的标签Tag设计分析

2024-10-8    资深UI设计者

 
 
超多案例|不容小觑的标签Tag设计分析
 
 
 
 
 
 
商家会做各种力度的促销活动。大家现在打开APP会不会下意识会关注下标签Tag里的信息,比如电商类活动,我们会关注有没有折扣、活动、高性价比的服务等等~
 
内容类的会关注是否带话题、发布人或是内容的属性;功能类的会关注类型选择或者是相关引导操作。
其实不同用户对不同平台的标签感知度以及能够投入的注意力是不同的。
 
比如大多用户对
重消费重决策
的电商产品标签的关注度要远远高于内容型和功能型产品。但凡商品有优惠,用户火眼金睛一定会关注到,生怕错过一根羊毛;那这个情况下,用户对标签的感知度是比较强的,样式设计的相对突出用户是不会太反感的。
而像偏浏览型的内容产品,如果露出太多且太重,用户可能会被打断浏览动线从而产生不好的使用体验。
所以不同类型产品,标签设计一定要适用于自身的产品调性。不违和且恰到好处的提醒用户达成产品策略。
 
目录
一、标签的了解
二、为什么需要标签
三、标签的分类
四、不同标签类型的使用与设计
五、总结
超多案例|不容小觑的标签Tag设计分析
 
 
一般对标签给出的定义是“用来进行标记和分类”。一是用于标记事物的属性和维度,二是进行分类。
整体基于功能属性和信息层级,将标签的样式区分了多种样式。由此拓展到移动端我们在做标签的设计时可以以此作为参考。
功能维度
来看分为七种,分别是:
1、基本标签
2、动态添加和删除
3、添加动画
4、可选择标签
5、预设状态的标签
6、多彩标签
7、图标按钮
超多案例|不容小觑的标签Tag设计分析
 
 
视觉维度
分为五种,分别是:
1、灰色描边
2、透明度彩色
3、透明度彩色+图标
4、实色彩色
5、实色彩色+图标
超多案例|不容小觑的标签Tag设计分析
 
 
 
维基百科给出的定义是:标签是指贴在包装或产品上的一张纸、塑料薄膜、布、金属或其他材料,上面写有相关产品或物品的信息。衣服上的标签又称吊牌,它通过绳子或长条的塑料与衣服相连。
超多案例|不容小觑的标签Tag设计分析
 
 
不管是谁的定义,我们可以观察到几个关键词,比如
“分类” “标记” “相关信息” “向用户展示” “警告用户”
;通过几个关键词我们可以接着思考,标签为什么会被逐渐应用到移动产品当中?其次标签在产品中又有那些分类呢?
超多案例|不容小觑的标签Tag设计分析
 
 
从两个维度来看:一是对于产品而言为什么需要展示标签【标签对产品实际产生的价值/收入?】;二是对于用户而言为什么需要展示标签【用户可以通过标签获得什么价值/体验?】
超多案例|不容小觑的标签Tag设计分析
 
 
我分别从电商产品、内容产品、功能产品,看一看标签对于产品方和用户方的作用是哪些。
 
一、电商产品
产品侧:
1、通过
条件性让利
使消费者感到占了便宜,从而刺激消费
提升转化
,而标签就是吸引用户注意力的抓手。
2、通过标签为用户提供更多的
个性化推荐
,以及被搜索引擎和推荐系统发现和推荐,提升商品的
曝光率和销量
用户侧:
1、及时通过标签识别关注并享受到优惠,
薅的到羊毛
2、通过标签
获得更多信息
 
二、内容平台
产品侧:
关注的更多是
内容引流
,而标签则是用来
内容归类及提示用户
的媒介。
用户侧:
通过标签来
识别判断
优质的博主及内容、或是感兴趣且合适的内容信息。
 
三、功能平台
产品侧:
关注的更多是
引导用户操作
,而标签可以用来
信息传递和提示用户
用户侧:
标签可以适时辅助用户
高效完成任务
,快速获取到信息且有一个较好的使用体验。
超多案例|不容小觑的标签Tag设计分析
 
 
超多案例|不容小觑的标签Tag设计分析
 
 
接下来还是从电商、内容、功能这三大类产品来进行标签种类的划分,将其划分为6种:
 
1、功能标签
2、内容标签
3、商品标签
4、活动标签
5、价格标签
6、用户标签
超多案例|不容小觑的标签Tag设计分析
 
 
 
1·功能标签
功能标签划分为
筛选分类
内容聚合
两种。
超多案例|不容小觑的标签Tag设计分析
 
 
2·内容标签
内容标签划分为 
话题、内容属性、内容提炼、内容弹幕 四种。
超多案例|不容小觑的标签Tag设计分析
 
 
3·商品标签
商品标签划分为 
品牌/平台、促销利益点、服务保障、物流时效 四种。
超多案例|不容小觑的标签Tag设计分析
 
 
 
4·活动标签
活动标签划分为 
大促角标、营销活动、营销招手、榜单 四种。
超多案例|不容小觑的标签Tag设计分析
 
 
 
5·价格标签
价格标签划分为 
促销价、专享价 两种。
[促销价] 指商品设置了促销,这个价格就需要自动计算并展示给消费者,一般包含了补贴,满减,预售,以及直降折扣等等。
[专享价] 指商品提供给某一些人群或某一个区域的价格,比如店铺会员,平台会员等
超多案例|不容小觑的标签Tag设计分析
 
 
 
6·用户标签
用户标签划分为 
用户交易行为、用户身份属性 两种。
用户交易行为是指用户过往在平台的一些购买记录、评论数据;而用户身份属性大多是指会员等级划分。
超多案例|不容小觑的标签Tag设计分析
 
 
上面了解了标签的定义、用处、分类,接下来再看看如何去进行标签设计~
超多案例|不容小觑的标签Tag设计分析
 
 
主要从
视觉维度
切入,拆分为三点来看:
标签的色彩、标签的形状、标签的构成
超多案例|不容小觑的标签Tag设计分析
 
 
一、标签色彩
不同色彩、用色的面积/重量,给到用户的感知以及品牌传达是不同的。
超多案例|不容小觑的标签Tag设计分析
 
 
 
1·品牌色延展
不同产品的标签多采用 品牌色 延展应用。比如,京东红、知乎蓝、豆瓣绿;当然除了主要应用自身的品牌色,依据品牌颜色映射以及业务自有颜色,也会延展出一些辅助色。
超多案例|不容小觑的标签Tag设计分析
 
 
 
2·用色面积/重量
用色面积和重量,可以拆分五个维度去看分别是:区块面积、描边粗细、颜色饱和、字体、字重字色变化。
超多案例|不容小觑的标签Tag设计分析
 
 
而标签用色面积主要依赖于标签想要 
传递的信息及层级的划分。
我拿电商产品举例 (上图由左往右分别是京东、淘宝、拼多多):
对于用户而言是 
重要决策信息
时,一般会采用饱和较高的红色进行完全填充。
对于用户而言是 
次要决策信息
时,可采用正负形样式。
对于用户而言是 
一般决策信息
时,可采用浅色描边样式。
对于用户而言是 
弱决策信息
时,可采用灰色描边或者淡浅色拖底标签。
通过不同层次的颜色表达,来进行整体内容层级的划分,并将多个信息有序的传递给用户。以此去更好的承接产品策略。
 
二、标签形状
标签的形状决定了整体的 体积占比、对文字信息的承载包容 、与周边环境的互相作用。
主要的标签形状有方形、椭圆、气泡、异形四种。
超多案例|不容小觑的标签Tag设计分析
 
 
1·方形标签
方形标签更接近现实生活中我们随处可见的一些标签样式,比如衣服上的标签、一些危险警告标签,其次在页面场景中较多标签排序时,方形标签显得更
规整有序
超多案例|不容小觑的标签Tag设计分析
 
 
2·椭圆标签
椭圆标签,更圆润,随着进来各大APP推崇大圆角卡片的设计手法以来,一些 
信息归类 
多用椭圆形标签表达。其次当页面多为方形标签时,一个椭圆标签恰恰能差异化突出该信息。
【需要注意的是,椭圆标签类似可操作的button,多用于可点击或者选择触发的一些标签样式】
超多案例|不容小觑的标签Tag设计分析
 
 
3·气泡标签
气泡标签有 
明确的指向性
且 
相对独立
,多用在价格表达、营销招手以及一些新功能提示上。
超多案例|不容小觑的标签Tag设计分析
 
 
4·异形标签
异形标签一般形状会更自由一些,设计师发挥的空间相对较大,用于表达较强业务属性上,比如大促、营销活动、
重点内容引流
。因为形状的差异性表达,用户一般会首先注意到。
超多案例|不容小觑的标签Tag设计分析
 
 
【正因为异形标签形状相对自由,因此需要注意与周边环境的相互作用,当异形标签放置在图片上方时,我们要依据图片的大小和图片上方的信息,考量标签的样式以及两者之间的排版关系。】
 
三、标签构成
标签的构成主要是标签的组合表达,常规来看是一个框框里面一段文字,除此之外还有纯文字表达、以及特殊样式【文字+ICON】
超多案例|不容小觑的标签Tag设计分析
 
 
 
纯文字表达
纯文字表达的应用场景主要有两种。
第一种在内容产品中多表示话题,与前后内容关联,以此触发用户流入下一层内容池。
第二种应用在多产品中的次提醒内容,比如商品的辅助信息、用户的交易行为、或者文章的关键词、作者属性等。
超多案例|不容小觑的标签Tag设计分析
 
 
ICON+文字
这种一般可以划分为三类,分别是常规样式(独立icon+标签字段)、正负形|色块区隔(独立色块强化展示icon)、修饰文字(文字作为主修饰元素展示)
我们可以发现,这三种类型的标签区块面积的逐级增加,透传能力也随之逐级增强。
此外这几种结构的标签主要应用在
品牌/平台、营销活动、用户身份、功能属性。
超多案例|不容小觑的标签Tag设计分析
 
 
不同的产品依据自身的调性和诉求会呈现出不同层级样式的标签,尽管如此我们在设计中始终要注意:
在保持整体表达手法统一的情况下寻找差异;除了基础属性的统一,还需要尽量和自身产品的设计手法保持一致。
超多案例|不容小觑的标签Tag设计分析
 
 
标签虽然只是一个小小的视觉表达,TA可以是不同的形状、大小、颜色,但却很考量设计师是否能够着眼于细节。基于产品策略和用户体验去设计,助力产品正向的提升转化、有效的传递信息、友好的引导用户操作、并能形成统一的设计体系。
 
总结下来有几个关键点需要注意:
1、
明确标签的作用和用途:
在设计标签之前,设计师需要了解标签的作用和用途。有助于我们更好地选择适当的样式、颜色和位置。
2、
选择适当的颜色和样式:
标签的颜色和样式应该与整个UI设计风格保持一致,同时需要注意与其他元素的整体性和对比,确保标签易于辨认和识别。一般情况下我们可以选择相对突出的颜色,吸引用户的注意力,但也要注意避免过多的颜色使用导致视觉混乱。
3、
考虑标签的位置和大小:
标签的位置和大小也非常重要,因为它们决定了标签的可见性和易用性。标签通常放置在内容上方或下方,并且与内容之间有一定的距离,以避免视觉混乱。标签的大小应该根据其重要性和内容长度来确定,以确保标签的易读性和易操作性。
4、
使用简洁明确的文本:
标签的文本应该简明扼要,而且具有表达清晰、易懂的特点。
5、
确保标签的一致性和可预测性:
标签的一致性和可预测性是保证用户体验的关键。它以避免用户的困惑和误解。例如,标签的样式、位置和文本应该在整个UI中保持一致,以便用户更容易理解和使用。

 
 

作者:cclava
链接:https://www.zcool.com.cn/article/ZMTYzNTc2MA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

 

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司

银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

 

分享本文至:

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档