Design Token模型详解

背景

2022-11-25

Ant Design 5.0 正式发布上线

 

 

探究

思考：

首先让我们了解一下啥是Design Token？

翻译：

Design（设计）+ Token（令牌）= Design Token（设计令牌）

完全没毛病的解释～但说了跟没说一样（听君一席话，如听君一席话！😂）

 

但token我们熟悉啊～

 

 

令牌的定义就是用来让人识别身份的，我们一般把Token作为参数传递给服务端，用来识别我们用户的身份。

所以Design Token，说白了就是 一种为设计特定的满足一定规则的用来识别身份的参数。

 

介绍：

再来看看官方定义：

“Token”原本的意思是“令牌，指令”，与 Design 连在⼀起指“设计变量”。在工程逻辑中用于用户身份与服务器端进行验证，而在设计体系中，Design Token 则可以简单理解为封装的视觉样式参数。它通过规定样式参数，并通过一套符合设计师、工程师理解的统一的命名规则，为这些样式参数的定义名称。

 

根据北美顶级 SaaS 企业的开源设计系统 Saleforce Lightning Design System 的解释，Design Token 是设计系统中的可视化原子，是设计属性的命名实体，使用它们代替具体编码值（如颜色的 16 进制、间距的像素值等），以便于维护一套可扩展且一致性的设计系统。

 

可以说，Token 就是最底层的原子，本质上就是找到了组件、属性和代码之间的对应关系，统一了设计样式和前端语言，使组件和设计系统可以被快速管理。

 

总结：

提炼一下：

性质：参数；

量级：原子级

关系：映射

 

原子级：最基本的单位（细胞）

 

Design Token 基本概念：为设计样式而产生的，具有某种映射功能的，基本参数。

 

 

工作关联

场景：

现象一：多少次对话，被我们亲爱的设计同学所指正，仅仅只是一个颜色：

 

如上图，是不是觉得颜色没区别！

其实色值：#4D5ED7 #4254D5

这种肉眼难辨的，基本上只能通过看代码上的具体色值才能辨别出。

 

现象二：颜色选择太多，搭配丑（来看看前端的眼光～）

 

随便一种红色都有n多选择

 

现象三：除了魔法，成本高～(当然用filter添加滤镜也行)

场景反应的问题：

总结一下共四个问题

1.开发用的颜色/字体样式/投影等与设计稿存在差距；

2.颜色选择困难。不同设计师之间在用各种层级的文本颜色时，到底用 Gray1 还是用 Gray2，不知道该选哪一种；

3.SaaS 类的产品需要根据客户的品牌色调整产品的主色，设计和开发都面临巨大的工作量；

4.设计稿的更新无法及时在开发者的代码中体现，一是因为开发首先需要拿到新的设计稿，再根据标注甚至肉眼判断区别后更新代码；另一方面，设计稿中看似简单的改动可能导致较大范围的代码改动，例如字体大小等；

 

诞生：

为了解决和优化上述的问题，Design Token 应运而生。

 

 

Design Token优点：

基于上述关于 Design Token 的基础解释，可以将 Design Token 的好处可总结为：

 

• 设计语义-更易理解
• 设计方案-更加一致
• 主题皮肤-一键替换
• 设计变更-高效维护
• 设计成果-精准还原

 

1. 设计语义-更易理解（说白了就是语意化命名）

每一个组件的基础元素都可以用 Token 进行语义化的命名，帮助设计师和开发建立统一的描述语言。例如#91d5ff 这个色值按照传统的设计规范命名的方式，它可能叫 Blue-3。在实际应用的时候，设计师和开发并不能直接通过 Blue-3 来理解这个颜色到底是用在什么具体场景当中。而当我们通过 Token 语义的方式让它达到组件级别的精度时，它会叫：color-primary-brand-light-disable，不同的设计师和开发就能迅速的理解这个颜色应用在什么具体场景当中。

2. 设计方案-更加一致（说白了就是一对一，精准）

