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

王士剛,李曉慧

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

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

王士剛1,李曉慧2

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

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

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

0 引 言

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

1 色彩基礎(chǔ)知識

圖1

1.1 色彩的來源

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

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

1.2 色彩的表現(xiàn)

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

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

明度,色彩的明暗程度。明度越高色彩越明亮,如科技與教育類網(wǎng)站、衛(wèi)生與健康類網(wǎng)站,大眾購物網(wǎng)站等,都用鮮亮的色彩,能體現(xiàn)出生機勃勃,絢麗多彩的感覺。明度越低色彩越暗,如某些奢侈品牌網(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),除鄰近色以外的色相稱為類似色,類似色的對比強于鄰近色,在設(shè)計中加以明度和純度的變化,給人感覺舒服,自然,柔和的色彩效果。

圖2 鄰近色

2.2 對比色搭配

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

2.3 互補色搭配

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

2.4 冷暖搭配

色彩本身沒有溫度的高低,由于人的心理因素和人的聯(lián)想思維,當(dāng)人看到紅色時,必然與火、太陽等高熱度的事物聯(lián)系在一起,從而形成溫暖感;當(dāng)人們看到藍(lán)色時,便會與水,冰等產(chǎn)生聯(lián)想,從而產(chǎn)生出寒冷的心理反應(yīng)。在色相環(huán)中。紅、橙、黃使人感覺溫暖;藍(lán)、藍(lán)綠、藍(lán)紫使人感覺寒冷;綠與紫介與其間,另外,色彩的冷暖對比還受明度與純度的影響,白光反射高而感覺冷,黑色吸收率高而感覺暖。冷暖對比的應(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)。在將兩個或兩個以上的色彩進(jìn)行組合時,為了達(dá)成一項共同的表現(xiàn)目的而設(shè)置了一種秩序、使色彩形成統(tǒng)一和諧的現(xiàn)象,稱為色彩的調(diào)和?！巴弧薄ⅰ敖啤?、“秩序”是把握色彩調(diào)和的三個要領(lǐng)。因此此部分才是讓我們學(xué)習(xí)駕馭色彩的真正技巧,才是我們視覺傳達(dá)者使用色彩技能的最高理想。

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

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

3 色彩的作用

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

紅色——熱烈、喜慶、激情、急躁、危險 ……

橙色——溫暖、喜悅、友好、財富、警告……

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

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

青色——信任、朝氣、脫俗、真誠、清麗……

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

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

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

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

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

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

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

我們在選擇色彩時大體上應(yīng)考慮以下幾個因素：

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

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

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

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

5 結(jié) 語

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

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

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

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

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

[5] 華之鳳.網(wǎng)頁配色寶典[M].北京：中國電力出版社,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-),男,吉林榆樹人,實驗員,碩士研究生,主要從事計算機網(wǎng)站研發(fā)等方面研究。