電商頁(yè)面設(shè)計(jì)色彩搭配

創(chuàng)新互聯(lián)編者，為你推出《電商頁(yè)面設(shè)計(jì)色彩搭配》。

前言

不知道大家有沒(méi)有發(fā)現(xiàn)一個(gè)規(guī)律和現(xiàn)象，就是國(guó)內(nèi)無(wú)論是綜合電商平臺(tái)還是垂直型的電商平臺(tái)亦或是導(dǎo)購(gòu)平臺(tái)的品牌色一般都是紅色系或暖色系的，而紅色占了大邊天，其次是偏女性化的玫紅色/粉色，再或則是橙色黃色等，我挑選了一些電商平臺(tái)的品牌logo給大家看下：

同時(shí)，在一些大型的活動(dòng)專題頁(yè)設(shè)計(jì)里，紅色也應(yīng)該算是電商設(shè)計(jì)里運(yùn)用的最為廣泛的一種顏色了，但其實(shí)很多人對(duì)紅色該在什么時(shí)候用，或者該怎么用依然很缺乏了解，紅色用的好則是兼大歡喜，用得不好要么會(huì)顯得俗氣和不干凈，或者會(huì)顯得頁(yè)面很壓抑很膩。

再一個(gè)紅色寓意紅紅火火嘛，我自己本身也最愛(ài)紅色，所以呢，今天我干脆來(lái)講一下紅色在電商頁(yè)面設(shè)計(jì)中的運(yùn)用好了噢!～

我先給大家列一個(gè)提綱：

1、紅色的釋義。

2、紅色在電商設(shè)計(jì)里的運(yùn)用。

3、與紅色有關(guān)的常用色彩搭配有哪些?

4、當(dāng)紅色運(yùn)用在不同的質(zhì)感紋理或形狀環(huán)境時(shí)會(huì)怎么樣?

5、紅色的使用禁忌或注意事項(xiàng)有哪些?

接下來(lái)我們一條條來(lái)說(shuō)吧，let’s go!!!～

1、紅色的釋義

• 從性格色彩的層面來(lái)說(shuō)，紅色代表熱情/熱鬧/刺激/欲望/奔放/喜慶/血腥暴力;
• 從顏色的層面來(lái)說(shuō)，根據(jù)色相/明度/飽和度的不同紅色也分很多種紅啊，比如大紅/深紅/品紅/粉紅/棗紅/朱紅/橙紅/紫紅等等;
• 從作用的層面來(lái)說(shuō)，紅色代表危險(xiǎn)警示/突出強(qiáng)調(diào)/錯(cuò)誤提醒/性刺激/公布喜訊等等;

2、紅色在電商設(shè)計(jì)里的運(yùn)用

正是因?yàn)榧t色有以上的感官刺激作用，所以它常運(yùn)用于一些要體現(xiàn)喜慶/熱鬧/激發(fā)別人欲望/或者要體現(xiàn)恐怖情緒的電商或海報(bào)設(shè)計(jì)里。同時(shí)紅色也常用來(lái)作為點(diǎn)綴色出現(xiàn)，以強(qiáng)調(diào)某個(gè)重要信息。

喜慶節(jié)日：

紅色代表喜慶熱鬧，所以常用在中國(guó)的各種喜慶的節(jié)日促銷電商頁(yè)面里，比如國(guó)慶/元旦/春節(jié)等重大節(jié)日，基本都是以紅色作為大背景主色。

比較大型或隆重喜慶的活動(dòng)往往都會(huì)選擇大面的紅色：

但是也有比較克制的性冷淡的。。。即使是周年慶也只用一點(diǎn)點(diǎn)紅色意思一下。。比如網(wǎng)易嚴(yán)選這次的1周年慶活動(dòng)頁(yè)設(shè)計(jì)，不過(guò)這跟網(wǎng)站自身的品牌調(diào)性有關(guān)啦(就像一個(gè)人的性格一樣，她本身只愿做個(gè)安安靜靜的美女子，又怎么會(huì)留戀塵世間的喧囂呢?)：

國(guó)外的喜慶節(jié)日：圣誕節(jié)

圣誕節(jié)當(dāng)然也是少不了紅色，而且還是紅配綠(不過(guò)每年都是看紅配綠也會(huì)視覺(jué)疲勞，所以很多設(shè)計(jì)師會(huì)通過(guò)加入一些其他顏色，或改變一下它們的明度/飽和度/純度，或采用不同的質(zhì)感紋理和表現(xiàn)手法給用戶多一些新鮮感，比如手繪/合成/手工/三維建模之類的表現(xiàn)形式)

公布喜訊：

