设计师必须了解的美术基础uimaker(2)

UI / UI设计教程 / UI教程 /      

uimaker
UI设计师 / 江苏 南京

来源:网络   作者:佚名

关键词

三原色 三原色是指色彩中不能再分解的三种基本颜色。相互混合可以产生出所有的颜色。黑白灰属于无彩色。色彩三原色是红、黄、蓝。红+黄=橙,黄+蓝=绿,红+蓝=紫。屏幕三原色为红(Red)、绿(Green)、蓝(Blue)。也叫色光三原色是加色模式,相加混合为白色。但是RGB依赖于电脑屏幕,不同的电脑由于对色彩值的检测的重现都不一样,所以存在色差。我们家里的彩色电视屏幕就是由这红、绿、蓝三种颜色的小点组成,将这三种颜色按不同比例混合,就可以有千变万化的色彩。

设计师必须了解的美术基础

 

屏幕三原色 RGB

印刷三原色为青(Cyan)、品红(Magenta)、黄(Yellow)。是减色模式,混合为深灰色,并不能产生黑,所以在印刷时加上黑色油墨,才能产生纯正的黑,就是CMYK颜色模式。

设计师必须了解的美术基础

 

印刷三原色

 

色彩三属性


设计师必须了解的美术基础

色相:色相就是颜色的样子。就像人的脸一样,都是独一无二的。也就是色彩的相貌,冷色暖色中性色,是色彩最突出的特点,简单来说,他决定“是什么颜色”。光谱上的红、绿、蓝等就是不同色彩的色相、黑色为没有色相的中性色。色相在人眼中的不同是光的波长的长短不同所造成的。红色的波长最长,紫色的波长最短。把红、橙、黄、绿、蓝、紫六种颜色和处在它们各自之间的红橙、黄橙、黄绿、蓝绿、蓝紫、红紫这六种中间色作为12色相环。能够使人清楚明了的使人看出色彩平衡和冷暖色、对比色等。由12色相环也可以衍生出更多的色相环。


亮度:亮度,我的理解是,亮的反义词就是暗,那说明是与颜色的明暗程度有关。色彩的明亮程度,简单来说,就是颜色的从黑到白的变化。亮度最低时是黑色,亮度最高时是白色。颜色的深浅的不同程度,与光波的幅度有关,也取决于环境中反射光有多强。亮度高的色彩给人清新、明快的感觉,让人联想到蓝天白云和青春。明度低的色彩给人沉重、稳定、坚硬的感觉,让人联想到石头和钢铁。


饱和度:饱和度,饱和度从字面上的意思来理解,是比较饱和,太饱和可能就会很刺眼。就是与明度有关了。色彩纯粹度,是色彩的纯净程度鲜艳程度,饱和度越低,颜色的色相就越不明显,也与光波的幅度有关,饱和度低的颜色给人一种很灰,不明亮的感觉,饱和度为0的颜色为无彩色,就是黑白灰。在一张图中,饱和度高的地方给人的感觉很靠近,饱和度低的地方给人的感觉很远。高饱和度和低饱和度的色彩都给人坚硬的感觉。

色彩关系

互补色:红+绿+蓝=白色,在色环上相隔180度,是对比最强的色组,在三原色中,这两种相隔180度的色光等量相加会得到白色。经典互补色有黄色和紫色(例如科比的球衣)、黄色和蓝色、红色和绿色。互补色在视觉上给人非常大的冲击力,所以在使用上常给人潮流、刺激、兴奋的感觉。


对比色:指在色环上相距120度到180 度之间的两种颜色。也是两种可以明显区分的色彩,包括颜色三要素的对比、冷暖对比、彩色和消色的对比等等。对比色能使色彩效果表现明显,形式多样,极赋表现力。互补色一定是对比色,但是对比色就不一定是互补色。因为对比色的范围更大,包括的要素更多,例如冷暖对比,明度对比,纯度对比等。


邻近色:相互接近的颜色在色环上的距离相距90度,或者相隔五六个数位的两色。色相相近。冷暖性质相近,传递的情感也较为相似。例如红色、黄色和橙色就是一组临近色。邻近色表现的情感多为温和稳定,没有太大的视觉冲击。


同类色:色相性质相同,但色度有深浅之分(在色环上相距15度以内的颜色)


设计师必须了解的美术基础

 

色彩关系


固有色、光源色、环境色

了解完基本的色彩知识,我们来简单讲讲色彩和光源的关系。如果想描绘好对象的色彩,那我们必须了解对象的固有色、光源色、环境色以及它们之间的关系和变化。


设计师必须了解的美术基础

 

Workplace by Igor Kozak for Rocketboy

固有色 最简单的理解是物体本身的颜色。物体的固有色并不存在,在绘画过程为了观察方便我们常引用 “固有色”这个概念。固有色是指在光源条件下物体占主导地位的色彩,比如红色的罐子、绿色的植物等。

光源色 一切物体只有光源的点亮下才能观察到它的色彩。光源有自然光源(太阳、天光)和人造光源(灯),这些光源都各自具有不同的颜色。太阳光是白的暖色光,月光是偏青的冷色光,阴天更多的是蓝灰色的天光、普通灯光是偏黄色的暖色光。光源的颜色对物体的颜色影响很大,红色的光源下的蓝色物体您觉得会是什么颜色呢?

