5招帶你玩轉電商最常用的色彩搭配!

2021-01-11 人人都是產品經理

文章主要分享了紅色這一色彩元素在電商頁面設計中的運用,圖文並茂,相信你一定可以從中受益。

不知道大家有沒有發現一個規律和現象,就是國內無論是綜合電商平臺還是垂直型的電商平臺亦或是導購平臺的品牌色一般都是紅色系或暖色系的,而紅色佔了大邊天,其次是偏女性化的玫紅色/粉色,再或則是橙色黃色等,我挑選了一些電商平臺的品牌logo給大家看下:

同時,在一些大型的活動專題頁設計裡,紅色也應該算是電商設計裡運用的最為廣泛的一種顏色了,但其實很多人對紅色該在什麼時候用,或者該怎麼用依然很缺乏了解,紅色用的好則是兼大歡喜,用得不好要麼會顯得俗氣和不乾淨,或者會顯得頁面很壓抑很膩。

再一個紅色寓意紅紅火火嘛,我自己本身也最愛紅色,所以呢,今天我乾脆來講一下紅色在電商頁面設計中的運用好了噢!~

我先給大家列一個提綱:

紅色的釋義。紅色在電商設計裡的運用。與紅色有關的常用色彩搭配有哪些?當紅色運用在不同的質感紋理或形狀環境時會怎麼樣?紅色的使用禁忌或注意事項有哪些?

接下來我們一條條來說吧,let’s go!!!~

1、紅色的釋義。從性格色彩的層面來說,紅色代表熱情/熱鬧/刺激/欲望/奔放/喜慶/血腥暴力;從顏色的層面來說,根據色相/明度/飽和度的不同紅色也分很多種紅啊,比如大紅/深紅/品紅/粉紅/棗紅/朱紅/橙紅/紫紅等等;從作用的層面來說,紅色代表危險警示/突出強調/錯誤提醒/性刺激/公布喜訊等等;2、紅色在電商設計裡的運用。

正是因為紅色有以上的感官刺激作用,所以它常運用於一些要體現喜慶/熱鬧/激發別人慾望/或者要體現恐怖情緒的電商或海報設計裡。同時紅色也常用來作為點綴色出現,以強調某個重要信息。

喜慶節日:

紅色代表喜慶熱鬧,所以常用在中國的各種喜慶的節日促銷電商頁面裡,比如國慶/元旦/春節等重大節日,基本都是以紅色作為大背景主色。

比較大型或隆重喜慶的活動往往都會選擇大面的紅色:

但是也有比較克制的性冷淡的。。。即使是周年慶也只用一點點紅色意思一下。。比如網易嚴選這次的1周年慶活動頁設計,不過這跟網站自身的品牌調性有關啦(就像一個人的性格一樣,她本身只願做個安安靜靜的美女子,又怎麼會留戀塵世間的喧囂呢?):

國外的喜慶節日:聖誕節

聖誕節當然也是少不了紅色,而且還是紅配綠(不過每年都是看紅配綠也會視覺疲勞,所以很多設計師會通過加入一些其他顏色,或改變一下它們的明度/飽和度/純度,或採用不同的質感紋理和表現手法給用戶多一些新鮮感,比如手繪/合成/手工/三維建模之類的表現形式)

公布喜訊:

一些專門用來發布喜慶消息的專題頁也最愛用紅色,比如熱烈慶祝誰上市了/誰獲獎了/誰結婚了/誰喜得貴子了等等。。。(怕辣著大家的眼睛了,所以下面這張截圖你們看看就好。。。不要太過沉迷於它。。)

不過其實結婚之類喜訊也有很多人用浪漫紫色或蘿莉粉色,獲獎之類的專題頁,如果想要時尚震撼一點的話,很多人會用黑金的色彩搭配:

賣場促銷:

商場做促銷活動/電商平臺或店鋪做大促的時候,比如雙十一/雙12/815/618等。

體現時尚個性:

突出強調某個重要信息:

紅色常用來作為輔助色或點綴色,用來突出強調某個重要信息的,比如突出強調利益點/購買按鈕等信息:

如果產品本身就是紅色時:

其實任何類目任何產品都有紅色系列,比如/家電數碼/服飾鞋包/美妝護膚等,如果幹脆將背景也弄成紅色與產品融為一體,會帶來非常強的視覺效果,而且不會覺得膩:

3、與紅色有關的常用色彩搭配有哪些?

紅色是很熱烈的顏色,是暖色,也是一種百搭色,但並不是每個人都玩得好它,可它偏偏又是電商設計裡用的最為頻繁的一種顏色,那麼今天我就給大家例舉一些常用的優秀的紅色與其它顏色的搭配好了:

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

