探析漸變色在網(wǎng)頁(yè)設(shè)計(jì)中的表現(xiàn)形式與功能表達(dá)

王俊雄

關(guān)鍵詞：漸變色;網(wǎng)頁(yè)設(shè)計(jì);表現(xiàn)形式;功能表達(dá)

中圖分類號(hào)：TP393.092 文獻(xiàn)標(biāo)識(shí)碼：A

文章編碼：1672-7053（2022）02-0088-03

漸變色作為一種特殊的設(shè)計(jì)元素，近些年被廣泛地應(yīng)用于商業(yè)網(wǎng)站和個(gè)人網(wǎng)站的網(wǎng)頁(yè)設(shè)計(jì)中。之所以漸變色受到了世界各地設(shè)計(jì)師的歡迎，從前端技術(shù)的角度上看，是因?yàn)闉g覽器兼容性的提高，以及漸變等一系列新屬性加入層疊樣式表第三次迭代版本（Cascading Style Sheets Level Three，以下簡(jiǎn)稱為CSS3），使?jié)u變色在技術(shù)上實(shí)現(xiàn)難度降低，對(duì)不同尺寸的屏幕適應(yīng)性更強(qiáng)。所以，正是前端技術(shù)的日趨完善，使藝術(shù)家在設(shè)計(jì)時(shí)能放下顧慮更加大膽地使用漸變色，讓漸變色較之前更頻繁地出現(xiàn)在網(wǎng)頁(yè)設(shè)計(jì)中，并形成了不同的表現(xiàn)形式。在此之前，人們對(duì)漸變色的研究從大方向上闡述了其具有突出視覺設(shè)計(jì)內(nèi)涵、營(yíng)造立體感與科技感和提高內(nèi)容與形式的統(tǒng)一性等視覺審美價(jià)值，但是，對(duì)漸變色在網(wǎng)頁(yè)設(shè)計(jì)中的表現(xiàn)形式和發(fā)揮的功能兩方面更細(xì)致的研究有所欠缺。文章通過(guò)研究不同種類和功能的線上網(wǎng)站網(wǎng)頁(yè)的色彩、結(jié)構(gòu)、版式和代碼，分別從漸變色樣式和漸變色調(diào)和模式兩種角度，總結(jié)漸變色在當(dāng)前網(wǎng)頁(yè)設(shè)計(jì)中的表現(xiàn)形式。希望能夠幫助設(shè)計(jì)師加深對(duì)漸變色的理解，并在網(wǎng)頁(yè)設(shè)計(jì)中恰當(dāng)?shù)厥褂脻u變色。

1漸變色在網(wǎng)頁(yè)設(shè)計(jì)中的表現(xiàn)形式

漸變色在網(wǎng)頁(yè)設(shè)計(jì)中的表現(xiàn)形式，可分別從漸變色樣式和漸變色調(diào)和模式兩種角度展開。其中漸變色樣式?jīng)Q定了顏色以何種方式來(lái)進(jìn)行漸變，而漸變色調(diào)和模式?jīng)Q定了漸變色用什么顏色進(jìn)行搭配混合，二者相互配合，讓漸變色在網(wǎng)頁(yè)設(shè)計(jì)中發(fā)揮了不同的功能，展現(xiàn)了不一樣的視覺效果。

1.1漸變色樣式在網(wǎng)頁(yè)設(shè)計(jì)中的表現(xiàn)形式

1.1.1線性漸變形式

