UI设计中标签设计总结

　　在UI设计中，标签的特征跟生活中的标签也很相似，用以标注内容分类或内容要点，方便用户快速定位自己需要的内容目标。标签还有满足用户的隐形需求的作用，当用户在犹豫是否要进行下一步操作的时候，标签在一定程度上加强了用户的需求欲望，促进下一步操作。今天我就针对UI设计中标签设计总结进行简单的说明。

　　一、标签的样式

　　1.1线框标签

　　线框标签是比较弱的标签样式，在列表页、详情页都有出现，可单个或多个组合，分为彩色和灰色2种。1)彩色线框标签：在模块中信息层级较高，是希望引起用户关注的内容。2)灰色线框标签：是所有标签类型中视觉表现力最弱的形式之一，常作为配角使用。

　　1.2. 浅色色块背景，深色文字标签

　　设计要点：背景和文字颜色在同一色相内，明度和饱和度适当调整相对于线框标签的视觉表现力和整体性都更强一些，常单个或单个类群出现。1)彩色标签：在列表中信息层级较高2)灰色标签：相对于灰色线框标签表现力更强一些，常与有颜色的标签搭配使用。

　　1.3. 浅色色块背景加边框，深色文字标签

　　是前2种标签类型的集合，整体表现形式相对更强一些。

　　1.4. 深色块标签

　　深色块标签视觉表现力更强一些，所以多应用在信息层级较高的场景中，如果需要标签的类型更突出还可以在色块上增加图标。

　　1.5. 图形标签

　　视觉效果更加直观，设计要点：图形需要表意明确，在用户认知范围内。

　　1.6. 组合型标签

　　色块标签、线框标签、图形标签等多种标签类型的组合，适用于表达丰富的内容。

　　1.7. 文字说明型标签

　　通常采用高饱和度彩色文字说明，起到辅助说明的作用。

 

　　二、标签在不同类型产品中的应用

　　对于用户来说，标签相当于内容的关键词，可以提高用户的浏览效率，对于设计来说，多样化的信息展现方式可以丰富整个页面，提高视觉表现力。那么标签在不同类型产品中的应用有什么特点呢，让我们一起来看看。

　　2.1. 内容说明

　　内容说明标签可分为：1.文字列表为主的信息说明 2.图片上的说明

　　(1) 文字列表为主的信息说明：使用在以文字内容为主的页面、图文结合的feed流页面中。

 

　　(2) 图片上的说明：如视频类产品，在图片上增加标签时多使用饱和度比较高的色块标签，因为这类图片本身色彩比较复杂，标签作为辅助说明需要提高视觉表现力来突出展现。

 

　　2.2. 内容互动(话题标签)

　　内容平台类产品，UI设计中标签设计总结https://www.aaa-cg.com.cn/ui/2604.html?gpf为达到跟其他同属性内容引流的目的，通过标签来满足用户想浏览其他相关内容的潜在需求。如小红书的话题标签，图虫的圈子标签。

 

　　2.3. 图片说明

　　以图片为主的UGC和社交领域，用户通过图片上的标签找到了自己感兴趣的内容，这些属性就是用户的兴趣点，对内容和图片可以更快速的解读，大大降低了阅读成本。

 

　　以小红书为例，当用户触摸屏幕时，图片上会出现添加的相关标签，以白色描边+黑色半透明磨砂质感作为标签背景，同时有位置指向，一张图片可以添加文字、语音、背景音乐等标签类型。这种方式也是一种新的沟通方式，效果比图片加上大段文字描述生动了很多。当这张图片被赋予了多个属性，标签和用户之间的互动就发生了。

　　2.4. 产品展示

　　电商快销类产品为了达到业务目标，会在产品列表里添加很多促销或者价格标签来吸引用户点击购买，淘宝商品列表使用的标签都是彩色线框标签，网易考拉的会员优惠标签用深色块样式突出信息层级，这么设计应该是引导用户开通会员。如下图：

 

　　携程、美团酒店模块，不同的内容标签用不同颜色区分开，层次更加清晰，驾考宝典列表页面用灰色标签提炼卖点，用彩色标签突出优惠信息。如下图：

 

　　美团外卖以彩色线框标签搭配浅色底深色字的评语标签来吸引用户，大众点评以单个文字色块的样式突出折扣信息。如下图：

 

　　饿了么的标签，关于折扣使用的是彩色线框标签、搭配浅色深字的评语标签来吸引用户，到了产品详情页，突出领取优惠标签，为什么这么设计呢?因为满减的同时还有优惠券可领，这属于超出预期值的需求点，能够很大的提高用户点外卖的体验。如下图：

 

　　好了，以上就是今天分享的内容，欢迎大家留言讨论。因此，您现在已经了解了与UI设计师的工作相关的主要技能。如果您想了解更多信息，请给我点个关注，我之后还会继续发包含有关在该领域工作的更多相关文章。