網(wǎng)頁(yè)設(shè)計(jì)中的色彩運(yùn)用與研究

唐偉鍵

摘要：在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中，色彩的運(yùn)用會(huì)影響實(shí)際設(shè)計(jì)效果。科學(xué)、合理的色彩搭配，是網(wǎng)頁(yè)設(shè)計(jì)水平的體現(xiàn)。在該文的研究中，重點(diǎn)對(duì)網(wǎng)頁(yè)設(shè)計(jì)中的色彩應(yīng)用原則、常用網(wǎng)頁(yè)的配色方案以及色彩選取等幾個(gè)方面進(jìn)行了研究，希望可以為提升網(wǎng)頁(yè)設(shè)計(jì)色彩的合理性提供一定的幫助作用。

關(guān)鍵詞：網(wǎng)頁(yè)設(shè)計(jì)；色彩運(yùn)用；合理性；色彩效果

中圖分類(lèi)號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2015）21-0151-02

Color Application and Research in Web Design

TANG Wei-jian

（Career Technical College， Xiamen， Xiamen 361024， China）

Abstract： in the process of web design， the use of color will affect the actual design results. Scientific， reasonable color collocation， is a manifestation of the level of web design. In this paper， we focus on the principle of color application in web design， the color scheme of common web pages， and the selection of color.

Key words： web design； color use； rationality； color effect

網(wǎng)頁(yè)設(shè)計(jì)水平的高低，很大程度上受到視覺(jué)效果的影響，優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)者，通常都比較重視網(wǎng)頁(yè)色彩的運(yùn)用。網(wǎng)頁(yè)色彩搭配的好壞，對(duì)于網(wǎng)頁(yè)的感官效果有著十分直接的作用。網(wǎng)頁(yè)訪問(wèn)者在瀏覽網(wǎng)頁(yè)時(shí)，留給其最深刻印象的往往不是網(wǎng)頁(yè)的內(nèi)容，而是其色彩搭配。所以說(shuō)，對(duì)于網(wǎng)頁(yè)設(shè)計(jì)者來(lái)說(shuō)，一定要充分利用好色彩的作用，強(qiáng)化網(wǎng)頁(yè)的色彩感染力，從而提升網(wǎng)頁(yè)的視覺(jué)沖擊力，達(dá)到更好的宣傳效果。

1 色彩在網(wǎng)頁(yè)設(shè)計(jì)中的基本原則

1.1 合理使用色彩的功能

網(wǎng)頁(yè)的最重要的功能就是向外界傳遞信息，政府機(jī)構(gòu)、社會(huì)組織、企業(yè)單位等，通過(guò)設(shè)計(jì)網(wǎng)頁(yè)，將一些自身的公開(kāi)信息向外界進(jìn)行傳播。對(duì)于網(wǎng)頁(yè)所有者來(lái)說(shuō)，可以借助網(wǎng)絡(luò)平臺(tái)實(shí)現(xiàn)自身信息的擴(kuò)散，而相關(guān)的信息需求者，可以通過(guò)瀏覽對(duì)口的網(wǎng)頁(yè)、網(wǎng)站，滿(mǎn)足自身的信息需求。

所以對(duì)于網(wǎng)頁(yè)色彩使用，就要充分發(fā)揮其在宣傳信息方面的優(yōu)勢(shì)，網(wǎng)頁(yè)色彩的設(shè)計(jì)，要對(duì)網(wǎng)頁(yè)信息的傳遞起到強(qiáng)化作用。在實(shí)際應(yīng)用中，一般是企業(yè)在網(wǎng)頁(yè)設(shè)計(jì)方面，投入的資源較多，尤其是一些大型的企業(yè)，其網(wǎng)頁(yè)設(shè)計(jì)十分精美，充分發(fā)揮了色彩的功能。

而對(duì)于色彩功能的正確發(fā)揮，要根據(jù)網(wǎng)站的類(lèi)別以及所要表達(dá)的整體意思，來(lái)確定符合要求的色彩搭配。色彩的搭配，要切實(shí)符合網(wǎng)頁(yè)所表述的實(shí)質(zhì)內(nèi)容。另外，也應(yīng)該根據(jù)瀏覽人群的不同差異，設(shè)計(jì)差異化的色彩。例如，網(wǎng)頁(yè)內(nèi)容是吸引女性購(gòu)物的，應(yīng)當(dāng)根據(jù)女性對(duì)色彩總體偏好，增加一些絢麗的色彩，例如粉色、紅色等。并且網(wǎng)頁(yè)的底色，要注意同文字及相應(yīng)圖片的搭配，要注意避免對(duì)比過(guò)于明顯，又要注意降低視覺(jué)審美疲勞。