對(duì)線性漸變最簡(jiǎn)單的定義，就是由一種顏色沿著一根軸線或者固定方向，由起點(diǎn)開始向一種或者多種顏色漸變。通過(guò)對(duì)線性漸變進(jìn)行重復(fù)、鏡像或者轉(zhuǎn)動(dòng)漸變方向，就可以得到如重復(fù)漸變和對(duì)稱漸變等不同樣式的線性漸變效果。線性漸變不但在樣式上靈活多變;而且是CSS3標(biāo)準(zhǔn)中新加入的屬性，可以不使用位圖而直接用代碼控制漸變樣式，在技術(shù)上的實(shí)現(xiàn)成本比位圖低，并且方便調(diào)節(jié)。所以在調(diào)查的樣本中，線性漸變是最常出現(xiàn)的漸變樣式，其經(jīng)常以靜態(tài)或者動(dòng)態(tài)的形式，出現(xiàn)在網(wǎng)頁(yè)整體背景、頭圖背景、文字背景顏色和各種網(wǎng)頁(yè)功能組件的背景中。在做大面積背景時(shí)，多采用不超過(guò)三種近似色進(jìn)行調(diào)和，顏色之間的過(guò)渡柔和而又綿長(zhǎng)。

1.1.2描邊漸變形式

描邊漸變是線性漸變?cè)讵M長(zhǎng)形狀下的一種表現(xiàn)形式，形狀多是線狀或者長(zhǎng)條狀，漸變方向或水平、或垂直、或沿著長(zhǎng)條形狀的整體走向。在樣本網(wǎng)站的網(wǎng)頁(yè)中，當(dāng)描邊漸變作為規(guī)則圖標(biāo)和形狀的填充背景時(shí)，都是用代碼來(lái)實(shí)現(xiàn)漸變效果的。但是作為不規(guī)則圖標(biāo)背景或者藝術(shù)字顏色時(shí)，卻幾乎都是用位圖來(lái)實(shí)現(xiàn)的。因代碼可靈活調(diào)節(jié)顏色，所以多以單色明度漸變和雙色漸變作為進(jìn)度條或者滾動(dòng)條的背景。而由于其獨(dú)特的細(xì)長(zhǎng)形狀，可以通過(guò)扭曲變成網(wǎng)頁(yè)的UI藝術(shù)文字，所以多以七彩色漸變藝術(shù)字的形態(tài)，出現(xiàn)在國(guó)內(nèi)電商網(wǎng)站的網(wǎng)頁(yè)中。

1.1.3徑向漸變形式

徑向漸變是以中心點(diǎn)的一種顏色開始，向四周的一種或者多種顏色呈現(xiàn)水波紋狀或者光暈狀擴(kuò)散的漸變。因?yàn)閺较驖u變與線性漸變同為兩大新加入CSS3標(biāo)準(zhǔn)的屬性，并且通過(guò)代碼可控制徑向漸變的顏色搭配、中心點(diǎn)位置、重復(fù)和過(guò)渡強(qiáng)度，較位圖具有極強(qiáng)的控制性和靈活性。所以徑向漸變經(jīng)常在網(wǎng)頁(yè)的頭圖背景中，作為裝飾單獨(dú)出現(xiàn)或者與其他漸變樣式混合出現(xiàn)，并在各種網(wǎng)頁(yè)功能按鈕的背景中使用。

1.1.4混合漸變形式

在調(diào)查的樣本中，徑向漸變和線性漸變有時(shí)會(huì)以默認(rèn)的漸變樣式組合出現(xiàn)，但有的時(shí)候?yàn)榱嗽鰪?qiáng)網(wǎng)頁(yè)的表現(xiàn)力和吸引力，會(huì)在默認(rèn)漸變樣式的基礎(chǔ)上，把兩種漸變的外形進(jìn)行變形扭曲，并同時(shí)模糊相互之間的邊界，讓它們比較自然地相互混合，并組成不規(guī)則的外形，呈現(xiàn)出類似顏料在液體中混合的效果，這種復(fù)雜且具有感染力的漸變就是混合漸變。在網(wǎng)頁(yè)設(shè)計(jì)中，混合漸變多以位圖的方式來(lái)作為網(wǎng)頁(yè)的頭圖背景或者整體背景。

1.1.5色塊漸變形式

