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

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

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

色彩的情感

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

1. 紅色

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

2. 橙色

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

3. 黃色

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

4. 綠色

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

5. 藍(lán)色

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

6. 紫色

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

7. 粉色

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

8. 棕色

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

9. 黑色

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

10. 白色

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

UI常用配色原理

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

1. 純色

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

2. 鄰近色

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

3. 互補色

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

3. 三種顏色

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

4. 拆分互補色

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

這是一對紅藍(lán)互補色

在藍(lán)色和紅色基礎(chǔ)上，選擇一個鄰近色作為拆分互補色

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

單色運用

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

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

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

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

鄰近色運用

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

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

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

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

互補色運用

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

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

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

紅綠互補色視覺沖擊力強，很好的強調(diào)了音箱本身的質(zhì)感。

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

三種顏色

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

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

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

動手試試

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

1. 單色使用

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

2. 鄰近色運用

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

3. 互補色使用

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

4. 互補色拆分使用

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

5. 三種顏色使用

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

總結(jié)

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

#專欄作家#

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

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

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