配色也需要依循一定的節(jié)奏。有的配色跳躍明快,有的又顯得舒緩柔和。我們從理性出發(fā)的同時(shí),也要把自己的觸角深入到感性的層面去理解色彩。
認(rèn)識(shí)了色彩,并不表示你就能對(duì)顏色運(yùn)用自如。配色有理性的層面,也有感性的層面。配色也需要依循一定的節(jié)奏。有的配色跳躍明快,有的又顯得舒緩柔和。我們從理性出發(fā)的同時(shí),也要把自己的觸角深入到感性的層面去理解色彩。
配色秩序
每一種色彩都有其自身的特質(zhì),而這一特性的發(fā)揮,還需要依賴于色彩在整個(gè)配色時(shí)所處的位置、面積等,即色彩與其他色彩所形成的秩序。
主色
主色是指在配色中處于支配地位的色彩。在配色前,主色是最先確定的顏色,例如,當(dāng)我們想要設(shè)計(jì)一個(gè)珠寶展示的頁面,這個(gè)頁面所需要什么色彩時(shí),我們決定采用紫色,而紫色就是主色。主色的確定看起來并不困難,因?yàn)橐婚_始被確定下主色只是定出一個(gè)宏觀方向,并沒有細(xì)化成具體的色調(diào)。主色的選擇也非常自由,因?yàn)椴]有完全正確的“公式”,每種顏色都有它的特性和優(yōu)劣,沒有最好的顏色或最差的顏色。
最終確定對(duì)主色色調(diào)的選擇則需要感性的參與,你希望你的網(wǎng)站看上去“沉穩(wěn)典雅”還是“清新明快”?這些不同的感受都來自色調(diào)的制約平衡。
一般情況下,主色是配色中使用面積最多的色彩。用于主要的組件、組件的背景、大面積色塊等。
頁面中的主色是清爽的藍(lán)色。盡管背景也運(yùn)用了大面積的白色,但是黑白灰屬于無彩色,無彩色并不參與到配色過程中。紅色是作為襯托色而出現(xiàn)的:
襯托色
襯托色是主色以外,為了襯托主色而出現(xiàn)的另一種色彩。襯托色通常為主色的互補(bǔ)色或?qū)Ρ壬?。襯托色所使用的面積可大可小,只要達(dá)到襯托的目的即可。
黃色是主色,藍(lán)色襯托色。藍(lán)黃兩色互為對(duì)比色:
襯托色也可用在面積較大的地方,和主色平分秋色,彼此呼應(yīng)。
頁面的主色為橙色,而襯托色為淺色粉,這兩種色彩為鄰近色,彼此飽和度上有非常明顯的對(duì)比,也能很好的襯托出主色,為頁面的氛圍增加溫度:
一組配色中一定會(huì)有一個(gè)主色,而襯托色并非必不可少。是否采用襯托色,取決于你的配色計(jì)劃。通常單一的色彩會(huì)比較單調(diào),而利用襯托色來強(qiáng)化主色的豐富變化是解決這一問題的方案之一。
背景色
背景色經(jīng)常表現(xiàn)為無彩色(黑、白、灰)或者低飽和度的色彩。背景色主要是作為背景而存在,它最好不要以非常強(qiáng)烈的姿態(tài)出現(xiàn)。背景色并非具有某種功能,它是一個(gè)頁面的基礎(chǔ)底色。
頁面的背景色為藍(lán)綠色到藍(lán)紫色的漸變色,因此配圖時(shí)就應(yīng)該考慮與背景色的搭配協(xié)調(diào):
黑色作為背景色時(shí),淺米色作為主色,主色和背景色之間的相得益彰,這時(shí)的背景色也可看作襯托色:
強(qiáng)調(diào)色
強(qiáng)調(diào)色是在主色以外起強(qiáng)調(diào)作用的色彩,可以說它是非常重要的視覺焦點(diǎn)。它本身具有一種獨(dú)立性,因此在配色上要形成與主色的強(qiáng)烈對(duì)比。它可以是主色的對(duì)比色、互補(bǔ)色等,使其能跳脫于主色的色彩。
頁面的主色為藍(lán)色,紅色則作為強(qiáng)調(diào)色,在進(jìn)入另一個(gè)頁面時(shí),紅色又作為了主色,而紫色作為了強(qiáng)調(diào)色:
強(qiáng)調(diào)色所用的面積比較小,只要在焦點(diǎn)領(lǐng)域運(yùn)用上強(qiáng)調(diào)色,其本身就有著聚焦的作用。有時(shí)候強(qiáng)調(diào)色還扮演著襯托色的角色。
單色配色法:同色同源
單色系配色是指網(wǎng)站的頁面主色只使用一種顏色,需要注意的是,所謂的單色并不“單”,往往運(yùn)用單色系配色方案的是配圖較多的網(wǎng)站,這些配圖自身已經(jīng)包含著豐富的色彩,從整個(gè)頁面來看,色彩就并不只有主色一種了。當(dāng)配圖的色彩也參與到了頁面整體的配色體系中,只需要尋找到一種與配圖都能協(xié)調(diào)的色彩作為主色,就能輕松掌握單色配色法的技巧。
頁面的主色為清爽的藍(lán)綠色,這時(shí)選擇的背景配圖是人臉眼睛的部分,攝影作品本身帶有柔和的肉色,與藍(lán)綠色相得益彰:
單色扮演主色的同時(shí)也扮演著強(qiáng)調(diào)色,在配色運(yùn)用中,重要的組件、焦點(diǎn)的部分都可以運(yùn)用這一色彩,形成明顯的視覺重點(diǎn)框架。而與此同時(shí),背景色應(yīng)該盡量保持黑白灰,不對(duì)主色造成干擾。如果想要形成一定的層次,也可以在主色調(diào)之外通過降低其色彩飽和度或明度等方式,形成單色配色中色彩的空間視覺深度。
在單色系配色法中,即使屬于同一色系,色調(diào)也會(huì)有所差異,因此這也是另一種配色方式,運(yùn)用在配圖較少,且配圖色彩也并不多變的情況下。
頁面主色為橙色,也在細(xì)微的地方展示出不同調(diào)性的橙色,當(dāng)鼠標(biāo)Hover按鈕變?yōu)楦鼮槠t的橙。背景色則用了淺橙色作為底色。這三種色彩都是橙色,而表現(xiàn)了不同的色彩空間層次:
當(dāng)網(wǎng)站的配圖較多,往往既要考慮配圖本身的配色、配圖與配圖間的配色、配圖色彩與單一主色間的搭配。
想要將頁面變得干凈清爽除了產(chǎn)品縮略圖本身要維持簡潔干凈的背景、產(chǎn)品拍攝的統(tǒng)一協(xié)調(diào),同時(shí)也需要考慮產(chǎn)品彼此的色彩呼應(yīng):
主色的單一色調(diào)不一定用在組件上,有時(shí)也采用“反白”的處理,尤其是主色本身比較強(qiáng)烈時(shí),填充主色作為背景,傳遞出主色強(qiáng)烈的表現(xiàn)效果。
頁面中的藍(lán)色作為背景色的同時(shí)陰影部分顯出了圖片內(nèi)容輪廓,制造出朦朧的視感,反白的文字更易于閱讀:
還有一種更加純粹的單色調(diào)配色方式,將整個(gè)網(wǎng)站的配圖設(shè)定為灰度圖案,讓主色在整個(gè)黑白灰的氛圍中顯得格外醒目,從而突出主題。這樣做的好處是讓畫面更加簡約、克制,當(dāng)然也就失去了繽紛華麗的氛圍。
配圖為黑白灰,作為主色的橙紅色就能從中脫穎而出。這讓每個(gè)橙紅色的細(xì)節(jié)元素都格外分明:
將配圖的顏色“拿掉”是相對(duì)冒險(xiǎn)的做法,只在一些強(qiáng)調(diào)圖片的個(gè)性與質(zhì)感并不急于展示產(chǎn)品所有細(xì)節(jié)給用戶的網(wǎng)站中所用較多,品牌站里可以采用這類方式來加強(qiáng)品牌的感染力和形象特征。
漸變配色法:夢(mèng)幻滑翔
漸變可以視為一種效果,也可以當(dāng)做一個(gè)手段。漸變中使用的多種色彩,將它們的分布呈現(xiàn)柔和過渡,展示出夢(mèng)幻之感。一般來說,我們安排的漸變色往往是以兩種色彩為端點(diǎn),中間過渡為兩種色彩的滑翔地帶,其覆蓋的色彩范圍較廣,因此,我們很難判斷其主色是哪一固定的色值。從色溫的角度為考慮,漸變可以有暖色漸變、冷色漸變,也有冷暖過渡的漸變,而從兩端的色彩之間的關(guān)系,又分為鄰近色漸變、對(duì)比色漸變等。不同的色調(diào)漸變所呈現(xiàn)出的品牌氛圍各有千秋。不管怎樣,在輕設(shè)計(jì)中,漸變的色彩通常集中在高明度的色調(diào)范圍,讓畫面顯得更為通透柔和。漸變的色彩范圍也不宜太廣,色彩分布太大讓畫面本身容易陷入于混沌中。
漸變常以背景的形式出現(xiàn),或運(yùn)用于較大的元素之上。根據(jù)漸變色的不同,所展示的配圖以及其他組件也要根據(jù)這一漸變色而協(xié)調(diào)。
藍(lán)與紫、紫與粉色的鄰近色漸變過渡有一種夢(mèng)幻般的感受,白色文字以及配圖甄選也都考慮到與漸變色彩的協(xié)調(diào)感。色彩豐富飽滿,頁面則簡潔明快:
浮動(dòng)于漸變背景上方的元素色彩也可以與背景形成對(duì)比,這時(shí),漸變色的范圍就要更為精準(zhǔn)清晰,以免讓色彩變“渾濁”。畢竟在輕設(shè)計(jì)中,維持畫面的“澄清”是很重要的。
利用漸變色系配色法的靈活多變,在一張大型配圖上方疊加一層透明漸變,也同樣是非常流行的做法。這樣作出的效果也相當(dāng)炫目耀眼,能瞬間提升攝影本身的感染力。
為了讓頁面變得更為“清澈”,可以采用漸變映射的方式,即只對(duì)核心焦點(diǎn)運(yùn)用藍(lán)綠漸變,而背景色依然維持簡潔的白底,這樣的做法更巧妙地收住了漸變大面積鋪開所形成的華麗感,而像為主角打開了特殊的鎂光燈:
利用漸變色的變化,通過切換圖片,漸變色也隨即改變。由于漸變的飽和度較高,因此其上方的元素運(yùn)用白色展示,使文字清晰可辨:
漸變色鋪排整個(gè)背景,讓頁面展示出流光溢彩的氛圍:
現(xiàn)實(shí)世界中,我們很難發(fā)現(xiàn)有一塊完全凝固不變的色彩,比如云彩雖說是白色,但總是又隱隱透出藍(lán)色、橙色等不同的漸變色,天空也并不盡然是全然相同的藍(lán),而表現(xiàn)出了深淺不一的色調(diào)。我們?cè)谠O(shè)計(jì)中運(yùn)用到漸變色,也就是讓畫面還原更多的真實(shí)。
被北極光渲染的星空本身就帶著色彩的漸變流淌,照片本身的色彩漸變已表現(xiàn)出了動(dòng)態(tài)的美輪美奐。
有時(shí)候背景運(yùn)用漸變的同時(shí),前景對(duì)象也運(yùn)用漸變色,利用漸變色進(jìn)行填充后,整個(gè)畫面充滿了未來感:
還可以將漸變色運(yùn)用到元素上,這時(shí)漸變色就需要更加濃烈鮮明,從背景凸顯出來,形成視覺強(qiáng)調(diào)。
在需要被注意的大型文字中運(yùn)用鮮艷度都非常高的大紅到紫色的漸變,背景采用接近無彩的暗調(diào),讓文字更加璀璨奪目:
漸變不僅是色彩上的變化,還有更多是屬于時(shí)間的變化。開發(fā)網(wǎng)頁設(shè)計(jì)中漸變色的運(yùn)用絕不僅僅止步于此。
運(yùn)用漸變色增加色彩的豐富感,同時(shí)又讓畫面不至于凌亂。這在很多品牌站中所用較多。如果希望頁面顯得嚴(yán)肅,可以限制漸變所用的范圍??傊?,漸變是一種“夢(mèng)幻”的手段,而絕對(duì)非目的。
多色配色法:顏色的加減乘除
色彩不僅有色相,還包括飽和度、明度、色溫等特質(zhì),與此同時(shí),從心理層面上還會(huì)衍生出色彩的重量感、遠(yuǎn)近距離等心理感受,兩種不同的色彩相互搭配,通過彼此的比例大小關(guān)系會(huì)衍生出更多復(fù)雜的影響。
雙色互補(bǔ)
將色環(huán)上處于180°相對(duì)而存在的色彩進(jìn)行搭配,這兩種色彩在視覺上形成互補(bǔ)關(guān)系。我們知道色彩并不能簡單陳述為紅色、藍(lán)色,因此在相對(duì)的關(guān)系上也不能簡單就概括紅與藍(lán)是互補(bǔ)這樣籠統(tǒng)的結(jié)論,因?yàn)閷?shí)際上紅色和藍(lán)色的色調(diào)都高低明暗種類繁多。而我們知道處于相對(duì)180°位置的一組色彩其本身相互補(bǔ)充又相互制衡的關(guān)系,在實(shí)際運(yùn)用中會(huì)催生一種平衡的視覺滿足感。我們要做的依然是從情感上而非理性層面打開視覺的脈輪。
互補(bǔ)色處于色環(huán)上兩兩相對(duì)的位置,網(wǎng)頁設(shè)計(jì)中通常使用其中一個(gè)色彩作為主色或背景色,另一個(gè)作為強(qiáng)調(diào)色或襯托色而加以運(yùn)用:
當(dāng)背景色為藍(lán)色的同時(shí),以橙色作為強(qiáng)調(diào)色,藍(lán)色和橙色為一組互補(bǔ)色:
雙色互補(bǔ)在運(yùn)用面上并非對(duì)半平分,而是有選擇的采取一主一輔有機(jī)結(jié)合的方式,這樣有利于突出色彩的性格主題。
三色對(duì)比
處于色環(huán)上距離彼此120°位置的三種色彩,兩兩之間彼此為對(duì)比色,而這三種色彩的搭配也會(huì)形成非常和諧的組合。
此外,另有一類三色組合,是以其中兩種色彩彼此距離60°,第三種色位于它們相對(duì)180°位置上。利用前兩種色彩共同的力量而和另一個(gè)色彩形成相互制衡的關(guān)系,同樣能催生出另一種和諧。
三色對(duì)比有兩種情況,一種是在色環(huán)上選取彼此間隔120°的色彩,另一種是有某個(gè)色彩與其他兩個(gè)色彩保持180°相對(duì)的關(guān)系:
當(dāng)然,在網(wǎng)頁設(shè)計(jì)中,挑選三種色彩運(yùn)用到頁面中,要主要對(duì)配圖本身色彩加以控制,否則容易讓頁面顯得凌亂。尤其是輕質(zhì)風(fēng)格的設(shè)計(jì)中,色彩盡量予以控制在三種以內(nèi),如果要選擇這類配色法,應(yīng)該盡量選擇明度較高、飽和度較低的色彩,沖淡色彩彼此的強(qiáng)烈沖擊。最好的辦法仍然是以某一個(gè)色彩作為主色,其他兩種色彩起強(qiáng)調(diào)、對(duì)比的作用。
網(wǎng)頁設(shè)計(jì)選用藍(lán)色、紫紅和粉紅的三色搭配,運(yùn)用了三色對(duì)比,看上去色彩協(xié)調(diào)、活潑。網(wǎng)頁所采用的插畫配圖也遵循總的配色規(guī)律,保持了頁面配色風(fēng)格的統(tǒng)一性:
沒有運(yùn)用配圖的時(shí)候,整個(gè)頁面回歸到極簡的狀態(tài),這時(shí)運(yùn)用純色對(duì)比,就是運(yùn)用色彩本身的魅力來感染用戶。可以說,這樣的配色方式比較安全,讓審美變得更加純粹。
頁面被三種色彩均等分布,呈現(xiàn)出非常嚴(yán)格的平衡感:
就像我們?cè)?jīng)說過,對(duì)單個(gè)頁面來說,網(wǎng)頁設(shè)計(jì)會(huì)有個(gè)全局的概念。有時(shí)候,網(wǎng)頁中一個(gè)頁面,或者一屏就可以被看作一件平面作品。所謂“三色”可以是從整個(gè)網(wǎng)頁出發(fā),也可以是從一個(gè)屏幕上來看。即使我們發(fā)現(xiàn)有的網(wǎng)頁運(yùn)用了不止三種顏色,但在一個(gè)屏幕中所出現(xiàn)色彩仍然控制在了三色對(duì)比的狀態(tài)。網(wǎng)頁的動(dòng)態(tài)效果更是為配色的多變性增加了更多的靈動(dòng)空間。
為了體現(xiàn)出嬰兒系列產(chǎn)品品牌的活潑童趣,運(yùn)用多種色彩可以表現(xiàn)出五彩繽紛,而選用粉嫩的色調(diào)則強(qiáng)調(diào)了初生嬰兒的柔和感。頁面選用了藍(lán)色、紫色、綠色等色彩作三色調(diào)和,往下拖動(dòng)時(shí),粉紅色的出現(xiàn)讓頁面轉(zhuǎn)向了更加溫柔的氛圍,卻又與原有色彩無沖突:
一屏一色
我們從一個(gè)屏幕的視覺出發(fā),而非從全局來看,一個(gè)屏幕運(yùn)用一個(gè)單色進(jìn)行搭配,是行之有效的極簡風(fēng)格配色法。它很好的解決了色彩單一的問題,與此同時(shí),整個(gè)網(wǎng)頁依然保有豐富多彩的色彩印象。這類配色技巧在許多展示類的網(wǎng)頁中常見。
每一個(gè)頁面只運(yùn)用一種主色,雖然整個(gè)頁面由多色組成,但色彩與色彩之間呈現(xiàn)出了豐富的動(dòng)態(tài)的和諧關(guān)系:
每一屏運(yùn)用不同的背景色,配圖以及網(wǎng)頁元素的色彩,比如橙色的按鈕和配圖與背景色相協(xié)調(diào):
網(wǎng)頁中的頁面切換也非常靈活,可以通過鼠標(biāo)滾動(dòng)實(shí)現(xiàn),還能通過切換按鈕切換主題畫面,也能達(dá)到一屏一色的目的。
EXTET.R的首頁設(shè)計(jì)非常巧妙地安排了一個(gè)類似時(shí)鐘一樣的圓形滾動(dòng)播放主屏畫面,畫面采用不同的背景色和不同的展示主題。造型別致新穎:
大多時(shí)候,多色配色時(shí)所選用的配圖應(yīng)該盡量保持不驚擾原有配色的氛圍,或根據(jù)配圖來決定網(wǎng)頁的配色方案。
顏色與顏色搭配絕不是簡單相加,而是運(yùn)用色彩的特性,作出更加豐富的加減乘除,其結(jié)果不是得到另一個(gè)單一的色彩感受,而是綜合其上的視覺效果和情感體驗(yàn)。與其說色彩像幻術(shù)一樣無法抓取,不如說對(duì)于配色,忘掉條條框框的理性分析,或許能得到更多。
0
喜歡他,就推薦他上首頁吧^_^
0371-86068866
4008887269
cndesign@163.com
CND設(shè)計(jì)網(wǎng)(CNDESIGN)會(huì)員所發(fā)布展示的 “原創(chuàng)作品/文章” 版權(quán)歸原作者所有,任何商業(yè)用途均需聯(lián)系作者。如未經(jīng)授權(quán)用作他處,作者將保留追究侵權(quán)者法律責(zé)任的權(quán)利。
Copyright ©2006-2019 CND設(shè)計(jì)網(wǎng)
移動(dòng) Android 版 豫 ICP 備16038122號(hào)-2 豫公網(wǎng)安備 41019702002261號(hào)