标签篇 | 打造独特视觉标记、精准传达信息

原创大漠飞鹰CYSJ 能量眼球

在现实生活中，每个人都会不同程度的给别人、被别人贴标签，这是一种低门槛、高效率的记住一个人/物的有效方式。我们在背后谈论某个人/物的特点，最直观的表达方式就是利用标签叙述，例如，某个人好帅/善良、某件事做起来很简单/方便等，甚至将某种相似的人/物进行简单的归类后使用共同的标签，这都能让我们更清晰的掌握某些关键信息。

在互联网产品设计中，标签虽然不是很起眼，但是绝对不能忽视它，只要使用得当，尤其是在电商类产品中堪称神助攻的存在，其功能的强大不是笔者几段文字能介绍清楚的，了解过产品运营、用户行为及心理学的设计师就知道为什么会“爱”上标签了。很多时候，看似简单的组件/元素，背后都蕴藏着不简单的运作方式，其方式的不同，给产品带来的结果也截然不同。

UI设计中的标签可用于传达信息、建立可预知操作等，能帮助或促进用户更快速完成任务、协助产品达成业务目标，深受产品经理、运营者的喜爱，但作为设计师的我们真的能听之任之吗？标签该不该用、怎么用、如何更好的使用都有一定的原则，即便同一个产品，被不同的设计师设计出来也可能是千变万化。本文笔者将根据标签的定义、属性特征及使用场景作出一些思考和探索，帮助大家对标签有一个更清晰的认识。

分享目录

一、标签基本介绍

二、标签在设计中的作用

三、不同场景下的使用方式

四、标签的设计（主产品列表）

五、结语

一、标签基本介绍

1.什么是标签

标签是结合产品内容及属性特征经提炼后产出的关键词，是信息的一种集合方式，便于用户查找、定位以及系统识别。好的标签设计会根据业务需求场景、服务理念形成独特的视觉标记，依托产品、用户目标需求，引导或促进用户进入下一步操作，用以提高商品、信息的转化。

2.标签色彩

标签主要帮助用户快速识别信息、提升信息转化效率，色彩是一个很重要的因素，好的配色能高效、精准的传达信息。在标签的配色中，主要针对以下两种场景：

一种是白色背景，这种没有任何冲突的背景给标签配色创造了极佳的条件，主体色、辅助色、点缀色均可使用，在面对同一组信息多标签的情况下，还能多种色彩混合，以便对标签更好的分类；另一种是图片背景，更多用在封面、头图、商品详情等位置，相比白色背景会受到很多局限，一般使用白色/黑色+不透明度、或者主体色作为标签容器，文字使用黑色或反白处理。

3.标签形状

形状是标签信息传递中的视觉轮廓表现，它是用于承载信息的容器，对文字元素的包容性极强，能使标签信息更加聚焦，让用户在获取内容、信息归类时更加专注。常用的标签形状有圆形、矩形（半圆角、全圆角）、三角形（角标）、气泡或异形，真实情况还得受界面使用场景、品牌调性以及设计规范等因素的控制。

二、标签在设计中的作用

为了对信息进行归类，标签可能出现在任何一个页面，通过精、简的表达方式，希望能引起用户的关注以及激发用户想要进一步了解的欲望。例如双11快到了，手机里的各大应用图标都贴上了双11标签，预示优惠活动已经启动，以激发用户点击的欲望；打开外卖应用，看到琳琅满目的满减、特色标签，也能让我们快速的择优处理。总之，在什么时间、需要使用什么样的标签，主要看产品想达到一个什么样的目的。

1.突出产品特色（营销）

标签的首要任务就是为满足用户的隐性需求而传达特色信息，通过让用户对产品产生联想并增加需求欲望，促进用户完成下一步操作。对于产品而言，标签能传递出折扣、优惠、卖点、特色等与用户利益相关的各种信息，而对于用户来说又能让其快速获取关键信息，降低内容的理解难度等。

例如：美团、饿了么店铺的优惠，如满x减x、免费配送、店铺红包、首次优惠...等标签让用户潜意识的认为能降低经济成本，即便事实并非如此；通过产品特色信息，如品牌、服务、复购率、售出累计、排名...等标签体现出专业、高质量以及热情的服务态度，无时不刻都在击溃用户最后的心理防线，以提高产品的转化率。

2.建立用户操作预知

通过建立用户操作预知，让其在操作之前就能清楚点击后会发生什么。例如：登录腾讯动漫时，会用小标签提示上次的的登录方式，降低多账号的记忆成本；腾讯视频的封面会有VIP（需开通会员）、付费（需额外付费）、等标签，让用户在操作之前就能根据当前账号情况来判断操作之后可能会发生的事情，提前有一定的心理预期。

3.个性化内容推荐

