资讯详情

视觉标记设计:打造独特品牌形象,精准传达核心信息

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

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


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设计中的标签跟我们日常生活中的标签很相似,它不仅能对产品作分类、特色标记,还能在用户犹豫不决的时候起到一定的推动作用,是平台内部信息导流和满足用户潜在需求过程中至关重要的一环。


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



资讯推荐

资讯推荐

NEW

looking资深的网站设计团队,以品牌策划视角为您打造具有商业价值的网站,全面提升企业整体商业竞争力。我们以业界领先的专业服务,为您提供全面网站建设解决方案,助力企业实现互联网品牌价值。品牌营销工具,新起航!我们的服务优势一站式网站建设全面解决方案建站+空间+域名+备案定制式网站建设服务looking用创意设计提升企业和产品价值服务优势我们深知高效沟通,了解客户需求才能提供更好的服务。lo...
2022-04-01
一个备受困扰的问题——抠图!想必大家在拿到图片时,第一个念头就是使用钢笔抠图。然而,钢笔工具存在较大局限性。为了提高作图效率,我们需要针对不同的图片,迅速选取一种合适的抠图方式。接下来,我将把几种常用的抠图方式,从原理到实际操作,为大家进行详细讲解。那就跟随我的脚步,一起往下看吧!首先上场的是删除背景功能,它是如何做到只需一键扣的如此干净?工具原理:系统会自动识别物体轮廓,删除自动识别到轮廓...
2024-06-07
1997 年,西班牙毕尔巴鄂古根海姆博物馆开幕时,评论家称赞弗兰克·盖里的杰作是上个世纪的建筑奇迹之一。政府计划每年将吸引 50 万人前往毕尔巴鄂参观博物馆,然而仅前三年参观人数就达到 400 万。“毕尔巴鄂效应”一词被创造出来,用来形容一座建筑如此壮观,以至于可以改变整个社区、城市和地区经济。然而,毕尔巴鄂模式可能无法复制。自 1997 年以来,热心的市政官员来到该地区,寻找秘密杠杆,希望...
2024-05-08
自适应网站也叫响应式网站,是指能够根据用户设备的屏幕尺寸、分辨率和操作系统等特性,动态调整其布局和内容展示方式,以提供更好的用户体验的网站。这意味着无论用户是使用台式电脑、平板电脑还是手机访问网站,网站都能自动适应不同的设备,使内容在各种设备上都能够清晰、易读,并且布局合理美观。
2024-04-26
品牌设计师和平面设计师之间有什么区别?很多小伙伴会说:“不都一样吗?平面设计师也会设计品牌,品牌设计师也会设计平面,或者说平面设计师包含了品牌设计师,这不就是同一个职业?”非也!!!先来说说平面设计师;VI视觉是所有的平面设计师最常接触的内容,其中有:logo设计、平面设计、 网站设计、DM设计、以及海报设计、Banner设计等 。包含了品牌用户在与品牌发生接触时,任何视觉看到的方方面面。V...
2024-03-22
每天,食物都在和我们打交道 / 他们总是安安静静地躺在那里 / 一如往常而艺术家们总是能将生命的活力赋予食物让它们在镜头里表演生命的华彩我们一起来看看 / 艺术感超强的大片是什么样子的吧!*有时是一出古装剧踌躇满志的苹果将军与谋士在商讨进攻的计划// 主题色选择深绿色,营造了沉稳坚定的基调不同纯度、明度的绿色组合成交替变化的色彩节奏圆润和棱角的形体分别在构图中达到了平衡石块的反光面、羽毛和线...
2023-06-01
有谁认为拍的产品是艺术品?我想寥寥无几,这是一个心态问题,也是一个格局问题,所以今天我要带大家一起聊聊艺术。超现实主义和美食摄影的创意结合什么是超现实?不得不提一个重要的人物,他就是超现实主义艺术家达利,是一个不得不去认识的人物。达利是二十世纪二三十年代的超现实主义大师。受弗洛伊德的潜意识学说影响的超现实主义者,是一群醉心于寻觅梦幻的艺术家,他们感兴趣的是发现和展现无意识的心态,使想象力获得...
2023-05-12
Mini Programs小程序是一种无需下载安装,通过扫码或搜索即可打开的应用,实现用户随时随地使用的便利体验。在微信公众号平台,小程序与服务号、订阅号、企业微信并行,为企业打造微信营销生态圈。通过小程序与公众号的相互跳转,将用户“互通”,链接微信营销渠道,实现相互转化,助力企业营销。小程序让营销更简单7亿+用户使用小程序1,展示企业实力,提升客户信心小程序直观展示企业实力,让客户更直观地...
2023-04-20
 
|  Copyright © 2018-2024 gzlooking.com All Rights Reserved