網(wǎng)站色彩搭配方法研究

王士剛,李曉慧

(1.長(zhǎng)春大學(xué) 計(jì)算機(jī)科學(xué)技術(shù)學(xué)院,吉林 長(zhǎng)春 130022;2.吉林科技職業(yè)技術(shù)學(xué)院,吉林 長(zhǎng)春 130000)

網(wǎng)站色彩搭配方法研究

王士剛1,李曉慧2

(1.長(zhǎng)春大學(xué) 計(jì)算機(jī)科學(xué)技術(shù)學(xué)院,吉林 長(zhǎng)春 130022;2.吉林科技職業(yè)技術(shù)學(xué)院,吉林 長(zhǎng)春 130000)

網(wǎng)站色彩搭配技術(shù)是目前網(wǎng)站設(shè)計(jì)中關(guān)鍵技術(shù)之一,是造型語(yǔ)言的最重要的表現(xiàn)手段。本文在分析已有網(wǎng)站色彩搭配方案的基礎(chǔ)上,提出了以鄰近色和類似色、對(duì)比色搭配等為主的色彩搭配方案。解決了目前網(wǎng)站色彩搭配中色彩不協(xié)調(diào)的實(shí)際問題,結(jié)合實(shí)例證明本方法具有實(shí)際意義。

網(wǎng)站色彩;搭配方案;對(duì)比;調(diào)和;心理

0 引 言

面對(duì)多姿多彩的世界,色彩的注目性較其他視覺要素強(qiáng),所以色彩不僅具有很強(qiáng)的識(shí)別作用,而且還會(huì)在人們的心目中產(chǎn)生一種心理反應(yīng),這就是人們?cè)谂袛嗑W(wǎng)站是否美觀,是否能映入我們的眼簾,甚至是否能留下深刻的印象的直接因素。但是色彩學(xué)是門深?yuàn)W的課程,從古至今一直有許多專業(yè)的人士進(jìn)行研究,每個(gè)年代都有不同的流行色及審美觀,因此為了能更好的運(yùn)用色彩設(shè)計(jì)網(wǎng)頁(yè),我們應(yīng)了解一些簡(jiǎn)單的色彩搭配技巧。

1 色彩基礎(chǔ)知識(shí)

圖1

1.1 色彩的來源

色彩是一種視覺現(xiàn)象,產(chǎn)生視覺的主要條件是光線,物體是受到光線的照射,沒有光,就沒有色彩。

科學(xué)家作了一項(xiàng)實(shí)驗(yàn),他們把太陽(yáng)光從一小縫引進(jìn)暗室,通過三棱鏡后,在映幕上顯現(xiàn)出一條美麗的彩帶,從紅開始為橙、黃、綠、青、藍(lán)、紫七色光譜,這種現(xiàn)象稱為光的分解或光譜,如圖 1。

1.2 色彩的表現(xiàn)

大自然是個(gè)色彩的世界,我們生活環(huán)境中充滿著各種各樣的色彩,為了便于表現(xiàn)和應(yīng)用,我們把色彩分為兩類：(1)無彩色,是指黑色、白色和各種不同明度的灰色;(2)有彩色,除無彩色之外的所有色彩都可稱為有彩色。

色相,是指區(qū)分不同色彩相貌的名稱。就像每個(gè)人都有獨(dú)特的相貌和名稱一樣,用以區(qū)別他人。如,紅色、黃色、綠色,紫色等都代表不同的色相,紅色、黃色、綠色也稱為“三原色”,是其他任何色彩都調(diào)不出來的顏色。

明度,色彩的明暗程度。明度越高色彩越明亮,如科技與教育類網(wǎng)站、衛(wèi)生與健康類網(wǎng)站,大眾購(gòu)物網(wǎng)站等,都用鮮亮的色彩,能體現(xiàn)出生機(jī)勃勃,絢麗多彩的感覺。明度越低色彩越暗,如某些奢侈品牌網(wǎng)站,網(wǎng)絡(luò)游戲網(wǎng)站等,體現(xiàn)出華麗,神秘等感覺。

純度,色彩的鮮艷程度,在各類軟件中叫做飽和度。純度越高色彩越鮮亮,反之越暗淡。如,兒童類網(wǎng)站,食品類網(wǎng)站,大多數(shù)用純度較高的色彩,體現(xiàn)出活潑新鮮的效果。

2 色彩搭配方案研究

2.1 鄰近色、類似色搭配

色彩學(xué)上把相鄰兩色稱為鄰近色,如圖 2所示,十二色相環(huán)中綠色和黃綠色。其次是色相環(huán)上 90°以內(nèi),除鄰近色以外的色相稱為類似色,類似色的對(duì)比強(qiáng)于鄰近色,在設(shè)計(jì)中加以明度和純度的變化,給人感覺舒服,自然,柔和的色彩效果。

