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设计语言（公众号）

作者： 
珠珠