今天我们将向你介绍，为设计建立颜色系统需要用到的最重要工具之一——UI色彩地图。

它可以帮助你在设计、迭代色彩系统时，更好地在品牌、现有的设计规范、易用性要求、产品目标和行为心理导向之间找到平衡。

（UI色彩地图，在 SDL艺术实验室 公众号回复“ 地图 ”即可下载模版）

如何运用色彩地图

UI色彩地图包含两个部分，灰阶和彩阶。

两者的排列规律都是越往上越是容易引人注意的颜色。（色彩地图包含波长为400-700纳米的颜色，因为不包括非光谱颜色，所以没有棕色、粉色或红紫罗兰色）

虽然科学研究显示，我们每个人对颜色的反应具有一定的差异，但我们可以将这张UI色彩地图看成一个大的方向指引，再在每次的设计中不断细化对色彩的定义。

同时，这其中有许多细节需要我们留意：比如在白色背景上的内容，我们需要保证其灰度的对比，让它更易于吸引用户的同时让保证用户浏览舒适度。

举个例子，在光谱颜色中只有几个是最能吸引人注意力的颜色。而这其中的蓝色、绿色，就是属于既能吸引人们注意，同时让人们处于舒适区间的颜色。

而暖色与冷色相比，在吸引人们的注意力的同时更能提高其内容的凸显度。所以当遇到重要的任务，如危险、障碍，我们可以用红色来吸引用户注意力并激发用户的紧迫感。

（颜色的视觉平均显著性）

调整颜色层级

UI色彩地图让颜色可以像文字一样有梯度层级（如H1、H2、H3…）。

如果想要提高色彩的层级，我们可以在地图顶部的红色区域中选择；如果想降低色彩层级，则是往地图中部的冷色移动，甚至再下移到底部的灰色区域。

但是因为颜色并不是从低到高的线性递进关系，所以我们在应用时需要做一些调整（如明度、纯度等）：

比如让色彩系统中的红色，可以压倒其他所有颜色；让绿色比蓝色更明显；让所有彩色的强调色比灰色更引人注意。

（颜色的明度、纯度变化）

建立颜色系统

我们可以从白色背景开始，设定页面中所需的灰色和彩色部分（强调色）。

对于灰色部分，我更喜欢建立在黑白灰基础上（而不是混有其他彩色的灰），以保证画面具有干净的结构美感；对于彩色部分，我们可以寻找具有明显对比度的强调色，然后使用无障碍设计标准进行检验和校准，直到色彩的对比度能符合AAA标准。

（颜色系统的规则设定因人而异）

当然这需要很多工作，但如果做得好，你会拥有一个强大的颜色系统并为你服务很多年。

提升颜色可识别性

其实色板中默认的红色（FF0000）和绿色（0AFF00），对于色盲的人会难以识别。

UI色彩地图中标明了最普遍的色盲区（如红绿色盲），让你明确哪些颜色是难以被识别的，所以对于这个色盲区里的颜色你需要谨慎使用，尽量在设计中减少这些颜色的出现，避免将认知关联归因于这些颜色。

如果你确实需要用到色盲区里的颜色，你需要找到一些能提高它可识别性的方法，如调整其对比度、添加图形符号描述等等。

当然，在我们设计色彩系统时还会受到更多标准的限制，如品牌、现有的设计规范、产品目标、用户情感等等，但可识别性标准的优先级永远是排在第一的。

如果你还想了解色彩与用户情感间的关联，可查看我们之前分享的文章《奇怪的知识又增加了～从科学角度验证，色彩对用户情感的影响》

在 SDL艺术实验室 公众号，

回复“ 地图 ”，即可获取色彩地图模版

+++++

本文由 SDL艺术实验室 公众号原创，如需转载，请联系公众号后台

原文链接：https://mp.weixin.qq.com/s/2lgcTrBPWrphLJac88PK5A

Powered by Froala Editor