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