寫(xiě)在前面的話(huà)

從事設(shè)計(jì)行業(yè)將近十年的時(shí)間，隨著電商互聯(lián)網(wǎng)的發(fā)展，從12年開(kāi)始進(jìn)入電商設(shè)計(jì)行業(yè)至今，經(jīng)歷了從傳統(tǒng)擬物化設(shè)計(jì)到 2G、3G 網(wǎng)絡(luò)時(shí)代的像素設(shè)計(jì)，再到移動(dòng)電商的動(dòng)效設(shè)計(jì)、短視頻設(shè)計(jì)的轉(zhuǎn)變，從擬物化到扁平化；從圖文到視頻；從2D到3D；從PC電商到移動(dòng)電商。

移動(dòng)互聯(lián)網(wǎng)的崛起讓傳統(tǒng)設(shè)計(jì)技術(shù)的更新速度越來(lái)越快，設(shè)計(jì)趨勢(shì)也隨著硬件和技術(shù)的升級(jí)，不斷的發(fā)生改變。時(shí)下流行的C4D、扁平化、卡片式、手繪、扁平描邊插畫(huà)、漸變、軸測(cè)圖（也叫2.5D）等設(shè)計(jì)風(fēng)格讓整個(gè)電商設(shè)計(jì)大放異彩。

很多電商設(shè)計(jì)師在這個(gè)設(shè)計(jì)趨勢(shì)不斷更新時(shí)代會(huì)茫然無(wú)措，“漸變?cè)O(shè)計(jì)是什么？關(guān)于版式設(shè)計(jì)在電商的實(shí)際應(yīng)用、配色在電商設(shè)計(jì)里面的應(yīng)用！大促活動(dòng)頁(yè)如何設(shè)計(jì)？短視頻新內(nèi)容營(yíng)銷(xiāo)趨勢(shì)，視頻剪輯要成為必備技能PR和AE的區(qū)別等等；

接下來(lái)我會(huì)基于這些年的一些所做所想，定期分享一些關(guān)于電商的心得技巧和實(shí)際應(yīng)用干貨。

一件設(shè)計(jì)作品，一般包含三個(gè)元素：色彩、版式、文字。而設(shè)計(jì)作品的視覺(jué)表現(xiàn)，以色彩最為重要，其次是版式，最后才是文字。色彩在設(shè)計(jì)中占據(jù)重要的位置，色彩搭配對(duì)于設(shè)計(jì)師來(lái)說(shuō)是非常重要的。

那么具體到電商工作中該使用什么怎樣的色彩，需要怎么做呢？下面我將逐步去分析。

一、色彩是什么

有彩色系的顏色具有三個(gè)基本特性：色相、純度（也稱(chēng)飽和度）、明度。也稱(chēng)為色彩的三大要素/屬性。飽和度為0的顏色為無(wú)彩色系。

1.色相

色相即每種色彩的相貌、名稱(chēng)，如紅、桔紅、翠綠、湖藍(lán)、群青等。色相是區(qū)分色彩的主要依據(jù)，是色彩的最大特征。

2.純度（飽和度）

色彩的純度是指色彩的純凈程度，它表示顏色中所含有色成分的比例。

含有色彩成分的比例愈大，則色彩的純度愈高，含有色成分的比例愈小，則色彩的純度也愈低。

不同色相所能達(dá)到的純度是不同的，其中紅色純度最高，綠色純度相對(duì)低些，其余色相居中，同時(shí)明度也不相同。

3.明度

明度即色彩的明亮程度，即深淺差別。色彩的明度差別包括兩個(gè)方面：

一是指同一色相的不同明度（深淺變化）

二是指不同色相間存在的明度差別，每一種純色都有與其相應(yīng)的明度。

黃色明度最高，藍(lán)紫色明度最低，紅、綠色為中間明度。

色彩的明度變化往往會(huì)影響到純度，如紅色加入黑色以后明度降低了，同時(shí)純度也降低了；如果紅色加白則明度提高了，純度卻降低了。

色彩的色相、純度（飽和度）和明度三特征是不可分割的，應(yīng)用時(shí)必須同時(shí)考慮這三個(gè)因素。

二、顏色的模式

顏色模式就是記錄顏色的一種方式，分為很多種：RGB 模式、CMYK 模式、HSB 模式、Lab 顏色模式、位圖模式、灰度模式、索引顏色模式……

常用的兩種模式——RGB 模式、HSB 模式（單色模式）。

1.RGB 模式

RGB 模式，是一種加色模型。

色光三原色就是紅（Red）、綠（Green）和藍(lán)（Blue）。首先來(lái)了解一下色輪。

色輪，是一個(gè)非常有用的東西，可以由此直觀(guān)地了解到什么是三原色、互補(bǔ)色、類(lèi)似色。

進(jìn)行項(xiàng)目設(shè)計(jì)時(shí)可以利用基礎(chǔ)色輪，先建立一個(gè)色彩體系，保證了顏色使用的準(zhǔn)確性及設(shè)計(jì)效率。

蒙德里安紅黃藍(lán)構(gòu)圖

色彩對(duì)比強(qiáng)弱程度 取決于色相之間在色相環(huán)上的距離（角度），距離（角度）越小對(duì)比越弱，反之則對(duì)比越強(qiáng)。

同類(lèi)色：15°以?xún)?nèi)

鄰近色：60°以?xún)?nèi)

類(lèi)似色：90°以?xún)?nèi)

對(duì)比色：120°~180°

互補(bǔ)色：180°

2.單色模式的選取

