設(shè)計(jì)師必須了解的美術(shù)基礎(chǔ)，設(shè)計(jì)師充電時(shí)間

 

美術(shù)的重要性

 

任何分類的設(shè)計(jì)師都需要有一定的美術(shù)基礎(chǔ)，甚至也要有一定的手繪能力。我們在用電腦設(shè)計(jì)圖形的時(shí)候其實(shí)也在潛移默化地在使用我們儲(chǔ)存在大腦中的美術(shù)知識(shí)和審美，即使再先進(jìn)的人工智能，也不能代替設(shè)計(jì)師的審美和美術(shù)知識(shí)。說到底軟件僅僅是工具而已。要想提高你圖形的審美和設(shè)計(jì)感，那么就需要補(bǔ)一下美術(shù)基礎(chǔ)的課了?；ヂ?lián)網(wǎng)視覺設(shè)計(jì)中手繪在互聯(lián)網(wǎng)設(shè)計(jì)中占的比重也在逐漸增多。對(duì)于我們UI設(shè)計(jì)師來說手繪也成為一個(gè)繞不過去的技能，但是不要緊張：我們不需要成為手繪大神或者插畫師，只需要掌握一定的美術(shù)知識(shí)再加練習(xí)即可。那么如果我們掌握了美術(shù)知識(shí)并可以畫出還可以的畫，對(duì)我們會(huì)有什么好處呢？

 

"Outlaws" Playing Cards by Mike

 

美術(shù)在草稿中的優(yōu)勢

在作品創(chuàng)作的初期，草稿對(duì)我們構(gòu)思起了很關(guān)鍵的作用。比如在APP項(xiàng)目、運(yùn)營圖、圖標(biāo)繪制以及一些圖形化的設(shè)計(jì)中，首先很多設(shè)計(jì)師會(huì)打開電腦直接開始作圖，然后就陷入了對(duì)工具選擇的困惑中：我是該用鋼筆工具勾形狀呢還是用畫筆工具呢。不要糾結(jié)這些，你只要拿出紙筆，手繪出腦海中思考的圖形就好了。等草圖完成后，再打開電腦完善這個(gè)作品。

 

"Outlaws" Playing Cards by Mike

 

美術(shù)在提案中的優(yōu)勢

在提案之前通過手繪將自己的想法畫出來，和上司或者客戶講解自己的提案方向，這種方法會(huì)避免上司對(duì)電腦圖形設(shè)計(jì)細(xì)節(jié)的不滿意，畢竟我們還沒時(shí)間完成細(xì)節(jié)。如配圖中的一個(gè)圖標(biāo)，從最初提案到最終定稿，中間經(jīng)歷20多版的手繪稿件，如果每次提案都是以PS輸出效果提交，在電腦繪制中要考慮的色彩細(xì)節(jié)會(huì)更多，同時(shí)也會(huì)浪費(fèi)大量的時(shí)間。

 

手繪完成的原型圖 作者：Anne

 

美術(shù)在原型圖中的優(yōu)勢

開始視覺設(shè)計(jì)前，原型圖的溝通可以節(jié)省雙方很多時(shí)間。用軟件設(shè)計(jì)出的原型圖有些抽象，會(huì)讓大家不了解具體內(nèi)容搭配下的情況。而手繪的原型圖可以幫助我們有更多的思考。不僅可以用于溝通方案，還可以后期包裝展示時(shí)放入，讓自己的作品區(qū)別于他人。

手繪風(fēng)格的運(yùn)營圖設(shè)計(jì) 作者：valiant_kwok

 

美術(shù)在實(shí)際項(xiàng)目中的優(yōu)勢

越來越多的視覺稿都將手繪插畫運(yùn)用在當(dāng)中，增加視覺沖擊感，給用戶帶來全新的體驗(yàn)。比如H5、網(wǎng)頁、APP等項(xiàng)目，“walk up”APP更是運(yùn)用了大量的插畫表現(xiàn)。然而我們?yōu)g覽某些設(shè)計(jì)的時(shí)候，總會(huì)看到并吐槽一些用到爛大街的素材，到了自己工作的時(shí)候依然會(huì)選擇那些素材。再精致的素材有時(shí)候不如一些手繪原創(chuàng)的圖形，手繪的圖形插畫能減少素材感，給用戶耳目一新的視覺展現(xiàn)。尤其是現(xiàn)在閃屏、彈窗、運(yùn)營圖，手繪圖表現(xiàn)形式已經(jīng)是常態(tài)化，它們可能沒有很精細(xì)，沒有很美觀，但是很獨(dú)特、很有氛圍感、很吸引眼球。如果你總是運(yùn)用素材，不如嘗試一下自己手繪原創(chuàng)一個(gè)圖形，這樣它的分量與價(jià)值會(huì)更大。在你嘗試手繪之前，讓我們先具體了解繪畫的一些原理再開始動(dòng)手吧。

 

手繪在實(shí)際項(xiàng)目中的使用 作者：甘地xi

 

三大基本關(guān)系

 

首先我們要了解的是在美術(shù)里最重要的三個(gè)主要關(guān)系，他們是：結(jié)構(gòu)關(guān)系、素描關(guān)系、色彩關(guān)系。這三個(gè)關(guān)系簡單來說就是，結(jié)構(gòu)關(guān)系是物體的透視關(guān)系（也就是近大遠(yuǎn)小的空間關(guān)系）、和物體的基本結(jié)構(gòu)（可以把一個(gè)復(fù)雜的物體拆解成基本的圓形、三角形、正方形、長方形等簡單容易描繪的結(jié)構(gòu)）等，結(jié)構(gòu)關(guān)系是我們?nèi)绾卫斫庑误w的基礎(chǔ)。素描關(guān)系主要是研究光影的關(guān)系，一個(gè)物體在光源下肯定會(huì)產(chǎn)生如黑白灰等不同的明暗變化就是素描關(guān)系了。素描關(guān)系中最重要的就是三大面和五大調(diào)，我們下面會(huì)詳細(xì)講。色彩關(guān)系則是要研究不同的色彩互相融合產(chǎn)生的影響，比如鄰近色、互補(bǔ)色、鄰近色等，兩個(gè)物體的顏色不一樣也會(huì)產(chǎn)生環(huán)境色、固有色等。所以我們?yōu)榱擞檬掷L或者電腦繪圖來描繪物體時(shí)，可以從這三個(gè)關(guān)系中來審視對(duì)象，就會(huì)描繪地更加準(zhǔn)確了。

