手把手教你推导一套色彩体系精彩片段|韩立|看过|经典

编辑导读：我们看到红色能够感受到热情、兴奋和危险，看到绿色时往往就感受到安全、自然和平静。可以说，颜色调动我们的情绪只需要一瞬间，而且它在我们的记忆中可以停留更久。本文作者围绕色彩体系展开五个维度的分析，希望对你有帮助。

文章插图
前文的原子设计中我曾经讲过，原子是构成所有元素的最小单元，没有办法再被细分。它通常对应着产品设计中的通用样式及构成组件的最小颗粒。而颜色，作为整个设计系统中极为重要的原子之一，在心智模型中占据了关键的地位。
我们看到红色能够感受到热情、兴奋和危险，看到绿色时往往就感受到安全、自然和平静。可以说，颜色调动我们的情绪只需要一瞬间，而且它在我们的记忆中可以停留更久。
接下来，我结合公司目前的业务CROV Dropshipping（以下简称DS），来进行色彩体系的探索，以输出一整套的色彩方案。但愿这次探索能够给予各位一点启发。
一、业务背景CROV DS是针对美国市场的线上一件代发平台（类似阿里巴巴的一件代发业务），属于跨境电商B2C行业。平台帮助用户无需任何初始成本、无需囤货即可顺利开展电商之路，时间灵活可控，让用户专注于销售本身。
二、为什么我们需要色彩体系？1. 对于业务目前CROV DS业务日益繁杂，但是除了品牌色之外，辅助色的定义过于随意。而且随着业务场景的扩展，临时增加的颜色很容易被遗漏在某个不知名角落的画板中，导致一次性用色的风险。（tips：一次性即前一篇我所讲到的用完即扔、未被复用的设计）
而且用色本身的随意也导致研发还原结果的不统一，一处地方色彩各异的现象比比皆是。
因此，我们需要基于我们自身的业务特征来产出一套足够完善的的色彩体系，让业务从用色上达成基本的一致统一。
2. 对于设计师我们设计师在定义颜色时，更多得是直接在色板上进行取色，但这样的取色方法存在诸多弊端。

文章插图
1）增加决策
可能很多设计师选色时会有这种情况，一会觉得这个颜色脏了，一会又觉得那个颜色太刺眼了，有时候完美主义作祟，为了得到一个满意的颜色甚至花上大半天。这种情况尤其在多色搭配时更为严重。
其实这和不用网格系统来布局是一个道理（注：网格系统是一种能够极大提升布局效率的方法，后面会讲）。
色板中取色的范围趋近于无穷。如果将HSB模式下的单个H、S和B作为一个最小单元格，那么我们可以选择的格子高达数百万个。颗粒度过细的情况（其实根本就没有颗粒度）导致我们在取色时往往会被迫进行反复的微调和尝试。
2）缺乏秩序和逻辑性
直接在色板中取色主要依赖的是“直觉”这种相对感性的存在。
比如一个按钮的状态可以包括normal、hover、pressed、disable等多个状态，如果我们仅仅靠自己的直觉自由调整明度和饱和度，最后的配色方案其实缺乏内在的逻辑性和秩序性。
3）难以复用
【 手把手教你推导一套色彩体系】对于B端这些偏后台工具、场景复杂的业务，颜色运用得往往也比较广泛，如果我们没有一套完善的色彩体系，那每次一遇到新的项目及业务场景需要用到新的颜色时，之前定义的颜色难以复用，导致我们需要重新定义颜色。而且这种相对主观的方法也缺乏说服力，难以体现专业度。
而如果设计师提前定义好一套色彩体系，一方面只需要在对应的色板中选择即可，大大减少了设计决策。另一方面色彩体系所提供的不同色彩梯度也便于各个需求、业务场景的复用。而且色彩体系富有逻辑和秩序，因此从中挑选的颜色也同样是这样，显著降低设计师依赖“直觉”所带来的主观和不可控。
三、如何创建一套色彩体系？Alipay Design团队提过：