用户在接触一个新产品或新功能时，一开始总会有些不知所措，这时系统会提供一些用户可能感兴趣的、产品希望用户选择的标签，并引导用户操作来获取想要的内容，以满足用户的潜在需求。

4.操作前/后的内容引流

标签既能突出产品特色信息、又不会占用太多空间，所以通过对用户建立好感、吸引其注意力进行引流也是一个很不错的方式。

常见的有两种引流方式，一种是在用户操作之前没有目标，系统通过标签对用户进行方向性的指引，例如淘宝搜索中的历史、热搜、兴趣推荐等。另一种则是用户在完成某个任务之后，产品通过相似或相关联的标签吸引用户继续浏览其他相关内容的潜在需求，以增加用户在应用中的停留时长，例如小红书文章详情页的结尾，会提供与当前内容相关的标签，点击之后可快速查看其他相似的内容。

5.信息分类

通过标签建立有效的信息分类，能帮助用户快速筛选出自己想要的内容，避免用户因浪费大量时间浏览了非需求内的信息而失去耐心。例如淘票票电影评论区，用户可选择自己感兴趣的标签去查找自己想要的信息，提高浏览效率，节约时间成本。

6.从众心理推动转化

当用户对某个商品犹豫不决、无法快速做出决定时，正处在转化的边缘，这时只需要一个“催化剂”，可利用从众心理推动用户转化。例如商品的销售量、收藏量、有多少用户正在下单...等，都会对当前用户的心理产生极大影响，很多时候，用户的想法和行为受到周围人的影响程度，往往超过理性的认知。

三、不同场景下的使用方式

在用户层面，标签提供的是内容的核心或特色关键词，能提升用户浏览效率，帮助其快速做出决策。站在设计角度，标签不仅能多样化的展示各种关键信息、提高视觉表现力，最主要的是能通过设计手段为业务赋能，促进产品、信息的转化。

直白一点，产品经理说“需要重点突出功能的特色、卖点”、运营说“目前我们在做活动，要特别突出折扣优惠”、业务说“有很多用户不知道xxx，需要设计的最明显”......最后一致决定都很重要。相信绝大多数设计师都遇到过这种问题，怎么办？是直接拒绝还是等着各部门撕逼后给出一个确定的结果？

其实面对上述情况，设计师的角色不要只停留在画界面上，应该站在用户的角度去分析，提这些需求的人到底想表达什么（表面上用视觉突出），能给用户带来什么，需要经过讨论，深度分析产品的真实需求、用户的痛点及诉求，从中找到一个最佳的平衡点，然后通过结论来确定设计的可行性、易用性以及视觉表现方式，不要忘了，设计的本质就是解决问题。

最后你会发现，如有必要，将众多信息同时展示出来、而且还不可以影响其他信息的传达并非不可能，使用标签就是一个很不错的解决方式，下面让我们来一起来看看，不同类型的类产品标签在不同的场景下都有什么关联以及不同的使用特点。

1.超链接标签

这种类型的标签以#+文字形式的超链接为主，大多出现在文字内容较多的列表页面、详情页的开头或结尾，也可以理解大家常说的话题，它能让用户通过标签就能了解到这些内容的主题及核心，帮用户快速链接到与该内容相关联的信息。

相信有一些设计师应该经历过这种情况，看新闻越看越感兴趣、刷抖音刷到停不下来、看旅游攻略根本不想睡觉…等，这都是源于系统背后的算法与自动推荐机制，产品的背后总有一双无形的大手在帮我们自动匹配。而＃+文字标签的出现只不过是将关联、或想推荐给我们的内容摆在的明面上（系统、用户推荐均可），把选择权交给了用户，即便用户没有点击标签，划走后或许还是逃不脱系统的算法推荐，可用户一旦主动点击，产品内容会更加匹配，用户的满意度就会更高。这样通过明（用户主动点击标签）、暗（系统算法推荐机制）的双刃剑，不仅能满足用户想浏览其他内容的潜在需求，也达到了产品相关联属性内容的引流。

例如抖音将标签放在了标题后面，用户随时能知晓当前短视频的类型、属性等信息；小红书的文章详情页结尾也会有相关联的标签，用户可通过该标签快速跳到其他相似的内容列表，以便获取更多对自己有价值的信息。

2.图片封面标签

常用在带有封面图片的内容列表中，例如视频、音乐、电商类型的应用，在产品封面配上图标或文字小标签后，不仅让用户对信息有更快速的理解，还能丰富图片内容、让视觉表现更加生动。需要说明的是，因图片本身的色彩比较复杂，一定要注意标签的配色，标签既然作为辅助说明来传递信息，就需要有一定程度的突出，不然，一旦与图片该区域的色彩融合或严重冲突，就会给整个界面的美观度带来负面效果。这种类型的标签大多数只用于信息传递，并无对应的交互操作，分为动态和静态两种类型。

