UI设计组件-标签

​hi!标签在UI中虽然很小,但随处用得到。它们不仅像小宝石一样点缀页面,还能灵活替代很多基础组件。一起来研究一番吧~

 

01 无处不在的标签

什么是标签

标签(tag)是一种以极简形式展现属性、操作或输入的小组件。通常是一个关键词或小图标。它的特点是轻量、出现时机灵活。 
标签的
物理原型是我们熟悉的纸质标签,是一种为我们介绍物品规格的小纸牌:

 
标签的物理原型

 

在物理世界我们可以给物、给人贴标签,在用户界面中,一张图、一首歌、一种操作乃至于任何一条UGC内容(用户原创内容),都可以被赋予标签。

 


左图:QQ音乐,右图:新浪微博

 

上面说过标签都是轻量级的,这很好理解。又说了它们可以替换很多组件且出现时机很灵活,为什么呢?来看下这些例子:
首先,标签可以成组出现,看上去很轻巧,不像多个按钮那么厚重:

 


左图:cctalk,右图:片场

 

其次,标签可以根据内容的变化自然地出现或隐藏。想象一下,如果界面中的按钮和选择控件像下图这样时不时出现、又隐藏,那一定会比较突兀:

 


材料设计

 

另外,标签可作为快捷输入的工具,省去文本框逐字输入的麻烦:

 


in

 

最后,从上面的几个案例可以看出,标签的容器长度是自适应内容的,所以多个标签平铺在一起,既紧凑又不显凌乱,所以它是列表和下拉菜单的优秀代替品。

 

标签的功能

标签有两大功能:
  • 一是交互功能:减少交互步长,快捷选择或输入;
  • 二是展示功能:节省空间,充分展示信息。

 

Tips:
  • 材料设计中的“纸片”(chip)和它很像,但我们很少使用“纸片”这个叫法。
  • 请注意不要把它和tab选项卡中的标签、或APP底部的标签栏混淆了,这里说的标签就像刚买来衣服上的的标签一样,希望这样能帮你记住。
  • 对于无法操作的标签,不要把它们设计得像一个可点击的按钮,比如,不要看上去很立体,那样会让人想点击;又比如形状不一定要很规则,因为按钮都是规则的(圆角)矩形。
  • 标签的组件类型(录入类、触发类、or展示类)无法统一,因为它有很多种类,下文会讲到。


02 拆分元素

标签的元素一共有3个:容器、文本和图标:

1 容器,2 文本,3 图标

 

三者都是可选的,它们可以随机组合,常见的是这5种组合:文本、图标、容器+文本、容器+图标、容器+文本+图标。

 


文本标签(转转)

 


容器+图标标签(大众点评)

 


图标标签和容器+文本标签(cctalk)

 


容器+文本+图标标签(淘宝)

 

那我们怎么决策该用上哪些元素呢?
纯图标标签会更富有设计感且吸引眼球,但这种图标必须是用户熟识的、一看就明白含义的;而纯文本会更直观地表达含义,但其字数受限,主要用于抽象的、或分类较多的标签;图标结合文本的话,面积会较大,视觉冲击很强,它要么是出于交互功能的需要(如上图淘宝),要么则是用在节日和特别专题。 
可触发、复选的过滤标签
 
Tips: 
  • 标签的颜色:除了元素之外,颜色也是传达标签感情的重要角色,比如,绿色代表清新、免费,黄色棕色代表尊贵VIP,红色象征火爆热门。
  • 标签的形状:常见的形状有(圆角)矩形、三角形和异形。矩形容器适合放文字或文字+icon;三角形容器(一般放在海报的顶角)中适合放icon,如果放文字,则字数不要超过3个,而且文字需要旋转(如下图);此外还有异形容器,异形标签因为造型夸张,适合出现在活动宣传类场景。

把文本旋转的角标(爱奇艺)

 

03 五大类标签

标签一共有5类,它们是:过滤标签、操作标签、输入标签、信息展示标签和同类跳转标签。

过滤标签

过滤标签,是用来快速筛选类别的标签,点击它会导致对应内容被过滤出来。它可以触发、也可以不触发操作,有单选也有多选,来看看示例:

 

不触发、单选的过滤标签:会自动取消其他的选择,数量至少有两个(和单选按钮同理)。

 


材料设计

 

不触发、复选的过滤标签:数量至少一个(和复选框同理)。

淘宝

 

其实从功能上来看,上面两种标签也可以分别用「单选按钮」和「复选框」代替,而之所以使用标签,是因为它们带有更方便触摸的容器,而没有小圆圈、勾选框这些元素,因此看上去也更清爽。

 

