最简单的配色设计（设计做的花里胡哨）

作为一个刚入行的新人,你是否会常常被以下问题所困扰呢？

我参照了模板,为什么最终效果很别扭。

为什么我的页面总是很花哨?

客户:产品不突出,标题不醒目。

领导:色彩单调,不够活泼

因为元素间的色相,明度,饱和度,调和不合理所致。

下面是我对色彩的一些看法,让高手见笑了。

一、色彩原理

色相

色相即毎种色彩的相貌、名称,如红、桔红、翠绿、湖蓝,群青等。色相是区分色彩的主要依据,是色彩的最大特征

明度

明度即色彩的明暗差别,也即深浅差别。色彩的明度差别包括两个方面:一是旨某一色相的深浅变化,如粉红、大红、深红,都是红,但一种比一种深。二是指不同色相间存在的明度差别,如六标准色中黄最浅,紫最深,橙和绿、红和蓝处于相近的明度之间。

纯度

纯度即各色彩中包含的单种标准色成分的多少。纯的色色感强,即色度强,所以纯度亦是色彩感觉强弱的标志。不同色相所能达到的纯度是不同的,其中红色纯度最高,绿色纯度相对低些,其余色相居中,同时明度也不相同

色相对比的类型

两种以上色彩组合后,由于色相差别而形成的色彩对比效果称为色相对比。

色彩对比强弱程度取决于色相之间在色相环上的距离(角度),距离(角度)越小对比越弱,反之则对比越强。

二、是什么在影响我们的视觉?

明度对比推移效果

色相对比推移效果

饱和度对比推移效果

清晰度对比推移效果

结论：人眼容易区别:明暗对比强,色相反差大,饱和度高,细节丰富的图片。

三、看同行中的高手是如何设计的?

通过上面几组作品我们发现它们的设计都有一些共性。

共性：

①产品:色相对比强烈明暗反差大②标题:色相对比较弱或无明暗反差大③内容:明暗反差较强无色相区别

四、寻找色彩的过程

我要的是什么颜色

当自己不清楚想要什么感受的色彩时,找找能承载你情感寄托的媒介物吧!

照片,圄片,服装,任何可能的东西,只要能表达出你想要的感受的,都是模仿的对象

他们代替你说出了你想要的感觉,通过对这些媒介物的分析和提取,能找到响应的色彩

用什么颜色来搭配

同色相对比

一种色相的不同明度或不同纯度变化的对比,俗称同类色组合。如蓝与浅蓝(蓝 白)色对比,绿与粉绿(绿 白)与墨绿(绿 黑)色等对比。对比效果统一、文静、雅致、含蘼、稳重,但也易产生单调、呆板的弊病

相近色相对比

色相环上相邻的二至三色对比,色相距离大约30度左右,为弱对比类型。如红橙与橙与黄橙色对比等。效果感觉柔和、和谐、雅致、文静,但也感觉单调、模糊、乏味、无力,必须调节明度差来加强效果。

类似色相对比

色相对比距离约60度左右,为较弱对比类型,如红与黄橙色对比等。效果较丰富、活泼,但又不失统一、雅致、和谐的感觉

中度色相对比

色相对比距离约90度左右,为中对比类型,如黄与绿色对比等,效果明快、活泼、饱满、使人兴奋,感觉有兴趣,对比既有相当力度,但又不失调和之感

对比色相对比

色相对比距离约120度左右,为强对比类型,如黄绿与红紫色对比等。效果强烈、醒目、有力、活泼、丰富,但也不易统一而感杂乱、刺激、造成视觉疲劳。一般需要采用多种调和手段来改善对比效果。

颜色有了如何搭配

例：一个活动页面中通常由以下元素组成(五角星代表重要性)

对第1重要的:用强烈色相对比(互补色或对比色) 强烈明暗的对比

对第2重要的:用稍弱的色相对比(相近色) 强烈明暗对比

对第3重要的:可以只用明暗对比且无色相差异的颜色。

依次类推,大家自己去理解哈~

我的配色口诀：近实远虚

最早接触这个词,是在高中接受专业培训时,色彩老师每天唠叨的一个词

老师:“同学暗部太亮”

后面景物要简化,勾勒一个大概的轮廓就可以了~

眼睛要深

网页设计和绘画一样,它也必须遵守近实远虚的原则(走梵高路线的同学请绕行),近处的渔船艳丽的人物就是你的产品,后面灰蒙蒙的山水就是你的网页背景

我是小勇，为回馈粉丝的支持，特赠送一套PS抠图视频教程

点赞 评论本文后私信我领取教程

,