當紅色與這種偏灰的漸變色搭配時,畫面立馬變得柔和清新脫俗起來。

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

紅色與藍白黑灰永遠都是經典搭配,既可以製造一種復古的感覺,也能給人一種冷靜與激情的相碰撞感覺。

紅色與青色或與綠色搭配,再加上一些俏皮的構圖或點綴,會顯得畫面非常乾淨清爽。

紅白黑搭配,時尚又經典,不過要注意紅色的比例。

紅綠配米黃色,聖誕節常用配色,不過也會顯得有一點點年代感或復古的感覺,絕對不是現代時尚類型的配色。

在大面積的淺灰色裡,只需要點綴少許紅色,就可以製造出一種靜謐又不顯單調的感覺了。

在一些比較俏皮的手繪畫面裡,紅色既可以作為大面積背景色來包容五彩斑斕的多彩色,如左邊所示;也可以以非常小面積的點綴色出現,用來突出強調某個重要信息,比如價格啊/利益點啊/特殊說明文字啊之類的。

無論你的背景是簡單還是複雜,當紅色塊面積足夠大時,它依然會成為焦點。

大紅色及深色的結合搭配螢光色會有一種非常詭異個性的感覺。

番茄炒雞蛋的紅黃搭配容易給人一種復古溫暖的感覺,但為了畫面不至於太膩歪,最好是搭配一點冷色或暗色比較好。

當紅色運用在一些形狀的規則排列上時是很容易製造出簡介時尚感噠!~

4、當紅色運用在不同的質感紋理或形狀環境時會怎麼樣?

雖然同樣是紅色,但是當它運用於不同的形式載體/紋理材質/周圍情境時,所傳遞的感受是不一樣的,舉例:

紅色的帶稜角形狀VS紅色的圓形,哪一個更硬朗,視覺上更咄咄逼人?

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

紅色的絲綢或絲帶VS紅色的塊狀物體,哪一個更女性化?所以絲帶或絲綢常用來點綴一些女性化的產品,而色塊點綴則這比較適用於科技數碼產品。

VS

將紅色運用於空間體力感的環境裡VS運用於扁平的環境裡,哪一個更有代入感?這就是3D和2D的區別啊你們感受下~

 VS

紅色周圍是無彩色VS周圍是多彩色,誰更突出?誰更有氛圍?

那麼它們具體運用在電商設計裡是什麼樣一個情況呢?我找了一些還不錯的紅色頁面給大家看看下:

5、紅色的使用禁忌或注意事項有哪些?

(1)紅色作為暖色運用在頁面裡的時候,畫面裡切勿全都是暖色系搭配,適當加入一些冷色或無彩色(黑白灰)點綴可以緩解視覺疲勞;

這個是愛馬仕的絲巾圖案設計,感覺超漂亮:

(2)無論何種顏色,它在整個畫面裡的佔比都是根據設計需要而決定的,而不是瞎搞,比如,無論你是要弱化某一個信息還是突出某一個信息,都可以根據選擇顏色和控制它的比例大小來實現,講直白點就是要懂得運用對比和烘託的手法;

對比:

烘託氛圍:

(3)切勿大面積使用太過豔麗或太過暗沉的紅色,比如阿里年貨節的這個頁面,原圖是這樣的:

吶,上面那張設計稿如果是用的很豔麗的紅色,如下圖所示,是不是很刺眼很不舒服無法直視了啊?

如果用的是很暗淡的紅色,如下圖所示,是不是看起來就很髒毫無繼續看的欲望了啊?

所以有的人可以把紅色用的很高檔,但也有很多人紅色用不好,要麼太刺眼了,要麼太暗太髒顯得廉價,其實很大部分原因就是因為你的明度/飽和度/純度沒有把握好啦。

(4)電商設計裡其實很少會用到純度為百分百的紅色,因為會顯得很膩很刺眼,這時候不妨將紅色向玫紅色偏一點,或向橙色偏一點,再或者偏白一點偏暗一點,總之你可以自己去嘗試,按需選擇合適的紅色就好。

(5)當你的紅色不得不與對比色或互補色搭配使用時,最好是能加入一些調和色彩(比如黑白灰),就像下面的百事可樂的logo的紅白藍搭配,這裡的白色就是起到了調和的作用啦:

以上我們關於電商設計裡使用最為頻繁的紅色的配色技巧和注意事項我就給大家就講到這裡啦,大家學到了嗎?我們下期再見!~

#專欄作家#

做設計的麵條,公眾號:做設計的麵條,人人都是產品經理專欄作家。一位擅長將電商及banner設計講得最透徹易懂的妹子,有趣有料會拍照,歡迎互相交流。

本文原創發布於人人都是產品經理。未經許可,禁止轉載。

