電商產(chǎn)品網(wǎng)頁UI設(shè)計中的色彩應(yīng)用研究

■田俊蓉（昆明藝術(shù)職業(yè)學(xué)院）

“互聯(lián)網(wǎng)+”時代的到來為各行各業(yè)創(chuàng)造了機(jī)遇的同時，也帶來了挑戰(zhàn)，電商行業(yè)作為時代發(fā)展背景下發(fā)展最迅速的新興產(chǎn)業(yè)之一，內(nèi)部的競爭更是激烈，因此想要在眾多的電商產(chǎn)品中脫穎而出，對于產(chǎn)品網(wǎng)頁的設(shè)計必不可少。在電商產(chǎn)品網(wǎng)頁UI設(shè)計中，色彩的應(yīng)用是吸引大眾視線最有效的手段之一，優(yōu)秀的產(chǎn)品網(wǎng)頁設(shè)計中一定有著對色彩恰到好處的運(yùn)用，由此可知，優(yōu)化網(wǎng)頁UI設(shè)計中對于色彩的應(yīng)用是當(dāng)前電商產(chǎn)業(yè)發(fā)展的重中之重。

一、色彩的基本概述

（一）三原色

眾所周知，三原色是由品紅、黃、青三種不可被分解的基本原色所組成，在此基礎(chǔ)上的疊加型三原色為紅色、藍(lán)色、綠色。網(wǎng)頁UI設(shè)計中也離不開對三原色的使用。

（二）色彩的三要素

色彩的三要素是指色向、飽和度以及明度三種，色相是指不同波長的色的情況，簡而言之也就是不同的顏色其中波長最長的顏色是紅色，最短的是紫色；飽和度是指色彩顏色的鮮艷程度，也被稱之為顏色的純度，飽和度越高，顏色就越鮮艷，反之飽和度越低顏色也就越暗淡；明度是指色彩的明亮程度，同理于色彩的飽和度。

（三）色彩的種類

色彩的種類可以按照有彩色和無彩色來進(jìn)行劃分，有彩色是指色相為紅、橙、黃、綠、青、藍(lán)、紫等顏色，而無彩色是指色相為白色、黑色、以及灰色這三種顏色。

二、色彩在網(wǎng)頁UI設(shè)計中的作用

通過對一些優(yōu)質(zhì)的電商產(chǎn)品網(wǎng)頁UI設(shè)計的分析發(fā)現(xiàn)，這些網(wǎng)頁設(shè)計中都運(yùn)用了社會心理學(xué)中的首因效應(yīng)，也就在網(wǎng)頁的設(shè)計中能夠科學(xué)合理的對色彩進(jìn)行運(yùn)用，使得消費(fèi)群體在首次瀏覽網(wǎng)頁時就能夠在第一時間被鮮活的色彩所吸引從而留下一個深刻的印象。尤其是在電商行業(yè)飛速發(fā)展的今天，設(shè)計者對于色彩在網(wǎng)頁UI設(shè)計中的應(yīng)用更是必不可少，下文將會對色彩在網(wǎng)頁UI設(shè)計中的作用進(jìn)行詳細(xì)具體的分析以及介紹。

（一）視覺上的引導(dǎo)作用

電商產(chǎn)品網(wǎng)頁結(jié)構(gòu)的UI幾面設(shè)計中結(jié)合了復(fù)雜多樣的圖形、文本以及色彩等基本元素，在這之中，色彩作為最為直觀的視覺影響因素，能夠帶領(lǐng)將大眾引導(dǎo)至優(yōu)質(zhì)的視覺體驗路徑之中，一般情況下，網(wǎng)頁UI設(shè)計中的色彩應(yīng)用可以在符合大眾視覺感官良好體驗的同時滿足視覺強(qiáng)調(diào)的作用展示、明確分類出網(wǎng)頁界面年的結(jié)構(gòu)布局，從而達(dá)到強(qiáng)調(diào)視覺主體地位的作用，例如世界排名名列前茅的法國巴黎護(hù)膚品歐萊雅，在其網(wǎng)站首頁的界面設(shè)計中，在色彩的應(yīng)用上選取了大量的紅色為主色，通過對色彩的運(yùn)用引導(dǎo)大眾將注意力重點放在產(chǎn)品上，進(jìn)而突出產(chǎn)品的獨特之處。

（二）企業(yè)形象的快速識別作用

