Design Token-学科网组件库重构前章

学科网UED

北京/UI设计师/2年前/427浏览

版权

学科网UED

本文所要讲述的就是能够跟CSS中的全局变量相呼应的DesignToken

前言

学科网是中小学优质教育资源共享平台,致力于推进信息技术与教育教学融合应用，随着用户规模的日益扩大，原先的网站布局和信息呈现有时不能很好地满足更多人的需求，同时由于之前未能构建较为完备的组件库，决定从组件库先入手推动网站交互和视觉的标准化；由于figma等基于web开发而来的数字软件使得设计与前端的关系愈发紧密，组件作为前端中的最小不可拆分单元，设计师要做的已经已经不仅仅局限于给出大小、颜色等数据，而是要将其创建为一种模板能够将设计数据与前端数据真正地连通起来，本文所要讲述的就是能够跟CSS中的全局变量相呼应的DesignToken，也正是学科网重构计划的前章。

情景故事

为了能够让各位对DesignToken有一个快速认知，这里引用一个油管上的故事案例（网站替换为我司产品）为大家讲解何为DesignToken，设计师准备与前端工程师对接一个学科网项目，前端工程师问：学科网品牌色的色值是多少呢？

设计师回答到：目前看就是#0080FF吧；前端工程师继续问到：真的确定就是这个数值了么？

设计师回答：应该不太会再更改了吧～（这个时候开发人员有点慌），为什么开发人员会有些慌呢？原因如下：

因为一个颜色通常不会在页面中只使用一次，往往是散落在各个页面上，一旦出现改变，那么前端工程师需要挨个更改颜色，非常麻烦，同理设计师在设计稿中也要依次更改。

这个时候就可以引入DesignToken，简单来理解就是由名字与值构成的一种命名系统，可全局使用，修改。

设计这个时候可以说：请使用xkw-brand这个别名的颜色～

前端工程师：这样可就太好了，那么为什么开发这个时候不慌了呢？以下是一个小demo，可以点进去查看：https://codepen.io/prince-zd/embed/qBKodjR，在上面这个demo的css代码中，有一部分是我们需要关注的：

:root{/*全局变量*/
--main-radius:0.5rem;
--color-brand:#00704a;
}

前端工程师在还原设计师的设计稿时，可以通过root选择器来批量控制样式，包括且不限于颜色、阴影等。token可以是多级的，也就是有引用关系，其中最重要的就是命名，可以将token理解为一种维系代码与设计样式之间的轻量级语言，目前推荐使用figma进行设计，之后的案例讲解中也将会使用figma。

层级联动

紧接上文的故事，前端工程师接着问到：按钮用哪个颜色呢？设计师说：还是用品牌色吧～

前端工程师继续追问：那么单选框和复选框的颜色呢？设计师回答到：都用品牌色就好啦～

一段时间过后，设计师说：麻烦你改下单选框和复选框的颜色；前端工程师回答道：不好意思啊，这下改不了了～（这是为什么呢）

因为此时品牌色已经绑定了包括按钮、单复选框等多个组件，所以牵一发动全身，直接改变品牌色会导致其他组件受影响：

此时就需要引入第二层token（别名），以上图为例，button-primary、checkbox-active引用xkw-brand品牌色，这一层以使用场景来规范命名，严格来讲实际是第三层，之后再细讲；这样做的好处就是当某一类组件需要改色时，可以将这个组件场景的token引用别的品牌色（下图）,避免影响其他组件：

总的来讲，我们一般会需要三层嵌套的token才能满足全部需求：

命名层次

之前的故事为大家初步讲解了DesignToken是什么，接下来就是其最核心的概念，遵循怎样的规范去命名；在写以下内容前阅读了不少国内外相关文章，不免借鉴只为各位能够更好地理解其背后含义。设计、前端如果能够使用共同的符号名称做交接的话，能够提升整个团队对视觉风格的共同理解：

分类

类别

Token的第一要素就是类别，类别跨越了视觉风格的关注点，有时可能会重叠在一起。除了典型的颜色之外，不同的系统以不同的方式命名类别，目前figma支持四种样式类别分别是颜色、字体、阴影和网格。常见的类别包括：

·color
·font (aka type, typography, text)
·space (aka units, dimension, spacing)
·size (aka sizing)
·elevation (aka z-index, layer, layering)
·breakpoints (aka media-query, responsive)
·shadow (aka depth)
·Touch
·time (aka animation, duration)

如例子中所描述的，以字体为例，会将font作为首选术语引出，括号内的是能够同等替换font的别名，在团队中选择相同术语更容易保持统一以避免耗费不必要的灵感。在选择类别名称时，避免同义词的使用，如type可以被解释为许多不同的东西，尽量选择大家共同认可的。简而言之类别就是这最后是什么，文字颜色最后是颜色不是文字，这时候颜色就是类别，文字就是属性。

个性/品牌、企业

大多数设计师在制定设计规范时，往往想为自己的产品规范烙上专属印记，在这时个性标签就显得尤为重要，往往用跟公司、产品等相关的词语做灵感来源，以我司学科网为例，旗下拥有众多子产品，诸如网校通、e备课、AI研修等，此次要做的规范是为学科网主站服务的，因此个性化标签直接采用公司首字母来构建：XKW；个性化往往是首要展示的分类标签，在token中有一个固定命名格式就是要用两个-去起头，因此我们的token规范是以–xkw开始的。

编码

此分类仅用于基础token的编写，起排序作用，无任何实际含义，常见的格式有100/200/300、1/2/3等纯数字编码。

属性

属性是与类别相关联的客观属性，能够与类别进行配对，一个类别可以与一个相关的属性配对来定义一个token，尽管这一对往往不足以定义一个有目的有意义的值。跟颜色相关的属性包括文字、背景、边框和填充，从而产生了缺乏上下文关联的基本token，如：

$color-background: #FFFFFF
$color-text: #000000
$color-border: #888888

常见的字体属性包括尺寸、重量、行高和间距，由此产生的token有：

$font-weight: normal
$font-size: 14px
$font-line-height: 1.25

还有一个常见的属性是brand，有的公司将其归纳到容器里，为了整体规范的精简化，我将其归纳到跟类别有关的属性中，既可以是品牌颜色，也可以是品牌字体。

概念

概念是对类别进行分组的另一依据，偏主观，往往带有很强的语义性，由使用者自主提出，例如，颜色可以按照这样的概念归纳为：

反馈feedback（又称通知、消息、警报），有成功success、警告warning和错误error等变体；概念与变体结合，形成$color-feedback-success、$color-action-primary和$color-visualization-performance-positive等token；

变体

变体在属性和概念仍不够划分token的时候使用，例如，通过改变文本的颜色来创造层次和对比：

·primary (aka default, base)
·secondary (aka subdued, subtle)
·tertiary (aka nonessential)

反馈色也有各种变体：

·success (aka confirmation, positive)
·error (aka danger, alert, critical)
·information (aka info)
·warning
·new

状态

状态用来指定交互状态，比如：

·default
·hover, when a pointer is positioned above an object
·press / active, between the time a user presses and releases an object
·focus, when an object is able to accept input
·disabled, when an object is not able to accept input