美术基础知识（美术基础，掌握这篇文章就够了）

美术的重要性

任何分类的设计师都需要有一定的美术基础，甚至也要有一定的手绘能力。我们在用电脑设计图形的时候其实也在潜移默化地在使用我们储存在大脑中的美术知识和审美，即使再先进的人工智能，也不能代替设计师的审美和美术知识。说到底软件仅仅是工具而已。要想提高你图形的审美和设计感，那么就需要补一下美术基础的课了。互联网视觉设计中手绘在互联网设计中占的比重也在逐渐增多。对于我们UI设计师来说手绘也成为一个绕不过去的技能，但是不要紧张：我们不需要成为手绘大神或者插画师，只需要掌握一定的美术知识再加练习即可。那么如果我们掌握了美术知识并可以画出还可以的画，对我们会有什么好处呢？推荐阅读：设计师的你认为手绘真的要学吗？

"Outlaws" Playing Cards by Mike

美术在草稿中的优势

在作品创作的初期，草稿对我们构思起了很关键的作用。比如在APP项目、运营图、图标绘制以及一些图形化的设计中，首先很多设计师会打开电脑直接开始作图，然后就陷入了对工具选择的困惑中：我是该用钢笔工具勾形状呢还是用画笔工具呢。不要纠结这些，你只要拿出纸笔，手绘出脑海中思考的图形就好了。等草图完成后，再打开电脑完善这个作品。

"Outlaws" Playing Cards by Mike

美术在提案中的优势

在提案之前通过手绘将自己的想法画出来，和上司或者客户讲解自己的提案方向，这种方法会避免上司对电脑图形设计细节的不满意，毕竟我们还没时间完成细节。如配图中的一个图标，从最初提案到最终定稿，中间经历20多版的手绘稿件，如果每次提案都是以PS输出效果提交，在电脑绘制中要考虑的色彩细节会更多，同时也会浪费大量的时间。

手绘完成的原型图 作者：Anne

美术在原型图中的优势

开始视觉设计前，原型图的沟通可以节省双方很多时间。用软件设计出的原型图有些抽象，会让大家不了解具体内容搭配下的情况。而手绘的原型图可以帮助我们有更多的思考。不仅可以用于沟通方案，还可以后期包装展示时放入，让自己的作品区别于他人。

手绘风格的运营图设计 作者：valiant_kwok

美术在实际项目中的优势

越来越多的视觉稿都将手绘插画运用在当中，增加视觉冲击感，给用户带来全新的体验。比如H5、网页、APP等项目，“walk up”APP更是运用了大量的插画表现。然而我们浏览某些设计的时候，总会看到并吐槽一些用到烂大街的素材，到了自己工作的时候依然会选择那些素材。再精致的素材有时候不如一些手绘原创的图形，手绘的图形插画能减少素材感，给用户耳目一新的视觉展现。尤其是现在闪屏、弹窗、运营图，手绘图表现形式已经是常态化，它们可能没有很精细，没有很美观，但是很独特、很有氛围感、很吸引眼球。如果你总是运用素材，不如尝试一下自己手绘原创一个图形，这样它的分量与价值会更大。在你尝试手绘之前，让我们先具体了解绘画的一些原理再开始动手吧。

手绘在实际项目中的使用 作者：甘地xi

三大基本关系

首先我们要了解的是在美术里最重要的三个主要关系，他们是：结构关系、素描关系、色彩关系。这三个关系简单来说就是，结构关系是物体的透视关系（也就是近大远小的空间关系）、和物体的基本结构（可以把一个复杂的物体拆解成基本的圆形、三角形、正方形、长方形等简单容易描绘的结构）等，结构关系是我们如何理解形体的基础。素描关系主要是研究光影的关系，一个物体在光源下肯定会产生如黑白灰等不同的明暗变化就是素描关系了。素描关系中最重要的就是三大面和五大调，我们下面会详细讲。色彩关系则是要研究不同的色彩互相融合产生的影响，比如邻近色、互补色、邻近色等，两个物体的颜色不一样也会产生环境色、固有色等。所以我们为了用手绘或者电脑绘图来描绘物体时，可以从这三个关系中来审视对象，就会描绘地更加准确了。

结构关系

透视

在结构关系中最重要的知识点就是透视了。透视是绘画理论术语，“透视”（perspective）来源于拉丁文“perspclre”（看透），是一种在平面绘画物体的空间关系的方法。物体由于近大远小的空间关系所以在我们观察者视角就出现了变化，这种变化和空间位置正相关。能够准确描绘出近大远小就能暗示出空间关系了。所以透视是画准结构的必要前提。

