UI界面视觉设计要素之色彩要素
目录
一、色彩设计的基本知识。
1、色彩的三属性
2、色彩的冷与暖
3、色环
4、色调
5、色彩对人的心理作用
二、色彩设计的原则
1、统一性原则
2、情感性原则
3、生动性原则
三、几条实用的配色策略
1、你的配色方案永远不应该比它呈现的内容的更加“响亮”。
2、尽量选择简单的灰色作为你网站/APP的基调。
3只选择一种颜色突出显示。
4、使用安全色,降低色彩的纯度。
5、如果产品特性需要鲜艳的配色,那么我们在设计过程中,不要使用超过三种以上的大色块,尽量保持画面的基调一致、和谐。这样就不会导致画面的混乱。
一、色彩设计的基本知识。
1、色彩的三属性
色相是指色彩的相貌,是区别色彩的必要名称,例如我们常见的红、橙、黄、绿、蓝、紫等。
明度,明度是指色彩显示的明暗程度,即是色光的明暗度。如右图,不同的颜色,反射的光量强弱不一,因而会产生的明暗程度不同。
纯度,纯度是指色彩纯净、饱和的程度。具体来说,就是表明一种颜色中是否含有白或黑的成份。右图中,就向我们展示了低纯度、中纯度和高纯度的色彩。
2、色彩的冷与暖
冷色和暖色是一种色彩感觉,它们没有绝对的区分,色彩在比较中才存在了冷暖。通常我们把红黄色系看作暖色系,具有温暖、强烈、扩张的感受;蓝紫色系看作冷色系,具有寒冷、平静、收敛的感觉;而绿色系则看作是中性色系。如图就是一件冷色系的设计作品,它带给我们平静精致的感觉。
3、色环
色环就是将光谱中的色彩,按照一定的顺序依次排列,首尾相连,首尾为红色和紫色,组成环形,构成了色环。在色环中,红、黄、蓝为三原色,因为它们不能用其他颜色调配而成,故称为三原色。间色是指光谱中的橙、绿、紫等,它们由两种原色调配而成,也叫二次色。色环中还包括类似色和互补色,类似色是指在色环中距离在45度以内的一些色彩称为类似色。而互补色是指在色环上相互正对,成180度角的两个颜色称为互补色,也称对比色。互补色有红绿、黄紫、蓝橙。
4、色调
色调是指一幅作品中画面色彩的总体倾向,是大的色彩效果。它是颜色的重要特征,决定了颜色本质。如在大自然中,经常见到这样的现象:不同颜色的物体或被笼罩在一片金色的阳光之中,或被笼罩在一片轻纱薄雾似的月色之中;或被秋天迷人的金黄色所笼罩;或被统一在冬季银白色的世界之中。这种在不同颜色的物体上,笼罩着某一种色彩,使不同颜色的物体都带有同一色彩倾向,这样的色彩现象就是色调。通常暖色调包括红、黄、橙、咖啡、紫红等,具有热烈、明朗、兴奋、奔放等特点,给人温暖的感觉。冷色调包括蓝、绿、紫等,具有安静、稳重、明快等特征,冷色调给整个空间带来清新、凉爽的感觉。如图,就向我们分别展示了冷色调和暖色调的两幅不同色调的作品。
5、色彩对人的心理作用
当色彩以不同的光强度与不同的波长作用于人的视觉时,便会产生一系列心理的反应,它们与人的以往经验相联系,引起人的各种联想,使色彩具有了情感、意志、情绪等各方面的象征意义。如图就是一副暖色调的作品,让人感到明朗、活泼、热情的感受。
二、色彩设计的原则
1、统一性原则
色彩会因界面的不同而产生不同的情感,因此,为了使界面整体达到和谐统一,首先要保持色彩的和谐统一,界面才能与浏览者达到情感共鸣。如右图是一副暖色调的设计作品,舒适和谐的色调传递出的自然、健康、积极的态度。
2、情感性原则
色彩作为一种视觉元素,它是具备情感的,并潜移默化的影响着我们的行为和情绪。我们要充分利用色彩的温度感、距离感、尺度感等满足受众人群的心理感受。
3、生动性原则
在色彩设计时,应避免过于单调,没有变化,缺乏氛围。如右图的设计中,在色彩的面积、色相、纯度、明度、光色等方面进行了有秩序、有规律的变化,给人以丰富的变化感,让设计更加生动。
三、几条实用的配色策略
1、你的配色方案永远不应该比它呈现的内容的更加“响亮”。
如图一的色彩搭配显然比图二更合理,图二中喧宾夺主的色彩设计让我们的关注点落在了色彩上,而忽略了内容本身。
2、尽量选择简单的灰色作为你网站/APP的基调。
如图设计中,色彩主要以灰色为主色调,画面简洁、稳定,给人以信赖感。其中字体的色彩最好避免使用黑色,深灰色一般更容易阅读。
3只选择一种颜色突出显示。
如图的设计作品,简洁的色彩和画面,层次分明,给人以舒适的视觉体验。
5、如果产品特性需要鲜艳的配色,那么我们在设计过程中,不要使用超过三种以上的大色块,尽量保持画面的基调一致、和谐。这样就不会导致画面的混乱。
如果觉得《UI界面视觉设计之色彩要素》对你有帮助,请点赞、收藏,并留下你的观点哦!