环境色 物体周围环境的颜色就是环境色。环境色对物体的影响非常大,比如在一个红色背景下的白色石膏方块,由于光源打到红色背景下也会“染”到白色石膏方块身上,产生一种淡红色的色彩。所以我们在电脑作图的时候也要想象环境色的影响。

练习方法:三大构成

三大构成指的是:平面构成、色彩构成、立体构成。三大构成起源于包豪斯学院,一所在设计历史上非常重要的学术机构。三大构成是美术知识过渡到设计领域最重要的一个转折。我们掌握了美术知识并练习了一定的程度后,ui设计教程,就可以开始三大构成练习了。具体来说:

平面构成:什么是画面最小的单位?点、线、面。如果我们从无到有需要构建一个画面而不知所措时,可以尝试用点、线、面来开始。同时也可以尝试用点、线、面来做命题进行设计练习,这都是大多数高等院校对设计专业进行的最有效的训练。

色彩构成:根据我们上文学到的色彩知识:色彩原理、邻近色、对比色、互补色、环境色、固有色等,融入这些知识到一个练习之中:比如用紫色和黄色创作一个对比强烈的画面。这就是色彩构成的练习方法了。

立体构成:通过对比、重复肌理、骨骼等三维空间物体,完成一组设计练习。通常UI设计是二维平面的图形设计,立体构成练习可以相对减弱。但是如果您对立体构成比较感兴趣,可以查找相关资料了解。


设计师必须了解的美术基础

 

Cocktail Hour by Hayden Walker


设计师必须了解的美术基础

 

The Lamp by MUTI


设计师必须了解的美术基础

 

Pattern by Steve Wolf


色彩心理学


色彩心理学是美术知识学习中非常重要的一部分,它所研究的是色彩通过对人的视觉上的刺激,而引发的人的情感和感官上的变化。通过对色彩的经验积累而变成的对色彩的心理上的逾期感受。在生活中,色彩心理学对人们对颜色的认知有很大的影响。而在生活我们常用“亮不亮”、“艳不艳”、“淡红”、“苹果绿”来形容。如果开一家快餐店,你会用什么颜色作为品牌的主色?为什么交通灯用红色表示停止通行而不是绿色呢?这都是色彩心理学的相关知识。这并不是说色彩本身就具有这些含义和情感,而是我们社会和人为的认知,是关于社会、生活,运用好色彩心理学可以带给用户极佳的视觉体验,影响用户的内心情感和思维,引导用户的感知和行为,并且促进我们自身的发展。

设计师必须了解的美术基础

 

Personal Website Final Concept by Jamie Syke

黑色:黑色是一种代表品质、权威、稳重、时尚的色彩,同时也含有冷漠、悲伤、防御的消极情感。它是所有色彩中最有力量的,能很快吸引用户的注意力。黑色吸收所有光线而且没有反射,可以说是没有任何光进入视觉,它和白色相反。当你不想引人注目或想专心处理事情时常用。黑色作为一种无彩色,能让和它配合的其他色彩看起来更亮。所以在界面设计中,黑色常与其他色彩搭配,使产品颜色更加亮丽和时尚。即使是和暗色系的色彩相搭配也会很好看。黑+红很引人注目,黑+黄活力突出有亮点。黑色也有神秘、科技、稳重的色彩情感,很多科技产品都会使用黑色,或用黑色作为背景色。是一种永远流行的主要色彩。

 

设计师必须了解的美术基础

 

Stock Image Website by Anton Chandra

白色:白色是所有可见光进入视觉,包含了光谱中的所有色光的颜色,常被认为“无色”。白色的明度是最高的,并且它没有色相。在RGB颜色模式中,红绿蓝混合得到白色。白色传递一种简单、纯真、高雅、精致、信任、开放、干净、畅快、朴素的情感。单一使用白色不会引起任何情感,但是当与其他颜色配合使用时,白色能很好的衬托,大量的留白让其他元素脱颖而出。在界面设计中,作为无彩色的白色,常用于背景色,缓和各种颜色的冲突,以衬托其他色彩,提高画面明度,提高文字可读性。黑色和白色是极端对立的两色,但是黑白搭配总是非常完美,永远都不过时。

 

设计师必须了解的美术基础

 

Accessories cards by Nicola Baldo

设计师必须了解的美术基础

 

灰色按钮在设计中通常代表不可点击

 

灰色:灰色是一种代表睿智、老实、执着、严肃、压抑的色彩。色介于黑色和白色之间,也属于无彩色,没有色相也没有纯度,只有明度的变换。使用灰色很少会犯严重的错误,它和任何颜色都能很好的搭配,也常常用于背景色或用于突出其他彩色。在画面中,很少出现纯黑,基本都是用深灰色来代替黑色,也可以用浅灰色来代替白色。灰色不像黑色那么坚硬刺眼,他更有弹性,它比黑色更有深层次的力量。在RGB模式下,红绿蓝三色数值相等为中性灰,R=G=B=128为绝对中性灰。中性灰图层常用于商业修图,人像精修中调整皮肤质感。


设计师必须了解的美术基础

 

Video Gallery by Mikha Makhoul


 收藏