色彩是能引起心境共鸣和情绪认知的元素,三原色能调配出非常丰富的色彩,色彩搭配更是千变万化。设计配色时,我们可以摒弃一些传统的默认样式,了解设计背后的需求目的,思考色彩对页面场景表现、情感传达等作用,从而有依据、有条理、有方法地构建色彩搭配方案。
UI设计之三色搭配原则
三色原则认为:在一个设计作品中颜色应保持在三种之内。三种不是三个,我们依然可以用三个以上的颜色来装点我们的设计,只要保持主要颜色不超过三种就可以了。
一、什么是三色搭配原则?
三色搭配原则是指一个设计作品中,颜色应保持在三种之内。三种,而不是三个(拥有独立色值算一个颜色) 我们随便打开一个网站,比如
淘宝、阿里巴巴、京东、甚至苹果等,仔细检查里面的颜色就超过三个(链接、报错、提示、金额等)。 我们只要保持主要颜色不超过三种即可。所以说,童鞋们,发挥你的想象大胆的用色吧,不要让限制的思想束缚你天马行空的创意!
二、色彩搭配三色构成
除了上面的三色搭配原则,下面还将谈到一个色彩搭配三色构成,我们不要弄混了,下面一起来学习吧! 主色+辅助色+点睛色 主色(主色调)约75% 主色——决定画面的风格趋向的色彩,或色彩群。 主色并不一定只能有一个颜色,它还可以是一种色调,比较好选择同色系或邻近色中的1-3个,只要能够保持协调就可以。 辅助色(辅助图)约20% 辅助色——辅助主色,使画面更完美,更丰富,更显优势。 辅助色也不一定只能有一个颜色,也可以多色相辅助。 辅助图——辅助画面,装饰画面。 点缀图案比较好有1-2种,多了容易花哨,或者分散主题。 点睛色(点睛图)约5% 点缀色(点缀图)——引导阅读,装饰画面,营造独特的画面风格。 点缀色(图)也可以有1-3种,但要以一种为主,其它为辅,整体协调为妙。
三、主色的秘密
秘密1:饱和度高的颜色一般作为主色 秘密
2:深颜色一般为主色 秘密
3:面积大的一般为主色 秘密
4:视觉中心所呈现的颜色一般为主色
根据以上原则UI设计师颜色搭配方法为:
方法一:色轮配色
色轮由 12 种基本的颜色组成。
首先包含的是三原色( Primary colors ),即蓝、黄、红。
原色混合产生了二次色( Secondary colors ),用二次色混合,产生了三次色( tertiary colors )。
色轮有五个同心环组成,从暗到亮-暗色处于大环,明色处于小环,而中间是颜色的基本色相。
方法二: 叠柔配色法
这个方法,看起来复杂,但用起来很简单。
主要分三个步骤
1、任意选择一个白色或黑色 , 或黑白渐变(可以是点、线、面…甚至字体)
2、 然后混合模式选择叠加或柔光
3、 调整透明度(1%-随意,省心的做法是直接键入一个整数值,比如:轻质感类页面可以选20%-40%,重质感感类可以键入60%或以上)
补充颜色配色方式:
一、色相差而形成的配色方式
1 有主导色彩配色
这是由一种色相构成的统一性配色。即由某一种色相支配、统一画面的配色,如果不是同一种色相,色环上相邻的类似色也可以形成相近的配色效果。当然,也有一些色相差距较大的做法,比如撞色的对比,或者有无色彩的对比,但这里先讲述带主导色的配色案例。
根据主色与辅色之间的色相差不同,可以分为以下各种类型:
1 、 同色系主导
2 、 邻近色主导
3 、 类似色主导
4 、 中差色主导
5 、 对比色主导
6 、 中性色主导
7 、 多色搭配下的主导
二、色调调和而形成的配色方式
2 有主导色调配色
这是由同一色调构成的统一性配色。深色调和暗色调等类似色调搭配也可以形成同样的配色效果。即使出现多种色相,只要保持色调一致,画面也能呈现整体统一性。
根据色彩的情感,不同的调子会给人不同的感受:
1 、 清澈的色调
2、 阴暗的色调
3 、 明亮色调
4 、 深暗色调
5 、 雅白色调
6、 清澈色调
三、对比配色而形成的配色方式
由于对比色相互对比构成的配色,可以分为互补色或相反色搭配构成的色相对比效果,由白色、黑色等明度差异构成的明度对比效果,以及由纯度差异构成的纯度对比效果。