当前位置:首页 > APP资源 > 正文内容

app界面设计色彩搭配(软件界面设计与色彩搭配)

APP资源8个月前 (03-19)301

今天我们来说下互补色。

对很多新手来说,可能会搞不清楚对比色和互补色这两个概念,不知道它们到底有什么区别。

但是更多的问题可能是,看别人的互补色用起来那叫一个高大上,到了自己手里怎么就变成了花里胡哨,或者土俗土俗的,是不是有种想砸电脑的感觉?

OK,看完今天的文章,相信肯定能帮助你随心所欲的驾驭互补色。先来看看什么是互补色。

在上期对比色的教程中,我们说到,距离越远的两个色彩,它的反差就越强。很显然,在一个圆环上相距180度就是最远的,此时对应的两个色彩,我们把它们叫对互补色。

展开全文

所以,互补色其实是属于对比色的一种,是最强烈的对比色。因为两个色彩之间的差异性太大,放在一起看起来很冲,很多时候又把它叫做撞色。

弄清楚互补色的概念后,我们再来看看互补色有什么特点。

app界面设计色彩搭配(软件界面设计与色彩搭配)

上期我们讲到,对比色具有3大特点:

这三项特点互补色也同样具有,而且更加强烈。

互补色不但能给人突出醒目,强烈有力的感觉,还能起到振奋人心的作用。所以我们看到很多运动类的设计都会用到互补色。例如美国NBA的球队LOGO设计,大多是互补的配色方式。

虽然从色环上来看,互补色可以有很多组,但实际上我们在用色的过程中,最常用的互补色有3组,分别是红和绿、紫和黄、蓝和橙。

我们来看看每组配色都有什么特点。

红绿互补

说起红配绿,估计能让不少人望而却步,所谓红配绿赛狗屁!这对组合简直就是土气的代名词。

由于红色和绿色在色相上缺乏共性,放在一起会造成极强的视觉反差,衬得红色更红,绿色更绿,搭在一起容易有格格不入、扎眼的感觉。

红配绿要取得好的视觉效果,则需要使用一些调和手段,可以在明度、饱和度上中和两种色彩的突兀,使其形成和谐统一的对比。

同样是红配绿,这样就好多了:

在平面设计中,红绿互补配色不但醒目,而且冲击力十足。适当的降低饱和度后,有种复古的感觉。

蓝橙互补

蓝橙是一组经典的冷暖互补色,能很好的平衡画面,以及拉开层次感,表现出特殊的视觉对比与平衡效果,因此,这是一组应用最为广泛的互补色。

在界面设计中,用蓝橙互补色可以很好的营造出画面的层次感。

黄紫互补

紫色的明度在所有彩色中是最低的。它给人一种沉闷、神秘的感觉。在紫色中加黄色形成互补色,可使紫色沉闷的性格消失,变得优雅而有高级感。

在房地产,汽车、手表等高端消费品行业,经常可以看到紫金的配色。

在体育方面,湖人和科比几乎成为紫金配色的代言人。

虽然互补色活力四射,明亮抢眼,但是实际在使用的过程中,却那没么容易掌握。搭配好了就是色彩大神,用坏了就是花里胡哨,整个页面垮掉。

如何化解互补色之间的冲突感,是将互补色用好的关键所在。下面我给大家分享几条小技巧,教大家如何将互补色用得恰到好处。

改变比例

由互补色之间反差极大,在使用互补配色时,我们需要特别注意比例问题。以服饰穿搭为例,如果不是超模的身材,一般是驾驭不了50:50的撞色穿搭的。

大多数情况下,我们会选择一种颜色作为主色调,大面积使用,然后再用小面积的互补色去提升画面。也就是我在对比色的教程中讲的“大协调,小对比”原则。具体的比例可以选择2:8或者3:7,如图:

下面的海报就是采用了这样的比例搭配:

我们也可以用更加保守一点的配色方法,在小面积中加入对比色,画面的主要部分是无彩的协调色。

这样整个画面既有鲜明的对比,同时也不会显得很冲。我们一般在界面设计中,是这样应用的:

海报设计也可以用类似的配色方法,在色彩比例上当然可以微调:

