【设计】设计中的配色用法

配色并没有所谓的固定方程式,生搬硬套配色理论并不能真正解决问题。本文带你从配色的策略性角度出发,深入分析配色的正确打开方式,让你从本质上解决不同场景的配色问题


1

明确配色目标

对于大部分互联网行业的视觉设计师来说,平时的工作内容大体会分为产品界面设计和营销设计两个大的方向。


很多设计师需要同时负责这两块内容,于是就可能会出现配色使用没有明确的目标,导致视觉表现力过弱。比如:推广设计的配色太素,无法吸引用户的注意;而产品页面的配色又过于杂乱刺眼,影响用户阅读和操作体验等。

一、产品界面设计的配色目标:

● 信息传递:产品的首要目的是传递用户所需要的信息,这就需要界面有清晰的层级关系,明确、舒适的阅读体验。

● 引导操作:清晰合理的操作引导,让用户能够准确地根据引导进行下一步操作。

● 品牌价值:很多设计师会忽略这一点,导致产品的界面与品牌关联性差,整体界面没有品牌感。


二、推广设计的配色目标:

● 吸引流量:强有力的吸引力,快速抓住眼球,留下深刻印象。

● 营造氛围需要营造氛围,让用户通过氛围快速理解和融入到推广内容中,加深印象。

● 快速传递在短时间内快速传递信息。这就需要设计时信息表达明确,使内容能够精准快速地传递给用户。


我们将这两种配色目标做一下关键词提炼,产品界面设计的配色关键词:清晰、舒适、引导、品牌感。而推广设计的配色关键词为:吸引力、氛围、快速传递。将这些关键词作为衡量目标,以此来寻找正确的配色方向,或者用于检验设计作品的配色问题


所以当我们接到项目需求后,可以先与需求方一同确定好设计的目标,以此来确定正确的配色方向,提升配色与设计方向的准确性。而这样做的另一个好处是,我们可以在项目之初就与需求方之间取得沟通和信任,达成共识,为后续沟通打好基础。



2

明确配色主次

当我们确定好配色的目标以后,如何开始配色工作呢?通常情况下,我们首先来确定整个设计的主色,然后再开始进行后续的设计。

一、主色与副色的定义:

什么是主色和副色?

主色是整个色调的核心颜色,通常也是相对占比最多的颜色,它决定了整体的风格和基调。而副色则是画面中占比相对较少的颜色,它通常起到辅助主色、丰富画面的作用。


二、确定主色,精简色彩层级

一部好的电影,通常情况下需要有一个明确的主角,它主导了整个电影的走向,对于设计作品来说,也是相同的道理。所以在配色过程中,首要的任务是确定配色的主色,并在整个作品中明确它的地位,让它来主导整个画面。


在产品界面的设计中,主色是传达品牌感的重要元素。明确的主色能够让整个界面产生强烈的品牌感。反之,整体的配色会显的十分混乱,影响品牌感的传达。


使用前面讲的目标分析法,从产品界面的配色目标入手,逐一寻找和发现问题。

我们通过三个维度去分析问题:

信息传递的维度:这两个界面的颜色过于繁杂,导致信息层级混乱,没有视觉中心,用户也不知道从何开始阅读。而两个界面中的卡片设计上,也都存在同一个问题:底色的明度过高,导致卡片上的文字阅读性非常差。

引导操作维度:整体核心操作路径不明确,用户进入后无明确的操作引导;按钮的视觉效果也很弱,导致用户无法识别。

品牌价值维度:品牌主色不明确,导致整体品牌感弱。

如何去解决以上的问题?可以用八个字概括:明确主色,精简层级

案例:

我们可以来看一下南方基金的产品界面设计。相比前面案例的两个界面,南方的产品界面呈现出优秀的整体品牌感和品质感。

在南方基金app的整体配色中,最核心的思想就是简化色彩层级——明确主色,减少不必要的颜色。从配色的角度来分析,作为品牌的主色,「南方蓝」贯穿了所有的产品界面,使整个产品显得非常统一和整体,凸显了整体的品牌感和品质感。字体颜色层级清晰,重点明确使得整个界面的阅读体验非常舒适。




3

选择正确的色系


明确配色目标,确定主色以及色彩层级后,如何进行下一步的配色?

这时候我们可以根据不同的配色目标来选择合适的色系,丰富整个画面的配色。需要注意的是,在丰富配色的同时,仍然要严格控制色彩层级,以保证整体色彩层级的精简。

一、巧用同色系,统一不单调

同色系是指在色环上相距不超过45°的两种颜色,我们可以选择主色的同色系范围内的颜色来丰富整体配色。那么如何选择同色系的颜色呢?


首先在色环中确定颜色的位置,通过色环两边45°延展出我们所需要的同色系。


在主色的同色系范围内,我们可以选出同色系颜色作为延展色,单独使用或者组合成渐变色进行使用。


下面的案例就是运用同色系原理来进行配色的。可以看到,整个页面在保持色彩统一的前提下,增强了画面的层次和丰富性,从而提升了整个页面的层次感和品质感。


二、不同场景的对比色用法:

对比色是指在色环上相距120°~180°之间的两种颜色(180°时则互为互补色)。处于对比色关系的两种颜色,通常色相差异较大,能够相互产生强烈的对比效果,我们可以利用这种原理来增强画面的吸引力


在不同的场景中,对比色同样有着不一样的使用方式。在产品设计中,通过小面积的颜色对比,可以加强主色的活力与整体丰富性;而在推广设计中,通常会使用大面积的对比色增强页面的吸引力。


下图为在产品设计中的案例:

下图为在推广设计中的案例:

三、尝试更多的创新配色:

除了掌握以上的几种基本色系的配色方法外,大家可以在此基础上尝试更多的配色风格。比如在同色系、对比色系的基础上,有目的地加入色彩元素丰富色调,在保持整体色彩层级的同时,加入更丰富的变化,从而达到配色目标。


更清新的「同色系」配色案例:

更丰富的「同色系」配色案例:

更多彩的「对比色」配色案例:




4

小结


看完前面的内容,大家会发现,其实配色并没有想象中那么复杂。


只要掌握正确的配色策略,并逐渐适应这种方法,就可以应付各种不同的设计类型。最后,我们将前面讲的配色法则做一个简要的总结:

明确目标 – 确定主色 – 精简层级 – 选择色系丰富配色


希望大家读完这篇文章以后,能够真正理解和掌握策略性配色法则,在不同的项目中灵活运用,并最终形成自己的优秀配色习惯。



文章推荐:

视觉设计研究专栏

01 金融APP界面 | 巧用五要素,有料更有颜(一)

02 金融APP界面 | 巧用五要素,有料更有颜(二)

03 基金APP | 资讯宝项目总结