UI设计中的色彩搭配技巧

随着扁平化设计和 Material Design 的日益普及,色彩理论知识的重要性也变得愈加明显!

每个APP 都会有一套配色方案,并在主要区域使用其基础色彩。

 

分享大纲

1、色彩的概述——(了解色彩)

2、色彩在设计中的四大原则——(介绍色彩在设计时需要知道的理论知识)

3、UI中的配色——(介绍UI设计颜色的搭配)

4、配色小技巧——(简单的小白配色方法)

 

1、色彩的概述

1.1、光与色的简介

无光一片黑,有光即显色,无色仅黑白,有色因光泽!

光源色

发光体发出的光,形成了不同的色彩,称之为光源色。不同的光源色呈现出来的颜色是不一样的。

图片来源于网络仅供学习,侵权告知删

固有色

固有的物体本身的颜色在常态光源下产生的色彩。

图片来源于网络仅供学习,侵权告知删

环境色(反光)

指在各类光源的照射下,环境所呈现的颜色。物体表面受到光照后,除吸收一定的光外也能反射到周围的物体上。

比如,一个在红色灯光下的瓷具会呈现部分淡红色,就是环境色的影响。

图片来源于网络仅供学习,侵权告知删

 

1.2、色彩传达的情感

人们看到不同的颜色会产生不同的心理感受

图片来源于网络仅供学习,侵权告知删

 

 

2、色彩在设计中的四大原则

2.1、整体色调要协调统一

界面设计应该先确定主色调,主色将会占据页面中很大的面积,其他的辅助色都应该以主色为基准进行搭配。这可以保证整体色调的协调统一,重点突出,使作品更加专业、美观。

图片来源于网络仅供学习,侵权告知删

 

2.2、配色要有重点色

配色时,可以选取一种颜色作为整个界面的重点色。

要点 1:重点色可以被运用到焦点图、按钮、图标,或者其他相对重要的元素,使之成为整个页面的焦点;

要点 2:重点色不应该用于主色和背景色等面积较大的色块;

要点 3:重点色应用于强调界面中重要元素的小面积零散色块。

图片来源于网络仅供学习,侵权告知删

 

2.3、注意色彩平衡

配色的平衡主要是指颜色的强弱、轻重和浓淡的关系。

要点 1:同类色彩的搭配方案往往能够很好地实现平衡性和协调性;

要点 2:高纯度的互补色或对比色,(例如红色和绿色很容易带来过度强烈的视觉刺激,使人产生不适的感觉);

要点 3:高明度的颜色显得更明亮,可以强化空间感和活跃感;

要点 4:低明度的颜色则会更多的强化稳重低调的感觉。

图片来源于网络仅供学习,侵权告知删

 

2.4、对立色的调和

当包含两个或者两个以上的对立色时,页面的整体色调就会平衡,这时就需要对对立色进行调和。

调和的 3 种方法:

1. 调整对立色的面积,使一种颜色为主色,其他颜色成为辅助色。为了降低辅助色的色感,可能需要适当调整它们的纯度和明度;

2. 添加两种对立色之间的颜色,引导颜色在色相上逐渐过渡,例如要调和红色和黄色,可加入橙色;

3. 加入大量的中性色,黑、白、灰称为中性色,它们不带任何正面或负面的感情色彩,用来调和其他彩色是一种非常有效的方法。

图片来源于网络仅供学习,侵权告知删

 

 

3、UI中的配色

3.1、主色

主色是指在配色中处于支配地位的色彩。在配色前,主色是最先确定的颜色

一般情况下,主色是配色中使用面积最多的色彩。用于主要的组件、组件的背景、大面积色块等。

例如,下面页面中的主色是蓝色。尽管也运用了大面积的白色,但是黑白灰属于无彩色,无彩色并不参与到配色过程中。绿色是作为强调色而出现的:

图片来源于网络仅供学习,侵权告知删

 

3.2、衬托色

衬托色是主色以外,为了衬托主色而出现的另一种色彩。衬托色通常为主色的互补色或对比色。衬托色所使用的面积可大可小,只要达到衬托的目的即可。

一组配色中一定会有一个主色,而衬托色并非必不可少。是否采用衬托色,取决于你的配色计划。通常单一的色彩会比较单调,而利用衬托色来强化主色的丰富变化是解决这一问题的方案之一。

图片来源于网络仅供学习,侵权告知删

 

3.3、背景色

背景色经常表现为无彩色(黑、白、灰)或者低饱和度的色彩。背景色主要是作为背景而存在,它最好不要以非常强烈的姿态出现。背景色并非具有某种功能,它是一个页面的基础底色。

 

3.4、强调色

强调色是在主色以外起强调作用的色彩,可以说它是非常重要的视觉焦点。它本身具有一种独立性,因此在配色上要形成与主色的强烈对比。它可以是主色的对比色、互补色等,使其能跳脱于主色的色彩。

强调色所用的面积比较小,只要在焦点领域运用上强调色,其本身就有着聚焦的作用。有时候强调色还扮演着衬托色的角色。

图片来源于网络仅供学习,侵权告知删

 

 

4、配色小技巧

黑白灰优先。如果你没有很好的配色,那就先选择黑白灰吧,如果搭配得当,黑白灰的设计看上去层次也是很丰富的。

图片来源于网络仅供学习,侵权告知删

在黑白灰基础上添加一种色彩。如果你觉得黑白灰单调,可以在黑白灰的基础上加入一种色彩,可以在大面积的黑白灰上面加入小面积的颜色。这样的搭配高雅,又不失活力。

图片来源于网络仅供学习,侵权告知删

使用同一色系进行色彩搭配。如果使用色彩来搭配,那么一个页面最好使用同一色系的颜色来进行搭配,这样就不会出现不协调的问题。

图片来源于网络仅供学习,侵权告知删

可使用互补色进行搭配。只要比例得当,互补色的搭配一样可以收获很好的视觉效果。

使用邻近色进行色彩搭配。一种颜色的纯度比较高的时候,另一种颜色纯度低或名度低的,这样搭配出的效果会比较好。以上只是一些基础的色彩搭配,初学者,如果能做到以上几点,相信界面设计也一定不会差。

图片来源于网络仅供学习,侵权告知删

 

 

色彩搭配网站:

https://colorhunt.co/

https://coolors.co/browser/latest/7

https://colordrop.io/

 

 

 

 

作者:田姑娘呢

原文来源:https://www.zcool.com.cn/article/ZOTQzMzA4.html

每天更新,
全站高品质素材免费下载!