一 强烈推荐!帮你从零开始全面掌握UI设计的配色方法

一 强烈推荐!帮你从零开始全面掌握UI设计的配色方法

一篇你绝对不想错过的文章!以前的色彩知识大多是基础科普,容易看完就忘 , 配色时还得翻书 。但今天这篇 , 大多是从实战出发,学完可以立刻上手,而且还附有作者本人的色板、配色工具等等,无论是小白还是UI设计师,这篇都不容错过!
我们从小都能熟练地区分颜色,但为什么当我们需要运用色彩进行UI设计的时侯,却往往发现很难恰到好处地运用色彩,作出那些和谐得体、令人赏心悦目的设计来呢?……我觉得原因是我们对色彩的认识和实践不足,以及当我们做设计时,很容易会过度地使用色彩 。作为设计初学者 , 你需要掌握基本的色彩理论 , 通过实践不断加深对色彩的认识 , 并最终能够熟练地运用各种色彩,搭配出平衡且使人愉悦的设计来 。
基色、间色、复色

配色的第一步是选择一个主色,我建议从选择一个明亮,柔和的基色或间色作为开始 。这样的选择往往是相对安全的,关键看你接下去如何使用它以及选择合适的色彩去搭配它 。
色相、饱和度、明度 (HSB 或 HSV)
当我们需要运用色彩时,首先理解色彩的相关特性非常重要 。许多人选择使用RGB色彩模型,但我想说RGB是计算机对于色彩的表示形式,我们很难说清一种颜色是由多少红,绿,蓝组成的 。作为设计师,HSB色彩模型更加好用,因为色相 , 饱和度 , 明度是我们大脑对色彩理解方式 , 这些属性对于我们理解和运用色彩更有意义 。
单色(Monochrome)

是指通过对同一颜色 , 加上10-90%白色或黑色的透明度层后获得的一组颜色 。由于他们的色相相同,而又能产生和谐的对比效果,因此单色的应用在设计中非常重要 。
邻近色(Analogous)
是指在色相环中相邻的色彩 。很显然这样的配色方案不会产生高对比度 。当你觉得自己的设计在色彩上太过单一时,可以使用邻近色来增加色彩上的变化,从而使你的设计更有层次和活力 。
【一 强烈推荐!帮你从零开始全面掌握UI设计的配色方法】
比如红色是橙色的邻近色,而橙色又是黄色的邻近色 。
互补色(Complementary)
是指色相环中,相对(互为180度角)的两个颜色 。互补色让人产生强烈地对比效果 。例如,紫色按钮在黄色背景上非常的突出 。当然,这还取决于每一种颜色的饱和度 。互补色经常用在需要突出显示的按钮、警告等地方,但使用不当也有可能使你的设计显得非常突兀,通过实践来理解是最好的 , 请记?。?对立对比。

中性色调
是指由黑色、白色及由黑白调和的各种深浅不同的灰色系列,中性色不属于冷色调也不属于暖色调,它可以起到中和剂的作用 。过多的使用色彩会使整个设计缺乏可用性,而中性色却可以帮助将用户的注意力拉回到内容本身 。
对比
通过有效地使用对比可以使你的内容更加清晰从而让阅读变得轻松 。好的对比,一般会采用色彩的两极,如白与黑,淡蓝与深蓝 , 高亮与低亮 。
UI中的明与暗
在一些情况下 , 你需要根据品牌或可用性来权衡UI的明暗 。比如iBook的应用中,当外界环境变得昏暗时,它会自动切换到暗色的阅读模式 。
明亮UI的配色原则
内容应该比背景明亮 。通过亮度的对比,可以使你想突出的内容轮廓更加清晰易读
不要过度使用颜色 。颜色总是可以抓住人们的视线,但过度使用却会往往会人们忽视主体内容,因此,仅在需要进行突出提示的地方,如重要的按钮以及需要突出的状态时,使用颜色 。
暗色UI的配色原则
不要使用纯黑 , 那样很难看到细节,另外与白色的对比会显得过高 。
如果你必须使用黑色,那么请选择使用暗灰作为替代,这样可以消除过高的对比度
当使用蓝色时避免同时使用灰色 。深蓝与蓝色更相配


经验总结扩展阅读