結(jié)構(gòu)關(guān)系

 

透視

在結(jié)構(gòu)關(guān)系中最重要的知識(shí)點(diǎn)就是透視了。透視是繪畫理論術(shù)語，“透視”（perspective）來源于拉丁文“perspclre”（看透），是一種在平面繪畫物體的空間關(guān)系的方法。物體由于近大遠(yuǎn)小的空間關(guān)系所以在我們觀察者視角就出現(xiàn)了變化，這種變化和空間位置正相關(guān)。能夠準(zhǔn)確描繪出近大遠(yuǎn)小就能暗示出空間關(guān)系了。所以透視是畫準(zhǔn)結(jié)構(gòu)的必要前提。

 

滅點(diǎn)

滅點(diǎn)指的是立體圖形各條邊的延伸所產(chǎn)生的相交點(diǎn)。透視點(diǎn)的消失點(diǎn)。滅點(diǎn)透視中，兩條或多條代表平行線線條向遠(yuǎn)處地平線伸展直至相交的一點(diǎn)。平行的線能在滅點(diǎn)上推進(jìn)而聚合的原則同樣是以肉眼觀察到的現(xiàn)象為依據(jù)的。

滅點(diǎn)

 

第一種透視：平視

一個(gè)物體如果是正面或者沒有近大遠(yuǎn)小的關(guān)系，那么該物體橫豎對(duì)齊即可。

我自己的理解就是，看一個(gè)物體，正面去看就是沒有透視。和你的的視線是平行的，沒有任何的偏離。

此圖中的物體就是平視，沒有近大遠(yuǎn)小

 

第二種透視：一點(diǎn)透視

一點(diǎn)透視：透視來源于一個(gè)點(diǎn)，形狀的變化與該點(diǎn)的距離相關(guān)。一點(diǎn)透視可以理解為在一個(gè)空間內(nèi)多個(gè)物體產(chǎn)生的近大遠(yuǎn)小的關(guān)系。

 

一點(diǎn)透視

 

第三種透視：兩點(diǎn)透視

兩點(diǎn)透視：通過兩個(gè)滅點(diǎn)建立透視。就像我們站在一個(gè)比較龐大物體的面前，這個(gè)物體的兩側(cè)都會(huì)產(chǎn)生近大遠(yuǎn)小的關(guān)系。把近大遠(yuǎn)小的線延伸，它們會(huì)相較于視平線上的兩個(gè)滅點(diǎn)。這就叫兩點(diǎn)透視了。

 

兩點(diǎn)透視

 

第四種透視：三點(diǎn)透視

三點(diǎn)透視：通過兩個(gè)滅點(diǎn)和延長線進(jìn)行輔助。一個(gè)高于觀察者的物體除了產(chǎn)生兩點(diǎn)透視之外也會(huì)在其頂部產(chǎn)生另一個(gè)滅點(diǎn)，三個(gè)滅點(diǎn)都存在，我們稱之為三點(diǎn)透視。

 

 

三點(diǎn)透視

 

 

練習(xí)方法：結(jié)構(gòu)素描

 

結(jié)構(gòu)素描，又稱“形體素描”。這種素描的特點(diǎn)是以線條為主要表現(xiàn)手段，不施明暗，沒有光影變化，而強(qiáng)調(diào)突出物象的結(jié)構(gòu)特征。 以理解和表達(dá)物體自身的結(jié)構(gòu)本質(zhì)為目的，結(jié)構(gòu)素描的觀察常和測量與推理結(jié)合起來，透視原理的運(yùn)用自始至終貫穿在觀察的過程中，而不僅僅注重于直觀的方式。這種表現(xiàn)方法相對(duì)比較理性，可以忽視對(duì)象的光影、質(zhì)感、體量和明暗等外在因素。大家可以嘗試在紙上繪制主要表現(xiàn)結(jié)構(gòu)的結(jié)構(gòu)素描作為練習(xí)。結(jié)構(gòu)素描對(duì)于美術(shù)基礎(chǔ)不好的同學(xué)也可以適用。只要用尺子和圓規(guī)等工具搭配合適的自動(dòng)鉛即可上手。

 

達(dá)芬奇的結(jié)構(gòu)素描練習(xí)

 

 

達(dá)芬奇的結(jié)構(gòu)素描練習(xí)

 

素描關(guān)系

 

三大面：黑白灰

有的時(shí)候設(shè)計(jì)師經(jīng)常會(huì)說黑白灰關(guān)系，黑白灰關(guān)系就是我們要介紹的“三大面”。三大面就是受光程度不同產(chǎn)生的：光打得多就是受光面，光打得少就是側(cè)光面，光由折射或者完全遮住就是背光面了。這么說比較容易理解：就好比是我們的地球，熱帶地區(qū)就是受光面，溫帶地區(qū)就是側(cè)光面，北極南極就是背光面。這與光源的距離和位置有關(guān)，越朝向和接近光源越亮。立體形狀在光源的照射下都有黑白灰三個(gè)面，您可以觀察分析一下身邊的事物。

三大面

 

 

五大調(diào)：亮面、灰面、明暗交界線、反光、投影

 

五大調(diào)：1.亮面 2.灰面 3.明暗交界線 4.反光 5.投影

 

 

五大調(diào)同樣是分析光影問題的，通過描繪光影我們可以塑造立體感。五大調(diào)是三大面的細(xì)分，三大面五大調(diào)是我們每位設(shè)計(jì)師都需要記牢印在心里的，在繪制一些擬物造型或者專題的時(shí)候，為了塑造更逼真的感覺，我們必須檢查自己的造型有沒有三大面五大調(diào)。

 

圖中圖標(biāo)中的三大面五大調(diào)您能分析出來嗎？

 

亮面：受光物體最亮的部分，表現(xiàn)的是物體直接反射光源的部分。

灰面：高光與明暗交界線之間的區(qū)域。

明暗交界線：區(qū)分亮部與暗部的區(qū)域，是物體的結(jié)構(gòu)轉(zhuǎn)折處。明暗交界線不是一條真實(shí)的線，但是這個(gè)區(qū)域一般會(huì)決定亮面灰面的勢力范圍，也跟隨者形體來走。所以非常重要。

