張春焱 張巖

摘 要：在網(wǎng)頁設(shè)計(jì)中，色彩的運(yùn)用是不可或缺的，它是網(wǎng)頁設(shè)計(jì)創(chuàng)作過程中至關(guān)重要的視覺表達(dá)元素。不論是用于網(wǎng)頁文字的識別、信息的分區(qū)，還是畫面的統(tǒng)一，色彩都扮演著關(guān)鍵的角色。當(dāng)色彩在網(wǎng)頁設(shè)計(jì)中得到合理運(yùn)用時，不僅能夠豐富頁面的視覺效果，而且能夠喚起觀眾的情感共鳴，為他們提供更加愉悅的視覺觀賞體驗(yàn)。深入研究色彩設(shè)計(jì)對于設(shè)計(jì)師今后從事網(wǎng)頁設(shè)計(jì)創(chuàng)作具有積極的影響。這不僅有助于他們更好地理解色彩在設(shè)計(jì)中的作用，還能夠提升其設(shè)計(jì)技能和創(chuàng)造力。因此，加強(qiáng)對色彩設(shè)計(jì)的研究，將為設(shè)計(jì)師在未來的網(wǎng)頁設(shè)計(jì)實(shí)踐中提供有力的支持。

關(guān)鍵詞：色彩；網(wǎng)頁設(shè)計(jì)；研究

Abstract： In web design， the use of color is indispensable. It is a crucial visual expression element in the process of web design and creation. Whether it is used for the recognition of web text， the partition of information， or the unification of the picture， color plays a key role. When color is used reasonably in web design， it can not only enrich the visual effect of the page， but also evoke the emotional resonance of the audience， providing them with a more pleasant visual viewing experience. In-depth study of color design has a positive impact on designers engaging in web design and creation in the future. It not only helps them better understand the role of color in design， but also improves their design skills and creativity. Therefore， strengthening the study of color design will provide strong support for designers in the future practice of web design.

Keywords： Color；web design；research

科研項(xiàng)目：本論文受北京市高等教育學(xué)會關(guān)于2023年度立項(xiàng)課題“基于‘計(jì)算美學(xué)的VR領(lǐng)域跨學(xué)科美育實(shí)踐探索與研究”（課題編號MS2023139）資助。

0 引言

隨著時代的不斷發(fā)展，網(wǎng)站的構(gòu)建逐漸演變?yōu)橐婚T藝術(shù)，而非僅僅是一項(xiàng)技術(shù)。網(wǎng)頁的藝術(shù)設(shè)計(jì)日益受到人們的重視，它突破了傳統(tǒng)的政治、經(jīng)濟(jì)、地域、文化等方面的限制，使得信息傳播的范圍、速度與效率產(chǎn)生了質(zhì)的變革。[1]

在網(wǎng)頁設(shè)計(jì)中，色彩起到了至關(guān)重要的作用。精準(zhǔn)地運(yùn)用色彩的特性能夠?yàn)榫W(wǎng)頁注入靈動，增添設(shè)計(jì)的情感特征，使頁面呈現(xiàn)更為獨(dú)特的個性。這不僅能夠吸引瀏覽者，更能引發(fā)共鳴，從而更有效地實(shí)現(xiàn)信息內(nèi)容的傳播目標(biāo)。

1 網(wǎng)頁色彩設(shè)計(jì)基礎(chǔ)

1.1 單色選用

色彩的三大基本屬性——色相、純度、明度已是老生常談，故此本文僅僅討論對于網(wǎng)頁色彩設(shè)計(jì)較為重要的單色的心理暗示效果。其中有彩色主要是紅橙黃綠藍(lán)紫，無彩色是黑白灰。

紅色是熱烈沖動強(qiáng)有力的色彩，在高飽和狀況時，能夠向人們傳遞出或熱烈、或喜慶、或吉祥、或興奮、或生命、或革命、或危險等心理信息。[2]

橙色是歡快活潑的色彩，是暖色系中最溫暖的色，它使人聯(lián)想到金色的秋天，豐碩的果實(shí)，是一種富足快樂的顏色。橙色處于最飽和狀態(tài)時，多向人們傳遞出或光明、或華麗、或富裕、或豐碩、或豐富、或富貴、或沖動等心理信息。

黃色冷漠、高傲、敏感，具有擴(kuò)張和不安寧的視覺印象。

在可見光譜中，綠色光波恰居中央位置，其明視度不高，刺激性適中，因此對人的生理和心理影響均顯得較為平靜、溫和，通常表示生命、舒適、平和、滿足等。

天空和大海等遼闊的景色都呈蔚藍(lán)色，故而藍(lán)色是永恒的象征，它是最冷的色彩，通常表示科技、清醒、冰爽、平靜等。

