标签的设计方法和规范

  • 来源:北京至诚伟业汽车租赁公司
  • 点击次数:297
  • 发布时间:2022-12-02

标签是我们最常用的设计组件之一,由于功能强大,使用场景多样化深受喜爱。好的标签设计就像一剂完美的助攻,可以用于信息的传达、建立操作预知,可以帮用户及产品进行分类,也可以进行营销分流与智能场景的运用,能帮助用户完成当前的任务,帮助产品达到业务目标。鉴于其重要性和多样化,建立一套标签视觉规范更好的去赋能和指导设计尤为重要。


标签的组成元素,标签由颜色、文字、形状等元素组成,每个元素相辅相成,和谐统一。

1. 颜色,颜色是标签设计中的一个重要元素,可以帮助用户快速识别,提升信息转化的效率。标签的颜色应用上不仅要清晰,精准,高效的传达信息,同时在多种颜色组合中也要兼顾着品牌。所以建立一套颜色板可以更好的方便标签的设计应用,建立的色板的原则是什么?


色彩模式选择

色彩模式是数字世界中表示颜色的一种算法。在数字世界中,为了表示各种颜色,人们通常将颜色划分为若干分量。由于成色原理的不同,决定了生成颜色方式上的区别。日常生活中有哪些常用色彩模式?

RGB 模式:以“加色混合”的方式,由红、绿、蓝(三原色),三色混合,表现出各种的颜色,我们的计算机屏幕就使用这种方式表现颜色。这种色彩表现方式,称为 RGB 色彩。适用于显示器、投影仪、扫描仪、数码相机等。

CMYK 模式:以“减法原则”成色,物体色彩的反射色,是用画具或染料、油墨等“色材”来表现颜色,印刷品基本是由青、洋红、黄、黑四种油墨相互组合而成,这种方式称为 CMYK 色彩。适用于打印机、印刷机等。


2. 形状,形状是标签信息的一个外化直观传递,应符合产品的品牌调性(比如直角、圆角、其它隐喻造型…..),根据我司业务属性将标签大致分为:

基本型:4px 圆角矩形,高度以 28px 为主;


异型:高度以 32px 为主,具体根据业务场景需要设计


标签信息层级定义,日常项目需求中,最棘手的莫过于,产品业务侧在功能模块里堆加一大堆标签,并且都强调是最重要的,在这种情况下对于设计侧而言就不只是设计好看的问题了,这需要对标签的优先级作出分类,有序的设计表达。对用户而言我们的标签不能既是疗效又是脚镣。  


从用户层面与产品层面分别去分析需求对用户与产品的重要程度,配合着 KANO 模型对需求分析,确定标签的优先层级排序:  产品的角度:产品需要用户能快速筛选信息,促使用户快速抉择转化 。用户的角度:用户需要目标信息与自身相匹配,能快速找到需要的信息。


标签类型/规范定义


1. 常规标签

主要适用于货源列表、订单列表,小黑板,详情页…等业务功能场景,是产品中最高频使用的类型,按重要层级可分为:首要标签 > 中等标签 > 一般标签 > 次要标签。


2. 异形标签

适用于强调业务模块中最重要层级的的功能信息标识,采用非标造型,重要层级:异形标签>常规标签,展示位置多采用全贴边样式(左上>右上…),根据内容重要层级而定。


3. 会员/等级标签

主要用于会员业务的身份及等级标识,多适用于人/姓名后展示,多以图形或者图形+文本的样式展示。


4. 营销引流标签

主要用于描述业务目标对象的特色及等级,置于角落(左上,右上…)±45°展示

要适用于业务功能营销转化引导,展示样式主要有:文字后加标签、信息功能上部加标签,对比鲜明,在某些场景使用上和徽标类似,除了对其识别造型统一外,还应对其使用场景加以明确:

居右侧展示:与按钮组合使用时,标签字段数量不能大于标签 1/2 宽度,末端与按钮右对齐;

居左侧展示:按钮高度大于单行标准按钮高度且重要层级高,或右侧有选择项占用时;


5. 角标

主要用于描述业务目标对象的特色及等级,置于角落(左上,右上…)±45°展示。


6. 印章标签

主要用于描述功能任务(如协议签订,流程权益…..)的完成状态。