反光：物體的背光部分受其他物體或物體所處環(huán)境的反射光影響的部分。

投影：物體本身遮擋光線后在空間中產(chǎn)生的暗影。

 

練習(xí)方法：黑白素描練習(xí)

黑白素描的練習(xí)就是我們用鉛筆來描繪對(duì)象物體的明暗變化。這種素描相較結(jié)構(gòu)素描來說比較難，需要練習(xí)上“調(diào)子”。調(diào)子就是用鉛筆排線而產(chǎn)生的明暗，需要一定地技巧。

 

丟勒的素描作品

 

色彩關(guān)系

 

三原色 三原色是指色彩中不能再分解的三種基本顏色。相互混合可以產(chǎn)生出所有的顏色。黑白灰屬于無彩色。色彩三原色是紅、黃、藍(lán)。紅+黃=橙，黃+藍(lán)=綠，紅+藍(lán)=紫。屏幕三原色為紅（Red）、綠（Green）、藍(lán)（Blue）。也叫色光三原色是加色模式，相加混合為白色。但是RGB依賴于電腦屏幕，不同的電腦由于對(duì)色彩值的檢測的重現(xiàn)都不一樣，所以存在色差。我們家里的彩色電視屏幕就是由這紅、綠、藍(lán)三種顏色的小點(diǎn)組成，將這三種顏色按不同比例混合，就可以有千變?nèi)f化的色彩。

 

屏幕三原色 RGB

 

印刷三原色為青（Cyan)、品紅（Magenta)、黃（Yellow)。是減色模式，混合為深灰色，并不能產(chǎn)生黑，所以在印刷時(shí)加上黑色油墨，才能產(chǎn)生純正的黑，就是CMYK顏色模式。

 

印刷三原色

 

色彩三屬性

 

色相：色相就是顏色的樣子。就像人的臉一樣，都是獨(dú)一無二的。也就是色彩的相貌，冷色暖色中性色，是色彩最突出的特點(diǎn)，簡單來說，他決定“是什么顏色”。光譜上的紅、綠、藍(lán)等就是不同色彩的色相、黑色為沒有色相的中性色。色相在人眼中的不同是光的波長的長短不同所造成的。紅色的波長最長，紫色的波長最短。把紅、橙、黃、綠、藍(lán)、紫六種顏色和處在它們各自之間的紅橙、黃橙、黃綠、藍(lán)綠、藍(lán)紫、紅紫這六種中間色作為12色相環(huán)。能夠使人清楚明了的使人看出色彩平衡和冷暖色、對(duì)比色等。由12色相環(huán)也可以衍生出更多的色相環(huán)。

 

亮度：亮度，我的理解是，亮的反義詞就是暗，那說明是與顏色的明暗程度有關(guān)。色彩的明亮程度，簡單來說，就是顏色的從黑到白的變化。亮度最低時(shí)是黑色，亮度最高時(shí)是白色。顏色的深淺的不同程度，與光波的幅度有關(guān)，也取決于環(huán)境中反射光有多強(qiáng)。亮度高的色彩給人清新、明快的感覺，讓人聯(lián)想到藍(lán)天白云和青春。明度低的色彩給人沉重、穩(wěn)定、堅(jiān)硬的感覺，讓人聯(lián)想到石頭和鋼鐵。

 

飽和度：飽和度，飽和度從字面上的意思來理解，是比較飽和，太飽和可能就會(huì)很刺眼。就是與明度有關(guān)了。色彩純粹度，是色彩的純凈程度鮮艷程度，飽和度越低，顏色的色相就越不明顯，也與光波的幅度有關(guān)，飽和度低的顏色給人一種很灰，不明亮的感覺，飽和度為0的顏色為無彩色，就是黑白灰。在一張圖中，飽和度高的地方給人的感覺很靠近，飽和度低的地方給人的感覺很遠(yuǎn)。高飽和度和低飽和度的色彩都給人堅(jiān)硬的感覺。

 

色彩關(guān)系

 

互補(bǔ)色：紅+綠+藍(lán)=白色，在色環(huán)上相隔180度，是對(duì)比最強(qiáng)的色組，在三原色中，這兩種相隔180度的色光等量相加會(huì)得到白色。經(jīng)典互補(bǔ)色有黃色和紫色（例如科比的球衣）、黃色和藍(lán)色、紅色和綠色。互補(bǔ)色在視覺上給人非常大的沖擊力，所以在使用上常給人潮流、刺激、興奮的感覺。

 

對(duì)比色：指在色環(huán)上相距120度到180 度之間的兩種顏色。也是兩種可以明顯區(qū)分的色彩，包括顏色三要素的對(duì)比、冷暖對(duì)比、彩色和消色的對(duì)比等等。對(duì)比色能使色彩效果表現(xiàn)明顯，形式多樣，極賦表現(xiàn)力。互補(bǔ)色一定是對(duì)比色，但是對(duì)比色就不一定是互補(bǔ)色。因?yàn)閷?duì)比色的范圍更大，包括的要素更多，例如冷暖對(duì)比，明度對(duì)比，純度對(duì)比等。

 

鄰近色：相互接近的顏色在色環(huán)上的距離相距90度，或者相隔五六個(gè)數(shù)位的兩色。色相相近。冷暖性質(zhì)相近，傳遞的情感也較為相似。例如紅色、黃色和橙色就是一組臨近色。鄰近色表現(xiàn)的情感多為溫和穩(wěn)定，沒有太大的視覺沖擊。

 

同類色：色相性質(zhì)相同，但色度有深淺之分（在色環(huán)上相距15度以內(nèi)的顏色）

 

 

 

色彩關(guān)系

 

固有色、光源色、環(huán)境色

了解完基本的色彩知識(shí)，我們來簡單講講色彩和光源的關(guān)系。如果想描繪好對(duì)象的色彩，那我們必須了解對(duì)象的固有色、光源色、環(huán)境色以及它們之間的關(guān)系和變化。

 

 

Workplace by Igor Kozak for Rocketboy

 