一些專門用來(lái)發(fā)布喜慶消息的專題頁(yè)也最愛(ài)用紅色，比如熱烈慶祝誰(shuí)上市了/誰(shuí)獲獎(jiǎng)了/誰(shuí)結(jié)婚了/誰(shuí)喜得貴子了等等。。。(怕辣著大家的眼睛了，所以下面這張截圖你們看看就好。。。不要太過(guò)沉迷于它。。)

不過(guò)其實(shí)結(jié)婚之類喜訊也有很多人用浪漫紫色或蘿莉粉色，獲獎(jiǎng)之類的專題頁(yè)，如果想要時(shí)尚震撼一點(diǎn)的話，很多人會(huì)用黑金的色彩搭配：

賣場(chǎng)促銷：

商場(chǎng)做促銷活動(dòng)/電商平臺(tái)或店鋪?zhàn)龃蟠俚臅r(shí)候，比如雙十一/雙12/815/618等。

體現(xiàn)時(shí)尚個(gè)性：

突出強(qiáng)調(diào)某個(gè)重要信息：

紅色常用來(lái)作為輔助色或點(diǎn)綴色，用來(lái)突出強(qiáng)調(diào)某個(gè)重要信息的，比如突出強(qiáng)調(diào)利益點(diǎn)/購(gòu)買按鈕等信息：

如果產(chǎn)品本身就是紅色時(shí)：

其實(shí)任何類目任何產(chǎn)品都有紅色系列，比如/家電數(shù)碼/服飾鞋包/美妝護(hù)膚等，如果干脆將背景也弄成紅色與產(chǎn)品融為一體，會(huì)帶來(lái)非常強(qiáng)的視覺(jué)效果，而且不會(huì)覺(jué)得膩：

3、與紅色有關(guān)的常用色彩搭配有哪些

紅色是很熱烈的顏色，是暖色，也是一種百搭色，但并不是每個(gè)人都玩得好它，可它偏偏又是電商設(shè)計(jì)里用的最為頻繁的一種顏色，那么今天我就給大家例舉一些常用的優(yōu)秀的紅色與其它顏色的搭配好了：

左邊是大面積的紅色搭配少許相近色或鄰近色顯得很高檔耐看;右邊是大面積的粉嫩色系搭配少于紅色和藍(lán)紫色，冷暖搭配，俏皮又耐看。

當(dāng)紅色與這種偏灰的漸變色搭配時(shí)，畫面立馬變得柔和清新脫俗起來(lái)。

也只有五彩斑斕的顏色才能壓得住紅色了。

紅色與藍(lán)白黑灰永遠(yuǎn)都是經(jīng)典搭配，既可以制造一種復(fù)古的感覺(jué)，也能給人一種冷靜與激情的相碰撞感覺(jué)。

紅色與青色或與綠色搭配，再加上一些俏皮的構(gòu)圖或點(diǎn)綴，會(huì)顯得畫面非常干凈清爽。

紅白黑搭配，時(shí)尚又經(jīng)典，不過(guò)要注意紅色的比例。

紅綠配米黃色，圣誕節(jié)常用配色，不過(guò)也會(huì)顯得有一點(diǎn)點(diǎn)年代感或復(fù)古的感覺(jué)，絕對(duì)不是現(xiàn)代時(shí)尚類型的配色。

在大面積的淺灰色里，只需要點(diǎn)綴少許紅色，就可以制造出一種靜謐又不顯單調(diào)的感覺(jué)了。

在一些比較俏皮的手繪畫面里，紅色既可以作為大面積背景色來(lái)包容五彩斑斕的多彩色，如左邊所示;也可以以非常小面積的點(diǎn)綴色出現(xiàn)，用來(lái)突出強(qiáng)調(diào)某個(gè)重要信息，比如價(jià)格啊/利益點(diǎn)啊/特殊說(shuō)明文字啊之類的。

無(wú)論你的背景是簡(jiǎn)單還是復(fù)雜，當(dāng)紅色塊面積足夠大時(shí)，它依然會(huì)成為焦點(diǎn)。

大紅色及深色的結(jié)合搭配熒光色會(huì)有一種非常詭異個(gè)性的感覺(jué)。

番茄炒雞蛋的紅黃搭配容易給人一種復(fù)古溫暖的感覺(jué)，但為了畫面不至于太膩歪，最好是搭配一點(diǎn)冷色或暗色比較好。

當(dāng)紅色運(yùn)用在一些形狀的規(guī)則排列上時(shí)是很容易制造出簡(jiǎn)介時(shí)尚感噠!～

4、當(dāng)紅色運(yùn)用在不同的質(zhì)感紋理或形狀環(huán)境時(shí)會(huì)怎么樣

雖然同樣是紅色，但是當(dāng)它運(yùn)用于不同的形式載體/紋理材質(zhì)/周圍情境時(shí)，所傳遞的感受是不一樣的，舉例：