当使用组件库实际运用到项目当中时，我们有时候会有不同设计师合作产出一个项目的情况。对于一些不熟悉设计规范或新加入的设计师来说，就会困惑，当使用二级文本色的时候，究竟是用 Gray2、还是 Gray3、Gray4。而这个时候，我们定义一个 Token 名称叫：color-text-secondary，这个 Token 嵌套的颜色是 ：Gray3，这样我们设计师在使用的时候，只需要选择 color-text-secondary 这个 Token 变量即可，能选择的颜色就是唯一的，这就能在一定程度上确保不同设计师在同一个场景当中的设计稿保持高度一致性。

 

3. 主题皮肤-一键替换（说白了就是变量）

主题皮肤的替换可以用在两个维度，一是浅色模式和暗色模式的替换，二是不同品牌色之间的替换。我们可以将不同主题的同一个场景下的颜色使用同一个 Token 命名，例如变量名都叫：color-primary-brand-light-default，蓝色皮肤下对应的值为：#165DFF；红色皮肤对应的值为：#F53F3F。然后通过插件面板的一键操作即可完美切换。同时这种切换模式也可以带入 tokn.josn 代码（后面会具体讲如何输出 json 文件交付开发）中，与开发进行同步。

 

4. 设计变更 高效维护（说白了就是方便修改）

还是上面的例子，当我们的二级文字颜色 color-text-secondary 需要进行变更，从 Gray-600 变为 Gray-500。如果没有“color-text-secondary”这个 Token，我们可能需要手动去选中所有用了 Gray-600 的二级文字的图层，一个一个地将它们改为 Gray-500，而当我们有了“color-text-secondary”这么一个 Token 时，我们只需要将 color-text-secondary 的值一键从 Gray-600 变为 Gray-500 便可以完成产品全局的颜色变更。进而设计师可以将 token.json 代码（后面会具体讲如何输出 json 文件交付开发）同步更新给开发 ，开发直接一键替换，线上的界面就能半自动地迅速应用到变更后的色值。

 

5. 设计成果-精准还原（说白了就是定位精准）

在常规不使用 Token 的情况下，开发同学使用的是硬代码的模式，代码编辑器无法判断这个颜色是否正确，如果开发不小心输错了一位数，就很可能导致线上运行时候的不一致。而使用了 Token 之后，开发只需要输入这个场景的 Token 名称的前缀，代码编辑器便会自动化地提示有哪几个颜色供选择就可以了，如果不正确，代码编辑器还会给出报错提示，开发同学可以在写代码的过程中完成基础的检验工作，这样一来，设计师的成果便能够一定程度上的精准还原，设计师验收的工作量也会小很多

 

 

命名规则

为啥要这样命名呢？我们再来看看一些常见大厂的token命名

 

参考：

首先是ant design

--ant-primary-color: #1890ff;
--ant-primary-color-hover: #40a9ff;
--ant-primary-color-active: #096dd9;
--ant-primary-color-outline: rgba(24, 144, 255, .2);
--ant-primary-1: #e6f7ff;
--ant-primary-2: #bae7ff;
--ant-primary-3: #91d5ff;
--ant-primary-4: #69c0ff;
--ant-primary-5: #40a9ff;
--ant-primary-6: #1890ff;
--ant-primary-7: #096dd9;
--ant-primary-color-deprecated-pure: ;
--ant-primary-color-deprecated-l-35: #cbe6ff;
--ant-primary-color-deprecated-l-20: #7ec1ff;
--ant-primary-color-deprecated-t-20: #46a6ff;
--ant-primary-color-deprecated-t-50: #8cc8ff;
--ant-primary-color-deprecated-f-12: rgba(24, 144, 255, .12);
--ant-primary-color-active-deprecated-f-30: rgba(230, 247, 255, .3);
--ant-primary-color-active-deprecated-d-02: #dcf4ff;

 

再来看看element