固有色 最簡單的理解是物體本身的顏色。物體的固有色并不存在，在繪畫過程為了觀察方便我們常引用 “固有色”這個(gè)概念。固有色是指在光源條件下物體占主導(dǎo)地位的色彩，比如紅色的罐子、綠色的植物等。

 

光源色 一切物體只有光源的點(diǎn)亮下才能觀察到它的色彩。光源有自然光源（太陽、天光）和人造光源（燈），這些光源都各自具有不同的顏色。太陽光是白的暖色光，月光是偏青的冷色光，陰天更多的是藍(lán)灰色的天光、普通燈光是偏黃色的暖色光。光源的顏色對(duì)物體的顏色影響很大，紅色的光源下的藍(lán)色物體您覺得會(huì)是什么顏色呢？

 

環(huán)境色 物體周圍環(huán)境的顏色就是環(huán)境色。環(huán)境色對(duì)物體的影響非常大，比如在一個(gè)紅色背景下的白色石膏方塊，由于光源打到紅色背景下也會(huì)“染”到白色石膏方塊身上，產(chǎn)生一種淡紅色的色彩。所以我們在電腦作圖的時(shí)候也要想象環(huán)境色的影響。

 

練習(xí)方法：三大構(gòu)成

三大構(gòu)成指的是：平面構(gòu)成、色彩構(gòu)成、立體構(gòu)成。三大構(gòu)成起源于包豪斯學(xué)院，一所在設(shè)計(jì)歷史上非常重要的學(xué)術(shù)機(jī)構(gòu)。三大構(gòu)成是美術(shù)知識(shí)過渡到設(shè)計(jì)領(lǐng)域最重要的一個(gè)轉(zhuǎn)折。我們掌握了美術(shù)知識(shí)并練習(xí)了一定的程度后，就可以開始三大構(gòu)成練習(xí)了。具體來說：

 

平面構(gòu)成：什么是畫面最小的單位？點(diǎn)、線、面。如果我們從無到有需要構(gòu)建一個(gè)畫面而不知所措時(shí)，可以嘗試用點(diǎn)、線、面來開始。同時(shí)也可以嘗試用點(diǎn)、線、面來做命題進(jìn)行設(shè)計(jì)練習(xí)，這都是大多數(shù)高等院校對(duì)設(shè)計(jì)專業(yè)進(jìn)行的最有效的訓(xùn)練。

 

色彩構(gòu)成：根據(jù)我們上文學(xué)到的色彩知識(shí)：色彩原理、鄰近色、對(duì)比色、互補(bǔ)色、環(huán)境色、固有色等，融入這些知識(shí)到一個(gè)練習(xí)之中：比如用紫色和黃色創(chuàng)作一個(gè)對(duì)比強(qiáng)烈的畫面。這就是色彩構(gòu)成的練習(xí)方法了。

 

立體構(gòu)成：通過對(duì)比、重復(fù)肌理、骨骼等三維空間物體，完成一組設(shè)計(jì)練習(xí)。通常UI設(shè)計(jì)是二維平面的圖形設(shè)計(jì)，立體構(gòu)成練習(xí)可以相對(duì)減弱。但是如果您對(duì)立體構(gòu)成比較感興趣，可以查找相關(guān)資料了解。

 

Cocktail Hour by Hayden Walker

 

 

The Lamp by MUTI

 

 

Pattern by Steve Wolf

 

色彩心理學(xué)

 

色彩心理學(xué)是美術(shù)知識(shí)學(xué)習(xí)中非常重要的一部分，它所研究的是色彩通過對(duì)人的視覺上的刺激，而引發(fā)的人的情感和感官上的變化。通過對(duì)色彩的經(jīng)驗(yàn)積累而變成的對(duì)色彩的心理上的逾期感受。在生活中，色彩心理學(xué)對(duì)人們對(duì)顏色的認(rèn)知有很大的影響。而在生活我們常用“亮不亮”、“艷不艷”、“淡紅”、“蘋果綠”來形容。如果開一家快餐店，你會(huì)用什么顏色作為品牌的主色？為什么交通燈用紅色表示停止通行而不是綠色呢？這都是色彩心理學(xué)的相關(guān)知識(shí)。這并不是說色彩本身就具有這些含義和情感，而是我們社會(huì)和人為的認(rèn)知，是關(guān)于社會(huì)、生活，運(yùn)用好色彩心理學(xué)可以帶給用戶極佳的視覺體驗(yàn)，影響用戶的內(nèi)心情感和思維，引導(dǎo)用戶的感知和行為，并且促進(jìn)我們自身的發(fā)展。

 

Personal Website Final Concept by Jamie Syke

 

黑色：黑色是一種代表品質(zhì)、權(quán)威、穩(wěn)重、時(shí)尚的色彩，同時(shí)也含有冷漠、悲傷、防御的消極情感。它是所有色彩中最有力量的，能很快吸引用戶的注意力。黑色吸收所有光線而且沒有反射，可以說是沒有任何光進(jìn)入視覺，它和白色相反。當(dāng)你不想引人注目或想專心處理事情時(shí)常用。黑色作為一種無彩色，能讓和它配合的其他色彩看起來更亮。所以在界面設(shè)計(jì)中，黑色常與其他色彩搭配，使產(chǎn)品顏色更加亮麗和時(shí)尚。即使是和暗色系的色彩相搭配也會(huì)很好看。黑+紅很引人注目，黑+黃活力突出有亮點(diǎn)。黑色也有神秘、科技、穩(wěn)重的色彩情感，很多科技產(chǎn)品都會(huì)使用黑色，或用黑色作為背景色。是一種永遠(yuǎn)流行的主要色彩。

 

Stock Image Website by Anton Chandra

 

白色：白色是所有可見光進(jìn)入視覺，包含了光譜中的所有色光的顏色，常被認(rèn)為“無色”。白色的明度是最高的，并且它沒有色相。在RGB顏色模式中，紅綠藍(lán)混合得到白色。白色傳遞一種簡單、純真、高雅、精致、信任、開放、干凈、暢快、樸素的情感。單一使用白色不會(huì)引起任何情感，但是當(dāng)與其他顏色配合使用時(shí)，白色能很好的襯托，大量的留白讓其他元素脫穎而出。在界面設(shè)計(jì)中，作為無彩色的白色，常用于背景色，緩和各種顏色的沖突，以襯托其他色彩，提高畫面明度，提高文字可讀性。黑色和白色是極端對(duì)立的兩色，但是黑白搭配總是非常完美，永遠(yuǎn)都不過時(shí)。

 

