今天分享我一直積累的東西，會寫成系列分享給大家，以下純干貨，請接著~

我們手機上看到的APP應(yīng)用，小程序，那這些UI界面的顏色是隨便選擇的嗎？答案肯定不是，一般大公司都會有品牌策劃，App用的顏色，有時候不僅只是一個應(yīng)用的顏色，還是對品牌的推廣，比如某貓、某狗、某拉、微信、QQ等；小公司可能只是一個顏色，但是怎么用色還是需要探討的。

很多剛?cè)胄谢蛉胄胁痪玫脑O(shè)計師，一般都會跟著設(shè)計論壇臨摹/練習那些好的用色，當然現(xiàn)在有很多配色器，可以讓你輕松配色，但你們對用色掌握了多少？可能甚至有些入行多年的設(shè)計師，由于某些原因，也是沒有掌握色彩搭配的基本原理的，但掌握了這些，對于你以后進行創(chuàng)作會有很大幫助，這里我總結(jié)了關(guān)于App和小程序UI界面設(shè)計中的色彩搭配基礎(chǔ)知識系列，今天要分享是紅色。

--{ 色彩三要素 }--

首先我們先來了解下基礎(chǔ)知識，色彩三要素有哪些？并且有什么作用？

色彩三要素包括色彩明度、飽和度和色相。如下圖：

上圖是我以正紅色畫的對比圖，都是我們上學的時候就有學過的，下面我簡單總結(jié)下：

色彩明度：即色彩的亮度或明度；顏色有深淺、明暗的變化。如上圖，當每個格子的白色增加越多，則明度越高，當黑色增加越多，則明度越低。

色相：即是色調(diào)。我們都知道三原色有紅、黃、藍，復合光色有紅、橙、黃、綠、藍、靛、紫（一些光給人以溫暖的感覺，通常稱為暖光，其中，綠色和紫色是介于暖色系和冷色系中間。）

飽和度：也就是純度，通常是指色彩的鮮艷度，純度越高，顏色越鮮艷。

UI界面設(shè)計時，可以通過對相同的色彩，運用不同的明度、飽和度和色相進行調(diào)色，給人感覺是不一樣的。這其中的搭配還涉及到互補色和類似色的運用，在這里簡單描述下分別是什么意思：

互補色：簡單來說，是色輪上大概相差180度角的位置，兩種色塊放一起，會引起強烈對比的色覺，會感到紅的更紅、綠的更綠。比如：紅—青、黃—藍、紅—綠。

類似色：在色輪上大概90度角內(nèi)相鄰接的色統(tǒng)稱為類似色，例如紅－紅橙－橙、黃－黃綠－綠、青－青紫－紫等均為類似色。相對來說，色相差別會比較弱，請看下圖：

如上圖，我們可以看到，當我們大面積使用紅色的時候，白色、灰色背景的舒適度要好些。黑色、互補色、冷色調(diào)作為背景時對比比較強烈，但黑色跟紅色搭配比其他兩個舒適些；互補色作為背景，紅色邊上會有虛化的感覺，對比很強烈；冷色調(diào)比如上圖用的藍色作為背景色，對比也較明顯，但是看上去比較突兀。最后一個類似色，我用了橙色作為背景色，因為太相近的顏色，紅色表現(xiàn)得不明顯。所以，我們設(shè)計的時候，用什么顏色和紅色一起搭配會讓界面舒服好看，下面我給大家細細道來。

--{ 這些紅色-你都會用嗎？}--

我們不難發(fā)現(xiàn)，基本上的購物App和小程序界面都喜歡用暖色系，其中紅色做為主色調(diào)的居多，作為最刺激人類情感的的色彩，我們怎么在UI界面中使用合適？

首先，我們先來看一張圖

如上圖，我們生活中有很多是紅色的場景、事物，不同的紅色代表的寓意也不一樣。

紅色又分為：正紅、深紅、品紅、粉紅、酒紅、緋紅、洋紅、紫紅、朱紅等等，它的顏色屬性有：熱情、活潑、華麗、刺激、欲望、浪漫、喜慶、奔放和危險提醒等。可見它的應(yīng)用范圍非常廣，有柔有剛，不局限于某個領(lǐng)域，下面就按照顏色來分析使用場景，可以先看下面我根據(jù)不同的紅色，做的一個明暗深淺的對比圖。

--| 01 深紅 |--

