UI新手学配色

来吧,玩PS的你,是不是觉得PS玩的差不多了?
是的,做IT的,工具不是最重要的,如何实现“梦想(想法)”才是最重要的。而UI设计则更需要“梦想”。
下面我来给大家来聊聊“色”吧。

配色的重要性

在UI设计中,颜色尤为重要。下面我们看看两个图,你自然会明白配色的重要性!
从上面两张图对比可以知道,在相同的项目、相同的布局中,相同的组件采用不同的配色给人家的感觉都是不一样的。
至于每种颜色能给人们什么感觉,可以看我的博文 《色彩联觉与各行业的特有颜色》
妈了个蛋,我裤子都脱了,你竟然给我看这个!!
嘿嘿,颜色的重要谁不知道啊!
那么,颜色怎么来的?如何配出参考颜色?如何配色好看?
来,我这个小司机给你带带路!

颜色怎么来的

首先,相信你上过生物课,对,生物课。(请别污!)
我们之所以能看到多姿多彩的世界,是因为,你没瞎!(扯远了。。)
回到正题,上过物理的都知道,颜色和光、物体有着关系,每种物体都有它的特有色。比如,一般场景下:血是红的,牛奶是白的,水是透明的...等等。
那么,颜色之所以能被我们看到,是因为物体的颜色经过光的反射传达到我们的眼睛的,这样,我们就能看到物体的颜色了。
那么,在UI设计中,颜色并不是直接去把物体的颜色拿过来放到我们的PhotoShop中的,这里要通过手绘/相机把颜色捕捉到,然后放到我们的PhotoShop中去的,等到我们需要用颜色的时候可以用Ps里的‘吸管工具’来取取到它。
当然,我们老司机是不需要把取色这事弄得那么复杂的,UI设计嘛,不就是把界面做出来就好了,那么如果你能很熟练的在PhotoShop中用色环来取到你自己想要的颜色,相信你就不用按我刚刚说的用拍照的方式来取到你想要的颜色了!

色环的由来

说到色环,得说说三原色和n次色。
三原色是:
红色 #ff0000,
绿色 #00ff00,
蓝色 #0000ff;
n次色是用三原色的‘相减混色原理’调配出来的。
其中二次色是:
二次色:
青色 #00ffff,
洋红(品红) #ff00ff,
黄色 #ffff00;
这样经过n次之后可以得到一个色环。

CMYK与RGB

这里再扯一扯,新手在玩ps经常会遇到的一个问题,就是颜色模式(CMYK模式与RGB/HEX模式)。
颜色模式说白了,如果你是做印染行业的,或者是做印刷的,你就用‘CMYK’模式好了。
然而,我们叼咋天的UI用的都是‘RGB/HEX’模式的(这个,做IT的都知道 -.- )!毕竟,这个颜色模式是给屏幕用的!你说叼不叼!嘿嘿。
颜色模式就是那么简单!

准确地调出参考色

对新手来说,临摹是第一步。
而临摹的时候,一般建议自己对着参考图来把颜色调出来。
那么怎么调才能调出非常相似的颜色呢?来了,画重点了!
在PhotoShop中,我们可以通过颜色选择器中的RGB/HBS两个选择模式来帮助我们调出称心如意的颜色!
我们在HBS的模式下,先在H上找准参考色的色相,再调亮度(B)和饱和度(S),经过几次调整,我们就能得到想要的参考色了。
第一次玩HBS肯会对H会有点难控制,毕竟这个需要对色环有足够的了解才能调好。个人建议先记住12色环。

常用配色方法

所谓配色方法并不是直接让你记住前辈们用过的色环。
而配色方法是为了控制颜色与颜色之间的对比而去选择对应的颜色。
而颜色之间的对比是有“公式”的,这个也是对色环理解的一部分。
那这个公式就是根据色环上的角度来记忆的。
有:互补色、对比色、类似色。
在色环上,任意两颜色之间,按他们形成的夹角来区分,我们可以这样记忆:
类似色:0°<x<30°
对比色:0°<x<120°
互补色:180°
那么我们来看看前辈们在UI界面的配色方案吧,相信你马上就能感受到每种方法会得出怎么样的感觉的配色方案。
生活不止代码,还有的Bug!
原文地址:https://www.cnblogs.com/UIdoer/p/6385340.html