在可見光譜中，紫色波長最短，屬于冷調(diào)區(qū)域的色彩。紫色明視度和注目性最弱，是黃色的補(bǔ)色，通常給人以高貴、冷艷、神秘、恐怖等感情。

從光的性質(zhì)來說，白色是光譜中全部色彩的總和，故有“全光色”或“復(fù)合光”之稱，是萬色之源的顏色。白色的色感光明，有像雪一樣一塵不染的品貌特質(zhì)，使人們常能從中得到純潔、神圣、清白、樸素、光明、潔凈、坦率、正直、無私、空虛、縹緲、臣服等感受。

黑色是全色相，即飽和度和亮度為0的無彩色，可以表現(xiàn)莊重和高雅，黑色給人高雅、神秘、權(quán)利、嚴(yán)肅等感受。

灰色是一種中性色，通常由黑色和白色混合而成，其飽和度較低。在色彩感受上給人一種平靜、穩(wěn)定和中性的感覺。而在心理學(xué)上，灰色通常與中立、冷靜、理性、經(jīng)典、經(jīng)濟(jì)、簡約和穩(wěn)重等特質(zhì)相關(guān)聯(lián)。

1.2 色彩搭配

1.2.1 色彩搭配原則

（1）鮮明性

用戶在上網(wǎng)過程中，可能會瀏覽成百上千的頁面。因此，為了迅速吸引用戶的視線，讓他們輕松捕獲網(wǎng)頁中的圖文信息，實(shí)現(xiàn)良好的界面體驗(yàn)，色彩搭配通常會選擇鮮明的顏色。例如，CROWD FUNDING公司網(wǎng)頁有著豐富且鮮明的色彩搭配，傳達(dá)給人明快、舒朗的視覺感受（圖1）。其新聞板塊設(shè)計(jì)中，由于各條新聞的封面顏色較為復(fù)雜，故而背景為淺灰色，以彰顯主次分明。

（2）合適性

在設(shè)計(jì)網(wǎng)頁時，色彩的選擇應(yīng)與網(wǎng)頁的主題內(nèi)容以及所要傳達(dá)的氛圍相適應(yīng)。色彩的合適性在很大程度上影響了用戶對網(wǎng)頁的感知和體驗(yàn)。因此，為了營造出符合主題的視覺效果，確保選用與內(nèi)容和氣氛相匹配的色彩方案至關(guān)重要。

（3）聯(lián)想性

不同色彩會引發(fā)不同的聯(lián)想，這些聯(lián)想能夠?yàn)橛脩魩愍?dú)特的色彩感受。[3]在網(wǎng)頁設(shè)計(jì)中，設(shè)計(jì)師選擇的色彩應(yīng)與網(wǎng)頁的內(nèi)涵緊密相關(guān)，以引導(dǎo)用戶通過色彩聯(lián)想獲得更為理想的視覺體驗(yàn)，幫助用戶更好地理解、記憶網(wǎng)頁內(nèi)容。

1.2.2 色彩搭配技巧

（1）色相對比

補(bǔ)色配色。紅與綠、藍(lán)與橙、黃與紫是人們概念中典型的補(bǔ)色。在其中，黃與紫的明度對比非常強(qiáng)烈，成為這三對補(bǔ)色中最顯著的一對。補(bǔ)色對比促使雙方的色相更加鮮明。

鄰近色搭配。同類色或類似色適合打造整齊統(tǒng)一的氛圍，采用這種配色設(shè)計(jì)方式的網(wǎng)頁能夠呈現(xiàn)出十分和諧的視覺效果。然而，需要注意的是，色彩過于接近可能導(dǎo)致整體畫面平淡，缺乏足夠的色彩對比，從而使頁面顯得不夠鮮明。

無彩色和有彩色搭配。深淺不同的灰色搭配與較為單一的有彩色是一種相對安全的配色方案。非彩色能夠使彩色之間協(xié)調(diào)統(tǒng)一，尤其是在有彩色之間填充夾雜有彩色，而有彩色則有助于打破非彩色的沉悶和單調(diào)感。巧妙結(jié)合非彩色和有彩色，二者相互補(bǔ)充，相得益彰。[4]

（2）純度與明度對比

有彩色的純度與明度直接相關(guān)，無彩色僅有明度這個屬性。因此同一種有彩色的純度對比也是一種明度對比，而無彩色僅有明度對比。

同一色彩不同明度。設(shè)計(jì)中首先選擇一種主導(dǎo)顏色，然后調(diào)整透明度或飽和度，將網(wǎng)頁的背景、文字、邊框等元素都保持在這一主導(dǎo)色彩中，僅在明度上進(jìn)行適度的變化。這樣設(shè)計(jì)出的頁面呈現(xiàn)色彩的一致性，同時又展現(xiàn)出層次感。