灭点

灭点指的是立体图形各条边的延伸所产生的相交点。透视点的消失点。灭点透视中，两条或多条代表平行线线条向远处地平线伸展直至相交的一点。平行的线能在灭点上推进而聚合的原则同样是以肉眼观察到的现象为依据的。

灭点

第一种透视：平视

一个物体如果是正面或者没有近大远小的关系，那么该物体横竖对齐即可。

我自己的理解就是，看一个物体，正面去看就是没有透视。和你的的视线是平行的，没有任何的偏离。

此图中的物体就是平视，没有近大远小

第二种透视：一点透视

一点透视：透视来源于一个点，形状的变化与该点的距离相关。一点透视可以理解为在一个空间内多个物体产生的近大远小的关系。

一点透视

第三种透视：两点透视

两点透视：通过两个灭点建立透视。就像我们站在一个比较庞大物体的面前，这个物体的两侧都会产生近大远小的关系。把近大远小的线延伸，它们会相较于视平线上的两个灭点。这就叫两点透视了。

两点透视

第四种透视：三点透视

三点透视：通过两个灭点和延长线进行辅助。一个高于观察者的物体除了产生两点透视之外也会在其顶部产生另一个灭点，三个灭点都存在，我们称之为三点透视。

三点透视

练习方法：结构素描

结构素描，又称“形体素描”。这种素描的特点是以线条为主要表现手段，不施明暗，没有光影变化，而强调突出物象的结构特征。 以理解和表达物体自身的结构本质为目的，结构素描的观察常和测量与推理结合起来，透视原理的运用自始至终贯穿在观察的过程中，而不仅仅注重于直观的方式。这种表现方法相对比较理性，可以忽视对象的光影、质感、体量和明暗等外在因素。大家可以尝试在纸上绘制主要表现结构的结构素描作为练习。结构素描对于美术基础不好的同学也可以适用。只要用尺子和圆规等工具搭配合适的自动铅即可上手。

达芬奇的结构素描练习

达芬奇的结构素描练习

素描关系

三大面：黑白灰

有的时候设计师经常会说黑白灰关系，黑白灰关系就是我们要介绍的“三大面”。三大面就是受光程度不同产生的：光打得多就是受光面，光打得少就是侧光面，光由折射或者完全遮住就是背光面了。这么说比较容易理解：就好比是我们的地球，热带地区就是受光面，温带地区就是侧光面，北极南极就是背光面。这与光源的距离和位置有关，越朝向和接近光源越亮。立体形状在光源的照射下都有黑白灰三个面，您可以观察分析一下身边的事物。

三大面

五大调：亮面、灰面、明暗交界线、反光、投影

五大调：1.亮面 2.灰面 3.明暗交界线 4.反光 5.投影

五大调同样是分析光影问题的，通过描绘光影我们可以塑造立体感。五大调是三大面的细分，三大面五大调是我们每位设计师都需要记牢印在心里的，在绘制一些拟物造型或者专题的时候，为了塑造更逼真的感觉，我们必须检查自己的造型有没有三大面五大调。

图中图标中的三大面五大调您能分析出来吗？

亮面：受光物体最亮的部分，表现的是物体直接反射光源的部分。

灰面：高光与明暗交界线之间的区域。

明暗交界线：区分亮部与暗部的区域，是物体的结构转折处。明暗交界线不是一条真实的线，但是这个区域一般会决定亮面灰面的势力范围，也跟随者形体来走。所以非常重要。

反光：物体的背光部分受其他物体或物体所处环境的反射光影响的部分。

投影：物体本身遮挡光线后在空间中产生的暗影。

练习方法：黑白素描练习

黑白素描的练习就是我们用铅笔来描绘对象物体的明暗变化。这种素描相较结构素描来说比较难，需要练习上“调子”。调子就是用铅笔排线而产生的明暗，需要一定地技巧。

丢勒的素描作品

色彩关系

三原色 三原色是指色彩中不能再分解的三种基本颜色。相互混合可以产生出所有的颜色。黑白灰属于无彩色。色彩三原色是红、黄、蓝。红+黄=橙，黄+蓝=绿，红+蓝=紫。屏幕三原色为红（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设计是二维平面的图形设计，立体构成练习可以相对减弱。但是如果您对立体构成比较感兴趣，可以查找相关资料了解。