圖2 鄰近色

2.2 對(duì)比色搭配

在色相環(huán)上與某色在 90°角以外,除 180°位置上的色相稱為對(duì)比色,如圖 2色相環(huán)中,紅色的對(duì)比色為黃、黃綠、藍(lán)、藍(lán)綠,運(yùn)以明度和純度的變化,由其可便可知其視覺效果是強(qiáng)烈、活潑、明快。

2.3 互補(bǔ)色搭配

在色相環(huán)中成 180°角的稱為互補(bǔ)色,如,紅色和綠色,藍(lán)色和橙色,紫色和黃色?；パa(bǔ)色的搭配是色彩對(duì)比最強(qiáng)烈的,互補(bǔ)色的合理搭配,能拉開前景與背景的空間感,突出頁(yè)面主體物。尤其是小面積純色在主體物中的運(yùn)用,能迅速傳遞視覺的效果,其具有極其炫目,耀眼、刺激的視覺效果。

2.4 冷暖搭配

色彩本身沒有溫度的高低,由于人的心理因素和人的聯(lián)想思維,當(dāng)人看到紅色時(shí),必然與火、太陽(yáng)等高熱度的事物聯(lián)系在一起,從而形成溫暖感;當(dāng)人們看到藍(lán)色時(shí),便會(huì)與水,冰等產(chǎn)生聯(lián)想,從而產(chǎn)生出寒冷的心理反應(yīng)。在色相環(huán)中。紅、橙、黃使人感覺溫暖;藍(lán)、藍(lán)綠、藍(lán)紫使人感覺寒冷;綠與紫介與其間,另外,色彩的冷暖對(duì)比還受明度與純度的影響,白光反射高而感覺冷,黑色吸收率高而感覺暖。冷暖對(duì)比的應(yīng)用,通常在休閑娛樂網(wǎng)站、食品網(wǎng)站出現(xiàn)比較多。

2.5 色彩調(diào)和

為了使網(wǎng)站達(dá)到秩序,統(tǒng)一與和諧的效果,我們必須加以調(diào)和。所謂色彩的調(diào)和與不調(diào)和,主要取決于它是否滿足視覺及生理的需求。通常,調(diào)和色彩以色彩效果為依據(jù),要求有變化但不過于刺激,統(tǒng)一但不單調(diào)。在將兩個(gè)或兩個(gè)以上的色彩進(jìn)行組合時(shí),為了達(dá)成一項(xiàng)共同的表現(xiàn)目的而設(shè)置了一種秩序、使色彩形成統(tǒng)一和諧的現(xiàn)象,稱為色彩的調(diào)和。“同一”、“近似”、“秩序”是把握色彩調(diào)和的三個(gè)要領(lǐng)。因此此部分才是讓我們學(xué)習(xí)駕馭色彩的真正技巧,才是我們視覺傳達(dá)者使用色彩技能的最高理想。

同一調(diào)和,在明度、色相、純度三種屬性中有一種要素完全相同,變化其他要素被稱為單性同一調(diào)和;在三種屬性中有兩種相同,便稱為雙性同一調(diào)和。同一調(diào)和的畫面整體性較強(qiáng),但亦有單調(diào)乏味的缺點(diǎn)。在色相、明度、純度中有某種要素近似,變化其他要素,被稱為“近似調(diào)和”。例如,某網(wǎng)站以藍(lán)色系為主,為了達(dá)到和諧的視覺效果,使其明度和純度都加以變化,便會(huì)產(chǎn)生活潑、明朗、高雅、含蓄等視覺效果。

