随着扁平化设计和 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
全站高品质素材免费下载!