图标是我们UI设计工作中不可避免的一项，也是基本技能之一。

       图标的配色很大程度上决定了界面的视觉美观度，工作中很多新手设计师配色都是凭感觉，这样的做法其实并不科学，如果你很厉害，那这句话当我没说。

      设计其实是一门很严谨的科学艺术，正确的配色会让你的图标设计更加符合产品，更加贴合用户。

本文将通过五个维度帮助你快速实现UI图标的配色

01.情绪板

02.用户画像

03.品牌调性

04.四色原则

05.巧用色板

延伸话题：

图标设计一般情况分为：

面性图标

线性图标

线面结合图标

异形图标。

图标的可用性测试：

可查找性（Find-ability）：用户是否能在某页面上找到该图标。

可识性（Recognition）：用户是否能够理解图标所代表的意思。

预测性（Information scent）：用户能否猜到点击图标会发生什么。

吸引力（Attractiveness）：图标是否美观。

01.情绪板

      色彩心理学中提到，色彩对人们的心理活动有着重要影响，特别是和情绪有非常密切的关系。

      我们可以从色彩心理学的角度，再通过情绪板分析，快速确定图标颜色的色相。

02.用户画像

      匹配目标用户人群。通过目标用户性别，年龄，兴趣特征，行为偏好等，确定图标颜色采用同类色，邻近色，对比色还是互补色，饱和度高还是饱和度低。

举个简单的例子：

产品的目标用户是80%为女性，年龄在18-25岁之间的人群，图标的颜色要偏粉嫩，明度高，饱和度高。

产品的目标用户均为中产阶级，年龄在25-39岁之间，追求品质生活，图标的颜色尽量沉稳，并且饱和度不易过高。

03.品牌调性

      品牌调性是非常重要的，我们在处理界面的时候很多设计方向都是从品牌基因出发的。品牌的颜色，图形，吉祥物等都属于品牌基因。在这里我们单独对颜色进行使用或再加工。

04.四色原则

      图标颜色尽量不超过四个，业务相邻近时，颜色保持一致。

      心理学上把色彩分为红、黄、绿、蓝四种，并称为四原色。通常红—绿、黄—蓝称为心理补色。

      在色相上保持四色原则。当业务相互邻近时，比如租房，写字楼，同属于出租房屋业务，可以采用色相一致。

05.巧用色板

      其实有很多的色板值得大家借鉴和学习，在这里我暂时罗列出来两个，仅供参考。

Ant Design

      一个基于“自然”和“确定”的设计价值观的设计语言。

      Ant Design 的设计团队倾向于采用 HSB 色彩模型进行设计，通过对自然场景的抽象捕捉，结合蚂蚁的技术基因，形成了特有的 12 色。进一步又通过大量的观察，捕捉不同色彩在自然光下的变化规律，借助美术中素描的思路，对 12 个颜色进行了衍生。

      Ant Design 的基础色板共计 120 个颜色，包含 12 个主色以及衍生色。

Material Design

      Material Design是Google推出的设计语言，Material Design 中的配色灵感来源于大胆的色调与柔和的环境对比、阴影与高光的对比，颜色充满了惊喜和活力。

作者：徐大雨