1.2 保持色彩效果的統(tǒng)一性

專(zhuān)業(yè)的網(wǎng)頁(yè)設(shè)計(jì)，要注意做到色系的統(tǒng)一、協(xié)調(diào)，不同的瀏覽者，其審美體驗(yàn)也不盡相同。但是，在色系變化方面，通常情況下，網(wǎng)頁(yè)瀏覽者都更愿意欣賞比較純凈的網(wǎng)頁(yè)色彩。其實(shí)，這就是要設(shè)計(jì)時(shí)注意盡可能保持網(wǎng)頁(yè)色彩效果的統(tǒng)一性、協(xié)調(diào)性。一般來(lái)說(shuō)，兒童類(lèi)的網(wǎng)站，使用的色彩較多，其色系也以卡通色系為主，而其他類(lèi)別網(wǎng)站，在制作過(guò)程中，要避免使用多種色系（不超過(guò)兩種），盡量保持色系的統(tǒng)一，這樣可以更加凸顯網(wǎng)頁(yè)內(nèi)容的主題，同時(shí)在視覺(jué)感官色彩上，給網(wǎng)頁(yè)瀏覽者留下比較深刻的印象，增加網(wǎng)頁(yè)內(nèi)容的宣傳效果。

1.3 提高色彩風(fēng)格的獨(dú)特性

網(wǎng)頁(yè)的色彩風(fēng)格，是和網(wǎng)頁(yè)的宣傳主題相互映襯的，網(wǎng)頁(yè)設(shè)計(jì)要注意突出網(wǎng)頁(yè)內(nèi)容的獨(dú)特性、稀缺性，因此，就需要搭配獨(dú)特的色彩風(fēng)格。在給瀏覽者帶來(lái)的視覺(jué)沖擊和心理感受體驗(yàn)方面，不同風(fēng)格的色彩有著較大的差異。從專(zhuān)業(yè)的色彩風(fēng)格來(lái)看，紅色的穿透力最長(zhǎng)，因?yàn)槠洳ㄩL(zhǎng)最長(zhǎng)，當(dāng)瀏覽者看到網(wǎng)頁(yè)時(shí)紅色時(shí)，最容易表現(xiàn)出的感情色彩是溫暖，興奮以及熱情、幸福等，這就是通常所說(shuō)的暖色調(diào)。不過(guò)，在很多領(lǐng)域，紅色又被認(rèn)為是危險(xiǎn)、誘惑、警告的色彩。藍(lán)色的色彩風(fēng)格，同紅色有著較大的差異，其通常被認(rèn)為是寒色，在表現(xiàn)情感方面，多表現(xiàn)比較淡雅、理智、冷靜、客觀的感情色彩。可以說(shuō)，不容風(fēng)格的色彩，其心理感情歸屬是有著較大差異的，因此，在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，要注意根據(jù)網(wǎng)頁(yè)內(nèi)容所表達(dá)的整體感情色彩，選擇獨(dú)特的色彩風(fēng)格。

2 常用的網(wǎng)頁(yè)配色應(yīng)用技巧

2.1 同類(lèi)色配色應(yīng)用

同類(lèi)色指色相性質(zhì)相同，但色度有深淺之分的色彩。這類(lèi)配色，主要是一些專(zhuān)業(yè)性、技術(shù)性較強(qiáng)的網(wǎng)站，通過(guò)這種配色，能夠有效提升網(wǎng)頁(yè)的層次感，并且使得瀏覽者可以感受到較強(qiáng)的邏輯性和專(zhuān)業(yè)性。例如，奔馳公司北京分公司的網(wǎng)站首頁(yè)，使用藍(lán)色為主要色調(diào)，這種色彩風(fēng)格，正好契合了奔馳品牌的價(jià)值理念，并給人以專(zhuān)業(yè)、優(yōu)質(zhì)、典雅和高貴的氣質(zhì)，顯得非常有層次和內(nèi)涵。

2.2 鄰近色配色應(yīng)用

