当前位置:首页 > 晶核资讯 > 技术干货 >

设计中的配色思路

分类:技术干货阅读:时间:2020年12月11日 10:28

感觉自己用色技法薄弱,配色不科学?

 

这是许多场景设计师在刚入行时遇到的问题。人是对色彩敏感的生物,在面对众多配色选择时,不同的色彩组合往往会直接影响整个设计的视觉效果,从而会让人产生不同的反馈,那如何才能挑选出最合适的配色呢?

 

 

设计的631法则

 

在设计中,631法则是常用的配色方法。631法则最早源于室内设计,而后逐渐被UI设计所采用。

 

631就是三种色调的组合比例。即:主色调为60%,辅助色为30%,强调色为10%。

 

该法则广泛适用于现实或者游戏的室内设计、APP内页设计、官网设计等几乎一切需要色彩搭配的环节。631法则不会让配色显得特别的乱或者特别的平淡,并且能够让整个主色调凸显出来,而辅助色与强调色虽然占比低,但能够起到画龙点睛的作用。

 

APP内页为例,一些APP在遵从631法则的同时会将其调整为60%白色、30%主色调、10%强调色与辅助色,这种调整会让用户使用时更加舒服,同时不至于破坏整体美感。

 

  

而在游戏室内场景、游戏UI设计中,也可以适用631法则,从而使表现柔和、统一,同时也能让玩家迅速注意到关键点。

 

 

色环法的运用

 

色环是一个非常科学的工具。最常见的色环是 12 色环。十二色环中,由红、黄、蓝组成三原色,橙、绿、紫组成三间色,由两种间色或者三种原色调成复色有时一些色环会包含 24、48、96 甚至更多的颜色。

 

通过色环,设计师可以理解色彩和色彩关系,从而快速确定出辅助色和强调色。

 

而在这里,我们需要引入一个概念:色相。

 

色相是色彩的首要特征,是区别各种不同色彩的最准确的标准。事实上任何黑白灰以外的颜色都有色相的属性。基本色相为:红、橙、黄、绿、蓝、紫,刚好为三原色与三间色。如果继续细化的话,即便是同一类颜色,也能分为几种色相,如橙红、黄绿、土黄等,在此便不多赘述。

 

而将两个不同色相的色彩进行对比,即为色相对比。色相对比的强弱,由色彩在色相环中的位置所决定。

 

 


 

如上图所示,同色相对比在色相环上的色相距离角度是15°;近色相在色相环上相距15°到30°;类似色相对比在60°以内;中差色相对比在90°以内;对比色相是120°以内;互补色相对比在180°以内。

 

同色对比的色调容易和谐统一,会让人感觉和谐、高雅。但同类色相明度也接近,但色彩统一也会降低色彩辨识度,难以立即吸引人的注意。

 

 

 

 

对比色对比会形成对立冲突属于强烈的色彩对比,对比效果鲜明,增加感官刺激,但会出现杂乱与不统一感。

 

 

 

补色对比。以红和绿,黄和紫,蓝和橘为最典型,它比对比色更强烈刺激。拥有更加激进的美感但是不协调感会更加严重,大量的互补色对比甚至会破坏美感。

 

 

 

因此,在UI设计中,常见的配色选择为:60%主色调,30%主色调的对比色相,10%的互补色相。该选择并非绝对,但非常适合新手进行配色设计

 

 

那么,如何选择配色呢?

 

不过在很多情况下,同色系把控不好,多色系不敢用是配色中常见的两个问题。

 

进行色彩搭配的时候,首先在色环中找到品牌色,也就是主色调,使用品牌色的对比色相和互补色相分别作为辅助色和强调色

 

不同的产品同样也拥有各自适合的品牌色。

 

在这里我们引入另一个概念:冷暖色调。

 

不同的颜色会带来不同的情感效果,橙红、黄色、棕色以及红色一端的色系常与炽热、温暖、热情有关,所以将其称为暖色调。至于蓝紫色系则和平静、安逸、通透、凉快相关联,就将其称为冷色调。

 

 

 

 

