每日一学-必须的配色理论

我们设计师在配色的过程中会遇到哪些问题点呢？

• 同色系把握不好：像下面这个案例，就属于典型的同色系问题，可能他在设计的时候比较多的凸出品牌色，这个出发点是没有错的，但是如果这个比例没有把控好的话，就会显得很多余了，用户看到这个界面的时候，品牌色哪里都是，他可能不知道哪里是重点，在整个界面当中没有体现出来！

• 多色系不敢用：比如说我们设计一个APP，整个界面想要变现的多彩一些，那怎样科学去配色呢？我们举2个例子

  
  

我们大家都知道支付宝是一款金融理财类APP，而大麦网是一款贩卖演唱会门票的APP，我们再配色过程中都会有一些情绪感受在里面的，比如整个蓝色系是能够代表一些科技和可靠，而红色系呢，可以想象一下，我们去参加演唱会的时候，内心的心情是什么样的呢，肯定是比较激动的，整个演唱会的气氛是热情四溢的，所以说这个大麦演唱会的APP它就采用这种代表热情和激情的红色和紫色。

ok，那么我们作为UI设计，怎样才能合理的把控好整个配色方案呢，有两种解决方案，第一种采用6-3-1原则，另一种就是使用工具Adobe color cc：

• 什么是6-3-1原则呢？

      就是主色60%，辅色30%，强调色10%，为什么是这个比例呢，这个比例达到一个视觉平衡点的比例，也就是说这个比例可以让用户从一个视觉焦点很舒服的移动到另一个视觉焦点；

• 那我们知道这个原则，那究竟怎么得出这些颜色呢？

这时候我们就要用到色环了，也就是要搞清楚什么是对比色，互补色，邻近色，很多设计师可能会去一些平台找一些配色好的图片直接在Photoshop或者Sketch上面用吸管工具吸一下颜色，这个举动就有点过于借鉴了，相当于是色彩抄袭了，所以我们要想自己有一个很好的色彩搭配就需要去了解这些色彩基础理论。

• 邻近色：用红色做例就是红色两边的色相；

• 类似色：比邻近色更远一些就是再左一边的，右一边的就是类似色；

• 互补色：也就是这个颜色对应的对角线找到一个色彩；

  
  

总结的来说就是主色调60%我们采用品牌色，30%的辅色我们采用对比色相，那么10%的强调色我们采用互补色，这样做出来的配色比例整个界面会让用户看的舒适一些；

另外一种就是使用Adobe color cc工具去做自动配色，我们输入我们自己想要的颜色，它会自动匹配出相对合适的颜色，这样也可以解决一些相对于复杂的配色，类似如下图：

作为UI设计师，既要懂得配色的原理，也要懂得运用工具。

这是配色工具网址，有需要的可以看一下哦：https://color.adobe.com/zh/create/color-wheel/?base=2&rule=Analogous&selected=2&name=%E6%88%91%E7%9A%84%20Color%20%E4%B8%BB%E9%A1%8C&mode=rgb&rgbvalues=0.9547387354229991,0.7619037957431778,1,0.8097211003601875,0.6933324541262919,0.91,0.8616456328200695,0.8119037957431778,1,0.6933324541262919,0.6950631705006906,0.91,0.7619037957431778,0.8264625777260118,1&swatchOrder=0,1,2,3,4