對(duì)比屬性調(diào)和(色彩秩序的設(shè)置),對(duì)比調(diào)和是以強(qiáng)調(diào)色彩變化而組合的和諧色彩。在明度、色相、純度三種要素處于對(duì)比狀態(tài)的畫面中,色彩之間的相互作用會(huì)顯得非常的強(qiáng)烈,而這種色彩的強(qiáng)烈對(duì)比關(guān)系一方面可以提高作品的趣味,同時(shí)也容易引起視覺上的疲勞。要使這樣的色彩關(guān)系和諧,就要靠某種色彩組合秩序來實(shí)現(xiàn),因此運(yùn)用恰當(dāng)會(huì)產(chǎn)生明顯、光輝、華麗的效果,美感很夠,但如搭配不當(dāng),相互排斥,會(huì)使畫面格格不入顯得粗俗?？梢允褂谩皾u層調(diào)和”方法和“面積調(diào)和”方法處理。所謂漸層調(diào)和,是指一組色彩依明暗、鮮艷度、混色度等原理分成明暗色階,多色階組合成以順序變化的調(diào)和方式?；パa(bǔ)色相的秩序調(diào)和可采取相互混合或互補(bǔ)色相分別與同一灰色混合的方法形成互補(bǔ)色的秩序。這樣的畫面由于非常注重各色階的秩序變化,因此具有色感豐富、引人注目、對(duì)比溫和而美麗的色彩效果。它的特點(diǎn)是可以將兩個(gè)或多個(gè)極不和諧的顏色變得非常的和諧?！懊娣e調(diào)和”是調(diào)整各色彩在畫面中所占的面積比例,則相對(duì)應(yīng)的色相、明度和純度對(duì)比的視覺感覺也跟著產(chǎn)生變化,由此起到調(diào)整對(duì)比關(guān)系,實(shí)現(xiàn)調(diào)和的作用。如使其中一色的面積增大,以絕對(duì)的優(yōu)勢(shì)壓倒對(duì)方,形成統(tǒng)治與被統(tǒng)治的關(guān)系而取得調(diào)和。這種統(tǒng)調(diào)的方法在設(shè)計(jì)實(shí)踐中被廣泛應(yīng)用并能夠取得很好的效果,我們也已經(jīng)在互補(bǔ)色搭配實(shí)例中給予說明。

3 色彩的作用

色彩只有靠知覺才能傳達(dá)情感,不同的色彩有不同的感覺效應(yīng),它可教給我們?nèi)绾瓮高^色彩的知覺,從而進(jìn)一步地利用色彩來創(chuàng)造更美、更優(yōu)秀的網(wǎng)站。

紅色——熱烈、喜慶、激情、急躁、危險(xiǎn) ……

橙色——溫暖、喜悅、友好、財(cái)富、警告……

黃色——艷麗、單純、光明、溫和、活潑……

綠色——生命、安全、年輕、和平、新鮮……

青色——信任、朝氣、脫俗、真誠(chéng)、清麗……

藍(lán)色——整潔、沉靜、冷峻、穩(wěn)定、精確……

紫色——浪漫、幽雅、神秘、高貴、妖艷……

白色——純潔、神圣、干凈、高壓、單調(diào)……

灰色——平凡、隨意、寬容、蒼老、冷漠……

黑色——正統(tǒng)、嚴(yán)肅、死亡、沉重、恐怖……

有關(guān)色彩效用對(duì)瀏覽者習(xí)慣的影響調(diào)查和研究,已被廣泛應(yīng)用于商業(yè)活動(dòng)中：黃色、橙色和紅色的組合構(gòu)成常常被用來刺激和吸引瀏覽者的注意力;柔和的藍(lán)色調(diào)暗示干凈和寧?kù)o;紫色的搭配則通常與奢侈品聯(lián)系在一起;綠色和棕色因能引起對(duì)自然的聯(lián)想,所以經(jīng)常被采用與環(huán)保類網(wǎng)站;而黑色和白色的精確配置有效地提供了網(wǎng)站優(yōu)美效果的保證。

4 色彩的選擇與應(yīng)用

我們?cè)谶x擇色彩時(shí)大體上應(yīng)考慮以下幾個(gè)因素：

(1)清楚界定出想要用色彩達(dá)到什么樣的目的。分析好瀏覽者的群體,以及網(wǎng)站所要宣傳的效果,商業(yè)主體思想及 CI設(shè)計(jì)。如,中國(guó)移動(dòng),是商業(yè)型網(wǎng)站,應(yīng)給人于清晰,舒適,明快的效果,色彩不可過于夸張。

(2)選擇反映設(shè)計(jì)所需要的主色。進(jìn)行如上分析后選擇整體色調(diào),如,中國(guó)移動(dòng)的整體 CI和 V I設(shè)計(jì)中以藍(lán)色為主,所以在中國(guó)移動(dòng)的網(wǎng)站中整體以藍(lán)色為主進(jìn)行色彩搭配。