上面的紅色對比圖可以看出，正紅色的顏色太鮮艷，不合適在應(yīng)用中大面積的使用。正紅加黑色調(diào)出來的深紅色，純度和明度都是適中的，看起來舒服些。我們常用的App里面使用深紅色的也是比較多的，給人感覺沒有正紅那么鮮艷，但又有喜慶和刺激感，視覺上比較讓人接受，這里舉3個栗子來分析。

（一）

紅色+米黃色：給人很溫柔、舒服的感覺，適合這種賣家居的場景。

網(wǎng)易的UI界面風格一直是我個人比較喜歡的，我怎么覺得應(yīng)該給我廣告費呢？(*^__^*)~上圖為嚴選的首頁，沒有像其他購物網(wǎng)站那么花哨，但是我還是在上面剁手了不少?？瓷厦娴奶崛∩?，整體色調(diào)是暖色系，深紅為主色調(diào)，輔色在主色的基礎(chǔ)上，提高明度，色彩由『熱』變『暖』，再加一個米色的類似色進行調(diào)和，沒有其他過多的顏色，不花哨，模塊分類很清晰，視覺上看著很舒服。

（二）

網(wǎng)易云音樂的UI界面也是比較舒服簡潔，它的設(shè)計和配色值得很多設(shè)計師們借鑒，看上面的3個界面的提取色，以深紅為主色，有三種配色方案：

1、紅色+黃色：紅色為主色，黃色作為點綴或突出點都行，有種喜慶的感覺，想一下我們過年掛的燈籠，中間是紅色，下面的絮絮是黃色的。

2、紅色+黑色+金色：給人比較高端、尊貴的感覺。現(xiàn)在很多商家的黑卡會員，就喜歡用黑金顏色，來打造一種尊貴感，有別于普通會員。

3、紅色+冷色系：在有大片暖色系中，運用冷色點綴，會比較突出但又不突兀。（不過是要注意用明度高些，純度適中的色相來表現(xiàn)）如上面圖一首頁banner上有個粉藍色寫著活動的標簽，會在整個界面中起到點亮提醒的作用，如果換成其他暖色系的可以嗎？我們來試試，請看下圖：

如上圖，對比會發(fā)現(xiàn)：上圖的第一張和第四張標簽的顏色會相對比較突出，但又不突兀；圖二因為banner圖上已經(jīng)有黃色，所以再用黃色作為標簽雖然畫面協(xié)調(diào)，但是不突出；圖三用主色的低純度來設(shè)計，發(fā)現(xiàn)并不突出，放在那個地方色感太弱，會被其他的紅色所覆蓋，這種顏色可以作為輔助，但沒有提亮的效果。

（三）

如上圖，今日頭條首頁的配色也是基本暖色系為主，紅色主色，黃色輔助，由于這里是新聞咨詢類的App，圖片的顏色是無法完全控制的，所以這里圖片顏色先忽略不計，但我們在做UI高保真圖的時候，還是建議找的圖片顏色，要能跟界面顏色協(xié)調(diào)的，這樣還能幫助你快速通稿哦~

這里還用了一種配色方案：

紅色+復合光色：用于首頁、個人中心等頁面需要用多個顏色來區(qū)分功能/指引的作用，則選擇和復合光色配合使用。（但應(yīng)注意選擇明度高、純度適中的顏色，讓整個頁面有顏色的部分突出的同時，不會覺得突兀。）復習下上面提到的復合光色有：紅、橙、黃、綠、藍、靛、紫，那紅色作為主色了，其他顏色就可以相應(yīng)的作為輔助色使用。（如上面圖二）

圖二中，我發(fā)現(xiàn)最后一個綠色的明度和純度跟其他的不一樣，那我嘗試把綠色的明度調(diào)成跟其他三個接近，看看效果如何：

如上圖，當右圖修改后的綠色，是跟前面三個接近的明度和純度，跟上面的紅色按鈕剛好是互補色，形成了強烈的對比，此時兩個顏色都很顯眼，但這個界面明顯是要強調(diào)和突出登錄按鈕的，修改的那個綠色明顯是不合適。原圖中的綠色圖標，跟其他三個相比，把明度降低，純度提高了，界面看起來也是和諧了很多。所以，我們在設(shè)計過程中，需要動態(tài)的調(diào)整對顏色的取值，最終是讓界面看起來平衡協(xié)調(diào)。

顏色的確實有很多內(nèi)容要寫，今天先分享到這里，還有其他紅色的用法下一期再繼續(xù)分享給大家，希望對你們有幫助~