設計師都有收藏好設計的時候，我經常會去看我收藏的設計，當我一次又一次去看的時候，意識到有一些共同點，就是當第一眼看見的時候，他們顏色偷走了我的心。
今天和大家分享下界面中如何使用顏色，顏色在設計中對於我們的情緒和行為有著很大的影響，很多產品都在搶佔我們內心的顏色心智，因此選擇適當的顏色的一個產品成功很關鍵的點！
色彩的情感
看過色彩心理學的同學都知道，除了美學外，顏色是情感的創造者，顏色的含義因文化和環境而差異化，在色彩心理學裡面，不同顏色和含義是不盡相同。
紅色
紅色通常與激情，熱情聯繫在一起，在設計中，紅色的使用能很好的吸引用戶，我們經常被運營或產品說這個地方按鈕要大，按鈕要紅。
橙色
橙色是一種充滿活力和溫暖的顏色，能帶人興奮感以及熱情活力的感覺，如果你的產品需要帶來活力，有激情使用橙色就沒錯。
黃色
黃色是比較代表幸福的顏色，大家容易聯想到陽光，歡樂和溫暖，一般黃色用的好有很潮的感覺，但是在設計中也需要注意，黃色也是很容易讓用戶有負面反應，容易感到焦慮。
綠色
綠色通常代表自然，能給人和平清新的感覺，它相對其他顏色能給人更多正能量感，綠色意味著成長，再生與豐富，天貓超市品牌色就是綠色，代表著新鮮，豐富，健康的寓意。
藍色
藍色給人科技感，很多IT公司也都是運用藍色當做品牌色，facebook，twitter，支付寶等等。因為藍色能帶來可靠，給用戶平靜的感受，它代表了平靜，放鬆，安全。
紫色
紫色帶來神秘感，非常神秘的一種顏色，一般用在奢侈品或者女性產品中比較多，它代表了浪漫，奢華。
粉色
粉色代表女性，代表年輕的活力，粉色比較柔軟有愛的感情，同時粉色和年輕女性氣質密切相連，因此如果你的用戶是女孩，那麼粉色是一個很合適的配色。
棕色
棕色，棕色常被聯想到泥土、自然、簡樸。它給人可靠感覺，一般設計中能帶來溫暖，舒適的感覺！
黑色
黑色，深邃，黑色是宇宙的底色，代表安寧，與白色相反，沒有任何情感傾向，界面中儘量少用純黑。
白色
白色，乾淨，神聖，純潔的顏色，通常被認為是“無色”的。白色的明度最高，無色相。
UI常用配色原理
在UI中配色有哪幾種方式呢，今天教大家一些小技巧，要了解UI中配色，首先我們的知道關於顏色的幾個小知識：
純色
顧名思義就是單色，一個顏色組成，在界面中經常通過顏色深淺冷暖對比來使用。
鄰近色
相鄰的兩組顏色，色相環中相距30度，或者相隔五六個數位的兩色 ，為鄰近色關係，色調統一和諧、感情特性一致。
互補色
在色相環中每一個顏色對面（180度對角）的顏色，稱為互補色，也是對比最強的色組。把對比色放在一起，會給人強烈的排斥感，搭配不好會很山寨。
三種顏色
界面中，由三種顏色組成的配色。
▲ 這是一對紅藍互補色
▲ 在藍色和紅色基礎上，選擇一個鄰近色作為拆分互補色
拆分互補色
拆分互補色就是在互補色的前提下，每個互補色再增加一個同色系的顏色，比如互補色是藍色，和紅色。
以上就是色彩中常用一些搭配方式，互補色，單色，鄰近色，拆分互補色，那麼界面中怎麼運用呢，來看一些實際的案例
單色運用
▲ Copper的產品設計，整個產品就採用一種配色，暖粉色，顏色年輕活潑，暖粉色很好的運用在界面的各個地方，形成統一的品牌認知。
▲ 蒂芙尼，整個品牌網站，到線下店，以及對外的宣傳，周邊包裝產品統一的使用著蒂芙尼藍色設計，讓這個藍色深入人心。
▲ 印象筆記的設計，從整體的網站設計，到界面，到引導頁面，都是講印象筆記經典的綠色用到徹底，形成品牌色彩認知。
▲ WalidB的插畫作品，同樣在插畫作品中，運用一個色系，通過深淺對比，來形成統一的風格色調，讓風格更加具有高級感，科技感。
鄰近色運用
▲ CreativeO的圖標設計中，很好的運用鄰近色漸變，讓圖標更加富有活力和時尚感，鄰近色作為漸變運用。
▲ 一個天氣應用，同樣採用鄰近色做對比，背景底紋運用一些光暈讓界面更加生動和靈動。
▲ Ishtiaq Khan Parag 很好的將鄰近色用在了圖標和卡片上，讓整個設計整體年輕活潑了許多。
▲ 鄰近色在很多的產品中越來越多被應用，鄰近色取品牌色周圍30度的顏色作為漸變色，我們在設計中需要注意鄰近色一定不要太大，太大會顯得不夠柔和。
互補色運用
▲ 來自MIKE的作品，互補色設計中如果用不好，界面會很山寨，互補色前面我們說了，是界面中對比最強烈的配色，我們一定要注意互補色的比例，比例一定要協調舒適。
▲ 補色在設計中，不要佔比過大，一定需要有一個主色，補色作為重點去強調和突出，這組作品很好的把紅色作為補色，有點睛的效果。
▲ 互補色讓頁面更加突出文字信息內容，同時很好的講內容趨勢和圖片趨勢很好的拉好，形成了很好的衝擊感。
▲ 紅綠互補色視覺衝擊力強，很好的強調了音箱本身的質感。
▲ 兩組互補色運用，很好的將LOGO的矛盾感，空間強加強，要人過目不忘。
三種顏色
▲ 這組作品，通過三種顏色的疊加的形式，讓三元色巧妙的運用到設計中去，同時顏色疊加形成一種新的時尚感。
▲ 三種顏色運用最佳的案例當屬於谷歌，顏色的飽和度以及設計都恰當好處。
▲ 在谷歌的設計中，我們不難發現，它很好的將多種顏色組合在一起，不亂，同時還很平衡，這些值得我們設計師去好好領悟和學習。
動手試試
我們來拿一個案例來嘗試下我們的方法，本文案例我從素材網站下了一個案例來嘗試下我們今天分享的方法，單色，互補色，三個顏色，互補色拆分。
單色使用
在頁面中使用西瓜紅作為一種主色調，來強調品牌色和行動點，整個界面會呈現出簡約和諧的氛圍。
鄰近色運用
這種配色和單色用法類似，在滑塊上滑動到紅色旁邊黃色配色，作為額外的顏色。
互補色使用
互補色比單色，鄰近色更加吸引用戶注意力，前面我們說了，互補色在色彩裡面是對比最突出的，我們主頁面是紅色，藍色補色是我們需要強調吸引用戶注意。
互補色拆分使用
這個原理其實就是互補色基礎上進行拆分，對主要顏色增加一個輔助色，比如主要顏色紅色，藍色，那麼我們增加一個淡粉色和淡藍色作為輔助色，它的目的讓顏色滿足更多場景。
三種顏色使用
這個原理也是類似的，只不過我們選用了三個顏色應用在頁面中，顏色越多越不容易駕馭，需要注意色彩之間的比例關係。
總結
顏色其實設計中最基礎的，其實也是學問最深的，每個人對顏色感受，對顏色理解都不一樣，也有很多設計工具幫助我們用好配色，後面我們再分享給大家，今天這個小小的分享，希望對你有幫助。
聲明：本內容來源於互聯網,版權歸原作者所有,供學習交流使用,嚴禁商用,如有侵權請聯繫我們刪除。
- END -
福利互動：
1、轉發並私信“777”
2、關注我頭條號私信“777”無套路免費領取一套無版權可商用色卡
