最近在重新整理自己的UI設計知識,梳理了整個學習體系。這是平面設計里的第一部分,關于配色。文章是學習筆記,隨性,從自己理解的角度分析編寫,用詞偏向于通俗易懂型。能用簡單的話解釋清楚為什么要把它復雜化呢?
em~先來點看起來專業的
1.色彩原理
三原色:紅? 綠? 藍 , 這就是傳說中的R(red) G(green) B(blue)。
注:“紅黃藍”是繪畫的三原色,主要用于繪畫,印刷,是表現在紙上的。 “紅綠藍”是光譜的三原色,主要用于電視、電腦等屏幕成像,是視覺的三原色。
下面我們來看看色彩的三要素:色相(H)、飽和度(S)、明度(B)
色相(H):就是顏色的名稱,是顏色區分的主要依據,如色環圖中的紅色、橙色、黃色等。注意:淡黃色和黃色是同一色相,在色環圖中,名稱區域內的都是同一色相;黑白灰無色相,因此從這個角度來說黑白灰不是顏色。
飽和度(S):就是顏色的鮮艷程度,即顏色的濃淡,例如:黃色、淡黃色。飽和度越大,顏色就越鮮艷。
明度(B):就是顏色的明暗,也即深淺差別。例如:粉紅、大紅、深紅。
2.配色基礎原則:不要超過三種色彩(這里指的是大范圍大面積用色)
色環
1.單色調:同種顏色組合,不同明度或不同純度變化的對比
2.近似色:相鄰顏色 ,和諧,有關聯
3.互補色:一條直線 ,對比強烈,強調色
4.分裂互補色:互補色的兩邊,如:藍色跟紅色或黃色就是分裂互補色,對比強烈 ,視覺沖擊強
5.原色 間色:共性,和諧。切記使用該配色方案時不可大面積疊加使用,可小面積間隔開使用,如按鈕。
3.顏色的味道
我們其實是根據生活中經常出現的事物而慣性去記憶每種顏色的,也會因為這種記憶讓我們對顏色有一種味蕾。
4.顏色的氣質
不同顏色適合于不同的場景氛圍。
紅色:熱情洋溢、溫暖、讓人興奮、激動、緊張,但看久了容易讓人產生視覺疲勞。
黃色:活力四射、高傲、張揚,但看久了容易讓人產生視覺疲勞。
藍色:壓抑、傷感、專業、科技感。
綠色:健康、生機勃勃、柔順、平和。
紫色:沉悶、神秘、高貴優雅。
5.顏色的冷暖
除了不同色相的冷暖不同外,同一色相也有相對色溫,相對冷暖。單色系的相對冷暖一般是運用在場景籠罩著某個事物的身上的高光陰影和反光部分,塑造出物體的立體感。
6.我要的是什么顏色?
知道了上面這些,可是我還是不會配色啊,那我該怎么選擇顏色呢?
當自己不清楚用什么顏色時,找找能承載你情感寄托的媒介物,如冬天你會想到梅花,夏天你會想到荷花;
可以通過關鍵字找到對應的照片,圖片,服裝,任何可能的東西,只要能表達出你想要的感受,都是可以模仿的對;
他們代替你說出了你想要的感覺,通過對這些媒介物的分析和提取,能找到對應的色彩。
7.用什么顏色來搭配?
引用第2點配色基礎原則所述:
不要大范圍為大面使用超過三種顏色。
1.單色調:同種顏色,不同明度或不同純度變化的對比
2.近似色:相鄰顏色 ,和諧,有關聯
3.互補色:一條直線 ,對比強烈,強調色
4.分裂互補色:互補色的兩邊,如:藍色跟紅色或黃色就是分裂互補色,對比強烈 ,視覺沖擊強
5.原色 間色:共性,和諧。切記使用該配色方案時不可大面積疊加使用,可小面積間隔開使用,如按鈕。
8.顏色有了如何搭配?
例:一個活動頁面中通常由以下元素組成(五角星代表重要性)
標題(★★★)
產品(★★★★)
副標題(★★)
活動詳情(★)
背景圖案
對第1重要的:用強烈色相對比(互補色或對比色)+強烈明暗的對比
對第2重要的:用稍弱的色相對比(相近色)+強烈明暗對比
對第3重要的:可以只用明暗對比且無色相差異的顏色
9.配色口訣:近實遠虛
設計跟繪畫一樣,必須遵循近實遠虛的原則,也只有這樣設計出來的作品才有層次。近處的漁船,艷麗的人物就是你要突出的東西,后面灰蒙蒙的山水就是你的背景。
寫了改改了又改,終于完成了第一稿,還有很多不完善的,后面根據經驗總結再逐步完善吧~ 大家有什么不同的意見可以相互討論一下,互相學習,共同進步??!