当两种互补色之间的比例是50:50时,由于色彩反差大,此时冲突感是最强烈的,最好有其它办法来协调一下。比如降低画面的明度或者饱和度等,这就是下面我要讲的第二点了。

改变纯度

纯度是指色彩的饱和度,纯度越高色彩越鲜艳,也越刺眼。纯度越低看起来更沉稳,也更浑浊。

在应用互补色的时候,我们可以考虑降低一方,或者两方的纯度,来减弱它的冲突。

例如下图,通过降低紫色的纯度,让画面看起来更加沉稳有力。

下图中,红色和绿色的纯度都比较低,不但让画面色彩更加协调,也营造出了一种复古氛围。

下图则通过降低蓝色部分的纯度,让鞋子的橙色部分更加突出醒目。

改变明度

明度是指色彩的深和浅,不同的颜色所具有的明度也是不一样的。明度越高的颜色越明亮轻快,明度越低的颜色越深沉厚重。

在应用互补色的时候,我们改变色彩的明度就可以削减它们的冲撞感,多一份轻松与清新,不那么刻意。

例如下图,通过提高背景上红色与绿色的明度,很好的弱化了红绿之间的冲突,让整个画面显得轻松活泼,少女感十足。

下面的广告中,通过提升背景上绿色的明度,让西瓜瓤的红色看起来更加鲜艳可口。

下面的广告则是压暗了蓝色部分的明度,让画面更具商务金融气质,橙色的数字看起来特别突出醒目。

中性色调和

所谓中性色,就是指黑白灰这些无彩色。互补色鲜艳热烈,而中性色则刚好相反,它们毫无情绪感,中庸冷静。在对比色中加入中性色可以很好的调和画面的平衡感。

中性色:

用黑白灰来调和互补色的方式,被大量的应用在各类设计中。在服饰穿搭上,无论是时尚T台,还是日常着装,都能看到这样的配色方式。

家居装饰设计就更不用说了,高级灰的理念深入人心。中性色+互补色的配色方式无处不在。

如果我们想要跳跃的颜色沉稳就用黑色,如果想要作品透亮就用白色,如果想要保持中性态度,可以用灰色。本身黑白灰的变化也很多,所以这种调和后的结果非常多变。

许多好看的纹理设计也用到了这种配色方式。

通过中性色的调和,既保持了互补色所带来的丰富的层次感,也避免了互补色之间强烈的冲突。

画面主体是互补色,背景和文字用中性色:

如果主体是无彩的中性色,则背景可以用互补色来提升画面视觉冲击力。

理论部分就讲到这,好不好用还得看实操!

OK,那就动手吧!

下面我们通过两个不同的案例,看看互补色是如何应用的。

案例一

先来个小案例热热身。

第1步,

当然是先抠一张素材图。

第2步,

我们观察一下素材图,发现她身上的亮点在于内搭的橙色T恤,把它的色彩提取出来,我们反推出它的互补色蓝色。

小tips:人物身上的橙色的饱和度偏低,所以我们选它的互补色蓝色的时候,也可以适当将饱和度降低一点,这样整体看起来比较协调。

第3步,

将蓝色作为背景色平铺在后面,与人物形成鲜明的对比。

第4步,

将文案排版好,在文案上添加一点橙色来呼应一下人物。

OK,一个女装广告就完工了!

是不是So easy的感觉?

好了,继续下一个。

案例二

接着我们通过一个改稿的案例,来看看互补色是怎么应用的。

先来看看原图:

原图只能说中规中矩,配色排版都没有什么大问题。画面略显沉闷,而且画面中空白太多,画面主体不够突出,看着没什么点击欲。

好了,看下怎么改。

因为原图不够清晰,所以我另找了一双角度类似的鞋子,先抠出来:

第1步:

原图的构图方式不够饱满,画面主体并没有被充分的展示出来。所以我们调整一下产品的角度,让它在画面中比例更高一些。

第2步:

我们看到鞋子上有一片蓝色比较突出,可以把它提取出来,作为画面的主色调放到背景上。并给鞋子添加阴影效果,让它看起来更逼真。

