如何为你的UI制定一套色彩系统？来看这个实战案例！

色彩在UI设计中的作用：加深品牌印象与品牌感、引导用户视觉凹增加易读性、区分信息交互的状态、营造氛围传递热度......

前言

不管是做 UI 设计还是画插画，有很多同学觉得自己是因为天赋不够所以对色彩的敏感度不够，其实不然。一个可能是大家总结的太少，从来都是凭感觉和运气去配色，但配色都是有讲究的。

一个设计作品呈现到用户面前，第一眼进入眼帘的就是产品的视觉表现，而产品的色彩在其中起到了举足轻重的作用，毫无疑问色彩搭配对于设计师来说是非常重要的。那么具体到实际项目中该使用什么怎样的色彩，需要怎么做呢？

用户界面是一个设计师用理性思维解决用户感性需求的窗口。如果对色彩的运用不加以克制，界面可能会显得花哨而没有主次；但过于拘谨又容易使界面保守，难以激发用户情绪，下面以Bee express项目的实例来理性推导制定一套色彩系统。

切勿直奔主题

做过设计的同学应该都知道颜色模式：RGB、CMYK、Lab 等等，这里不做过多的解释了。另外每个颜色具有一定的性格特征和表达方式，而且都会有正反两面。虽然每种色彩都有正向性格特征，但是我们在定位主体色之前一定要知道所选择色彩的负面特征对企业是否会带来负面的影响，

开始之前我们需要了解在配色过程中需要避免出现的问题，如果你经常出现下列的问题，保证你在试用期内一次性就能拿到全部薪资，emmm......

• 高饱和度的色彩会造成我们的视觉疲劳及视幻；
• 灰部使用过多的配色会使界面有一种脏兮兮、雾蒙蒙的感觉，甚至心情低落；
• 没有规律且过多的配色。如果你不是做五彩斑斓的黑，建议6、3、1的色彩配比，辅助色不超过3种；
• 荧光色。使用这种色彩的，建议跟色彩对视，看谁坚持的更久，除非是你赢了；
• 太轻柔的颜色-没有重点且轻飘飘的感觉；
• 现在很火的新拟物化设计对于部分（没有绝对）产品可能会造成信息识别性很差；
• 不要将对抗色重叠，否则你会很浮躁。

定位品牌色

虽然设计是相通的，但是在不同的设计领域进行配色时，依然会存在巨大的区别。更换品牌的主体色，都不会是因为设计师自己的决定，而是公司在商业策略上优先做出了调整，然后通过品牌视觉上的变更将这个信息传递给消费者。

Bee Express快递、速递柜业务为主，前期的主色及视觉形象以橙黄色为主，为了避免视觉跳跃性太大，以及后期IP形象（蜜蜂吉祥物）打造，本次品牌色彩升级在原有基础上优化了色调，以保证后期产品的易用性和延展性，并利用最科学、最适用的方式推导出辅助色，以提升应用视觉的丰富性和感官体验。

express原主色：

为了不影响原有色调前期的视觉传播，即在原有主体色的基础上调整SHB的数值，让色彩更具视觉冲击力，在色彩衬托（字体、图标）更清晰。

• H（Hue：色相）
• S（Saturation：饱和度）
• B（Brightness：明度）

通过调整后的主体色也能看出，明亮清晰的主体色（品牌色）也更适合在界面中的运用，为信息传递、引导操作、品牌价值带来更大的提升。

• 信息传递：产品的首要目的是传递用户所需要的信息，这就需要界面有清晰的层级关系，明确、舒适的阅读体验。
• 引导操作：清晰合理的操作引导，让用户能够准确地根据引导进行下一步操作。
• 品牌价值：很多同学会忽略这一点，导致产品的界面与品牌关联性差，整体界面没有品牌感。

根据主体色推理同色系

