郑州新像素教育老师直接接听

400-029-09** 400-029-0997 转 34077
查看完整号码
扫码拨号
微信扫码拨号

那些设计系统中的梯度色板到底有什么用？

作者：新像素UI教育 来源：新像素UI教育 2023/2/15 9:33:53

先看视频，再看笔记。 之 前 给大家介绍过梯度色板，但是那个...

先看视频，再看笔记。 之 前 给大家介绍过梯度色板，但是那个时候还没有考虑到Design Token。 现在各种设计系统也相继加入了Design Token，所以今天我就结合Design Token再给大家介绍一下梯度色板。
为什么蚂蚁规范有那么多色板？ 首先，蚂蚁的设计系统最近更新了5.0，目前看起来并没有什么太大的变化，的特点就是给出了不同颜色的梯度色板。这个也是很容易给新手带来疑惑的地方，其实我们在自己的项目中，是没有必要给出那么多颜色的，需要哪些颜色再使用哪些颜色就可以了。
一般来说需要哪些颜色，我这里大概分了几个类： 1、中性色肯定是要有的，像这种中性色一般用于文字、图标还有一些浅浅的那种卡片背景色，当然，分割线的使用频次也是很高。
2、第二个就是主色或者叫品牌色，这也是项目中必须要有的，有了品牌色肯定还不够，还要有辅助色。
3、第三个就是功能色了，也可以叫反馈色，比如危险要用红色，成功要用绿色，这几个是必备的颜色，也是每个项目都要有的。
以上就是我分的三大类，但实际上，还有第四个，但不是必备的，具体的要看你们的项目需求，比方说数据可视化中那些各种各样的图表，上面那些颜色是一定不够用的，所以这里我只是分了一个大类，具体需要哪些颜色还要看你们的项目需求。 至于蚂蚁的设计系统为什么设置那么多颜色，主要是因为它作为一个大平台，用户各行各业的都有，它给出的颜色要满足很多的场景，所以才做了这么多的色板。 梯度色板的算法 其实我们还可以自己去定义一些梯度色板，也是自动生成。但是每家设计规范的算法是不一样的，也就是靠这些不同的算法生成出来的这些梯度色板，比如谷歌的设计规范生成出来的梯度色板左右两端是纯白和纯黑，而蚂蚁的很显然是从深到浅，这个就是他们的算法不同。
梯度色板到底是怎么用的？ 讲到这儿如果我们还是没明白梯度色板有什么实际性的用处，那么这个就涉及到开发了。通过前面讲的我们能了解到，梯度色板中每个颜色的档位对应的都有一个具体的色值，这就要引用到一个概念——别名。 说到别名，就是Design Token相关的知识了，比如blue-6，它本身是一个16进制的色值，这个时候给它起了一个别名叫Brand Color，那么开发在调用颜色的颜色时候可以直接调用blue-6，也可以直接调用Brand Color的名字，调用出来的也是blue-6。 也就是说这个颜色它又叫blue-6，又叫Brand Color，而开发那边是很自由的，它可以起无数个别名，所以它可以有无数个名字都指到blue-6，这个大家要理解。
当然，上面所说的只是第*层，实际上别名也能互相的嵌套，首先，如果我们不使用任何的样式，那它就是一个16进制的固定的色值，如果我们使用了梯度色板，那么这个16进制的色值就是blue-6的色值，blue-6和16进制的色值之间就是一个梯度色板。 但是，现在梯度色板有一个问题，因为我们单看blue-6的名字是没有任何指导性的，它只是没有意义的序列号，我们并不知道这个颜色要用在哪里，所以才需要用到brand-color这个别名。这样就又限定了一个使用范围。 这里我们来看它的调用关系，在Design Token里面，或者说在开发代码的视角里面，它是能让brand-color直接指向blue-6的，这是我们从设计师角度无法理解的，因为现在市面上的设计软件还不能做这种嵌套。也就是基于目前这个情况，导致很多设计师无法理解梯度色板有什么用处。 这一层相当于给blue-6赋予了一个语义化的名字叫品牌色，但是只看这个名字，它的使用范围其实也很广，只是知道它是品牌色，这个时候就可以再往下做一层嵌套，名字叫button-primary，也就是主按钮的背景色，这样就限定了使用范围，但是它调用的并不是blue-6，而是brand-color。再往下其实还能细分，所以说一个颜色或者一个别名能被无数个其它的别名去调用。
梯度色板搭配Design Token的优势 最后再给大家说一下梯度色板的优势，如果说后期我们的项目要品牌升级，这个时候品牌色也要发生变化，如果我们的项目是严格按照Design Token的嵌套逻辑去做的话，那么开发只需要把颜色更新一下，底下的颜色也会跟着全部发生变化。 第二层好处就是如果品牌色发生变化，开发不用再一个一个去写了，只需要把别名去指到其他的一个梯度色板上就可以了，顺带的它底下的颜色就都会发生变化。

讲到这儿大家应该已经理解梯度色板有哪些用处了，理解起来一定要结合开发的视角，在开发那边梯度色板才是能实用的。 但是目前市面上的设计软件是不能嵌套，*多只能建个样式，但样式又是平级的，不能互相嵌套套，所以某种程度来说，这个梯度色板对我们设计师来说还用不起来， 不过好在还是有解决方案的，比如figma中我们就可以借助Figma Token插件来实现。 以上就是今天要给大家分享的内容，希望大家看完之后能对梯度色板的用处以及优势有一个基本的了解。

“郑州新像素教育”是郑州新像素教育信息咨询服务有限公司在教育宝平台开设的店铺，若该店铺内信息涉嫌虚假或违法，请点击这里向教育宝反馈，我们将及时进行处理。

机构评分

环境：4.0师资：4.0服务：4.0效果：4.0

公示信息

店铺名称：郑州新像素教育

单位名称：郑州新像素教育信息咨询服务有限公司

账号名称：zzxxsjy（177******10）

所属城市：河南郑州

入驻时长：10年

在线客服：在线聊

相关课程

微信咨询

返回顶部