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

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

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

色彩的情感

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

1. 紅色

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

2. 橙色

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

3. 黃色

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

4. 綠色

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

5. 藍(lán)色

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

6. 紫色

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

7. 粉色

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

8. 棕色

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

9. 黑色

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

10. 白色

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

UI常用配色原理

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

1. 純色

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

2. 鄰近色

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

3. 互補(bǔ)色

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

3. 三種顏色

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

4. 拆分互補(bǔ)色

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

這是一對(duì)紅藍(lán)互補(bǔ)色

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

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

單色運(yùn)用

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

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

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

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

鄰近色運(yùn)用

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

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

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

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

互補(bǔ)色運(yùn)用

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

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

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

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

兩組互補(bǔ)色運(yùn)用，很好的將LOGO的矛盾感，空間強(qiáng)加強(qiáng)，要人過目不忘。

三種顏色

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

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

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

動(dòng)手試試

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

1. 單色使用

在頁(yè)面中使用西瓜紅作為一種主色調(diào)，來強(qiáng)調(diào)品牌色和行動(dòng)點(diǎn)，整個(gè)界面會(huì)呈現(xiàn)出簡(jiǎn)約和諧的氛圍。

2. 鄰近色運(yùn)用

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

3. 互補(bǔ)色使用

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

4. 互補(bǔ)色拆分使用

這個(gè)原理其實(shí)就是互補(bǔ)色基礎(chǔ)上進(jìn)行拆分，對(duì)主要顏色增加一個(gè)輔助色，比如主要顏色紅色，藍(lán)色，那么我們?cè)黾右粋€(gè)淡粉色和淡藍(lán)色作為輔助色，它的目的讓顏色滿足更多場(chǎng)景。

5. 三種顏色使用

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

總結(jié)

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

#專欄作家#

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

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

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