純度對比配色。高純度對比配色是指在顏色搭配中使用具有高純度的色彩，并且這些色彩之間呈現(xiàn)鮮明的對比關(guān)系。這種搭配強(qiáng)調(diào)色彩的純凈度和明顯的差異，以產(chǎn)生強(qiáng)烈的視覺效果。高純度的配色方案通常用于需要引人注目、鮮明對比的設(shè)計(jì)，以吸引觀眾的注意力。

低純度色彩配色。低純度色彩配色是指在顏色搭配中使用較低純度的色彩，即色彩中含有較多的灰度或中性色。與高純度對比配色相比，低純度配色更加柔和、淡雅，減少了鮮艷度，呈現(xiàn)出一種更為溫和、自然的效果。[5]

2 不同行業(yè)網(wǎng)頁設(shè)計(jì)中的色彩選用與色彩搭配

2.1 不同行業(yè)網(wǎng)站的一般色彩選用

不同行業(yè)的網(wǎng)站通常選擇不同的色彩設(shè)計(jì)，以適應(yīng)其特定領(lǐng)域和目標(biāo)受眾。如一些常見行業(yè)網(wǎng)站的色彩選用（表1）。

2.2 不同行業(yè)的獨(dú)特色彩搭配設(shè)計(jì)

2.2.1 Quatrofolhas農(nóng)場網(wǎng)頁

該網(wǎng)頁設(shè)計(jì)主要采用兩種不同純度的綠色以及西瓜紅，還有少量的黃色、橙色等（圖2、圖3）。這個網(wǎng)頁設(shè)計(jì)主要使用了色相對比，其中紅色與綠色是色相環(huán)上相對的兩種顏色。當(dāng)然，也有少量的純度對比，比如圖2中綠色與草綠色的對比，圖3中不同的蔬果之間橙紅色—紅褐色—暗紅色—黑色構(gòu)成了純度對比。

（1）醒目突出

這兩個畫面較為突出的是色相對比，高純度的綠色與高純度的紅色是色相環(huán)上的互補(bǔ)色，形成強(qiáng)烈反差。然而同樣面積大小的互補(bǔ)色對比最為沖突，堪稱視覺炸彈，不適合久看。為此，設(shè)計(jì)師在該畫面中，冷色調(diào)的綠色占據(jù)絕大部分面積，暖色調(diào)的紅色所占面積較小，因此二者之間的對比效果較好。

（2）自然和諧

在圖3中，可以看到設(shè)計(jì)師采用了自然、和諧的色彩搭配，如綠色和棕色，這些不同純度的紅色與黃色之間形成了一種略為次要的對比關(guān)系，這種純度對比這些顏色與農(nóng)場和自然產(chǎn)品的主題緊密相連。綠色通常與健康、生長和自然聯(lián)系在一起，而棕色則給人一種土壤和大地的感覺。此外，這種色彩的自然和諧不僅能夠吸引訪問者的眼球，還能夠在視覺上傳達(dá)出農(nóng)場產(chǎn)品的新鮮和健康屬性。

（3）品牌一致性突出

通過在兩張圖片中一致地使用相同的色彩搭配，Quatrofolhas農(nóng)場成功地建立了一個統(tǒng)一的農(nóng)業(yè)品牌形象。這種色彩的一致性不僅有助于加強(qiáng)品牌識別度，還能夠在消費(fèi)者心中建立起一個清晰的品牌印象。無論訪問者在網(wǎng)頁的哪個部分，他們都能感受到該品牌的獨(dú)特風(fēng)格和價值觀。

（4）不同色彩的功能分明

雖然整體色彩搭配保持一致，但設(shè)計(jì)師也通過細(xì)微的色彩變化來導(dǎo)向不同的信息。例如，在“INFORMACOES”部分使用了不同的背景色或文字顏色，以區(qū)分不同的內(nèi)容區(qū)域，提升了頁面的導(dǎo)航性和信息層次，使得訪問者能夠更容易地找到他們感興趣的內(nèi)容。

（5）強(qiáng)調(diào)有機(jī)

該網(wǎng)頁中通過使用“NATURA”和“ORGANIC”這樣的詞匯，并以醒目的顏色突出顯示，網(wǎng)頁設(shè)計(jì)成功地傳達(dá)了產(chǎn)品的有機(jī)和高品質(zhì)特點(diǎn)。這種色彩的使用不僅有助于建立消費(fèi)者對產(chǎn)品的信任，還能夠強(qiáng)調(diào)產(chǎn)品的獨(dú)特賣點(diǎn)。同時，“GOURMET”一詞的使用，通過色彩的對比和突出，進(jìn)一步強(qiáng)調(diào)了產(chǎn)品的高品質(zhì)和美食體驗(yàn)。