色塊漸變是以色塊堆疊排列為基礎(chǔ)進(jìn)行漸變的，通過(guò)對(duì)每一個(gè)色塊設(shè)置單獨(dú)一種顏色，后根據(jù)線性漸變規(guī)則或者中心點(diǎn)漸變規(guī)則進(jìn)行排列組合，形成一種過(guò)渡不柔和的漸變。色塊通過(guò)形狀、大小和透明度的變化，表現(xiàn)出類似階梯或者紙張堆疊等不同感覺的視覺效果，表達(dá)出一種形式美。雖然色塊漸變需要CSS代碼配合HTML代碼，甚至使用位圖間接實(shí)現(xiàn)效果，但是作為一種最具有形式美的漸變，卻經(jīng)常在裝飾性更強(qiáng)的單色明度漸變藝術(shù)字或者圖片背景上使用。任何藝術(shù)設(shè)計(jì)作品都離不開形式美，失去形式美就失去感染人的魅力，色塊漸變以其獨(dú)特的形式美，在網(wǎng)頁(yè)設(shè)計(jì)中有著獨(dú)具特色的藝術(shù)魅力。

1.1.6三維光影漸變形式

不同于普通漸變的二維效果，三維光影漸變是以漸變的形式直接呈現(xiàn)立體的感覺，但是這種漸變必須有一個(gè)固定的透視外形，才能營(yíng)造出類似球體、圓柱體和立方體等形狀的立體感。雖然這種漸變與直接描繪一個(gè)物體的明暗光影十分相似，但不同之處在于，這種漸變可以通過(guò)光影原理，把幾種毫不相關(guān)的顏色靈活地組合在一起，營(yíng)造出特殊的立體效果。三維光影漸變作為背景的設(shè)計(jì)元素之一，除了應(yīng)用在網(wǎng)頁(yè)頭圖背景中做獨(dú)立的裝飾元素，還可以作為圖片的背景渲染氣氛，營(yíng)造出近大遠(yuǎn)小的空間感。雖然可以利用四分之一單色中心點(diǎn)透明徑向漸變來(lái)模擬球狀物體明暗交界線，并搭配底色表現(xiàn)出三維立體效果，或者利用CSS的3D轉(zhuǎn)換屬性調(diào)節(jié)出簡(jiǎn)單的立方體效果，但是大多數(shù)網(wǎng)頁(yè)應(yīng)用的三維光影漸變效果依然依賴位圖實(shí)現(xiàn)。

1.2漸變色調(diào)和模式在網(wǎng)頁(yè)設(shè)計(jì)中的表現(xiàn)形式

1.2.1色相調(diào)和形式

色相是指色彩的相貌，而色相調(diào)和就是不同顏色之間的漸變混合。雖然在創(chuàng)建漸變色時(shí)，有多種顏色可供選擇，但是在網(wǎng)頁(yè)設(shè)計(jì)中，一般不會(huì)使用超過(guò)三種顏色的漸變色。之所以如此謹(jǐn)慎地使用顏色，是因?yàn)槿绻淮闻挪级喾N顏色進(jìn)行漸變，除了特殊表現(xiàn)方式和主題，或者作為功能組件的強(qiáng)調(diào)色和小裝飾使用，大面積使用超過(guò)三種顏色的漸變色，難免會(huì)造成網(wǎng)頁(yè)色調(diào)的混亂，且繁多而雜亂的顏色會(huì)讓用戶有煩躁的感覺，從而不愿意仔細(xì)瀏覽網(wǎng)頁(yè)，導(dǎo)致網(wǎng)頁(yè)傳遞信息效率降低。所以網(wǎng)頁(yè)在使用漸變色時(shí)，會(huì)選擇至多三種顏色進(jìn)行調(diào)和，在保證了漸變色整潔性的同時(shí)，也方便控制漸變色的整體色調(diào)。除了對(duì)色彩種類有一定的限制，網(wǎng)頁(yè)在漸變色的色彩搭配上，還多以同類色和近似色為主，表現(xiàn)含蓄溫婉的感覺，在營(yíng)造高級(jí)感的同時(shí)，也保證了網(wǎng)頁(yè)整體效果的和諧。但有時(shí)也會(huì)根據(jù)主題需要，使用互補(bǔ)色和對(duì)比色來(lái)提高視覺沖擊力，表達(dá)活潑的情感。