第3步:

给背景添加纹理,丰富一下画面层次感。然后我们选取背景蓝色的互补橙色,作为点缀色放到装饰的条形带元素中。通过互补色的对比,整个画面一下就变得更有活力。

添加上文案,这样整个画面的大体结构就完成了。

如果我们希望画面的视觉冲击力更强一些,那么我们可以试试加大互补色的对比面积,制造更强烈的冲突。

最后,

添加装饰和文字,让画面细节更加丰富。

ok,完工。

最后来一张对比图:

通过互补色的应用,我们成功拯救了一张死气沉沉的电商海报!

好了,这期的内容就到这。

我们下期见。

-------------------------

往期精华文章导读:

不是美术生。

5000份作品!要了老命!

噗~不要什么图都想P,这样只会害了你。

-END-

本文章转载自微信公众号:庞门正道

扫描二维码推送至手机访问。

版权声明:本文由飞速云SEO网络优化推广发布,如需转载请注明出处。

本文链接:http://muyuzhen.com/post/97914.html

分享给朋友:

“app界面设计色彩搭配(软件界面设计与色彩搭配)” 的相关文章

武汉app定制开发公司(武汉app定制开发公司怎么样)

武汉app定制开发公司(武汉app定制开发公司怎么样)

1华盛恒辉科技有限公司 上榜理由华盛恒辉是一家专注于高端软件定制开发服务和高端建设的服务机构,致力于为企业提供全面系统的开发制作方案在开发建设到运营推广领域拥有丰富经验,在教育,医疗,APP,管理,商城,人工。 三整体评估选择开发公司,一定要进行整体评估,一是评估自身,二是评估对方四跟进速度好的AP...

keepappcancel的简单介绍

keepappcancel的简单介绍

大部分的健身app提供健身训练计划教练课程分享打卡社区等功能,一些健身软件还提供记录体重变化和饮食习惯分析等功能下面为大家提供了几款方便实用的健身app,一起来看看吧!1KeepappKeep是一款目前非常受欢迎的移动健身指导健身应用,是。 根据查询百度经验得知,如果您不想继续使用keep的会员服务...

网站类app(网站类型有哪些)

网站类app(网站类型有哪些)

1、2旅游app排行榜前十名3旅游的app有哪些4旅游攻略app排行榜前十名口碑最好的旅游软件有哪些?口碑好的旅游软件去哪儿携程旅行穷游驴妈妈旅游蚂蜂窝自由行一去哪儿去哪儿APP是国内较大的一家旅游出行APP,上面有旅游。 2、2AppmakriOS,WindowsPhone,AndroidAppM...

做企业规划的app(做企业规划的步骤有哪些)

做企业规划的app(做企业规划的步骤有哪些)

十大室内设计培训机构排行榜 现在室内设计的门槛越来越低,越来越考验设计师的能力,想要让自己的技术精益求精,想在预计的时间内学到真本领,则选择去正规学校进行专业的学习。因为专业的室内培训学校可以给学员进行更加正规的培训,比如杭州清风室内设计培训学院,专攻室内设计一门专业,老师都是股份责任制,培训班进行...

优秀的app首页设计样式(优秀的app首页设计样式有哪些)

优秀的app首页设计样式(优秀的app首页设计样式有哪些)

UI设计必要知道的APP页面 一起始页launchscreen说明程序启动时需要一定的反应时间,在这段时间内屏幕处于空置状态,为了让用户知道程序已经启动,现在只有一个加载过程,而且也是为了缓解用户的焦虑,所以用图片视频代替;回答目前互联发展势头越来越好,app应用也是日益增多,因此app的引导页设计...

杭州定制开发app案例(杭州定制开发app案例分析)

杭州定制开发app案例(杭州定制开发app案例分析)

2你想要开发的类型是否是开发公司的强项 再牛的APP开发公司不可能什么类型什么行业的APP都开发过,一般比较好的APP开发公司都有强项,也就是说擅长开发某一个或者哪几个行业的APP,并且有高质量的开发案例所以找APP开发;开发一个App的费用因多种因素而异,一般来说,定制开发的App价格会比较高根据...