UI规划组件-标签

珠珠 APP规划 1357阅读

​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规划言语(大众号)
作者: 珠珠

 

 

 

 

 

转载请注明:明升m88.com网 » UI规划组件-标签

登录保藏
 
你或许喜爱的:
Material Design CraneMaterial Design Crane
听我的,二维码展现页要这么规划!听我的,二维码展现页要这么规划!
有厌烦自己画欠好图标吗?我有(下)有厌烦自己画欠好图标吗?我有(下)
怎么输出明晰有用的规划方案怎么输出明晰有用的规划方案
【音频】助力产品规划,你应该了解“需求的等级”【音频】助力产品规划,你应该了解“需求的等级”
iOS 13 隐秘的细节:细数iOS13视觉交互改变iOS 13 隐秘的细节:细数iOS13视觉交互改变
「谈论」功用规划总结「谈论」功用规划总结
按钮标准系列 - 「按钮方位」的规划详解按钮标准系列 – 「按钮方位」的规划详解
怎么规划删去按钮,避免数据丢掉怎么规划删去按钮,避免数据丢掉
为什么他们规划评分都爱用五颗星?为什么他们规划评分都爱用五颗星?