郑州新像素教育

梯度色板生成02-最小化的层级结构

发布日期:2024年05月13日

先看视频,再看笔记。 正式讲梯度色板怎么生成之前,还有一个前...

先看视频,再看笔记。 正式讲梯度色板怎么生成之前,还有一个前置的知识,那就是梯度色板的分类层级。比如像蚂蚁的梯度色板,很明显不是我们自己整理项目要用的,我们也用不了这么多颜色,所以这期先跟大家讲一下梯度色板的最小形态或者说最小的分类应该是怎样的。

当然,我也看了很多的设计系统,这里就先找一个看一下具体的颜色分类。 第*个颜色叫Primary,也就是主色,也可以叫品牌色,是一个橘黄色。

再然后,还有一个Secondary,我们可以理解为是辅助色。

然后就是功能色了,功能色就比较有特点。这个跟你的产品、行业或者是风格没什么关系,功能色就是功能色,成功是绿色,警告是橘黄色,错误就是红色,这些颜色不会跟着你的品牌调性去改变,也是行业比较统一默认的一套颜色,不管是C端还是B端,都是一样的。

最后就是中性色了,文字、图标、还有一些分割线都会用到,平时我们在做界面的时候,用这种浅浅的颜色去划分功能是*好的,中性色除了文字icon,也能用在各种背景色,特别是带深一点的或者浅一点的那种背景色,帮你做功能上的区分,所以说中性色就是帮助你把整个产品里面的功能做出区分的颜色。

如果这样分的话,梯度色板一共就有三大块——主色、功能色和中性色。只是说主色里面辅助色不是必备的,需要的时候就加上;功能色就是成功、警告、错误这些;中性色就是文字图标和背景功能块。 硬要往下分,其实还有一个数据可视化,数据可视化里面的图表需要用到一些赤橙黄绿青蓝紫的颜色,但这个如果你们不用的话,它就没用。所以,大家只需要记住我说的这三大块就可以了,这是最小的,不能再少了,再少就不够用了。

现在还有一个问题,就是这些颜色里面哪些是我们可以自定义的,哪些没必要,首先品牌色肯定是要自己定的,这个跟自己项目的行业或者是品牌调性有关系;然后是中性色,中性色一般来说是跟着品牌色走的,比如说你们品牌色是红色,那你的中性色就要掺杂一点红,当然最终还是要看你们的产品套进去那个界面的和谐程度怎么样,不行再微调,但一般来说都会加点品牌色在里面。 抛开这两个,还有一个功能色,功能色我们也没有必要自己原创,也原创不了什么。如果说你为了让自己的项目很个性,故意设置一个个性点的绿,但是用户不会关心这个,对用户来说它就是绿,所以这里我的意思是我们只需要操心自己定的主色和中性色就行了,至于这些,完全可以去抄一套自己喜欢的。 以上就是梯度色板层级结构的介绍,主要就是主色,功能色,中性色这三个,大家把这个理解的话,回头生成梯度色板的时候就不会乱了。

相关资讯
学姐有话说 | 新像素学员专访46期 学姐有话说 | 新像素学员专访45期 学姐有话说 | 新像素学员专访44期 学姐有话说 | 新像素学员专访43期
相关课程