Accessories cards by Nicola Baldo

 

 

灰色按鈕在設(shè)計(jì)中通常代表不可點(diǎn)擊

 

灰色：灰色是一種代表睿智、老實(shí)、執(zhí)著、嚴(yán)肅、壓抑的色彩。色介于黑色和白色之間，也屬于無彩色，沒有色相也沒有純度，只有明度的變換。使用灰色很少會(huì)犯嚴(yán)重的錯(cuò)誤，它和任何顏色都能很好的搭配，也常常用于背景色或用于突出其他彩色。在畫面中，很少出現(xiàn)純黑，基本都是用深灰色來代替黑色，也可以用淺灰色來代替白色。灰色不像黑色那么堅(jiān)硬刺眼，他更有彈性，它比黑色更有深層次的力量。在RGB模式下，紅綠藍(lán)三色數(shù)值相等為中性灰，R=G=B=128為絕對(duì)中性灰。中性灰圖層常用于商業(yè)修圖，人像精修中調(diào)整皮膚質(zhì)感。

 

Video Gallery by Mikha Makhoul

 

紅色：傳遞喜慶、自信、斗志、權(quán)威、性感的情感。紅色是最能刺激人視覺的一種顏色，甚至能引起一些生理反應(yīng)，例如心跳呼吸加快等。容易鼓舞勇氣，引起人們的感情波動(dòng)，引發(fā)沖動(dòng)消費(fèi)，所以在快餐、電商行業(yè)的品牌多使用紅色，為的就是發(fā)沖動(dòng)，引人消費(fèi)。例如麥當(dāng)勞、京東、小紅書。紅色的色感溫暖，性格剛強(qiáng)兒外向，同時(shí)也容易造成人的視覺疲勞。也是中國備受喜愛被廣泛運(yùn)用的一種傳統(tǒng)色彩，代表吉祥、團(tuán)圓喜慶。同時(shí)紅色也代表了警示、告誡。所以在界面設(shè)計(jì)中常用紅色的文字和按鈕來警示用戶慎重操作。

 

llustration of web design by Zoeyshen for Radio Design

 

綠色：是自然界中最常見的顏色，代表生命力、青春、希望、寧靜、和平、舒適、安全的情感。綠色是黃色+青色，是冷暖色之間的過渡，他可以是偏向黃色的溫暖的黃綠色，也可以是偏向高冷的青色的藍(lán)綠色。所以他很靈活，可以和各種顏色搭配不同產(chǎn)生的感覺，起到平衡和協(xié)調(diào)的作用。在生活中被廣泛運(yùn)用，例如交通燈和安全出口的顏色。不過綠色的飽和度要好好控制運(yùn)用，因?yàn)楦唢柡偷木G色讓人興奮，讓人注意，所以交通燈中綠色代表可以通行。

 

Inside Intercom World Tour case study by Frantisek Kusovsky

 

藍(lán)色：是三原色中的一種，代表永恒、靈性、清新、自由、放松、舒適、寧靜、商務(wù)。在國外的APP中，藍(lán)色最常用。幾乎沒有人對(duì)藍(lán)色反感，藍(lán)色是天的顏色，是海的顏色。深藍(lán)色常常給其他性格活躍極賦表現(xiàn)力的色彩提供一個(gè)深遠(yuǎn)、平靜的平臺(tái)，給人強(qiáng)大而可靠的感覺。被淡化后依然有很強(qiáng)的個(gè)性，給人清爽、自由的感覺，這種感覺還能轉(zhuǎn)化為一種信任，吸引人們使用。及時(shí)在藍(lán)色中加入少量的其他顏色，也不會(huì)對(duì)藍(lán)色的性格有多大的影響?？梢宰屓说膬?nèi)心感到平和，有助于人的頭腦變得冷靜。

 

Urban Culture — Presentation Slides by Hrvoje Grubisic

 

紫色:紫色是一種代表優(yōu)雅、浪漫、高貴、時(shí)尚、神秘、夢幻、靈性、創(chuàng)造性的顏色。是孩子和有創(chuàng)造力的人十分喜歡的顏色。紅+藍(lán)=紫，在色盤上位于紅色和藍(lán)色之間，是冷暖色的交匯。紫色的明度在所有有彩色的顏色中是最低的。與不同的顏色結(jié)合會(huì)展現(xiàn)廚不同的風(fēng)格特色。紫+粉常用于女性化的產(chǎn)品調(diào)性，黃色是紫色的對(duì)比色。紫+黑略顯沉悶，壓抑。紫+白，可以使紫色沉悶的性格消失，變得充滿女性的魅力。

 

Webdesign by Firman Suci Ananda

 

黃色 ：黃色是一種代表陽光、青春、活力、時(shí)尚、尊貴、年輕輕快、輝煌、希望的顏色。紅色+綠色課產(chǎn)生黃色。黃和藍(lán)是互補(bǔ)色。是四個(gè)心理學(xué)基色之一。黃色的明度極高，極為顯眼，盡管在警示效果上沒有紅色那么明顯和強(qiáng)烈，但是還是能給人很醒目和危險(xiǎn)的感覺。同時(shí)因?yàn)檫^于明亮，也是一種非常難以運(yùn)用的顏色，性格不穩(wěn)定常有偏差，和別的顏色配合使用易失去本來的性格。黃+白看起來很刺眼，但是黃+黑很有亮點(diǎn)。例如ofo小黃車和站酷都是黃+黑的組合。黃+藍(lán)也很流行，它可以喚醒藍(lán)色的沉靜，造成一個(gè)高對(duì)比度的視覺沖擊。在中國古代黃色也有特殊含義，代表著尊貴和權(quán)威。明度較低的黃色會(huì)顯得很臟。

 

極簡設(shè)計(jì)史

 