--el-bg-color: #ffffff;
--el-bg-color-page: #ffffff;
--el-bg-color-overlay: #ffffff;
--el-text-color-primary: #303133;
--el-text-color-regular: #606266;
--el-text-color-secondary: #909399;
--el-text-color-placeholder: #a8abb2;
--el-text-color-disabled: #c0c4cc;
--el-border-color: #dcdfe6;
--el-border-color-light: #e4e7ed;
--el-border-color-lighter: #ebeef5;
--el-border-color-extra-light: #f2f6fc;
--el-border-color-dark: #d4d7de;
--el-border-color-darker: #cdd0d6;

 

最后看看TDesign

参考 https://github.com/Tencent/tdesign-common/blob/develop/style/web/theme/_light.less

/ 文字 & 图标 颜色
--td-font-white-1: rgba(255, 255, 255, 100%);
--td-font-white-2: rgba(255, 255, 255, 55%);
--td-font-white-3: rgba(255, 255, 255, 35%);
--td-font-white-4: rgba(255, 255, 255, 22%);
--td-font-gray-1: rgba(0, 0, 0, 90%);
--td-font-gray-2: rgba(0, 0, 0, 60%);
--td-font-gray-3: rgba(0, 0, 0, 40%);
--td-font-gray-4: rgba(0, 0, 0, 26%);

// 基础颜色
--td-brand-color: var(--td-brand-color-8); // 色彩-品牌-可操作
--td-warning-color: var(--td-warning-color-5); // 色彩-功能-警告
--td-error-color: var(--td-error-color-6); // 色彩-功能-失败
--td-success-color: var(--td-success-color-5); // 色彩-功能-成功

// 基础颜色的扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态
--td-brand-color-hover: var(--td-brand-color-7); // hover 态
--td-brand-color-focus: var(--td-brand-color-2); // focus 态，包括鼠标和键盘
--td-brand-color-active: var(--td-brand-color-9); // 点击态
--td-brand-color-disabled: var(--td-brand-color-3); // 禁用态
--td-brand-color-light: var(--td-brand-color-1); // 浅色的选中态

// 警告色扩展
--td-warning-color-hover: var(--td-warning-color-4);
--td-warning-color-focus: var(--td-warning-color-2);
--td-warning-color-active: var(--td-warning-color-6);
--td-warning-color-disabled: var(--td-warning-color-3);
--td-warning-color-light: var(--td-warning-color-1);

 

总结：

通过上面的大厂 Token 参考我们可以分析出一些普适性的规则：

1. 单词之间用“-”分隔；

2. Token 前缀可自定义添加自己产品的简称，例如：“–el-xx”、“–ant-xx”、“–td-xx”；
3. Token 可以套 Token，例如：–td-brand-color-hover: var(–td-brand-color-7)；

 

其实不难看出构成一个token的主要因素：（主要是与常用的css属性挂钩）

Color 颜色、Shadow 投影、Typography 字体样式、Size 尺寸、Space 间距、Border Radius 描边圆角、Border Width 描边宽度、Opacity 透明度等

 

 

经过上面的描述，我们对design token都有了一定的了解了。再来看看ant design 5.0的具体改动

 

ant design 5.0的具体改动

参考：https://www.shangyexinzhi.com/article/5563821.html

 

其实总结一下ant design 5.0的改动无非包括以下四点：

• 组件的样式更新

• 整体调整了主题色，尺寸，边距等

• 组件的生产规范

• 自身业务实践和社区的呼声，新增了 4 类组件和变体组件，制定了“规范的规范”

• 产研的效能提升

• 优化了算法，让开发更便捷（这里就涉及到token命名优化）

• 协作的流程优化

• 接入低代码平台，增强“业务模型”、“界面设计”与“代码实现”三者之间的协同关系

 

 

参考文献：
大厂都在用！ 万字干货带你读懂并应用 Design Token：
https://maimai.cn/article/detail?fid=1738328303&efid=sFnA57gr-Uu8cUj8lfQ3QA
提效神器 Design Token 的探索与应用
https://mp.weixin.qq.com/s/9LJT89vqjdVwsafDckh6Pw