相關焦點

  • 鯨譽APP強力來襲,帶你玩轉跨境社交電商
    原標題:鯨譽APP強力來襲,帶你玩轉跨境社交電商     號外!號外!跨境社交電商Wmall鯨譽APP於2020年5.18號正式上線,宣布網際網路新風口震撼來襲!   Whalecome Mall鯨譽優選(簡稱Wmall鯨譽)隸屬於澳洲ATB集團,是輻射全球五大洲的新型跨境社交電商分享平臺。
  • 齊論電商帶你玩轉淘寶客!
    齊論電商帶你玩轉淘寶客!1、當你的做生意關鍵靠新客戶,老客戶回購非常少那麼你的「立減額度」設定小一點,要不然虧錢賺了客戶,之後總是越虧越大,由於許多的消費者在第一次選購關鍵是看好了價錢很性價比高,隨後選購回家了將會感覺品質也一般,假如依照現價開展回購的話,會感覺划不來,因而非常少有消費者會挑選認購,這時候就提議諸位在設定新消費者立減額度時儘可能設定得少一些
  • 色彩搭配常識!帶你認識自然色!
    植物色是日常生活中最常見的顏色,植物色具有綠色的治癒特點,能夠緩解緊張,令人心情放鬆,同時植物色也是自然界的代表色,具有環保、天然、和諧的意象。植物色中的丁香色給人一種浪漫柔美的印象,同時也給人講究、洗鍊的感覺,搭配紅色,具有華麗高貴的效果,常用於時尚設計中。
  • 不妨試試這些撞色搭配吧!新家裝修玩轉色彩
    秋天永遠都是色彩斑斕的代表,同樣的,我們的新家也可以擁有多樣的色彩。除了常用的黑白灰,偶爾來點跳脫的顏色,或許會讓你的新家更具個性,下面我們就來詳細的討論一下幾種主要顏色在裝修中的使用,讓我們一起玩轉新家色彩!色彩在家裝中的運用是非常關鍵的,運用不好反而會產生相反的效果。而處理好色彩必須從色彩的本質和色彩的物理效應出發。
  • 玩轉直播帶貨!抖音電商官網的這些事兒了解一下
    如果要為2020年選幾個關鍵詞,那麼「直播帶貨」這個詞一定榜上有名。大眾也越來越習慣在觀看短視頻或直播時直接下單,不少商家紛紛嘗試入駐抖音開設了抖店。這種全新的帶貨方式拓寬了商家們的銷售渠道,幫助他們增長了收益,卻也讓一些不懂如何直播帶貨的商家感到了壓力。不過沒關係!今天這篇文章就教大家從了解抖音電商官網開始,幫助大家玩轉直播帶貨!
  • 10.27免費課堂|帶你玩轉訂閱制電商新模式!免費報名領取資料
    各類電商應該如何把握商機? 本次,小維就為大家提供了一次線上專業知識的分享交流會,意在為幫助各跨境電商: √ 了解行業動態和趨勢 在迎來新的電商模式下,商家該如何迎接?
  • pick這6款運動褲搭配,帶你玩轉休閒風
    pick這6款運動褲搭配,帶你玩轉休閒知性風許多上班族都會選擇穿西裝外套,比較有正式感。但是有的會顯得太嚴肅了,所以它的搭配就顯得特別重要。那麼西裝外套應該怎麼搭配呢?小編建議可以搭上運動褲,知性又不乏個性。西裝外套怎麼穿才好看?pick這6款運動褲搭配,帶你玩轉休閒知性風。接下來隨小編來看看遇到這些搭配,有沒有心動的感覺吧。
  • 孟菲斯風格,帶你玩轉色彩
    舍親們好,初提孟菲斯風格,大家可能沒有什麼具體的概念,但當你看到這些圖片時,你一定會恍然大悟:原來這就是孟菲斯啊。那些你一度叫不上名字,有些花裡胡哨、夾雜著童真的反叛設計,甚至有些怪誕離奇的風格,就是孟菲斯設計。
  • 這幾種顏色的T恤搭配,能讓夏天充滿色彩和活力!
    夏天,誰還沒有幾件T恤的搭配,今天挑選這幾款顏色的T恤讓小仙女的夏季充滿色彩和活力,小仙女知道有哪幾種顏色嗎?試試這幾種顏色的T恤搭配,玩轉夏日百變造型吧,學著這麼穿顯高級!怎麼拍怎麼好看~讓你稱霸朋友圈!
  • 最詳細的色彩搭配原則
    狗菌這裡整理了詳細的攝影后期色彩搭配原則,一起來看看吧~01色彩搭配原則在後期調色中往往需要統一色調這就需要清楚配色原則以及色彩搭配。狗菌調色常用的配色原則就兩種:鄰近色搭配、互補色搭配。鄰近色搭配的極致是單色搭配,畫面中顏色相近不衝突,著重於畫面內容。上圖原為互補色搭配,如果沒有小孩,通過色彩衝擊突出日落也是不錯的選擇,但是小孩的存在(影調黑),使得日落不再是唯一的關注點。
  • 常用的五種色彩搭配規律!
    色彩的組合方式種類繁多且各具特色,最常見的搭配有同類色、類似色、鄰近色、對比色和互補色。同類色是指擁有相同色相的一類色彩,該類色彩在色相上的差別是非常微弱的,我們主要通過明度上的深淺變化來對同類色進行辨識與區分。①同類色對比。
  • 如何在社交電商上搞副業?如何玩轉
    今年很多人開始想做點副業,尤其是寶媽,想在家帶孩子,又想搞點副業,那麼現在副業實在太多,一不小心就會掉入陷阱,不但賺不到錢,反而會被騙。所以在選擇副業的時候一定要小心,今天小編給大家介紹如何玩轉社交電商。如何在社交電商上搞副業?
  • Mr.Harris手把手教你玩轉「跨境電商直播」(一)
    2020年海外疫情持續下,流量爆發的最明顯的渠道就是「直播」,預期未來3年到5年內,通過直播等視頻引流會成為中小外貿企業在線引流的最重要的風口,2020年很有可能會是外貿跨境電商直播的真正元年。
  • 學會這幾招,小個男生輕鬆玩轉運動風
    世界似乎對於小個子有著深深的惡意,尤其是在穿衣搭配這方面,小個子男生穿不好的話,會在視覺上更顯矮,今天就來教你們幾招,輕鬆玩轉運動風哦!◆Part 1選擇色彩單調的單品小個子男生在穿搭時,鞋子要避免複雜色彩,儘量穿單一的顏色,比如黑白色。相比之下,配色複雜的鞋子,會顯得穿著浮誇複雜,沒有起到消除厚重感的作用。
  • 十月,色彩小課堂(色彩搭配)
    如文中例子,提高中間橙色的S值(飽和度)以及它的B值(明度),就可以使三個顏色和諧很多,不妨看下,以下調整後的色彩,感覺不是好多了呢?將之應用在設計稿中,視覺效果應該還可以的。當然了,純色組合搭配的方法掌握後,版面設計也是非常重要的一環。那麼搭配色彩,有什麼顏色是「禁區」嗎?
  • 梵薈色彩搭配學講解
    從色彩角度來為你一一剖析。走高調路線的Urban Decay家的星空紫眼影,與色卡意外的像。比起ins獨角獸風,這款眼妝更加的華麗。煙燻紫與眼角的那一抹黃相映襯,告誡著你,越迷人的越危險。紫色系包裝的鼻祖Anna Sui就很適合來打造這個妝容。● 葡萄紫亞洲人面龐較為扁平,太濃重的魔幻紫會使你有著深度中毒病入膏肓的模樣。
  • 冬天穿什麼顏色最合適? 三種常見色彩搭配帶你超神!
    有些顏色就是要冬天穿才最適合!這篇要以冬日最常見的三種色系:黑、藍、酒紅色系穿搭示範,除了基本聚會穿搭之外,更要介紹到一、二月密集的跨年、農曆年以及情人節的節慶派對穿搭!讓你的整個冬天輕而易舉的選擇到適合的單品,並成為寒冷街道上的高回頭率型男!
  • 超實用的色彩搭配教程,讓你從小白進階為配色大神!
    在網絡上收集整理了關於超實用的色彩搭配教程,讓你從小白進階為配色大神!教程非常簡單,趕緊來看看叭: 你們給物體上色時,有遇到過哪些問題呢?固有色選好了,就是選不出合適的暗部顏色?不是暗部太髒,就是亮部太亮?如果沒有接受過色彩學習,不同的人對顏色的選擇會有所不同。這就可能會有很多不和諧的色彩出現。
  • 牆布窗簾十大品牌|這樣的色彩搭配,客戶如何對你說「不」?
    色彩搭配是最終呈現室內效果的關鍵所在。任何顏色都沒有高低貴賤之分,更沒有美與醜的差別,但色彩搭配的方式則會顯現出不同的效果。 5、藍色配白色、粉藍色、醬紅色、金色、銀色、橄欖綠、橙色、黃色。
  • 我是這樣空手玩轉社區水果電商
    01 水果電商文中大概的意思是:社區為了迎接雙十二特意給居民搞個福利,所有水果都低於市場價格上門出售,其中最引人注目是「相同的水果質量若價格高於任意一家超市的價格,原意10倍的贈送」,看來是做足了功課了。