做為UI設(shè)計(jì)師，我們必須要了解一些基本的設(shè)計(jì)歷史和美術(shù)知識(shí)，才能對(duì)我們的工作有一個(gè)全面的認(rèn)識(shí)。為了補(bǔ)充非專業(yè)朋友的美術(shù)知識(shí)和設(shè)計(jì)歷史知識(shí)，我寫了這個(gè)短篇。我們先來聊聊設(shè)計(jì)歷史吧！設(shè)計(jì)史是一個(gè)內(nèi)容非常豐富、知識(shí)點(diǎn)復(fù)雜的龐大體系。沒有投入足夠的時(shí)間很難學(xué)習(xí)明白。所以一般人沒有太大興趣去閱讀這么長的文章，可是在我們的設(shè)計(jì)之中往往需要我們明白一些設(shè)計(jì)風(fēng)格和設(shè)計(jì)歷史背景。為了解決這件事，我用最簡短的方式簡潔地介紹設(shè)計(jì)歷史中幾個(gè)必須了解的階段，希望能夠讓大家對(duì)設(shè)計(jì)的歷史有大概的了解。

 

設(shè)計(jì)的工匠時(shí)期（Craftsmanship Times）

設(shè)計(jì)分為很多門類、建筑設(shè)計(jì)、廣告設(shè)計(jì)、字體設(shè)計(jì)等，究其歷史相當(dāng)久遠(yuǎn)。我國的設(shè)計(jì)可以追溯到公元前221年的秦朝。而在遙遠(yuǎn)的十九世紀(jì)的歐洲，設(shè)計(jì)并不是陽春白雪與賞心悅目，而是真實(shí)的生產(chǎn)力與皇家用來炫耀權(quán)勢的擺設(shè)。就讓我們把人類史上工業(yè)革命之前的設(shè)計(jì)統(tǒng)稱為工匠時(shí)期好了。因?yàn)檫@個(gè)時(shí)期設(shè)計(jì)師更接近于能工巧匠。在歐洲，設(shè)計(jì)在慢慢地走向了更繁瑣、更花哨的設(shè)計(jì)風(fēng)格。這是由于法國王朝浮夸的要求而來的。法國王朝炫耀自己權(quán)勢，貪圖奢華，誕生了巴洛克風(fēng)格（Baroque)和洛可可風(fēng)格（Rococo）這樣的復(fù)雜風(fēng)格。沒錯(cuò)，有的時(shí)候現(xiàn)在我們還能偶爾在土豪的家中找到一點(diǎn)巴洛克和洛可可設(shè)計(jì)風(fēng)格的影子，我們也有時(shí)會(huì)設(shè)計(jì)一些婚紗攝影類網(wǎng)站和公司網(wǎng)站也比較接近這種富麗堂皇的風(fēng)格。

 

 

巴洛克風(fēng)格

 

巴洛克（Baroque)，是一種代表歐洲文化的典型藝術(shù)風(fēng)格。最早來源于葡萄牙語（BARROCO)“不圓的珍珠”，最初特指形狀怪異的珍珠。在法語中，“Baroque”成為形容詞，有“俗麗凌亂”的意思。作為一種藝術(shù)風(fēng)格，巴洛克最早是在16世紀(jì)下半葉在意大利發(fā)起的，在17 世紀(jì)的歐洲普遍盛行，藝術(shù)批評(píng)家認(rèn)為巴洛克是一種墮落瓦解的藝術(shù)。

 

洛可可風(fēng)格

 

洛可可風(fēng)格是指18世紀(jì)的歐洲，特別是在法國路易十五時(shí)期的一種設(shè)計(jì)風(fēng)格。路易十五執(zhí)政后期，宮廷生活糜爛，追求復(fù)雜和奢華的生活。更是對(duì)這種洛可可風(fēng)格喜愛有加。洛可可風(fēng)格的特點(diǎn)就是嫵媚和矯揉造作。主要代表人物有華托（Jean Antoine Watteau，1684－1721）、布歇（Francois Boucher，1703－1770）和弗拉戈納爾（Jean Honorè Fragonard，1732－1806）等。

 

工藝美術(shù)運(yùn)動(dòng)（The Arts & Crafts Movement）

18世紀(jì)下半葉到19世紀(jì)上半葉，工業(yè)革命在英國開展，倫敦世界博覽會(huì)上的新鮮技術(shù)讓當(dāng)時(shí)的人們大開眼界。于是開辦了工廠，產(chǎn)生了資本家和工人階級(jí)...但是我們今天講的主要是設(shè)計(jì)，那么設(shè)計(jì)產(chǎn)生了什么改變呢？就是當(dāng)年的機(jī)器生產(chǎn)做不出來巴洛克和洛可可風(fēng)格。于是產(chǎn)品設(shè)計(jì)變得很粗糙和LOW，那么藝術(shù)家們和設(shè)計(jì)師們就只能把目光放回以前了。產(chǎn)生了一次“設(shè)計(jì)還是以前好”的運(yùn)動(dòng)，就被叫做工藝美術(shù)運(yùn)動(dòng)了。工業(yè)美術(shù)運(yùn)動(dòng)中重新重視起了很多例如哥特等風(fēng)格，并且崇尚手工工藝反對(duì)機(jī)械生產(chǎn)的產(chǎn)品設(shè)計(jì)。

 

哥特式建筑風(fēng)格的教堂

 

 

哥特風(fēng)格的暴雪《暗黑破壞神》官網(wǎng)

 

哥特（Goth）最早是中世紀(jì)時(shí)期（公元5-15世紀(jì)）的藝術(shù)風(fēng)格，以恐怖、超自然、死亡、頹廢、巫術(shù)、古堡、深淵、黑夜、詛咒、吸血鬼等為元素。哥特式風(fēng)格用黑暗、恐懼、孤獨(dú)、絕望的藝術(shù)主題。哥特原指哥特人。還有一種說法是Gothic源于德語Gotik ，詞源是Gott音譯“哥特”（意為“上帝”），因此哥特式也可以理解為“接近上帝的”的意思。哥特廣泛地運(yùn)用在當(dāng)時(shí)的建筑、服裝、產(chǎn)品設(shè)計(jì)上，是一種現(xiàn)在看來稍顯非主流的形式。

 

德意志工業(yè)同盟（Deutscher Werkbund）