HSB 模式 中的 H 代表色相、S 代表飽和度、B 代表明度。

H（色相）一共 360 個(gè)，因?yàn)樯P(pán)一圈是 360 度，一度一個(gè)色相。

而顏色的變化都是由于 S（飽和度）和 B（明度）的不同產(chǎn)生的。

比如說(shuō)我們隨意選三個(gè)色相，350、250、40：

而這時(shí)，我們只要降低中間顏色的S（飽和度），提高它的 B（明度），就可以使三個(gè)顏色和諧很多：

三、配色的實(shí)際應(yīng)用

首先配色并不是依靠純粹的感覺(jué)來(lái)搭配出來(lái)的，這樣做很容易出問(wèn)題。如果你想設(shè)計(jì)中協(xié)調(diào)的配色，色彩運(yùn)用規(guī)律、配色的知識(shí)和技巧是必不可少的。

1、關(guān)于配色的比例：

主色約70% 、輔助色25%、點(diǎn)綴色5%左右。

2、常見(jiàn)配色方案

單色配色 ：同一色彩色系下不同明暗、飽和度色彩的搭配。

類(lèi)似色配色：色輪上彼此相鄰的色彩構(gòu)成的配色方案。以一個(gè)主色搭配在他這種顏色搭配產(chǎn)色了一種令人悅目，低對(duì)比度的和諧美感。

互補(bǔ)色配色：在色輪直線(xiàn)相對(duì)的兩種顏色稱(chēng)為補(bǔ)色，例如紅色和綠色形成強(qiáng)烈的對(duì)比效果，傳達(dá)出活力、能量、興奮等意義。

三原色配色：色輪上互相處于120度角的三種色彩構(gòu)成的配色方案。

分裂補(bǔ)色配色：以三個(gè)類(lèi)似色為基礎(chǔ)，再加上色環(huán)對(duì)面的一個(gè)對(duì)比色，這種顏色搭配既具有類(lèi)似色的低對(duì)比度，又有補(bǔ)色的對(duì)比感。

類(lèi)似色、互補(bǔ)色，這些顏色關(guān)系構(gòu)成了我們?nèi)粘ＴO(shè)計(jì)的色彩基礎(chǔ)，衍變出很多種色彩搭配方法。

四、色彩是有情感的

設(shè)計(jì)過(guò)程中色彩情緒是必須要考慮的一個(gè)重要元素。

1.?紅色——熱情、躁動(dòng)、危險(xiǎn)、警告。

適用于營(yíng)造氛圍，常用于活動(dòng)促銷(xiāo)頁(yè)面設(shè)計(jì)；或者表示警告提醒的元素的應(yīng)用。

2. 黃色——陽(yáng)光、輝煌、醒目、高貴。

這是一個(gè)明度非常高的顏色。黃色和深灰色是一個(gè)很好的組合。

3. 藍(lán)色——科技、純凈、深邃、放松、忠誠(chéng)。

應(yīng)用是廣泛。是科技宇宙領(lǐng)域的專(zhuān)屬顏色，是理智、效率的代名詞。

4. 綠色——健康、大自然、清新、環(huán)保、安全。

健康無(wú)污染；代表著春天；有著安全屬性的，在支付、安全方面應(yīng)用很多。

5. 橙色——溫暖、活潑、年輕。

非常具有親和力，用戶(hù)對(duì)其接受程度非常高。

6. 粉色——戀愛(ài)、可愛(ài)、溫馨、浪漫。

通常和愛(ài)情、浪漫相關(guān)，像是情人節(jié)七夕節(jié)等，都會(huì)使用粉色來(lái)設(shè)計(jì)。

7. 紫色——神秘、富貴、壓抑。

紫色是一個(gè)非常刺激性的顏色，單獨(dú)使用容易給用戶(hù)造成心理上的壓力，通常會(huì)搭配其他顏色使用，可以試試紫色和藍(lán)色搭配或者紫色和粉色搭配。

一些小Tips：

1、根據(jù)場(chǎng)景選擇基調(diào)：比如大促頁(yè)面，營(yíng)造有氛圍刺激的色彩搭配往往是更合理有效的選擇。

刺激的背景會(huì)使得整個(gè)屏幕顯得熱鬧又大氣，讓用戶(hù)更專(zhuān)注于其中的內(nèi)容。

另一方面，如果是美妝類(lèi)日常頁(yè)面，并且是以高端價(jià)格為主，使用淺色背景搭配明亮的色彩，可能是更好的解決方案，因?yàn)檫@樣會(huì)讓產(chǎn)品的調(diào)性更加突出。

2、分析你的目標(biāo)受眾：了解潛在用戶(hù)，了解受眾的喜好，以目標(biāo)受眾為中心來(lái)設(shè)計(jì)，可以讓設(shè)計(jì)決策更加明晰。

研究競(jìng)爭(zhēng)對(duì)手，配色方案的選取將會(huì)直接影響到你的產(chǎn)品在競(jìng)爭(zhēng)中看起來(lái)是否足夠突出，。

總結(jié)

配色一定要有理論支撐，了解不同顏色的色彩情緒，為進(jìn)行項(xiàng)目設(shè)計(jì)時(shí)選擇合適的顏色提供依據(jù)。

建立色彩體系，可以將體系按照不同行業(yè)、不同特性、針對(duì)的用戶(hù)等標(biāo)簽分類(lèi)整理，積累自己的色彩庫(kù)。

以上就是個(gè)人對(duì)于配色的一點(diǎn)感悟和經(jīng)驗(yàn)，不足之處歡迎留言指正，共同進(jìn)步