其中第（1）（2）點(diǎn)即鮮明性，第（3）（4）點(diǎn)則強(qiáng)調(diào)了合適性，第（5）點(diǎn)則是聯(lián)想性。

2.2.2 HAIRCUT&BEARD男士美容服務(wù)機(jī)構(gòu)網(wǎng)頁

HAIRCUT&BEARD男士美容服務(wù)機(jī)構(gòu)網(wǎng)頁（圖4），網(wǎng)頁的色調(diào)為黑色，畫面布局為居中對齊，網(wǎng)站的名稱為襯線體反白色，畫面中心為高端美容椅，體現(xiàn)環(huán)境的高雅，而畫面最下方為5種不同角度和風(fēng)格的男士消費(fèi)者，男士面部色彩為灰色與白色。

從色彩的角度來分析，該網(wǎng)頁設(shè)計(jì)有以下幾個顯著的優(yōu)勢。

（1）簡潔明了，易于識別

主要采用了非常簡潔的黑白色調(diào)搭配，并以灰色作為輔助色彩。這種純粹的無彩色搭配非常經(jīng)典，不僅易于識別，而且能夠迅速傳達(dá)出品牌的專業(yè)性和高品質(zhì)的形象。黑白色調(diào)的使用，使得整個設(shè)計(jì)看起來非常干凈利落，給人一種專業(yè)和高效的感覺。

（2）對比強(qiáng)烈，突出重點(diǎn)

淺色文字“HAIRCUT & BEARD”，與背景形成強(qiáng)烈的對比。這種對比不僅使得文字信息一目了然，而且有效地突出了這一部分內(nèi)容，讓顧客能夠迅速抓住重點(diǎn)。

（3）統(tǒng)一連貫

網(wǎng)頁色彩非常統(tǒng)一，沒有使用過多的顏色，這有助于創(chuàng)建一個連貫的品牌形象。統(tǒng)一的色彩不僅使得HAIRCUT&BEARD設(shè)計(jì)看起來更加協(xié)調(diào)，而且有助于加強(qiáng)顧客對品牌的記憶，建立品牌的信任感和識別度。

（4）符合目標(biāo)受眾的審美

針對男性顧客的設(shè)計(jì)，通常會選用更加沉穩(wěn)、低調(diào)的色彩，以符合男性群體普遍偏好的審美特征，也符合人們對成熟男性的色彩想象。此設(shè)計(jì)主要采用黑色和灰色調(diào)，不僅傳遞出一種穩(wěn)重和專業(yè)的感覺，而且與男性顧客的內(nèi)在審美預(yù)期相契合。

總體而言，上述第（1）（2）點(diǎn)充分展現(xiàn)了鮮明性，第（3）點(diǎn)回應(yīng)了上文的合適性原則，第（4）點(diǎn)結(jié)合畫面中較少的男士頭像，卻給人以豐富的聯(lián)想，充分體現(xiàn)了這種無彩色設(shè)計(jì)充分的聯(lián)想性。

3 結(jié)語

在網(wǎng)絡(luò)技術(shù)飛速發(fā)展的今天，色彩作為網(wǎng)頁設(shè)計(jì)的首要視覺語言，扮演著調(diào)適受眾視覺心理、吸引受眾關(guān)注的關(guān)鍵角色。它直接塑造用戶的感知、情感體驗(yàn)，同時深刻地影響著他們對網(wǎng)站的整體印象。色彩不僅是表達(dá)各種情感、理念和信息的重要媒介，更是網(wǎng)頁作品的表達(dá)語言，以及視覺傳達(dá)的有效方式和手段。在網(wǎng)頁設(shè)計(jì)中，必須以科學(xué)的色彩理論為指導(dǎo)，將美學(xué)規(guī)律與現(xiàn)代網(wǎng)頁設(shè)計(jì)的具體問題緊密結(jié)合，以色彩感知和巧妙的配色技巧，創(chuàng)造出更時尚、更生動、更具吸引力的網(wǎng)頁色彩作品。

4 參考文獻(xiàn)

[1]（美）諾曼（Norman，D.A.）.情感化設(shè)計(jì)[M].北京：電子工業(yè)出版社，2005.

[2]胡崧，于慧.新銳網(wǎng)頁配色設(shè)計(jì)與案例分析[M].北京：中國青年出版社，2007.

[3]彭慧.網(wǎng)頁設(shè)計(jì)中的色彩搭配探析[J].流行色，2023（04）：58-60.

[4]周小麗.色彩元素在網(wǎng)頁設(shè)計(jì)中的研究與運(yùn)用微探[J].流行色， 2019（11）：92-93.

[5]陳鳳琴.電子商務(wù)網(wǎng)站網(wǎng)頁設(shè)計(jì)及美感分析[J].流行色，2019（01）： 102+104.