个人中心

登录 | 注册

咨询/预约我的订单我的网课我的问答我的评价我的权益浏览记录我的收藏
机构中心

教培机构
教培机构入驻教育宝平台、搭建私域流量运营系统或购买百度知了好学

查看详情登录后台

网课机构
录播课程和知识付费机构入驻教育宝网课平台

查看详情登录后台

基础教育学校
公立私立幼儿园、中小学、职业学校入驻教育宝学校库

查看详情登录后台

课外活动机构
研学、周末活动、冬夏令营机构入驻研学活动子平台

查看详情登录后台

老师/大咖
各细分领域的资深老师、教练和从业者入驻教育宝大咖平台

查看详情申请合作
平台客服
- 400-601-2788

郑州新像素教育

专注于UI设计培训

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

400-029-09** 转 34077

查看完整号码

扫码拨号

微信扫码拨号

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

作者：新像素UI教育来源：新像素UI教育 2023年02月15日更新

先看视频，再看笔记。之前给大家介绍过梯度色板，但是那个时候还没有考虑到Design Token。现在各种设计系统也相继加入了Design Token，所以今天我就结合Design Token再给大家介绍一下梯度色板。为什么蚂蚁规范有那么多色板？首先，蚂蚁的设计系统最近更新了5.0，目前看起...

先看视频，再看笔记。之前给大家介绍过梯度色板，但是那个时候还没有考虑到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插件来实现。以上就是今天要给大家分享的内容，希望大家看完之后能对梯度色板的用处以及优势有一个基本的了解。