(3)選完中央純色后,再排色彩搭配的設(shè)計(jì)。以導(dǎo)航和標(biāo)題為例,網(wǎng)頁(yè)標(biāo)題是網(wǎng)站的指明燈,導(dǎo)航更是是吸引瀏覽者的關(guān)鍵部分,因此網(wǎng)頁(yè)的標(biāo)志大多數(shù)在網(wǎng)頁(yè)的左上方,以色彩明亮色為主,如,搜狐網(wǎng)標(biāo)志。瀏覽者要在網(wǎng)頁(yè)間跳轉(zhuǎn),要了解網(wǎng)站的結(jié)構(gòu),網(wǎng)站的內(nèi)容,都必須通過導(dǎo)航或者頁(yè)面中的一些小標(biāo)題。所以我們可以使用稍微具有跳躍性的色彩或者當(dāng)鼠標(biāo)滑過使色彩產(chǎn)生變化,吸引瀏覽者的視線,讓他們感覺網(wǎng)站清晰,明了,層次分明。想往哪里走都不會(huì)迷失方向。再以網(wǎng)頁(yè)文字和網(wǎng)頁(yè)鏈接為例,大多數(shù)網(wǎng)站側(cè)重文字,背景用大量的白色或是選擇純度或者明度較低的色彩,文字用較為突出的亮色,讓人一目了然。但有些網(wǎng)站會(huì)運(yùn)用背景顏色,那么必須要考慮到背景顏色的用色,與前景文字的搭配等問題。當(dāng)然,有些網(wǎng)站為了讓瀏覽者對(duì)網(wǎng)站留有深刻的印象,他在背景上做文章。比如一個(gè)空白頁(yè)的某一個(gè)部分用了很亮的一個(gè)大色塊,是不是讓你豁然開朗呢!此時(shí)他為了吸引瀏覽者的視線,突出的是背景,所以文字就要顯得暗一些,這樣文字才能跟背景分離開來,便于瀏覽者閱讀文字。一個(gè)網(wǎng)站不可能只是單一的一頁(yè),所以文字與圖片的鏈接是網(wǎng)站中不可缺少的一部分。這里特別指出文字的鏈接,因?yàn)殒溄訁^(qū)別于文字,所以鏈接的顏色不能跟文字的顏色一樣?，F(xiàn)代人的生活節(jié)奏相當(dāng)快,不可能浪費(fèi)太多的時(shí)間在尋找你網(wǎng)站的鏈接上。設(shè)置了獨(dú)特的鏈接顏色,讓人感覺他的獨(dú)特性,自然而然好奇心必然趨使他移動(dòng)鼠標(biāo),點(diǎn)擊鼠標(biāo)。

(4)以設(shè)計(jì)的特點(diǎn)或人的感覺為著眼點(diǎn),讓可以利用得到的色彩選擇更加完美。所以我們?cè)谶x色時(shí),既不能選擇單一的顏色,也不可以太花俏,一般不超過三個(gè)基本色相。

5 結(jié) 語(yǔ)

色彩的魅力是無限的,它可以讓本身很平淡無味的東西,瞬間就能變得漂亮、美麗起來。信息時(shí)代的快速到來,網(wǎng)絡(luò)也開始變的多姿多彩。人們不再局限于簡(jiǎn)單的文字與圖片,他們要求網(wǎng)頁(yè)看上去漂亮,舒適。所以當(dāng)代設(shè)計(jì)者不僅要掌握基本的網(wǎng)站制作技術(shù),還需要掌握網(wǎng)站的風(fēng)格,配色等設(shè)計(jì)藝術(shù)。其中色彩在網(wǎng)站設(shè)計(jì)中占據(jù)相當(dāng)重要的地位。

[1] 鄒艷紅.色彩構(gòu)成教程[M].重慶：西南師范大學(xué)出版社,2006：17-56.

[2] 吳士元.色彩設(shè)計(jì)[M].北京.北京理工大學(xué)出版社,2008：43-62.

[3] 楊梅,王英華.網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)(CS3中文版)[M].北京：清華大學(xué)出版社,2009.4.

[4] 唐一鵬.網(wǎng)站色彩與構(gòu)圖案例教程[M].北京：北京大學(xué)出版社,2008.8.

[5] 華之鳳.網(wǎng)頁(yè)配色寶典[M].北京：中國(guó)電力出版社,2006.10.

責(zé)任編輯：吳旭云

A research on website color arrangementmethods

WANG Shi-gang1,L IXiao-hui2
(1.College of Computer Science and Technology,Changchun University,Changchun 130022,China; 2.Jilin Science and TechnologyVocational College,Changchun 130000,China)

The website color arrangement technology is a key technique ofwebsite design and is the most important perfor mance measure ofmodeling language.This paper,based on analyzing the existing programs,presents a color arrangement program by means of neighboring colors and s imilar colors,contrasting colors arrangement,which solves some practical problems of color incoordination.It proves that thismethod is practical by examples.

website color;arrangement program;contrast;accordance;psychology

文獻(xiàn)標(biāo)志碼：A

1009-3907(2010)06-0067-03

2010-04-07

王士剛(1981-),男,吉林榆樹人,實(shí)驗(yàn)員,碩士研究生,主要從事計(jì)算機(jī)網(wǎng)站研發(fā)等方面研究。