2022年2月4日，第24届冬季奥运会在北京召开，中国有24个节气，开幕当天是2月4日恰逢立春，仪式开始时间是20:04，中国队24分出场……此时此刻的我只想说一句，你永远都可以相信张艺谋，作为70 多岁的张艺谋，不仅有着非凡的创新能力， 更精妙的是他鳌头独占的色彩艺术。

看完冬奥会我久久不能平静，一直在想这样一个问题，张艺谋的色彩艺术是否能借鉴到UI设计中？然而艺术与设计不同，艺术是在表达自己，张艺谋是在用艺术来表达中国。而设计要考虑如何创造商业价值和做出对消费者有用的设计，需要有极强的同理心和洞察力，去“感受用户的感受”，发现他们的痛点，用设计去解决问题。难道两者之间就真的没有相通之处了？我觉得答案应该是否定的，于是我回忆了一下我们是如何定义颜色的，发现其中还是有些相通之处的。

   色相的选择   

当我们在做一款APP的时候，首先要确定的就是色相，色相是情感和情绪最直观的视觉感知体现。我们通常在做设计提案的时候，会从不同的方向来找支点，帮助促进方案的达成。

色彩情绪映射：人对色彩的记忆是有关联性的，当我们还是小学生，甚至上幼儿园的时候，色彩与情绪的映射关系，就已经在我们的脑海里根深蒂固了，红色代表热情、黄色代表警示、绿色代表安全、蓝色代表冷静，暖色调会激发人的食欲，冷色调会让人理智等等。

当然，人对色彩的记忆关联也会随着时代的变化而变得更加丰富多样，我们会受市场的影响，品牌信息的不停传递，慢慢的改变我们的认知，使我们对颜色有了更丰富的解读。

举个例子，当我说到电商类APP的时候，你们肯定会想到红色橙色，比如京东、淘宝、拼多多。说到蓝色，一般会想到B端产品或是一些强调科技、效率、的企业产品上。甚至有些颜色还能让你感受到品牌定位，比如说，蜜雪冰城和喜茶，我们光看牌子就能确定这家店卖的东西贵不贵，走的是高端路线还是平价路线，当然，图形是一方面，颜色也起到了一定的作用。

我们过往的经验会让我们自然而然的想到对应的色相，所以设计师为了避免用户的惯性思维导致不理解而带来的不必要的疑惑，通常会采用符合情绪映射的色相去做设计。

这一点我觉得跟张艺谋的色彩艺术选择就有相似之处，我们通过颜色来传达我们的产品定位，贴合业务的发展目标，基于行业与场景来确定色相。张艺谋是通过色彩的艺术把情感和丰富的内涵透过电影高度传达出来。 

情绪板：情绪板是我们选色相时候的通用方式，它是根据产品定位，行业特性，竞品分析等获取原生目标关键词。目标关键词定下来之后就是在这基础之上进行脑爆，通过原生关键词衍生出更多的相关词语，在根据这些衍生词来收集相关的素材，从这些素材中寻找出他们的特性，当我们把所有的图片堆到一起的时候就有一个大致的色相产生了。

有利的理论依据：为了足够的有说服力，我们经常会找一些有利的理论依据，举个例子，比如我们要选蓝色为我们的主色调，我们可以找一些调研报告作为支点，比如根据YougGov公司调研报告我们可以看到，在性别纬度，无论男性还是女性，接受蓝色的比例都是最高的，而在世界地域纬度，蓝色是最受欢迎的颜色。

再比如在视觉障碍的人群，数据统计，世界上大约有8%~10%的男性以及0.5%的女性患有不同程度的色弱，而蓝色是唯一能被辨识的，这满足了我们为无障碍人群而设计的要求，等等。

   确定具体色值   

定好了大致的色相后，如何能确定出唯一的色值呢？（这里只介绍下大概的选色逻辑）

还是拿蓝色举例，我们可以运用RGB（红绿蓝）模式设置了一个纯蓝色，B的数值为255。然后同样的色值下把模式改为HSB（色相 饱和度 明度），把S和B改为100不变。

接下来就只改动H的数值就可以，在当前的数值上加10°，减10°排列出可能适合的色相。

从排出来的色相序列中，找出2个大概符合，情绪板中色调的颜色，然后在这两个颜色上改变S(饱和度)做出颜色序列

最后在借助的色彩可用性测试工具 - color review 网址：https://color.review/（WCAG标准）调整出一个在黑白背景下都适合的颜色，也就是颜色与背景的对比度大于等于 4.5：1（个人觉得这个工具并不适合用于选品牌色，更适合在选择文字色的时候使用）

如何合理的利用工具，且不与设计理念冲突是我在选择颜色与辅助色时最纠结的点，灰色其实还好只要利用好工具，符合规范很容易就能找到非常合适的颜色。但品牌色就不同了，在符合前景色和背景色（深色模式浅色模式）在色相确定的情况下，对比值在45以上的，筛选下来颜色就那么几个，先不说是否跟品牌定位设计理念相符合，光说就这么几个可选颜色，如果大家都选它们做品牌色，显然没有什么品牌特色可言，所以我觉得在选择品牌色的时候理念要比工具辅助更重要。

   辅助色的选择   

我们选择辅助色的方法是通过邻近色、互补色、对比色来选择出既符合品牌调性又有区别度的辅助色的。

首先在品牌色的基础上，在保证饱和度（S）和明度(B)相同的情况下来调整色相(H)，以215为起点，以15°为增量或减量标准，生成24色色板。

以品牌蓝为起点，选择相对较多的邻近色，以保证在色温上的一致，利用对比色及互补色扩展色相，以制造强烈的颜色对比，满足一些冲突性场景。最后依据感官及灰度，矫正辅助色。尽量保证无彩情况下的灰度统一。色相必须保持是同类色（色相环中15°夹角内的颜色）保证感官明度的同频，保证是障碍群体的识别度。

   无障碍测试   

我们在做无障碍测试的时候会用到这样一个插件，https://www.getstark.co/ 无障碍色弱插件，这个插件可以帮助我们看到色弱人士看到的样子。不过我们一般会避免仅使用颜色来传递信息，因为如果真的受这个的限制，基本上没什么颜色可以选择。

好~这就是我们在选择颜色时候用到的一些看似科学的方法了，但用这种方式真的能设计出大众接受度最高的方案嘛？我甚至觉得有些所谓的理论还有一些很科学的工具反而限制了我们的创新，总觉得可能会有更好的方式方法来帮助我们更好的设计，只是我还没有探索到，希望有一天我们能找到更合理的方法，设计出令人震撼的作品。

Powered by Froala Editor