首發(fā)于做設(shè)計(jì)的面條（TTTink-D, 一個(gè)不裝逼的電商號(hào)）
原標(biāo)題：［干貨］這篇文章真是太黃了，想報(bào)警！！！～
數(shù)英用戶原創(chuàng)文章，轉(zhuǎn)載請(qǐng)聯(lián)系本人
寫在前面
我最近在寫一系列關(guān)于色彩的文章，之前已經(jīng)寫過紅色和黑色在電商設(shè)計(jì)里的運(yùn)用，而我今天想要給大家分享的是你們最喜歡的顏色——黃色在設(shè)計(jì)當(dāng)中的運(yùn)用~
而說到黃色，你會(huì)想到哪些品牌呢？比如我會(huì)想到站酷、ofo小黃車、麥當(dāng)勞、法拉利等，雖然他們是完全不同的4個(gè)品牌，但他們的主要用戶群體無不都是心理上比較追求年輕活力的一類人，他們樂于接受新鮮好玩的事物。
而反觀各類傳統(tǒng)企業(yè)或國企卻基本不會(huì)使用黃色，而是以藍(lán)色、紅色為品牌主色，這類企業(yè)給人的感覺也多是嚴(yán)謹(jǐn)嚴(yán)肅沉穩(wěn)的，比如大家可以留意一下各大銀行的logo和品牌形象。
而電商的玩法則是傳統(tǒng)思想＋新興互聯(lián)網(wǎng)思想的結(jié)合體，這里面存在著無限種可能，所以也基本沒有不適合運(yùn)用于電商設(shè)計(jì)里的顏色，而黃色也是除紅色以外得到了非常廣泛運(yùn)用的一種顏色，接下來，我們一起看看，黃色在電商設(shè)計(jì)里都有哪些奧秘和玩法吧！
按照慣例，我先給大家列一個(gè)提綱：
1、黃色的釋義。
2、黃色在電商設(shè)計(jì)里的運(yùn)用。
3、與黃色有關(guān)的常用色彩搭配有哪些？
4、黃色的使用禁忌或注意事項(xiàng)有哪些？
接下來我們一條一條來解說吧，let’s go！！！~
一、黃色的釋義
從性格色彩的層面來說，好的方面：黃色代表年輕／活潑／希望／輝煌／開朗／智慧／忠誠；不好的方面：黃色代表懦弱／怒氣／欺騙／幼稚；
從顏色的層面來說，根據(jù)色相／明度／飽和度的不同紅色也分很多種紅啊，比如檸檬黃／橙色／橘色／芥末黃／嫩黃／金黃／土黃／屎黃／米黃色等等（與黃色有關(guān)的顏色我都統(tǒng)稱為黃色系）；
從作用的層面來說，不同的黃色可以代表預(yù)警提示／突出強(qiáng)調(diào)／輝煌榮耀／暴力傾向／勾起食欲／增加快樂氛圍等等；
二、黃色在電商設(shè)計(jì)里的運(yùn)用
正是因?yàn)辄S色能給人這些不同感官刺激作用，所以它常運(yùn)用于一些要體現(xiàn)食欲／青春活力／時(shí)尚潮流等類型的電商或海報(bào)設(shè)計(jì)里。同時(shí)黃色也常用來作為點(diǎn)綴色出現(xiàn)，以強(qiáng)調(diào)某個(gè)重要信息，使用頻率極高。
比如常運(yùn)用于以下類型的頁面設(shè)計(jì)里：
1、傳統(tǒng)喜慶節(jié)日
像春節(jié)／國慶節(jié)這樣的傳統(tǒng)喜慶節(jié)日，經(jīng)常都會(huì)紅色和黃色同時(shí)出現(xiàn)，這跟中國傳統(tǒng)文化習(xí)俗有關(guān)，比如我們會(huì)聯(lián)想到大紅燈籠／煙花爆竹／敲鑼打鼓等等事物，所以頁面設(shè)計(jì)里使用相似的色彩搭配容易讓人感覺到相似的節(jié)日氛圍。
通常是以紅色為主色，黃色多以輔助色或點(diǎn)綴色出現(xiàn)：
2、頒獎(jiǎng)盛典
很多比較重量級(jí)的頒獎(jiǎng)典禮或音樂慶典都喜歡用金色，一來顯得活動(dòng)隆重含金量高，二來可以體現(xiàn)嘉賓和觀眾的尊貴（當(dāng)然了，這些都是美好愿景，實(shí)際是不是也要看實(shí)際情況了，而這種類型的設(shè)計(jì)在這時(shí)候起到的作用就是拔高活動(dòng)形象和活動(dòng)意義）：
3、兒童節(jié)
之前我就寫過兒童節(jié)的方向是很多的，不止是面對(duì)小兒童，還有的是面對(duì)大兒童的，雖然他們的定位方向不一樣，但頁面設(shè)計(jì)里采用鮮艷明亮的顏色搭配Q彈的充滿活力的萌物形象確實(shí)更容易激發(fā)女性的母愛／長輩的保護(hù)欲／還有成年人的童心，所以愿意為孩童或?yàn)樽约簝?nèi)心的那個(gè)孩童買買買啊~
4、美食節(jié)／吃貨節(jié)
不知道大家發(fā)現(xiàn)沒有，很多誘人的水果、零食、美食、都是黃色系的，比如橙子、柚子、面包、金黃金黃的蛋炒飯、蜂蜜、蛋糕、爆米花、蟹黃、芝麻油等等，想起來都口水直流是不是？除了實(shí)物本身就是黃色以外，還因?yàn)辄S色橙色是可以激發(fā)人的食欲和內(nèi)心躁動(dòng)不安的情緒的，所以你會(huì)看到在很多零食包裝、快餐店、美食活動(dòng)頁的設(shè)計(jì)上基本都會(huì)黃色系的運(yùn)用~目的就是為了讓你快速產(chǎn)生購買決策：
5、夏季活動(dòng)
夏天我們會(huì)想到什么？一方面是現(xiàn)實(shí)的炎炎烈日，炙熱的太陽，所以會(huì)想到橙色的太陽，但是另一方面是期待的酷爽、冰鎮(zhèn)的感覺，我們會(huì)想到海灘和冰塊、檸檬茶等等，所以當(dāng)然也有一部分人喜歡用藍(lán)色去提現(xiàn)清爽，最后也有人將兩者結(jié)合起來，打造冰火對(duì)決的感覺~
6、賣場促銷
商場做促銷活動(dòng)／電商平臺(tái)或店鋪?zhàn)龃蟠俚臅r(shí)候，比如雙十一／雙12／618等，幾乎都缺不了黃色，無論是作為主色還是作為輔助色點(diǎn)綴色出現(xiàn)（主色為占面積最大的顏色，其他占比相對(duì)較小的顏色則為輔助色或點(diǎn)綴色）。
7、體現(xiàn)潮流時(shí)尚
黃色作為一種非常醒目的顏色，給人一種尖銳個(gè)性張揚(yáng)的感覺，所以也深得潮流時(shí)尚類型設(shè)計(jì)的偏愛~
8、突出強(qiáng)調(diào)某個(gè)重要信息
黃色也常用來作為輔助色或點(diǎn)綴色，用來突出強(qiáng)調(diào)某個(gè)重要信息的，比如突出強(qiáng)調(diào)利益點(diǎn)／購買按鈕等信息：
如果產(chǎn)品本身就是黃色時(shí)常常會(huì)與黃色相關(guān)的物品或背景聯(lián)系起來，充滿趣味和創(chuàng)意：
三、與黃色有關(guān)的常用色彩搭配有哪些？
黃色是很張揚(yáng)、活力、刺激的顏色，是中性色（也有人說它是暖色），也是一種百搭色，基本與任何顏色都有一腿~那么今天我就給大家例舉一些常用的優(yōu)秀的黃色系色彩與其它顏色的搭配好了。
舉幾個(gè)例子：
運(yùn)用在大量留白的簡潔無彩色背景上，整體畫面都會(huì)顯得非常干凈通透。
高明度低飽和度的顏色搭配嫩黃色，少女心滿滿的，特別適合針對(duì)少女心定位的頁面設(shè)計(jì)~
在藍(lán)色系大背景里，只需一點(diǎn)黃就能成為焦點(diǎn)，因?yàn)樗{(lán)黃是對(duì)比色（120度角），所以在頁面里常作為重點(diǎn)信息突出展示~
雖然同樣是藍(lán)黃搭配，但是在不同的藍(lán)色系里，整體呈現(xiàn)出的感覺是不一樣的，藍(lán)色越暗，黃色越突出，整體越刺激眼球。
同上~
黃色系作為大背景的時(shí)候，整體畫面相較于上面的藍(lán)色紫色背景更加溫暖有食欲~這種顏色搭配適合用在食品類或者熱鬧促銷或兒童玩具等需要體現(xiàn)活潑熱鬧的頁面上~
在低明度高飽和度的多彩色彩環(huán)境里，黃色也很容易脫穎而出~不過這種顯色搭配相較于前面提到的幾種都略顯沉悶，用不好的話會(huì)顯臟，用得好也不會(huì)感覺很高級(jí)，適合中低端定位的產(chǎn)品或頁面設(shè)計(jì)。
依然是黃色做大背景，暖色為主，點(diǎn)綴少量冷色~這種色彩比例搭配比上圖看起來更加愉悅~
大面積黃色或同色系做背景，僅點(diǎn)綴少量對(duì)比色或互補(bǔ)色，來突出想重點(diǎn)展示的信息，整體看起來干凈舒服～
下圖雖然都是不同明度純度黃色系和藍(lán)色系的色彩搭配，但是前者明度高純度高，所以顯得有精神氣兒，后者明度低純度低則顯得更佳復(fù)古懷舊~
下圖的顏色搭配也都是比較有年代感的~但前者感覺更有親和力~因?yàn)榕嫡急缺容^大。
下圖的暗調(diào)子的番茄炒雞蛋的紅黃搭配容易給人一種復(fù)古溫暖的感覺，但為了畫面不至于太膩歪，最好是像右圖一樣搭配一點(diǎn)冷色或暗色比較耐看，把控好色彩比例既可以做出高端的感覺，也可以做出低價(jià)促銷的感覺。
有幾張黃色的日本海報(bào)設(shè)計(jì)也挺不錯(cuò)～
還有一點(diǎn)要說明的是，黃色跟紅色一樣，或者說任何顏色，它運(yùn)用于不同的形式載體／紋理材質(zhì)／周圍情境時(shí)，所傳遞的感受是不一樣的，這個(gè)我在之前的一篇講解紅色運(yùn)用的文章里已經(jīng)舉例說明過。
那么它們具體運(yùn)用在電商設(shè)計(jì)里是什么樣一個(gè)情況呢？我在花瓣找了一些還不錯(cuò)的運(yùn)用了黃色的頁面給大家看看下（我以自己的語言給大家分析一下，感謝所有設(shè)計(jì)者，分析的不對(duì)的地方還望指正）：
左邊是借鑒了蒙德里安的紅黃藍(lán)印象派風(fēng)格的不走尋常路的時(shí)尚類型頁面，右邊是典型的為了激發(fā)消費(fèi)者食欲和提醒熱鬧氛圍的促銷型頁面設(shè)計(jì)：
左邊是明亮活力的色彩搭配加上手繪點(diǎn)綴，營造出的是比較活潑搞怪風(fēng)格的頁面設(shè)計(jì)，右邊雖然是以紅黃搭配為主，但是因?yàn)槠浔馄交脑O(shè)計(jì)風(fēng)格加上趣味圖形點(diǎn)綴所以讓頁面看起來也比較年輕化，不會(huì)太老氣，所以紅黃色搭配好也是個(gè)技術(shù)活啊~
雖然左右兩個(gè)頁面色彩比例大不一樣，但都是可愛手繪趣味路線的，只是黃色或暖色的面積越大，畫面就越活潑越有親和力~
下面2個(gè)頁面的色彩搭配和質(zhì)感紋理都帶有一點(diǎn)復(fù)古的味道，不過右邊色彩純度更高，更顯少女一些，符合產(chǎn)品類別需要~
左邊頁面玫紅／黃橙／天藍(lán)色的豐富色彩搭配配合趣味手繪，整體好玩有活力，適合孩童相關(guān)產(chǎn)品的活動(dòng)頁面設(shè)計(jì)，右邊扁平簡潔，配色干凈，非常日系。
左邊也是兒童相關(guān)物品的活動(dòng)頁設(shè)計(jì)，色彩比較豐富，黃色在這里顯得非常亮眼，提升了整體的活躍氛圍，右邊的色彩搭配和風(fēng)格形式走的是復(fù)古路線，體現(xiàn)年代感，不過這里的色彩和質(zhì)感不如前面幾個(gè)頁面的復(fù)古味逼真~
左邊的簡潔時(shí)尚頁面，黃色只是做點(diǎn)綴色氛圍需要出現(xiàn)一下～右邊香檳金搭配暗紅色背景雖然很搶眼，但是卻不突兀~大概是因?yàn)榻z帶這類物品本來裝飾性就很強(qiáng)~
發(fā)現(xiàn)紅黃藍(lán)是最常出現(xiàn)的顏色搭配，只是簡單改一下明度或純度就可以打造不同的感覺了，如左邊專題所示，右邊米黃色大背景和整體低純度低飽和度的配色則顯得有年代感，充滿回憶~
金色常與盛典聯(lián)系起來，如左圖所示，右圖我好像放重復(fù)了，哈哈哈先這樣吧
左圖又是明亮的黃藍(lán)搭配，一看就是與兒童相關(guān)的活動(dòng)頁面設(shè)計(jì)，右圖黃白黑搭配色彩非常簡潔，但是搭配小巧玲瓏的手繪，卻顯得畫面非常生動(dòng)不單調(diào)，有一種萌萌噠的感覺~
黃黑搭配，高冷又不單調(diào)，頁面風(fēng)格比較男性化～
好了，我先整理這么多吧，你們可以根據(jù)自己的理解需要來學(xué)習(xí)別人的長處。
四、黃色的使用禁忌或注意事項(xiàng)有哪些？
1、黃色跟紅色一樣，作為暖色運(yùn)用在頁面里的時(shí)候，畫面里切勿全都是暖色系搭配，適當(dāng)加入一些冷色點(diǎn)綴或無彩色（黑白灰）調(diào)和可以緩解視覺疲勞；
藍(lán)色系＋金色＋黑白灰的組合也非常漂亮~
2、無論何種顏色，它在整個(gè)畫面里的占比都是根據(jù)設(shè)計(jì)需要而決定的，而不是瞎搞，比如，無論你是要弱化某一個(gè)信息還是突出某一個(gè)信息，都可以根據(jù)選擇顏色和控制它的比例大小來實(shí)現(xiàn)，講直白點(diǎn)就是要懂得運(yùn)用對(duì)比和烘托的手法；
對(duì)比：
烘托氛圍：
對(duì)比和烘托：
3、在黃色背景上做陰影圖層時(shí)，切勿直接用無彩色灰色或黑色進(jìn)行正片疊底混合模式（如圖1），這樣做出來的陰影看起來會(huì)很臟，而應(yīng)該用添加了灰色或黑色的黃色進(jìn)行正片疊底混合模式（如圖2），這樣做出來的陰影干凈又通透：
（圖1）
（圖2）
不信大家可以對(duì)比看下陰影1VS陰影2的效果，你們自己也可以試試，很多人平時(shí)做的圖看起來很臟，往往就是這些細(xì)節(jié)原因?qū)е碌摹?/p>
4、不要在淺色背景上用高明度或高純度的檸檬黃做重點(diǎn)文字信息的顏色（如果是裝飾或點(diǎn)綴用就無所謂了），因?yàn)楦揪涂床磺澹ㄈ缦聢D所示），我前幾天還看到有一個(gè)比較知名的平臺(tái)的某個(gè)界面設(shè)計(jì)里居然就犯了這種錯(cuò)誤，著實(shí)不應(yīng)該啊。
5、如果面對(duì)的客戶是思想比較傳統(tǒng)保守或信風(fēng)水的老版，則切勿使用黃色作為主色，一方面顯得太過張揚(yáng)不嚴(yán)肅，另一方面寓意不太吉利，因?yàn)槲覀內(nèi)粘Ｖ谐Ｓ小斑@事兒可別黃了”這么個(gè)說話，比如你看哪個(gè)國企單位或者政府機(jī)構(gòu)的網(wǎng)站設(shè)計(jì)用黃色了？最多也就用金色或偏點(diǎn)紅的暗色系。
說到這個(gè)，我想起剛畢業(yè)那會(huì)兒，給朋友的朋友做了一個(gè)汽車logo，當(dāng)時(shí)我根據(jù)自己的想法做出來后，個(gè)人還比較滿意，特地用rhino渲染出來的，一款比較man比較硬朗的汽車logo，但是客戶看了之后回復(fù)說，這logo看起來像一個(gè)“X”，叉叉這個(gè)形狀感覺不吉利。。。然后就沒有然后了，可是你看馬斯克的space－X不是很酷嘛？所以適不適合還是要因人而異了（當(dāng)然，最后他也沒給我支付一分錢報(bào)酬，過去的坑誰還沒踩過幾個(gè)呢）。
今天就分享到這里吧，這里是《做設(shè)計(jì)的面條》，一個(gè)懂生活的電商號(hào)，我們下期再見！~
做設(shè)計(jì)的面條 微信號(hào)：TTTink-D
轉(zhuǎn)載請(qǐng)?jiān)谖恼麻_頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請(qǐng)聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請(qǐng)至數(shù)英微信公眾號(hào)(ID: digitaling) 后臺(tái)授權(quán)，侵權(quán)必究。
評(píng)論
評(píng)論
推薦評(píng)論
全部評(píng)論（3條）