1.2.2明度調(diào)和形式

色彩的明亮度即是明度，在網(wǎng)頁(yè)設(shè)計(jì)中漸變色的明度調(diào)和分為兩種形式，一是同一種色相的明度調(diào)和，即把一種顏色由純色逐步增加明度，最后過(guò)渡到白色或者透明，這種形式的漸變可以與網(wǎng)頁(yè)背景進(jìn)行很好的銜接;第二種是在純度相同的情況下，對(duì)不同色相之間的明度調(diào)和。例如在純度相同的情況下，黃色要比紫色的明度高，二者進(jìn)行調(diào)和時(shí)明度高的黃色會(huì)被明度低的紫色襯托的更加搶眼，這是顏色本身的屬性，不涉及純度的變化。不管是哪種形式的明度調(diào)和，通過(guò)顏色明度的對(duì)比，可以幫助人們區(qū)分層次、光感和空間關(guān)系，并表現(xiàn)不同的視覺效果。例如明度弱對(duì)比的調(diào)和給人柔和模糊的朦朧感;明度中對(duì)比的調(diào)和給人穩(wěn)重適中的平衡感;明度強(qiáng)對(duì)比的調(diào)和給人活力清晰的層次感。

1.2.3純度調(diào)和形式

純度是指色彩的飽和度，純度調(diào)和就是把不同飽和度的顏色進(jìn)行漸變混合。在網(wǎng)頁(yè)設(shè)計(jì)中，漸變色純度調(diào)和形式分為同一種色相的純度調(diào)和與不同色相的純度調(diào)和。同一種色相的純度調(diào)和可以看作是明度調(diào)和;不同色相的純度調(diào)和，其中既有顏色之間純度明度的對(duì)比，還有色相之間的對(duì)比。其中對(duì)比越強(qiáng)給人的感覺越活潑熱情，畫面鮮亮;對(duì)比越弱越則讓人感覺平穩(wěn)，畫面也越沉穩(wěn)含蓄。

2漸變色在網(wǎng)頁(yè)設(shè)計(jì)中的功能表達(dá)

各種不同形式的漸變色，被廣泛地應(yīng)用于網(wǎng)頁(yè)的各個(gè)功能組件，并發(fā)揮了不同的作用。通過(guò)對(duì)不同形式漸變色的功能進(jìn)行分析和梳理，可以歸納出漸變色在網(wǎng)頁(yè)設(shè)計(jì)中，具有更強(qiáng)的裝飾意味、引導(dǎo)用戶視覺、表達(dá)豐富的情感、增強(qiáng)網(wǎng)頁(yè)的空間感和增強(qiáng)整體感的功能。

2.1更強(qiáng)的裝飾意味

漸變色在網(wǎng)頁(yè)設(shè)計(jì)的過(guò)程中，因?yàn)槠鋼碛懈S富的色彩和視覺效果，以及多樣的細(xì)節(jié)表現(xiàn)，所以較純色背景具有更強(qiáng)的裝飾性。當(dāng)漸變色作為網(wǎng)頁(yè)背景或者頭圖背景被大面積使用時(shí)，可以通過(guò)自身的裝飾功能渲染出網(wǎng)頁(yè)的整體氛圍，為網(wǎng)頁(yè)的設(shè)計(jì)確定基本的基調(diào)和感情氣氛。在漸變色作為獨(dú)立的視覺元素點(diǎn)綴網(wǎng)頁(yè)時(shí)，又可以適當(dāng)?shù)仄胶饩W(wǎng)頁(yè)的色彩配比，協(xié)調(diào)并均衡網(wǎng)頁(yè)的色彩關(guān)系。例如，為了進(jìn)一步增強(qiáng)漸變色自身的裝飾功能，可以通過(guò)擬物化的形式，如模擬大海、夕陽(yáng)、金屬反光、氣泡等自然物體的顏色，或者模擬涂抹印記、水漬或顏料在水里混合時(shí)的外形，如圖1。通過(guò)這種使用直接描繪自然界事物的方法，讓漸變色作為一種視覺元素，被當(dāng)作網(wǎng)頁(yè)頭圖的視覺中心物，或者單純作為背景裝飾網(wǎng)頁(yè)時(shí)，不但讓用戶感覺親切與舒適，而且讓網(wǎng)頁(yè)更具自然的節(jié)律感與豐富的色彩表現(xiàn)。