下面我们可以一个一个参考不同的颜色:

 

黄色

 

黄色代表着鼓励交流、激发乐观,辉煌,富有活力感,能够刺激思维,同时黄色在众多色彩中也极为突出,能够迅速吸引人的眼球,所以时常会被运用在警示牌中。

 

 

红色


同样也是富有刺激感的颜色,比黄色更加有刺激性,同时红色在中国还有富贵、喜庆的意味,而红色同样也能激发人的冲动感,在众多元素包裹的UI界面中,“万军从中一点红”的提示圆点被广泛利用。

 

 

橙色

 

暖色调中被运用的常客之一,代表着温暖与乐观,相比于红色较为柔和,但依旧也会引发去冲动感。

 

 

蓝色

 

蓝色代表着冷静、可靠,常被运用在象征着安全、值得信赖的软件之中,但难以激发人的消费欲望。

 

 

紫色

 

紫色有着神秘和高贵的特征,同时也含有浪漫色彩,常被运用在一些跳脱的环境之中。


 

绿色

 

绿色是代表自然的颜色,由于人们已经习惯身处于自然之中,因此对绿色的欢迎程度比较高,绿色在影视作品中也被暗示着“希望”、“和平”的意味,许多的医疗UI会选择绿色作为品牌色。

 

 

除了以上的三原色与三间色,黑白灰也是常见的主色调。

 


黑色

 

黑色能够释放高贵与权威的情绪,大量的黑色能够凸显出冷峻、奢华、高端的气质,因此,一些产品的会员界面会广泛使用黑色。

 

 

 

白色

 

白色是独树一帜的,它能够与大量的颜色进行搭配,单纯的白色不会透露出其他信息,因此常被用来做UI设计的背景色。

 

 

 

灰色

 

灰色没有黑白那么刺眼,带着优雅的感觉,较为柔和的灰色同样也是背景色的选择之一,但同时,灰色也难以给人带来希望等积极情绪,反而大量使用灰色会让人感到悲观。

 

 

 

 

因此,一些以压抑、硬核作为特色的游戏在UI设计中会选择大片的灰色为主基调,而一些突出点会利用对比色来吸引玩家注意。

 

而红色和黄色为主基调的团往往会出现在餐厅之中,因为红色会让人兴奋,提高心跳与能量消耗,而黄色则会鼓励交流,并且激发乐观的情绪,从而进一步促进食欲——我想应该没有几家餐厅会选择冷静、压抑的黑色与灰色作为UI主色调吧。

 

 

 

 

Adobe color CC

 

当然,人类是擅长利用工具的生物,在面对大量的配色时,色彩插件也成为了一大助力。

 

Adobe color CC是一个基于网络的应用,我们也可以在网页端访问它。Adobe Color CC提供免费的色彩主题为快速创建新主题提供了极为高效的工具,同时我们也可以将制作的素材设为公开,供他人使用。

 

我们可以在使用时选择一个颜色,进而创造出基于此颜色的主题,可以选择不同的调色规则,然后使用交互式色盘、亮度以及不同颜色模式的滑块来建立颜色

 

 

 

Adobe color CC拥有一个强大的功能,即主题抽取。在网页端,我们可以上传图片,即可获得对应的色彩,同时它还拥有彩色、亮色、柔和、深色、暗色以及自定义模式,选择规则后,会自动从图片中提取生成颜色。通过移动标记点的位置,Adobe Color CC提取当前位置的颜色并图片下面的主题预览中显示出来。

 

 

 

此外,我们也可以通过探索界面,来查看他人分享的设计。我们可以通过筛选,来查看最受欢迎或者最常用的主题,非常的人性化。

 

 

 

Adobe color CC的取色结果可用于Photoshop,Illustrator,InDesign,Adobe Illustrator Line,Adobe Photoshop Sketch ,是上手极为容易且便捷的产品。

 

因此,选择符合主题的主色调,使用工具,再配合631法则,便能做出不错的UI设计,如果随着技术的进阶,也可以尝试更加复杂的配色选择,以实现更好的效果。