網頁設計色彩搭配的技巧有哪些?將設計發揮到1+1>2的效果

網頁設計色彩搭配的技巧有哪些?色彩搭配一直都是設計圈中恆久不變的熱門話題,無論是網頁設計,還是APP設計,亦或是平面設計,都必須將色彩屬性與設計作品有效的相互結合,才能將產品能做到1+1>2的視覺效果,很好地向用戶傳遞不同層面的視覺信息。

網頁設計色彩搭配的技巧の色彩特徵

設計權重,色彩大致分為無彩色(黑白灰)和彩色(無彩色以外的顏色)兩大類,下面我們着重研究彩色的三大特徵,即色相、飽和度和明度:

色相:色彩最重要的特徵,即能夠確切表示某種顏色的名稱,如:紅色、藍色、綠色等。

網頁設計色彩搭配的技巧有哪些?將設計發揮到1+1>2的效果

飽和度(純度):色彩的鮮艷程度,其取決於該色中含色成分和消色成分(灰色)的比例,如:天藍、淡藍、灰藍等就是飽和度不同程度的體現。

網頁設計色彩搭配的技巧有哪些?將設計發揮到1+1>2的效果

明度:色彩的明暗程度,如白天和黑夜。

網頁設計色彩搭配的技巧有哪些?將設計發揮到1+1>2的效果

色彩的三大特徵是應該相輔相成,共同作用,任何一種色彩都必然存在這樣的特徵關係。了解了色彩的特徵後,接下來我們再看看色彩間的關係。

網頁設計色彩搭配的技巧の色彩關係

通常,不同色相之間都會存在某些視覺關係,合理利用這些視覺關係,就能完成基本的色彩搭配方式,如:

· 同類色(色相環間隔在30°以內的色相搭配)

網頁設計色彩搭配的技巧有哪些?將設計發揮到1+1>2的效果

同類色搭配會給人一種舒適,統一,柔和,且容易把控的感覺。但由於衝擊力較低,運用不當難免會出現單調、缺少視覺層次的感覺。

網頁設計色彩搭配的技巧有哪些?將設計發揮到1+1>2的效果

· 鄰近色(色相環相隔90°的色相搭配)

網頁設計色彩搭配的技巧有哪些?將設計發揮到1+1>2的效果

鄰近色會給人一種很陽光活潑且穩定的感覺,與同類色相比,鄰近色會存在一定的視覺衝擊力,視覺層次感也會稍微豐富些。

網頁設計色彩搭配的技巧有哪些?將設計發揮到1+1>2的效果

· 對比色(色相環相隔120°的色相搭配)

網頁設計色彩搭配的技巧有哪些?將設計發揮到1+1>2的效果

對比色會給人一種衝擊力非常強力,且富有跳躍性,一般適合用於突出主體的產品,點綴能力非常強。但同樣對比色也有一個致命的缺點就是,大面積使用較難控制。

網頁設計色彩搭配的技巧有哪些?將設計發揮到1+1>2的效果

· 互補色(色相環相隔180°的色相搭配)

網頁設計色彩搭配的技巧有哪些?將設計發揮到1+1>2的效果

互補色的顏色性質相差較大,讓畫面的主次非常鮮明,同時也將視覺衝擊力強度發揮到極致。但與對比色相似,由於此類設計的視覺衝擊力強,所以把控難度大,甚至難度比對比色更加大。

網頁設計色彩搭配的技巧有哪些?將設計發揮到1+1>2的效果

網頁設計色彩搭配的技巧の色調

所謂色調,就是通過改變明度的濃淡程度和飽和度的強弱程度來調配色彩,簡單來說,色調是由明度和飽和度決定的。那麼,了解色調又對網頁設計有哪些幫助呢?下面,我們一起看看一些例子。

※ 淺白色調(低飽和度,高明度的色相搭配)

網頁設計色彩搭配的技巧有哪些?將設計發揮到1+1>2的效果

淺白色調搭配所打來的視覺感受很緩和,即使以互補色搭配,視覺衝擊力也會明顯減弱,給人一種乾淨舒服的視覺感覺。

注意,淺白色調搭配依然需要重色進行搭配使用,否則容易給人一種輕浮、主體不突出的視覺感覺。

網頁設計色彩搭配的技巧有哪些?將設計發揮到1+1>2的效果

※ 亮色調(偏高明度、高飽和度的色相搭配)

網頁設計色彩搭配的技巧有哪些?將設計發揮到1+1>2的效果

相對色相固有的視覺屬性,亮色調搭配會將色彩本身的視覺屬性發揮得淋漓盡致,同時也將對比性較強的色相視覺衝擊力提升,突出活潑、明亮、慾望的視覺感受。

網頁設計色彩搭配的技巧有哪些?將設計發揮到1+1>2的效果

※ 暗色調(低明度的色相搭配)

網頁設計色彩搭配的技巧有哪些?將設計發揮到1+1>2的效果

與前兩者比較,暗色調能突出穩重,有品質感的視覺效果。此外,暗色調還可以形成另一種視覺感受,如:恐怖、殘忍等。

暗色調搭配適合專題性、故事性、品牌調性強的產品,能很好地起到加強、提升的作用。

網頁設計色彩搭配的技巧有哪些?將設計發揮到1+1>2的效果

事實上不管哪種色調方式,都不會僅限於某一色調範圍內進行顏色搭配,而是確定主色調後結合其他屬性的顏色相互結合使用。在此基礎上也可以結合色彩間的關係進行配色。

但無論如何配色,都需要遵循:70%主色、25%輔助色、5%點綴色,這一比例,以及盡量將色相控制在三個以內,一般色相越少,越容易把控。