腾讯视频列表封面的标签属于动态，也就是通过后台管理系统随时对内容进行调整，可能今天是A标签、明天就变成了B标签、或者什么都没有，标签的类型数量及样式会有一定的控制，针对分类、功能、权限类的标记非常实用。

京东的商品封面则是静态标签，为了体现出其质量、折扣、品牌等信息，在处理图片之初就将标签融合，让其成为图片本身的一部分，不过会增加相应的制作成本。相比前者，静态标签的使用方式非常灵活且不受系统的控制，对用户的吸引力更强，对产品促销、提高转化率能起到很大的作用。

3.商品列表标签（多元化）

电商应用的产品列表主要为突出特色、卖点来进行促销，类型及样式比较多元化，且单个产品可能多达4~5个标签，以此来吸引用户购买。

以下图淘宝、美团外卖列表为例，使用了线框、浅色底、深色底容器标签以及销量、费用类型的纯文字标签，样式可单用、可混搭，形形色色的展示出了商品的各标签信息层级，无时不刻都在吸引着用户的注意力。

四、标签的设计（主产品列表）

1.精炼

标签作为辅助补充信息的存在，不宜展示大段的内容，所以大家看到过的标签基本都很短。简短的标签是在信息表达清晰、用户能足够理解的前提下提炼出来的，我们这里所说的精炼并非一味的求短，虽然“短”是标签必备的因素，但有时候，过于简短的标签根本没办法给用户传达足够的信息，甚至会导致用户更加疑惑，这也失去了添加标签的初衷。

例如美团外卖列表，标签都很简短，但在用一句话形容、或用户高质量的评价来表达店铺特色时，这个标签占了整整一行的位置，并没有进行特别的简化。

下面是某购票平台，标签也很简短，大部分能一看就懂，但有几个就不一定了，“兑”是什么意思？可兑换火车票、还是购票后可以兑换其他礼品呢；“静”又是代表什么呢？乘车环境安静、人员相对安静还是需要乘客制造安静？虽然我们花点时间也能猜出个七七八八，但这无疑增加了用户的理解难度和时间成本。

2.视觉突出

因为标签本身比较小的原因，一般我们会通过配色来吸引用户的注意，但面对不同的产品属性，其色彩的表现形式也有很大的区别。

在腾讯视频中，采用的固定底色的容器标签，旨在强调产品的特权属性，视觉非常突出；而酷狗音乐采用的是黑色带透明底、文字反白的标签，仅仅作为辅助提示，对封面的干扰比较小、但依然能保持信息的有效传递。

3.一致性

同类型、同视觉权重的标签应尽量保持一致，即便应对多元化，尽量只在色彩上作出调整，其容器的外观形状、字体字号仍需保持相同的属性特征，要让用户一看就知道这几个标签属于同一种类别。

4.差异性

上面说到了一致性，现在又说差异性，乍一看似乎是有冲突，其实不然。这里的差异性是针对不同类型、不同视觉权重的标签，需要通过不同的视觉样式及色彩体现出信息的层级关系。

例如：用户在购买这个商品之前最想知道、且对用户最有吸引力的标签一定是最突出的，用户扫一眼就能看到，根据视觉权重依次类推，最后是对用户来说不是很重要、甚至没有看到也不会有什么影响的这类标签弱化显示。

结语

文中主要总结了标签的作用、不同场景下的使用方式以及设计中的注意事项，不难看出，UI设计中的标签跟我们日常生活中的标签很相似，它不仅能对产品作分类、特色标记，还能在用户犹豫不决的时候起到一定的推动作用，是平台内部信息导流和满足用户潜在需求过程中至关重要的一环。

标签设计不应该是简单的色块+文字的堆叠，它应该与产品之间存在着某种潜在的关联，需要针对不同的使用场景为产品量身定做，形成一套具备专业化的标签体系。好的标签不仅能满足上述提到的基本需求，还能在无形之中给予用户经验的感觉，一度超出用户的预期，最终满足产品的商业价值。

往期回顾：

选项篇 | 单选/复选/拨动开关的使用小技巧！

应用图标 | 助力设计出更优质的应用图标！

下拉菜单 | 一看就懂，助你全面了解下拉菜单！

文案篇 | 优秀的文案是产品最好的助力

标签栏 | 全方位满足用户体验和商业需求！

表单篇 | 掌握基本，原则设计更好的表单！

弹窗篇 | 如何弹、什么时候弹？

图片篇 | 掌握这些技巧，你的界面更加出彩！

图标篇 | 图标设计必备的基础知识！

按钮篇 | 做好设计细节，你需要了解这些！

结

语

设计师需要养成体验产品的好习惯并将优秀的产品细节记录下来，加强自己的记忆，不仅能提升自己的语言组织和总结能力，也为日后输出优秀的作品当铺垫，对自己的能力提升以及未来的职业发展带来便利。

你「在看」是最好的肯定与鼓励