2.2引導(dǎo)視覺

對(duì)于設(shè)計(jì)的作品，吸引觀眾的視線是最基本的要求，是打動(dòng)觀眾的第一步。為了吸引用戶，漸變色在網(wǎng)頁(yè)設(shè)計(jì)中，可以利用明度、色相或者純度的對(duì)比，來(lái)增強(qiáng)視覺沖擊力，從而起到引導(dǎo)用戶視線的功能，達(dá)到強(qiáng)調(diào)傳遞信息并指導(dǎo)用戶操作的目的。例如，讓滑動(dòng)條與描邊漸變相結(jié)合，背景顏色利用純度和色相的對(duì)比強(qiáng)調(diào)滑塊位置，并引導(dǎo)用戶視線，有利于用戶知曉滑動(dòng)條代表功能的運(yùn)行狀態(tài)，并方便下一步點(diǎn)擊滑塊進(jìn)行操作。在設(shè)計(jì)網(wǎng)頁(yè)文字時(shí)，通過(guò)加粗加大字號(hào)并改變字體顏色為漸變色，如圖2;或直接使用三維光影漸變形式的立體文字，區(qū)別普通的網(wǎng)頁(yè)文字來(lái)強(qiáng)調(diào)重要信息;或者把加粗的文字與色塊漸變相結(jié)合，由一種顏色向白色逐漸過(guò)渡，搭配網(wǎng)頁(yè)的白色背景，如圖3。雖然適度削弱了傳達(dá)信息的強(qiáng)度，但是通過(guò)虛化效果表現(xiàn)了一種速度感，打破了靜止的畫面，吸引用戶視線的同時(shí)傳達(dá)了重要的信息。

2.3表達(dá)豐富的情感

漸變色較純色能表達(dá)更豐富的情感，因?yàn)闈u變色至少要由兩種顏色構(gòu)成，并且通過(guò)漸變色表現(xiàn)形式的變化，從顏色和形式兩方面，更加進(jìn)一步并準(zhǔn)確地表現(xiàn)創(chuàng)作者要傳達(dá)的情感。而純色相較于漸變色，只能通過(guò)顏色本身的屬性來(lái)傳達(dá)不同的感情色彩，并且表現(xiàn)形式也較單一。所以為了讓網(wǎng)頁(yè)有更加豐富的視覺效果和情感表現(xiàn)，恰當(dāng)?shù)厥褂脻u變色不但可以更加吸引使用者的眼球、烘托網(wǎng)頁(yè)的整體氛圍，而且還可以準(zhǔn)確向使用者傳達(dá)創(chuàng)作者所要表現(xiàn)的情感。例如，使用橙色和白色的漸變色代替原來(lái)網(wǎng)頁(yè)單一的白色背景，橙色與白色漸變的細(xì)膩度和品質(zhì)感，以及橙色本身溫暖的顏色屬性，讓原本蒼白無(wú)力的畫面瞬間充滿了活力，不但吸引了使用者的目光，而且通過(guò)漸變色營(yíng)造出愉悅的氛圍，加深了使用者的印象。當(dāng)網(wǎng)站的功能組件使用漸變色時(shí)，如圖4所示，在網(wǎng)頁(yè)用戶狀態(tài)欄中使用動(dòng)態(tài)的金色與白色線性漸變，相較于只使用單一的顏色，運(yùn)動(dòng)的漸變色能夠模擬出類似陽(yáng)光下金色卡片的閃光，在表現(xiàn)出用戶尊貴身份的同時(shí)，也傳達(dá)出對(duì)使用者的重視。不但提升了網(wǎng)頁(yè)整體的格調(diào)，而且給用戶留下了良好的印象。