電商企業(yè)產(chǎn)品的形象是提升企業(yè)影響力的關(guān)鍵，在電商網(wǎng)站進(jìn)行大力推廣與宣傳的過程中，在網(wǎng)頁UI設(shè)計上一般情況下都會對企業(yè)的LOGO進(jìn)行一個獨特的視覺設(shè)計，這種視覺化處理在配色方案上尤其能明顯體現(xiàn)出來，使代表企業(yè)形象的標(biāo)志能夠與網(wǎng)站首頁的產(chǎn)品形成一個首尾呼應(yīng)的關(guān)系，例如，可口可樂在企業(yè)的形象標(biāo)志上使用的是紅色為主體顏色，而產(chǎn)品本身的瓶身塑料膜也為紅色，這種視覺感受帶動了大家的熱情以及活力，因此也在不知不覺中提高了消費(fèi)群體對于可口可樂品牌的喜愛程度[1]。

（三）能夠?qū)崿F(xiàn)網(wǎng)頁視覺區(qū)域的有效劃分作用

網(wǎng)頁UI設(shè)計中，色彩視覺變化的不同能夠更好的幫助網(wǎng)頁將產(chǎn)品板塊區(qū)分開來，以形成視覺區(qū)域的劃分。得益于網(wǎng)絡(luò)時代的普及，電商行業(yè)產(chǎn)品層出不窮，因此產(chǎn)品的網(wǎng)站基數(shù)也十分龐大。在進(jìn)行網(wǎng)頁UI設(shè)計時，設(shè)計者通常都會選擇采用不同的色塊去體現(xiàn)不同類型的產(chǎn)品，將UI界面的色彩對比度增強(qiáng)，打造一個由淺到深的視覺盛宴，實現(xiàn)視覺變化的按序劃分區(qū)域。例如，在某一個國產(chǎn)護(hù)膚品的網(wǎng)頁首頁界面設(shè)計當(dāng)中，使用了幾種色塊不規(guī)則橢圓形區(qū)域拼接整體UI框架結(jié)構(gòu)，該方法不但能夠強(qiáng)調(diào)導(dǎo)航的作用，還能夠?qū)⒉煌漠a(chǎn)品進(jìn)行分類劃分[2]，為消費(fèi)者提供了一個舒適，簡潔的瀏覽體驗。

（四）強(qiáng)調(diào)主題，突出UI設(shè)計的整體美觀作用

在電商產(chǎn)品的網(wǎng)頁UI設(shè)計之中，為了能夠明確體現(xiàn)出產(chǎn)品的主體，通常情況下都會運(yùn)用到網(wǎng)頁的配色設(shè)計，從而向消費(fèi)群體傳輸有目的性的網(wǎng)站信息，充分發(fā)揮色彩的作用，從而達(dá)到符合網(wǎng)頁瀏覽人群的視覺體驗以及審美體驗的需求。例如，我國的三星品牌在網(wǎng)頁UI設(shè)計中以產(chǎn)品示意圖的色彩作為主色調(diào)，與灰色的顏色背景打造出一個明顯的視覺差異性，從而重點強(qiáng)調(diào)右上方的黑色文字內(nèi)筒以及產(chǎn)品的輕薄簡便等視覺特色，這樣就能使得瀏覽人群在視覺體驗中感受到三星產(chǎn)品的獨特氣質(zhì)，從而增加購買的欲望。除此之外，色彩在網(wǎng)頁UI設(shè)計中屬于視覺信息傳達(dá)的組成部分，也需要同時考慮到藝術(shù)性、審美性，以及瀏覽群體的情感共鳴等，滿足大眾的審美需求。

三、網(wǎng)頁UI設(shè)計中對于色彩的具體應(yīng)用

網(wǎng)頁UI設(shè)計中的色彩功能分類十分清晰，主要可以劃分為背景色、主色、輔色、點綴色這幾種。

（一）背景色的應(yīng)用

在電商產(chǎn)品網(wǎng)頁UI設(shè)計中，在一般情況下都會選取中性色、黑色、白色、灰色作為背景色，有時也會直接選擇主色作為背景色。在背景色的選擇上需要保證體現(xiàn)出一種干凈，溫和的緩慢過渡效果，想要達(dá)到這個效果通常會選擇純色或者漸變與畫筆柔角筆頭來打造[3]。

（二）主色的應(yīng)用