給設(shè)計(jì)一點(diǎn)時(shí)間，設(shè)計(jì)就會(huì)還你一個(gè)驚喜。在工藝美術(shù)運(yùn)動(dòng)和新藝術(shù)運(yùn)動(dòng)之后，在當(dāng)時(shí)工業(yè)革命最領(lǐng)先的德意志，設(shè)計(jì)師們成立了德意志工業(yè)同盟。這時(shí)因?yàn)楣I(yè)發(fā)展產(chǎn)生出來了一種對(duì)繁復(fù)和裝飾過度的厭惡情緒，當(dāng)然也是因?yàn)楫?dāng)時(shí)的機(jī)器生產(chǎn)很可能無法把巴洛克和洛可可設(shè)計(jì)風(fēng)格演繹的很好。于是以彼得貝倫斯（Peter Behrens）為代表的德國設(shè)計(jì)師們開始設(shè)計(jì)了一大批簡潔風(fēng)格的作品。這些作品的審美到今天都影響著我們，你現(xiàn)在肯定更加喜歡宜家、無印良品的簡潔設(shè)計(jì)，而你在家里會(huì)發(fā)現(xiàn)自己爸爸媽媽總會(huì)給電視遙控器套一個(gè)洛可可巴洛克風(fēng)格的套子。而你的審美已經(jīng)是工業(yè)革命之后德意志工業(yè)同盟時(shí)期就改造好的了。

 

彼得貝倫斯（Peter Behrens）

 

 

彼得貝倫斯（Peter Behrens）作品

 

 

彼得貝倫斯（Peter Behrens）作品

 

 

彼得貝倫斯（Peter Behrens）作品

 

包豪斯（Bauhaus，1919/4/1—1933/7）

1919年的四月一號(hào)，在德國魏瑪成立了一所?？茖W(xué)院。這所學(xué)院也沒有持續(xù)很久，就爆發(fā)了世界大戰(zhàn)。于是這所學(xué)校就解散了。本來在歷史上是一件非常小的事，可是這所學(xué)校的光輝一直照亮了人類設(shè)計(jì)史。它就是包豪斯。包豪斯的三個(gè)精神對(duì)今天的界面設(shè)計(jì)都有影響：第一，設(shè)計(jì)是藝術(shù)與技術(shù)的統(tǒng)一。第二，設(shè)計(jì)的目的是人，而不是產(chǎn)品本身。第三，設(shè)計(jì)必須遵守自然法則。這不就是以用戶為中心的設(shè)計(jì)思想嗎？包豪斯在互聯(lián)網(wǎng)還沒有出現(xiàn)之前就有這樣的原則。在解散后，包豪斯出來的一大批教師和學(xué)生逃到了美國、英國等地，為世界設(shè)計(jì)的發(fā)展做出了極大的貢獻(xiàn)。比如蒙德里安就是包豪斯建筑學(xué)院的老師。

 

包豪斯學(xué)院

 

 

蒙德里安作品

 

現(xiàn)代主義設(shè)計(jì)（Modernism Design）

受包豪斯的影響，在一戰(zhàn)戰(zhàn)后誕生了現(xiàn)代主義設(shè)計(jì)。二戰(zhàn)后也出現(xiàn)了后現(xiàn)代主義設(shè)計(jì)。但是無論怎樣，現(xiàn)代主義設(shè)計(jì)就是我們目前的設(shè)計(jì)風(fēng)格的基石。我們喜歡的蘋果電腦、蘋果手機(jī)、SONY、都是現(xiàn)代主義設(shè)計(jì)風(fēng)格。這個(gè)時(shí)期誕生了很多大家，比如柯布西耶(Le Corbusier），密斯凡德羅（Ludwig Mies Van der Rohe），迪特蘭姆斯（Dieter Rams）,菲利普斯塔克（Philippe Starck）等。

 

New York Chair(紐約椅)

 

 

日本品牌無印良品網(wǎng)站 現(xiàn)代主義設(shè)計(jì)風(fēng)格

 

 

安藤忠雄的建筑作品

 

 

耐克官網(wǎng)多使用矩形、減少裝飾 現(xiàn)代主義設(shè)計(jì)風(fēng)格

 

其他現(xiàn)代風(fēng)格

雖然我們的時(shí)代沒有大規(guī)模的設(shè)計(jì)風(fēng)格變遷了，但是在現(xiàn)代主義之后還出現(xiàn)了后現(xiàn)代風(fēng)格、解構(gòu)主義等不同的風(fēng)格，這些風(fēng)格與之前歷史上的風(fēng)格交融匯聚，誕生了一個(gè)多元化的時(shí)代。加上互聯(lián)網(wǎng)和移動(dòng)互聯(lián)網(wǎng)的誕生，設(shè)計(jì)藝術(shù)的風(fēng)格空前多元化了。

 

擬物風(fēng)格圖標(biāo)設(shè)計(jì)

 

 

喬布斯發(fā)布初代iPhone 搭載了出色的擬物風(fēng)格設(shè)計(jì)

 

擬物風(fēng)格realism

擬物風(fēng)格更多的方面是在智能手機(jī)流行后才逐漸興起的。當(dāng)時(shí)手機(jī)的圖標(biāo)和界面為了讓大眾更容易接受一塊黑鏡上的按鈕可以點(diǎn)，往往設(shè)計(jì)成皮子的質(zhì)感或者玻璃的質(zhì)感。這樣可以更好地讓大家理解這里是可以點(diǎn)擊的。擬物風(fēng)格流行了很長時(shí)間，直到大家完全適應(yīng)了屏幕化的人機(jī)交互形式，才覺得這種模擬真實(shí)世界的設(shè)計(jì)有些“多余”和“充滿噪音”。但擬物仍然是目前UI設(shè)計(jì)中不可或缺的一個(gè)重要風(fēng)格。

扁平化的網(wǎng)頁設(shè)計(jì)

 

扁平設(shè)計(jì)風(fēng)格realism

扁平風(fēng)格相較擬物風(fēng)格來說，強(qiáng)調(diào)簡潔和克制。不允許設(shè)計(jì)師使用大量的材質(zhì)和質(zhì)感，而是用形狀和色彩來表達(dá)。最初的扁平化要求更為苛刻，只允許純色和形狀。但是由于用戶無法接受，后來扁平化的風(fēng)格演化成了帶有一定陰影和漸變的風(fēng)格。有些人說是微擬物或者微扁平，都可以。其實(shí)就是在信息傳遞上的噪音和表達(dá)情感之中取一個(gè)中間值。

 

 

著名的波普藝術(shù)作品

波普藝術(shù)Pop Art

波普藝術(shù)來源于商業(yè)美術(shù)，特點(diǎn)是將大眾文化的一些細(xì)節(jié)，比如一些名人或者麥當(dāng)勞爺爺?shù)冗M(jìn)行放大和復(fù)制。波普藝術(shù)于20世紀(jì)50年代后期在紐約發(fā)展起來，60年代中期，波普藝術(shù)代替了抽象表現(xiàn)主義而成為主流的前衛(wèi)藝術(shù)。在日常設(shè)計(jì)中的運(yùn)營設(shè)計(jì)我們也常常見到波普藝術(shù)的身影。

 

 

