今天和大家分享下界面中如何使用顏色，顏色在設計中對于我們的情緒和行為有著很大的影響，很多產品都在搶占我們內心的顏色心智，因此選擇適當?shù)念伾囊粋€產品成功很關鍵的點！

今天和大家分享下界面中如何使用顏色，顏色在設計中對于我們的情緒和行為有著很大的影響，很多產品都在搶占我們內心的顏色心智，因此選擇適當?shù)念伾囊粋€產品成功很關鍵的點！

設計師都有收藏好設計的時候，我經(jīng)常會去看我收藏的設計，當我一次又一次去看的時候，意識到有一些共同點，就是當?shù)谝谎劭匆姷臅r候，它們顏色偷走了我的心。

今天和大家分享下界面中如何使用顏色，顏色在設計中對于我們的情緒和行為有著很大的影響，很多產品都在搶占我們內心的顏色心智，因此選擇適當?shù)念伾囊粋€產品成功很關鍵的點！

色彩的情感

看過色彩心理學的同學都知道，除了美學外，顏色是情感的創(chuàng)造者，顏色的含義因文化和環(huán)境而差異化，在色彩心理學里面，不同顏色和含義是不盡相同。

1. 紅色

紅色通常與激情，熱情聯(lián)系在一起，在設計中，紅色的使用能很好的吸引用戶，我們經(jīng)常被運營或產品說這個地方按鈕要大，按鈕要紅。

2. 橙色

橙色是一種充滿活力和溫暖的顏色，能帶人興奮感以及熱情活力的感覺，如果你的產品需要帶來活力，有激情使用橙色就沒錯。

3. 黃色

黃色是比較代表幸福的顏色，大家容易聯(lián)想到陽光，歡樂和溫暖，一般黃色用的好有很潮的感覺，但是在設計中也需要注意，黃色也是很容易讓用戶有負面反應，容易感到焦慮。

4. 綠色

綠色通常代表自然，能給人和平清新的感覺，它相對其他顏色能給人更多正能量感，綠色意味著成長，再生與豐富，天貓超市品牌色就是綠色，代表著新鮮，豐富，健康的寓意。

5. 藍色

藍色給人科技感，很多IT公司也都是運用藍色當做品牌色，facebook，twitter，支付寶等等。因為藍色能帶來可靠，給用戶平靜的感受，它代表了平靜，放松，安全。

6. 紫色

紫色帶來神秘感，非常神秘的一種顏色，一般用在奢侈品或者女性產品中比較多，它代表了浪漫，奢華。

7. 粉色

粉色代表女性，代表年輕的活力，粉色比較柔軟有愛的感情，同時粉色和年輕女性氣質密切相連，因此如果你的用戶是女孩，那么粉色是一個很合適的配色。

8. 棕色

棕色，棕色常被聯(lián)想到泥土、自然、簡樸。它給人可靠感覺，一般設計中能帶來溫暖，舒適的感覺！

9. 黑色

黑色，深邃，黑色是宇宙的底色，代表安寧，與白色相反，沒有任何情感傾向，界面中盡量少用純黑。

10. 白色

白色，干凈，神圣，純潔的顏色，通常被認為是“無色”的。白色的明度最高，無色相。

UI常用配色原理

在UI中配色有哪幾種方式呢，今天教大家一些小技巧，要了解UI中配色，首先我們的知道關于顏色的幾個小知識：

1. 純色

顧名思義就是單色，一個顏色組成， 在界面中經(jīng)常通過顏色深淺冷暖對比來使用。

2. 鄰近色

相鄰的兩組顏色，色相環(huán)中相距30度，或者相隔五六個數(shù)位的兩色，為鄰近色關系，色調統(tǒng)一和諧、感情特性一致。

3. 互補色

在色相環(huán)中每一個顏色對面（180度對角）的顏色，稱為互補色，也是對比最強的色組。 把對比色放在一起，會給人強烈的排斥感，搭配不好會很山寨。

3. 三種顏色

界面中，由三種顏色組成的配色。

4. 拆分互補色

拆分互補色就是在互補色的前提下，每個互補色再增加一個同色系的顏色，比如互補色是藍色，和紅色。

▲ 這是一對紅藍互補色

▲ 在藍色和紅色基礎上，選擇一個鄰近色作為拆分互補色

以上就是色彩中常用一些搭配方式，互補色，單色，鄰近色，拆分互補色，那么界面中怎么運用呢，來看一些實際的案例

單色運用