2.4增強(qiáng)網(wǎng)頁(yè)的空間感

無(wú)論是三維光影漸變形式還是其他的二維漸變形式，都有增強(qiáng)網(wǎng)頁(yè)空間感的功能。漸變色之所以可以發(fā)揮這樣的作用，是因?yàn)樵谧匀画h(huán)境中，當(dāng)光照射在物體表面時(shí)，能夠營(yíng)造出物體的明暗光影關(guān)系，同時(shí)在顏色上也是色彩不斷漸變的過(guò)程。正如藝術(shù)家安東尼·高迪所說(shuō)：“直線屬于人類，曲線屬于上帝”。漸變色源于自然，由一種顏色過(guò)渡到另一種顏色的過(guò)程，就好似自然光影的變化。例如，在二維線性漸變形式的網(wǎng)頁(yè)背景中，如果兩種漸變顏色有較大的明度差異，就會(huì)在高明度顏色向低明度顏色的漸變方向上，營(yíng)造出一種立體的縱深感和神秘感。這種縱深感就像光影的變化，能在引導(dǎo)用戶視線的同時(shí)，讓使用者在閱讀網(wǎng)頁(yè)的過(guò)程中，體驗(yàn)到一種由淺入深、由表及里的深入感和探索感。不但更好地傳達(dá)了設(shè)計(jì)者所表達(dá)的意圖和情感，而且也會(huì)給使用者留下深刻的印象，如圖5。

2.5增強(qiáng)整體感

漸變色在作為網(wǎng)頁(yè)圖標(biāo)和按鈕的背景色時(shí)，有時(shí)以每個(gè)圖標(biāo)或者按鈕的背景做一次線性漸變;有時(shí)以一組圖標(biāo)或者按鈕的背景組成一個(gè)整體的線性漸變，如圖6。后者起到增加一組按鈕或圖標(biāo)整體性的功能，不但能夠讓圖標(biāo)在視覺上成為一個(gè)整體，而且還能夠讓圖標(biāo)之間互相建立起聯(lián)系。當(dāng)漸變色作為網(wǎng)站的主題色時(shí)，例如在一些個(gè)博客網(wǎng)站中，會(huì)通過(guò)在網(wǎng)站各個(gè)網(wǎng)頁(yè)的導(dǎo)航欄或者頁(yè)腳的背景中使用主題漸變色，用于加強(qiáng)網(wǎng)站各頁(yè)面之間的關(guān)聯(lián)，讓網(wǎng)頁(yè)的設(shè)計(jì)更具有整體感。

3結(jié)語(yǔ)

綜上所述，漸變色在網(wǎng)頁(yè)設(shè)計(jì)中有著豐富的表現(xiàn)形式，并且表達(dá)了不同的功能。在這個(gè)互聯(lián)網(wǎng)高速發(fā)展的時(shí)代，漸變色在網(wǎng)頁(yè)設(shè)計(jì)中得到了大量應(yīng)用，并獲得了設(shè)計(jì)師和用戶的廣泛認(rèn)可。希望通過(guò)文章的研究，能為設(shè)計(jì)師在網(wǎng)頁(yè)設(shè)計(jì)中使用漸變色提供參考和幫助，進(jìn)而充分發(fā)揮漸變色的作用，設(shè)計(jì)出滿足大眾需求的作品。

3214500338241