版权申明：本文出自“米希吖”原创，感谢“米希吖”的原创教程分享！
不知道大家有没有注意到这样一个现象，换季的时候商场的衣服会打上折扣的的标签；节日活动的时候超市的商品会打上特价的标签；工厂的产品会打上合格不合格的标签，这么做的目的是什么呢？
在UI界面设计中，标签的特征跟生活中的标签也很相似，用以标注内容分类或内容要点，方便用户快速定位自己需要的内容目标。标签还有满足用户的隐形需求的作用，当用户在犹豫是否要进行下一步操作的时候，标签在一定程度上加强了用户的需求欲望，促进下一步操作。
今天这篇文章将从一下3点讲述：
一、标签的样式
二、标签在不同类型产品中的应用
三、总结
线框标签是比较弱的标签样式，在列表页、详情页都有出现，单个或多个组合出现，分为彩色和灰色2种。
1.1彩色线框标签：在模块中信息层级较高，是希望需要引起用户关注的内容。
1.2灰色线框标签：是所有标签类型中视觉表现力最弱的形式之一，常作为配角使用。
设计要点：背景和文字颜色在同一色相内，明度和饱和度适当调整
相对于线框标签的视觉表现力和整体性都更强一些，常单个或单个类群出现。
2.1彩色标签：在列表中信息层级较高
2.2灰色标签：相对于灰色线框标签表现力更强一些，，常与有颜色的标签搭配使用。
是前2种标签类型的集合，整体表现形式相对更强一些。
深色块标签视觉表现力更强一些，所有多应用在信息层级较高的场景中，如果需要标签的类型更突出还可以在色块上增加图标
视觉效果更加直观，设计要点：图形需要表意明确，在用户认知范围内。
色块标签、线框标签、图形标签等多种标签类型的组合，适用于表达丰富的内容。
通常采用高饱和度彩色文字说明，起到辅助说明的作用。
FEVTE编注：更多UI设计教程，和UI设计理论知识请访问飞特网UI设计教程栏目：https://www.fevte.com/plan/UIdesign/
对于用户来说，标签相当于内容的关键词，可以提高用户的浏览效率，对于设计来说，多样化的信息展现方式可以丰富整个页面，提高视觉表现力。那么标签在不同类型产品中的应用有什么特点呢，让我们一起来看看。
内容说明标签可分为：1.文字列表为主的信息说明 2.图片上的说明
1.1文字列表为主的信息说明：使用在以文字内容为主的页面、图文结合的feed流页面中。
1.2图片上的说明：如视频类产品，在图片上增加标签时多使用饱和度比较高的色块标签，因为这类图片本身色彩比较复杂，标签作为辅助说明需要提高视觉表现力来突出展现。
内容平台类产品，达到为其他同属性内容引流的目的，通过标签来满足了用户想浏览其他相关内容的潜在需求。如小红书的话题标签，图虫的圈子标签。
以图片为主的UGC和社交领域，用户通过图片上的标签找到了自己感兴趣的内容，这些属性就是用户的兴趣点，对内容和图片可以更快速的解读，大大降低了阅读成本。
以小红书为例，当用户触摸屏幕时，图片上会出现添加的相关标签，以白色描边+黑色半透明磨砂质感作为标签背景，同时有位置指向，一张图片可以添加文字、语音、背景音乐等标签类型。这种方式也是一种新的沟通方式，效果比图片加上大段文字描述生动了很多。当这张图片被赋予了多个属性，标签和用户之间的互动就发生了。
电商快销类产品为了达到业务目标，会在产品列表里添加很多促销或者价格标签来吸引用户点击购买，淘宝商品列表使用的标签都是彩色线框标签，网易考拉的会员优惠标签用深色块样式突出信息层级，这么设计应该是引导用户开通会员。如下图：
携程、美团酒店模块，不同的内容标签用不同颜色区分开，层次更加清晰，驾考宝典列表页面用灰色标签提炼卖点，用彩色标签突出优惠信息。如下图：
美团外卖以彩色线框标签搭配浅色底深色字的评语标签来吸引用户，大众点评以单个文字色块的样式突出折扣信息。如下图：
饿了么的标签，关于折扣使用的是彩色线框标签、搭配浅色深字的评语标签来吸引用户，到了产品详情页，突出领取优惠标签，为什么这么设计呢？因为满减的同时还有优惠券可领，这属于超出预期值的需求点，能够很大的提高用户点外卖的体验。如下图：
飞特游客
委托设计