Copper的產品設計，整個產品就采用一種配色，暖粉色，顏色年輕活潑，暖粉色很好的運用在界面的各個地方，形成統(tǒng)一的品牌認知。

蒂芙尼，整個品牌網(wǎng)站，到線下店，以及對外的宣傳，周邊包裝產品統(tǒng)一的使用著蒂芙尼藍色設計，讓這個藍色深入人心。

印象筆記的設計，從整體的網(wǎng)站設計，到界面，到引導頁面，都是講印象筆記經(jīng)典的綠色用到徹底，形成品牌色彩認知。

WalidB的插畫作品，同樣在插畫作品中，運用一個色系，通過深淺對比，來形成統(tǒng)一的風格色調，讓風格更加具有高級感，科技感。

鄰近色運用

CreativeO的圖標設計中，很好的運用鄰近色漸變，讓圖標更加富有活力和時尚感，鄰近色作為漸變運用。

一個天氣應用，同樣采用鄰近色做對比，背景底紋運用一些光暈讓界面更加生動和靈動。

Ishtiaq Khan Parag 很好的將鄰近色用在了圖標和卡片上，讓整個設計整體年輕活潑了許多。

鄰近色在很多的產品中越來越多被應用，鄰近色取品牌色周圍30度的顏色作為漸變色，我們在設計中需要注意鄰近色一定不要太大，太大會顯得不夠柔和。

互補色運用

來自MIKE的作品，互補色設計中如果用不好，界面會很山寨，互補色前面我們說了，是界面中對比最強烈的配色，我們一定要注意互補色的比例，比例一定要協(xié)調舒適。

補色在設計中，不要占比過大，一定需要有一個主色，補色作為重點去強調和突出，這組作品很好的把紅色作為補色，有點睛的效果。

互補色讓頁面更加突出文字信息內容，同時很好的講內容趨勢和圖片趨勢很好的拉好，形成了很好的沖擊感。

紅綠互補色視覺沖擊力強，很好的強調了音箱本身的質感。

兩組互補色運用，很好的將LOGO的矛盾感，空間強加強，要人過目不忘。

三種顏色

這組作品，通過三種顏色的疊加的形式，讓三元色巧妙的運用到設計中去，同時顏色疊加形成一種新的時尚感。

三種顏色運用最佳的案例當屬于谷歌，顏色的飽和度以及設計都恰當好處。

在谷歌的設計中，我們不難發(fā)現(xiàn)，它很好的將多種顏色組合在一起，不亂，同時還很平衡，這些值得我們設計師去好好領悟和學習。

動手試試

我們來拿一個案例來嘗試下我們的方法，本文案例我從素材網(wǎng)站下了一個案例來嘗試下我們今天分享的方法，單色，互補色，三個顏色，互補色拆分。

1. 單色使用

在頁面中使用西瓜紅作為一種主色調，來強調品牌色和行動點，整個界面會呈現(xiàn)出簡約和諧的氛圍。

2. 鄰近色運用

這種配色和單色用法類似，在滑塊上滑動到紅色旁邊黃色配色，作為額外的顏色。

3. 互補色使用

互補色比單色，鄰近色更加吸引用戶注意力，前面我們說了，互補色在色彩里面是對比最突出的，我們主頁面是紅色，藍色補色是我們需要強調吸引用戶注意。

4. 互補色拆分使用

這個原理其實就是互補色基礎上進行拆分， 對主要顏色增加一個輔助色，比如主要顏色紅色，藍色，那么我們增加一個淡粉色和淡藍色作為輔助色，它的目的讓顏色滿足更多場景。

5. 三種顏色使用

這個原理也是類似的，只不過我們選用了三個顏色應用在頁面中， 顏色越多越不容易駕馭，需要注意色彩之間的比例關系。

總結

顏色其實設計中最基礎的，其實也是學問最深的，每個人對顏色感受，對顏色理解都不一樣，也有很多設計工具幫助我們用好配色，后面我們再分享給大家，今天這個小小的分享，希望對你有幫助。

#專欄作家#

Sky，微信公眾號：我們的設計日記（ID：helloskys），設計交流可加微信：hellosky678，人人都是產品經(jīng)理專欄作家。支付寶體驗設計專家，阿里巴巴天貓設計專家；10年知名互聯(lián)網(wǎng)公司設計經(jīng)驗，對于產品從0到1、品牌定位、金融產品、設計規(guī)范、運營規(guī)范、大促等有豐富實戰(zhàn)經(jīng)驗。

題圖來自Unsplash，基于CC0協(xié)議