恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
今天,我对标签的理解,透了!
0.0°
2020-04-28 原创文章 经验/观点 举报 8386 227 229 9


每个平台都会存在标签,我们可以根据自身平台属性,打造一套属于自己的标签体系,几个思路点分享给大家(今天我们仅讨论不可点击标签,也就是展示型标签):


1.理解标签作用

2.整理标签分类

3.细化标签规范



1.理解标签作用

咱也没整那么多官方定义了,我个人认为标签就是为了让用户快速看到关键信息,找到感兴趣的内容。


比如,我喜欢看玄幻类漫画,如果看到有“玄幻”的标签:




就会多关注一下。


再比如,我去网上买硬盘,希望质量能有所保证,那“自营”标签,对我来说吸引力就很大:



这就是标签最核心的作用。



2.整理标签分类

其实分类的方法有很多,产品、交互、视觉都有不同的分类方式,而且每个平台的属性又各不相同。所以这么复杂的情况下,我们必须保持清晰的原则,避免思路混乱。


根据自身平台内容,我尝试了一种分类方式,推荐给大家参考,按照场景与优先级来进行分类标签。


场景分为:

1.封面上的标签

2.文字后的标签




优先级分为:

1.特殊化

2.强调型

3.普通型

4.弱化型


有了这样的划分,我们就可以根据需求进行自由匹配了:



根据平台目前的需求(以后根据需求可以拓展或者合并),我们可以分为6种型式:



1.封面上的标签(强调型)


我们采用品牌色来强调标签,一般用在首页频道,这种标签不能同时出现太多,否则会太花哨太乱:



2.封面上的标签(普通型)


多个封面同时有标签的情况也是存在,比如分类页,封面上都有评分,这时候我们就需要采用普通型(非强调)的标签,也就是黑色降低透明度:




封面上的标签暂时就这两种,以后也可以根据需求进行扩展。


3.文字后的标签(特殊型)


特殊型在视觉上是最重的,因为除了颜色是填充色外,形状也是异形的:




4.文字后的标签(强调型)


强调型形状上不做异形,但颜色上使用品牌色进行填充:



5.文字后的标签(普通型)

普通型的标签,标签颜色会用有色相的彩色,文字使用品偏色或者其他辅助色:



6.文字后的标签(弱化型)

弱化型会对标签的视觉重量再次减弱,采用灰色标签:



我们可以再看下这六种标签的整体视觉策略:


1.封面上的标签(强调型)

2.封面上的标签(普通型)

3.文字后的标签(特殊型)

4.文字后的标签(强调型)

5.文字后的标签(普通型)

6.文字后的标签(弱化型)


我用图片给大家概括一下

两种封面上的标签:



四种文字后的标签:



这种方式可以参考,但还是要根据自身内容来进行实际分类,只要能分的清楚、透彻,那就是好的分类。



3.细化标签规范


其实整个标签部分,最重要的还是上一步,想清楚如何分类。


有了分类之后,在进行规范的细化,相对来说就没那么复杂了,注意以下几个点即可。


标签的高度,很简单,不解释:



标签的宽度,因为字数不同,所以宽度是不固定的,但我们可以规定文字的左右安全边距:



标签的文字颜色、大小、粗细、极限值,,其中极限值就是规定下标签最大字数,一个标签整几十个字,快成作文了,也不太合适是吧:




标签的背景色,不同类型的标签颜色不同,但需要符合整体视觉策略和设计规范:



这些属性规范好,基本就够用了


好了,以上就是菜心目前对于标签的认知与梳理,如果你也正在整理平台的标签相关内容,希望能够给你点启发。



点个在看,比啥都强!


Powered by Froala Editor

微信公众号:菜心设计铺

更新:2020-04-28

收藏

227人已收藏

菜心设计铺

微信公众号:菜心设计铺

  • 123

    作品

  • 2.2w

    粉丝

  • 100

    关注

  • 第一次做插画视觉,真没想到有这么难!
  • 做了三年设计,第一次包装作品,献丑了!
  • 《菜心工作室 x 摩尔线程》
  • 原来我这一项这么弱,献丑了!

    猜你喜欢

      2020-04-28 原创文章 经验/观点 举报 8386 227 229 9

      今天,我对标签的理解,透了!

      0.0°

      你确定要举报今天,我对标签的理解,透了!

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2020年04月28日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      229
      227
      9

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录