紅色的帶棱角形狀VS紅色的圓形，哪一個(gè)更硬朗，視覺(jué)上更咄咄逼人？

紅色的液體VS紅色的煙霧，哪一個(gè)更仙?其實(shí)紅色液體處理不好的話很容易變成恐怖畫面。。不過(guò)如果能處理得好的話，液體和煙霧都能作為氛圍渲染元素，使得產(chǎn)品看上去更唯美或酷炫。

紅色的絲綢或絲帶VS紅色的塊狀物體，哪一個(gè)更女性化?所以絲帶或絲綢常用來(lái)點(diǎn)綴一些女性化的產(chǎn)品，而色塊點(diǎn)綴則這比較適用于科技數(shù)碼產(chǎn)品。

VS

將紅色運(yùn)用于空間體力感的環(huán)境里VS運(yùn)用于扁平的環(huán)境里，哪一個(gè)更有代入感？這就是3D和2D的區(qū)別啊你們感受下～

VS

紅色周圍是無(wú)彩色VS周圍是多彩色，誰(shuí)更突出？誰(shuí)更有氛圍？

那么它們具體運(yùn)用在電商設(shè)計(jì)里是什么樣一個(gè)情況呢?我找了一些還不錯(cuò)的紅色頁(yè)面給大家看看下：

5、紅色的使用禁忌或注意事項(xiàng)有哪些

(1)紅色作為暖色運(yùn)用在頁(yè)面里的時(shí)候，畫面里切勿全都是暖色系搭配，適當(dāng)加入一些冷色或無(wú)彩色(黑白灰)點(diǎn)綴可以緩解視覺(jué)疲勞，網(wǎng)頁(yè)設(shè)計(jì)色彩進(jìn)階技巧

這個(gè)是愛(ài)馬仕的絲巾圖案設(shè)計(jì)，感覺(jué)超漂亮：

(2)無(wú)論何種顏色，它在整個(gè)畫面里的占比都是根據(jù)設(shè)計(jì)需要而決定的，而不是瞎搞，比如，無(wú)論你是要弱化某一個(gè)信息還是突出某一個(gè)信息，都可以根據(jù)選擇顏色和控制它的比例大小來(lái)實(shí)現(xiàn)，講直白點(diǎn)就是要懂得運(yùn)用對(duì)比和烘托的手法;

對(duì)比：

烘托氛圍：

(3)切勿大面積使用太過(guò)艷麗或太過(guò)暗沉的紅色，比如阿里年貨節(jié)的這個(gè)頁(yè)面，原圖是這樣的：

吶，上面那張?jiān)O(shè)計(jì)稿如果是用的很艷麗的紅色，如下圖所示，是不是很刺眼很不舒服無(wú)法直視了啊？

如果用的是很暗淡的紅色，如下圖所示，是不是看起來(lái)就很臟毫無(wú)繼續(xù)看的欲望了??？

所以有的人可以把紅色用的很高檔，但也有很多人紅色用不好，要么太刺眼了，要么太暗太臟顯得廉價(jià)，其實(shí)很大部分原因就是因?yàn)槟愕拿鞫?飽和度/純度沒(méi)有把握好啦。

(4)電商設(shè)計(jì)里其實(shí)很少會(huì)用到純度為百分百的紅色，因?yàn)闀?huì)顯得很膩很刺眼，這時(shí)候不妨將紅色向玫紅色偏一點(diǎn)，或向橙色偏一點(diǎn)，再或者偏白一點(diǎn)偏暗一點(diǎn)，總之你可以自己去嘗試，按需選擇合適的紅色就好。

(5)當(dāng)你的紅色不得不與對(duì)比色或互補(bǔ)色搭配使用時(shí)，最好是能加入一些調(diào)和色彩(比如黑白灰)，就像下面的百事可樂(lè)的logo的紅白藍(lán)搭配，上海網(wǎng)站建設(shè)公司官網(wǎng)的這篇文章的白色就是起到了調(diào)和的作用啦：

以上我們關(guān)于電商設(shè)計(jì)里使用最為頻繁的紅色的配色技巧和注意事項(xiàng)我就給大家就講到這里啦！

此文章是轉(zhuǎn)載，中華1912設(shè)計(jì)的《電商最常用的色彩搭配技巧》，想看更多的設(shè)計(jì)資訊，可點(diǎn)擊：設(shè)計(jì)資訊。

文章名稱：電商頁(yè)面設(shè)計(jì)色彩搭配
網(wǎng)站網(wǎng)址：http://www.bm7419.com/news13/167113.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、Google、手機(jī)網(wǎng)站建設(shè)、App開發(fā)、企業(yè)建站、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)