鄰近色，就是指的在色帶上非常相近的顏色，所謂鄰近色，這類(lèi)顏色，通常在網(wǎng)頁(yè)設(shè)計(jì)中，相互搭配交替使用。既能體現(xiàn)出一種流暢的過(guò)度，又能讓瀏覽者感受到線(xiàn)條分明的層次感。例如比較常用的綠色和藍(lán)色，紅色和黃色等。這類(lèi)鄰近色，在網(wǎng)頁(yè)中搭配使用，可以起到很好的效果，在內(nèi)容方面，搭配以精美的圖案，會(huì)更加顯示出這種鄰近色之間的婉轉(zhuǎn)過(guò)度。緩解單一色彩造成的單調(diào)之感。過(guò)于單一的色彩，也容易讓瀏覽者感受到缺乏活力，但是如果使用過(guò)于豐富的色彩又會(huì)顯得過(guò)于華麗，對(duì)于一些優(yōu)秀品質(zhì)的服務(wù)或產(chǎn)品宣傳，使用過(guò)于華麗的色彩，明顯是不符合的，所以在這種情況下，可以使用鄰近色。科學(xué)合理的使用鄰近色，會(huì)使得畫(huà)面更富有層次感，同時(shí)能避免因使用過(guò)多的其他色系所造成的花哨感。

2.3 對(duì)比色在網(wǎng)頁(yè)配色中的應(yīng)用

對(duì)比色指在24色相環(huán)上相距120度到180 度之間的兩種顏色，把對(duì)比色放在一起，會(huì)給人的視覺(jué)帶來(lái)強(qiáng)烈的排斥感。兩種可以明顯區(qū)分的色彩，也可以叫對(duì)比色。包括色相對(duì)比、明度對(duì)比、飽和度對(duì)比、冷暖對(duì)比、補(bǔ)色對(duì)比、色彩和消色的對(duì)比等。是構(gòu)成明顯色彩效果的重要手段，也是賦予色彩以表現(xiàn)力的重要方法。通常在使用中是以一種顏色為主調(diào)，占有較大比例的色塊面積，同時(shí)輔以對(duì)比色，起到點(diǎn)綴的作用。對(duì)比色的應(yīng)用需要注意的是色彩之間色塊的搭配，做到主次分明，否則不僅不能突出視覺(jué)效果，反而會(huì)起到弱化視覺(jué)效果的作用。

3 色彩搭配在網(wǎng)頁(yè)中的應(yīng)用

3.1 色彩決定網(wǎng)頁(yè)的第一印象

無(wú)論是平面設(shè)計(jì)，還是網(wǎng)頁(yè)設(shè)計(jì)，色彩永遠(yuǎn)是最重要的一環(huán)。當(dāng)我們距離顯示屏較遠(yuǎn)的時(shí)候，我們看到的不是優(yōu)美的版式或者是美麗的圖片，而是網(wǎng)頁(yè)的色彩。因此色彩是視覺(jué)信息傳達(dá)的要素。進(jìn)入一個(gè)網(wǎng)頁(yè)的瞬間，首先進(jìn)入視線(xiàn)的就是色彩，瀏覽者對(duì)網(wǎng)頁(yè)的整體感覺(jué)印象就會(huì)固定下來(lái)，如同人與人之間第一次見(jiàn)面，在相互介紹之前，通過(guò)衣著打扮、言行舉止就會(huì)大概了解人的性格一樣。設(shè)計(jì)師可以利用色彩的認(rèn)識(shí)作用，使網(wǎng)頁(yè)的內(nèi)容和設(shè)計(jì)理念有機(jī)結(jié)合，用色彩的表現(xiàn)力來(lái)與瀏覽者溝通，讓其認(rèn)識(shí)、理解、接受網(wǎng)頁(yè)中所傳達(dá)出的主題信息。各種顏色按照一定比例，按照美學(xué)原理有規(guī)律地聯(lián)系應(yīng)用到一起，構(gòu)成一組完整的色彩設(shè)計(jì)作品，運(yùn)用得當(dāng)?shù)纳蕰?huì)使網(wǎng)頁(yè)看上去協(xié)調(diào)、美觀、氣氛活躍，更富有美的感染力，從而吸引瀏覽者停留更長(zhǎng)的時(shí)間。

3.2 色彩在網(wǎng)頁(yè)中的功能和定位

色彩在網(wǎng)頁(yè)中的功能和定位，除了主色，還有背景色、融合色、強(qiáng)調(diào)色等。主色是主角，確立主題；背景色決定了整體印象；融合色被應(yīng)用于頁(yè)面中的不同位置，通過(guò)顏色的反復(fù)共鳴讓網(wǎng)頁(yè)界面更具整體性；在大面積的背景顏色當(dāng)中，強(qiáng)調(diào)色強(qiáng)調(diào)出某一亮點(diǎn)，吸引注意。