網(wǎng)頁UI設(shè)計中的主色也就是指主要運(yùn)用的色彩，同時也是覆蓋范圍最廣的色彩。主色彩的選擇為整體網(wǎng)頁UI設(shè)計奠定了基礎(chǔ)，其余部分的色彩選擇需要依照主色彩進(jìn)行相應(yīng)的調(diào)整搭配，在對主色彩進(jìn)行選擇時注意不要使用過于顏色，通常情況下只需要一到兩種顏色。需要注意的是，主色彩的選擇要考慮到產(chǎn)品本身的特色以及產(chǎn)品需求人群的審美。

（三）輔色的應(yīng)用

輔色也叫做配色，是協(xié)調(diào)主色而生，輔色的選擇要與主色相對，形成一個鮮明的對比，但是這種搭配必須要遵循色彩的自然規(guī)律，否則極其容易導(dǎo)致視覺雜亂，無法體現(xiàn)網(wǎng)頁的重點。

（四）點綴色的應(yīng)用

點綴色的覆蓋范圍要小于輔色，僅做一個錦上添花的作用，從而達(dá)到一個提亮畫面效果的預(yù)期。

綜上所述，可以得知，對于色彩的應(yīng)用需要遵循相應(yīng)的規(guī)則，才能夠打造出一個完美的視覺盛宴。

四、網(wǎng)頁UI設(shè)計中的配色方法

（一）對于色相的搭配

根據(jù)對眾多電商產(chǎn)品的網(wǎng)頁色相搭配分析可知，每一種不同的色彩搭配都有著自身獨特的表達(dá)意義：與主體色的色相間隔相近的色彩，擁有良好的協(xié)調(diào)性；反之，與主體色色相間隔較遠(yuǎn)的色彩，擁有能夠提高色彩活力性的能力。由此可知，在設(shè)計師對電商產(chǎn)品進(jìn)行網(wǎng)頁UI設(shè)計時，應(yīng)該充分考慮產(chǎn)品的配色需求，從而選擇相應(yīng)的色相搭配，以此提高消費(fèi)人群的心理聯(lián)想，最終達(dá)到使瀏覽者能夠感受到不同視覺體驗的目的。

（二）對于明度的搭配

在網(wǎng)頁UI設(shè)計中的色彩搭配中，對明度的搭配是必不可少的關(guān)鍵條件，因為明度的變化能夠展現(xiàn)出視覺空間距離的遠(yuǎn)近。明度可以劃分為高明度、中明度、以及低明度，設(shè)計師可以根據(jù)不同程度的明度色彩進(jìn)行搭配，從而使得在網(wǎng)頁UI設(shè)計中的背景色與文字色彩形成鮮明的對比，從而突出文字的內(nèi)容。當(dāng)明度搭配差異較大時，色彩對比較為強(qiáng)烈，有助于閱讀；當(dāng)明度搭配差異較小時，色彩對比較為微弱，不利于文字的閱讀[4]。

（三）對于純度的搭配

色彩搭配中的純度搭配屬于最不容易的環(huán)節(jié)，不同色彩的純度變化與明度的變化也有關(guān)聯(lián)。設(shè)計師在通過不同明度下的純度變化，能夠?qū)崿F(xiàn)多種搭配關(guān)系。在視覺體驗的效果中，純度較高的色彩產(chǎn)品通常都比較璀璨，而純度較低的色彩產(chǎn)品通常都較為淡雅。除此之外，大幅度的使用高純度的色彩，會導(dǎo)致瀏覽者產(chǎn)生視覺上的疲勞，是不可取的。

由上述分析可知，在網(wǎng)頁UI設(shè)計中，對于配色方法的選取往往是為了展現(xiàn)出產(chǎn)品獨特的視覺效果，以色彩帶動瀏覽群體的心理情感共鳴，同時還能夠提升電商企業(yè)網(wǎng)頁的產(chǎn)品活力。

五、結(jié)論

通過對電商產(chǎn)品網(wǎng)頁UI設(shè)計中的色彩應(yīng)用進(jìn)行分析以及研究之后，發(fā)現(xiàn)網(wǎng)頁設(shè)計中的色彩應(yīng)用能夠影響到網(wǎng)頁的效果以及產(chǎn)品的售賣情況，由此可知良好的色彩應(yīng)用不僅能夠為網(wǎng)頁設(shè)計錦上添花，同時還能夠吸網(wǎng)站瀏覽者的視線，增加網(wǎng)站的點擊量，因此，本文希望能夠通過上述內(nèi)容為相關(guān)網(wǎng)頁設(shè)計人員提供更深入的理解與認(rèn)知，提高電商產(chǎn)業(yè)產(chǎn)品的經(jīng)濟(jì)效益，從而促進(jìn)行業(yè)的快速以及穩(wěn)定發(fā)展。