《攻殼機(jī)動(dòng)隊(duì)》海報(bào)

 

大疆XAdidas 動(dòng)態(tài)海報(bào)

 

淘寶新勢力周運(yùn)營圖

 

蒸汽波藝術(shù)Vaporwave

蒸汽波普是蒸汽和波普的混合，起源于音樂，并在音頻中發(fā)揚(yáng)光大，那它究竟是一種怎樣的音樂風(fēng)格呢？ 蒸汽波(Vaporwave)，vapor是蒸汽的意思，加上浪的wave組成了一個(gè)充滿復(fù)古強(qiáng)調(diào)、妖艷配色的風(fēng)格。這種風(fēng)格給人一種復(fù)古的潮流感。蒸汽波在中國互聯(lián)網(wǎng)設(shè)計(jì)圈很火也很著名，也很受用戶喜歡。

 

電影《銀翼殺手》概念圖

 

 

香港 - 賽博朋克感覺很強(qiáng)的地區(qū)

 

賽博朋克風(fēng) Cyberpunk

賽博朋克（cyberpunk，生化人cybernetics、朋克punk的結(jié)合詞），是科幻小說的一種風(fēng)格。現(xiàn)在賽博朋克的情節(jié)通常圍繞黑客、人工智能及大型企業(yè)之間的矛盾開始，背景設(shè)在不遠(yuǎn)的將來的反烏托邦地球。賽博朋克的主題往往是克隆人、生化人等有自我意識(shí)以后與人類相同的一些頹廢和迷幻的感受。我國的香港和成都的一些建筑因?yàn)榈孛驳脑蛲w現(xiàn)出一種后現(xiàn)代的科幻感。很多電影也會(huì)來這些城市采風(fēng)，設(shè)計(jì)自己的賽博朋克風(fēng)格。

 

蒸汽朋克風(fēng)的標(biāo)志 - 黑死病時(shí)期的鳥頭面具

 

蒸汽朋克風(fēng) Steampunk

蒸汽朋克是一個(gè)合成詞，由蒸汽steam和朋克punk兩個(gè)詞組成。蒸汽自然是代表了以蒸汽機(jī)作為動(dòng)力的大型機(jī)械、朋克則是一種邊緣文化，蒸汽朋克的作品往往依靠某種假設(shè)的新技術(shù)，如通過新能源、新機(jī)械、新材料、新交通工具等方式，展現(xiàn)一個(gè)平行于19世紀(jì)西方世界的架空世界觀，努力營造它的虛構(gòu)和懷舊等特點(diǎn)。蒸汽朋克風(fēng)格略帶頹廢和黑暗的感受，有些接近剛才介紹過的哥特風(fēng)格。

 

西班牙設(shè)計(jì)師Álvaro Peñalta的裝置作品

 

 

Camille Walala為倫敦設(shè)計(jì)節(jié)做的空間

 

 

Lee Broom為英國瓷器品牌Wedgewood設(shè)計(jì)的孟菲斯系列

 

 

知乎在地鐵投放的帶有孟菲斯平面設(shè)計(jì)風(fēng)格的廣告

 

孟菲斯設(shè)計(jì)風(fēng)格 Memphis Style

孟菲斯（Memphis style），是1981年由意大利設(shè)計(jì)師Ettore Sottsass為首集結(jié)組成的設(shè)計(jì)師團(tuán)體，被稱為“孟菲斯集團(tuán)”。孟菲斯的設(shè)計(jì)風(fēng)格顛覆了傳統(tǒng)設(shè)計(jì)觀念，將對(duì)立的不同元素通進(jìn)行拼接和碰撞，使用明快的色彩和怪誕的元素去表達(dá)其極具風(fēng)格的文化內(nèi)涵。孟菲斯風(fēng)格在色彩上打破配色規(guī)律，用一些純度高，顏色亮的色調(diào)，尤其是粉紅、粉綠等鮮艷的色彩，再加上多樣的圖形與線條組成設(shè)計(jì)。孟菲斯設(shè)計(jì)可以嘗試用在互聯(lián)網(wǎng)運(yùn)營圖中。

 

設(shè)計(jì)風(fēng)格的現(xiàn)狀

我們生活的時(shí)代是一個(gè)藝術(shù)繁榮、設(shè)計(jì)多樣的時(shí)代。以現(xiàn)代設(shè)計(jì)為主的品牌例如：無印良品、宜家等已經(jīng)成為我們生活的必需品了，加之很多不同風(fēng)格諸如洛可可和巴洛克、哥特等風(fēng)格的產(chǎn)品，組成了我們生活審美。我們在做設(shè)計(jì)時(shí)甲方或者產(chǎn)品經(jīng)理總是在提“高端、大氣、上檔次”，實(shí)際上可能是在描繪現(xiàn)代主義設(shè)計(jì)；“奢華”可能是巴洛克和洛可可的復(fù)雜風(fēng)格。所以下次在他們提設(shè)計(jì)需求時(shí)，不妨和他們講解一下設(shè)計(jì)的不同風(fēng)格和歷史，會(huì)有需求方更好地表達(dá)出他們想說的語言。美術(shù)知識(shí)和設(shè)計(jì)歷史非常有意思，希望通過以上的介紹讓大家對(duì)這兩個(gè)設(shè)計(jì)師必須掌握的知識(shí)體系產(chǎn)生研究的興趣。但是知識(shí)終歸代替不了練習(xí)，如果您希望學(xué)習(xí)手繪，還是得拿來紙和筆去練習(xí)。希望大家喜歡這篇文章：）

 

 

 

原文地址：http://www.zcool.com.cn/article/ZNjY2NTY0.html

作者：郗鑒