3.3 極簡(jiǎn)網(wǎng)頁(yè)設(shè)計(jì)中的幾種技巧

3.3.1 簡(jiǎn)約而通透的白色頁(yè)面

白色，在網(wǎng)頁(yè)設(shè)計(jì)中，是運(yùn)用較多的色彩。因其明度最高，并且沒(méi)有色相，給人以明亮干凈、暢快、樸素，永恒無(wú)瑕的感覺(jué)。白色在視覺(jué)色彩中經(jīng)常象征著純凈和整潔，溫和而淡雅的色調(diào)，更適合搭配多元化的色彩。一般來(lái)說(shuō)，一些科技意向較為深刻的網(wǎng)站，往往搭配較多的白色。在運(yùn)用白色時(shí)，還可以通過(guò)色調(diào)層次深度的變化，以及飽和度的變化，呈現(xiàn)出不同的表現(xiàn)力。在設(shè)計(jì)白色頁(yè)面時(shí)應(yīng)該注意，減少無(wú)關(guān)主題內(nèi)容的廣告，使用稍微大一些的字體，降低瀏覽者閱讀的疲勞度，把網(wǎng)頁(yè)的相關(guān)鏈接做得盡可能簡(jiǎn)潔。

3.3.2 精致高雅的灰色紳士頁(yè)面

灰質(zhì)讓人聯(lián)想到智商與腦力，它不像黑色那么鮮明，又不像純白那樣蒼白，灰色是黑與白的過(guò)度，是完美的補(bǔ)色。國(guó)外很多優(yōu)秀的企業(yè)，在其網(wǎng)站首頁(yè)或者分類(lèi)二級(jí)頁(yè)面上，經(jīng)常使用精致典雅的灰質(zhì)色彩?；屹|(zhì)色彩給人以睿智冷靜的感覺(jué)，和任何色彩搭配，由于它的中立性，常常被用作背景顏色，從而使其他顏色更為突出。在設(shè)計(jì)中可使用淺灰色替代白色，用暗灰色替代黑色，以此賦予網(wǎng)頁(yè)與眾不同的高雅之感。在設(shè)計(jì)灰質(zhì)色彩網(wǎng)站時(shí)，要注意其搭配色彩的明暗灰淺，降低顏色的重疊差異，充分發(fā)揮灰質(zhì)色彩的變現(xiàn)力，提高網(wǎng)頁(yè)的吸引力。

4 結(jié)束語(yǔ)

網(wǎng)頁(yè)設(shè)計(jì)需要色彩的合理搭配，色彩的運(yùn)用需要考慮的影響因素很多，但總的來(lái)說(shuō)，要通過(guò)色彩的運(yùn)用，提升網(wǎng)頁(yè)內(nèi)容的宣傳效果，這是最重要的目的。而要想實(shí)現(xiàn)良好的宣傳效果，色彩的設(shè)計(jì)和使用，要遵循美學(xué)的視覺(jué)感官規(guī)律，根據(jù)不同的內(nèi)容，不同的宣傳受眾以及不同的網(wǎng)頁(yè)類(lèi)別，搭配不同的色彩以滿(mǎn)足多數(shù)瀏覽者的審美習(xí)慣，使得網(wǎng)頁(yè)的點(diǎn)擊率得到提高，從而提升企業(yè)網(wǎng)站的知名度。

參考文獻(xiàn)：

[1] 楊曄，曲業(yè)華，李曼.淺談色彩在界面設(shè)計(jì)中的應(yīng)用[J].遼寧經(jīng)濟(jì)管理干部學(xué)院：遼寧經(jīng)濟(jì)職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2014（2）.

[2] 張小玲.電子商務(wù)網(wǎng)站界面設(shè)計(jì)中的色彩情感研究[D]. 重慶：重慶師范大學(xué)，2013.

[3] 公茂蘭.平面視覺(jué)元素在網(wǎng)頁(yè)設(shè)計(jì)中的運(yùn)用研究[D].贛州：贛南師范學(xué)院，2013.

[4] 高隆.企業(yè)網(wǎng)站設(shè)計(jì)中網(wǎng)頁(yè)版式設(shè)計(jì)的“性感”探究[D].長(zhǎng)春： 東北師范大學(xué)，2013.

[5] 雷靜，劉偉，黃道麗.網(wǎng)頁(yè)信息排列方式、色彩和層級(jí)深度對(duì)視覺(jué)搜索效率的影響[C].第十五屆全國(guó)圖像圖形學(xué)學(xué)術(shù)會(huì)議論文集，2010.