同色系为统一的色相，使用中可以加深品牌色的感知，可以让界面更有层次，同时可以让界面保持色彩上的一致性，整体感较强，产生低对比度的和谐美感，给人协调统一的感觉。

具体是指与品牌色 H（色相）一致，通过改变 S（饱和度）与 B（明度）变化产生的色组。分别往浅色/深色方向按均匀数据增减，各产生5个坐标值。

综上能看出，使用同一色系即可完成一个项目，但是对于中大型项目来说实在是过于单调，没有太多的层次感，因此我们需要多色搭配为辅。多色的辅助颜色可设定不同的任务属性和情感表达，再搭配中性色黑白灰，能赋予更多的变化和层次。

提取24色-铺垫辅助色

根据主体色 H（色相）为基础，不断地递增、递减 15，在 0-360 之间可以得出 24 个颜色，也就是将 360° 色环分割为 24 份，（24份在360°色环上，每一个色相的角度为15°），最终得到下图24色。

选取辅助色

辅助色需要满足的两个条件：

和品牌色有明显区分：避免所选辅助色感官上给用户视觉区别与品牌色差距不大，传递的调性太过一致；

不能过于突兀：根据色彩原理，互补色是最能与品牌色本色产生视觉感官对比的颜色，但可能会有些突兀。为了让颜色的辅助起到丰富画面的作用，而不是反而让整个版面显得不和谐，所以选择互补色的邻近色作为辅助色，避免直接使用互补色。

• 邻近色：色相差值 15° 以内的颜色为邻近色;
• 类似色：色相差值 30° 以内的颜色为类似色;
• 互补色：色相差值 180° 的颜色为互补色。

基于品牌色可衍生出 3 个辅助色：一个与品牌色传递调性有明显区分的类似色；两个互补色的邻近色。

类似色搭配：使用色相相近的颜色，页面元素不会相互冲突，更加协调有质感。

互补色搭配：选择使用互补色，最佳搭配是一种作为主色，另一种用于强调。它们有着非常强烈的对比度，用在需要特别强调某个元素时会非常有效。

视觉统一感官校准

每一种颜色都有自己的「感官明度」，也就是发光度。根据现有的使用场景，类似色和互补色大都用在同层级的信息展示上，而当我们将最终得到的辅助色摆放在一起之后发现，虽然我们提取出的辅助色明度色值都一致，因为颜色本身自带的感官明度属性有所区别，导致视觉上会有明显的明暗差别。需要通过发光度来进行最终的颜色校正。

校准方式：依次在辅助色上叠加一层纯黑图层，将该纯黑图层颜色模式调整为 Hue（色相），就可以通过无彩色系下的明度色值，进行对比，使色彩视觉感官保持一致（青色和蓝色属冷色调，固需加深）。

全色系输出

根据上面同色系的明度、纯度对比规则，对所有定义的辅助色进行明度和纯度的辅助色彩输出，最终得到辅助色色板。H（色相）一致，通过改变 S（饱和度）与 B（明度）变化产生色组。分别往浅色/深色方向按均匀数据增减，各产生5个坐标值

删除最左侧的3种同色系，因明度过低时，颜色已经非常接近于黑色，色相在肉眼上几乎已经趋于一致。最后得到基于品牌色推导出的全色系色阶色板。

总结

配色常常从确定主色开始，根据行业类型和视觉诉求的需要，选择一种居于支配的色彩作为主调色彩，构成画面的整体色彩倾向。然后选择辅色，添加点缀色，最后按照色彩组合的原则完成设计中的需求。

虽然有了以上的配色方式，但一套标准的色彩系统还会包含中性色规范、颜色的使用规范等等。相信解决了大部分的需求，剩下的工作也难不倒大家了。毕竟以上的方式只是给大家提供了一个理性科学的方法，如果想更加优秀，还需要进一步深入地去学习色彩理论知识，多看优秀的配色作品提升审美，总之要多看、多实践和多思考。

欢迎关注作者微信公众号：「能量眼球」