UI界面标签设计总结

1年前发布

原创文章 / UI / 观点
泡芙喵F 原创,如需商业用途或转载请与泡芙喵F联系,谢谢配合。

在UI界面设计中,标签的特征跟生活中的标签也很相似,用以标注内容分类或内容要点,方便用户快速定位自己需要的内容目标。

不知道大家有没有注意到这样一个现象,换季的时候商场的衣服会打上折扣的的标签;节日活动的时候超市的商品会打上特价的标签;工厂的产品会打上合格不合格的标签,这么做的目的是什么呢?

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

 

今天这篇文章将从一下3点讲述:

一、标签的样式

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

三、总结


一、标签的样式

1.线框标签

线框标签是比较弱的标签样式,在列表页、详情页都有出现,单个或多个组合出现,分为彩色和灰色2种。

1.1彩色线框标签:在模块中信息层级较高,是希望需要引起用户关注的内容。

1.2灰色线框标签:是所有标签类型中视觉表现力最弱的形式之一,常作为配角使用。

 

2. 浅色色块背景,深色文字标签

设计要点:背景和文字颜色在同一色相内,明度和饱和度适当调整

相对于线框标签的视觉表现力和整体性都更强一些,常单个或单个类群出现。

2.1彩色标签:在列表中信息层级较高

2.2灰色标签:相对于灰色线框标签表现力更强一些,,常与有颜色的标签搭配使用。

 

3. 浅色色块背景加边框,深色文字标签

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



4. 深色块标签

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

 

5. 图形标签

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

 

6. 组合型标签

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

 

7. 文字说明型标签

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



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

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

 

1. 内容说明

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

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


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



2. 内容互动

内容平台类产品,达到为其他同属性内容引流的目的,通过标签来满足了用户想浏览其他相关内容的潜在需求。如小红书的话题标签,图虫的圈子标签。

 


3. 图片说明

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

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


4. 产品展示

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


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



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




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




19
- 位站酷推荐设计师推荐 -

声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。

    没有新消息