可触发、单选的过滤标签:立即触发展示相应的内容,数量至少有两个(和单选按钮类似)。

淘宝

 

这种标签可以是tab选项卡的代替,想象一下上图中如果用的是tab选项卡,会占用更大空间,而且在切换时会给人一种较强的跳脱感。

 

可触发、复选的过滤标签:数量至少一个(和复选框类似)。

第一行中可以选择多个家居设施(材料设计)

 

操作标签

操作标签,是一种可以立刻触发操作的标签,和上面的「触发类过滤标签」不同的是,它引起的不是内容的筛选,而是和按钮类似-直接触发某个交互结果。此外,操作标签没有单选多选之分。
操作标签和「按钮」的区别:
  • 标签的量感比按钮轻,排列更紧凑;
  • 标签往往成组出现,按钮无所谓;
  • 标签可以基于情景,灵活出现在适当的位置,而按钮往往位置固定、持久出现。

材料设计

 

Tips:
 
  • 虽然操作标签无单选或多选的限制,但一般它们成组出现,至少有俩。单独出现或许合理,但请谨慎使用,此时不妨考虑下按钮。

 

输入标签

 输入标签以标签的形式存放用户的录入信息,它作为「文本框」的补充小组件,经常在录入多条信息时用到,最常见的就是输入多个收件人的文本框:
 

Foxmail

 

信息展示标签 

信息展示标签,这是个很好理解的名称,它的功能就是传递信息,有时也可点击。常出现在资讯平台和电商平台,在资讯平台(如36氪)常用标签来展示内容关键信息,方便用户快捷判断是否对该内容感兴趣;而电商平台的目的则是提高销售业绩:购买率 ,它的标签内容往往跟产品质量和用户利益密切相关,如“热销”、“好评”、“秒杀”、“满减” 等字眼。

36氪

 


京东到家

 

信息展示标签的位置非常灵活,在列表、卡片、图片、头像等多处都可以使用。

大众点评

 

还有一种特殊的标签叫徽标(badge),也就是我们常说的“小红点”:

左图:iMac,右图:iOS

 

Tips:
  • 徽标中的数字超过99时,可以写成“99+”,随着文字变长,圆点容器可以变成高度不变的圆角矩形。

 

同类跳转标签

这类标签可以代表一种话题,在被点击后,界面将跳转至更多与该类话题相关的用户生产内容,由此来为同类内容引流、增加用户停留时长,因此该标签常出现在内容平台。推文话题符号“#”(hashtag),是OGC平台的标配,它最早出现于推特。微博上的“超话”标签也是这一类。

抖音

 

04一个标签

状态

标签在各种设备上的状态一览:

 

状态示意图:

 

尺寸

不同种类的标签尺寸不一而足,以下是最常规的容器+文本标签尺寸,仅供参考:

 

移动端:

 

桌面:

 

电视端:

 

05 界面中的标签

标签的位置

如果要给一张卡片或海报加标签,放在什么位置最适合呢?通常一个页中又会有多个标签,怎么安排它们的位置呢?我们可以沿着用户的浏览顺序-“Z字形”来排列,即从左上到右下分别对应「运营性从强到弱」、「存在时间从短到长」、「重要级从高到低」的标签。同时请注意标签不要遮挡海报中的关键信息。

按“Z字形”排列标签(腾讯视频)

 

视觉重量

除了位置,还需要从标签的样式来区分其重要级别,这样才能层次清晰、让用户优先关注到核心信息,而且界面也不会显得杂乱无章。我们以最常见的容器+文本类标签为例,如果大致将其分为实心标签、线框标签和文本标签三类,那么它们的重要级应该是递减的,因为它们的视觉重量递减。在页面中,这三类标签也应该有自己的角色,还是以京东到家举例:

京东到家

 

上图中,运费和领券直接关系到用户消费金额,它们自然该比超市距离和配送时间更重要;而运费比起优惠券来说,规则更少、金额相对稳定,优惠券数量众多、计算方式复杂,最后能用上哪一张是用户当前无法知道的,所以运费应该比领券设计得更吸引人的注意。
这些就是标签的知识,如果有任何疑问或建议欢迎与我讨论,直接在公众号回复即可,下次见啊。

 

原文地址:
UI设计语言(公众号)
作者: 
珠珠

 

 

 

 

0

评论0

站点公告

 

AI创作与绘画大师,国内版chatGPT在线版本免费使用哦

点击打开: https://ai.uiya.cn

   
显示验证码
没有账号?注册  忘记密码?

社交账号快速登录

微信扫一扫关注
如已关注,请回复“登录”二字获取验证码