不知道有沒有小夥伴跟我一樣在做頁面配色時會很痛苦呢，很多時候都是憑感覺去配色。最近研究了一下配色方法，今天我就針對UI設計中配色設計攻略進行簡單的說明，希望能幫助到一部分小夥伴。
有個有趣的研究成果 —— 「七秒鐘定律」：人們在挑選商品和服務時 ，只需要 7 秒鐘就可以確定是否感興趣，而在這短暫的 7 秒鐘內，色彩的作用佔到了 67%。
一個設計作品呈現在用戶面前，最先進入眼帘的就是產品的視覺表現，而色彩在其中起到了很大的作用。那麼具體到實際項目中該怎樣配色呢 ?
1.色彩基礎知識
相信大家都知道，UI 色彩使用的是 RGB 模式，但是拾色器主要的選色原理遵循的是 HSB 模式，也就是色相(H)、飽和度(S)、明度(B)。
一個正確的選色過程是先確定出色相(H)，然後再在這個色相維度下選出飽和度(S)和明度(B)。
選取色相時就要用到色相環這個熟悉的朋友了，每種顏色都有自己的色彩情緒。
2.UI設計中的色彩選擇
在眾多的 UI 設計規範中，色彩一般分為：
主色：產品的核心色彩，品牌色
輔色：豐富頁面視覺和傳達效果的次要顏色
2.1 主色的選擇
主色是一個產品的品牌色，比如像淘寶的橙色、美團的黃色等。
怎麼確定一個產品的主色呢?可以從以下幾點考慮：1、產品屬性 2、行業屬性 3、用戶人群。
常見的APP主色應用：
1.綠色：主要集中在社交、學習教育、效率辦公等領域。
如：微信、豆瓣、愛奇藝、QQ 音樂、網易雲課堂、 BOSS 直聘、拉鉤招聘。
為什麼這些產品喜歡使用綠色呢?
綠色是中性色彩，沒有明顯的冷暖傾向，相對柔和，適合覆蓋用戶群體廣泛的應用程式，且無論學習辦公還是社交軟體中的界面都需要長時間閱讀，相比紅黃等色彩，柔和的綠色更為適合。
2.藍色：更多集中在工具類產品。
如：百度、QQ瀏覽器、酷狗音樂、知乎、貝殼找房、釘釘、支付寶
藍色幾乎成了工具類辦公類產品的品牌色，為什麼呢?
作為工具類產品(含辦公類)產品，效率是他們所看重的，而藍色是冷色系色彩能夠讓用戶更加冷靜，高效的完成任務。
3.紅橙色：基本集中在電商類產品中。
如：淘寶、拼多多、京東
為什麼電商類產品喜歡用暖色調呢?
暖色調給人溫暖、活躍、歡快的氣氛，符合用戶購物時的狀態，能夠刺激用戶的購買慾。
2.2 輔助色的選擇
輔助色是豐富產品的次要顏色， 除了品牌傳達外，具有更強的實用性。
選擇輔助色時可以有以下2個方法：
1、依據色相環配色：兩個顏色在色相環中角度越大，視覺差異越大，對比越強。所以在配色時，越需要被突出的顏色，可以在色環中離主色越遠，越不需要被突出的顏色靠的越近。
如攜程，UI設計中配色設計攻略https://www.aaa-cg.com.cn/ui/2583.html?gpfAPP主色是藍色，去支付按鈕是需要被重點突出的顏色，使用了主色的互補色橙色， 讓我們一眼就能看見並產生強烈的點擊欲望。
2、根據實際場景選擇
比如通知、提醒、取消用紅色;確認、同意用綠色、藍色;收藏、打分、評價用橙黃色。都是已經在用戶心智中建立了標準的用色類型，跟著常規方法來做，是沒有其它思路的情況下最簡單、最安全的輔助色選擇方式。
3.UI設計頁面中的色彩應用
3.1 主色佔比大，色彩豐富度高
主色作為頂部標題欄或其它重要模塊中的背景色進行大面積應用，
適合場景：需要加深用戶對品牌的認知和辨識度，同時產品中包含大量功能點，需要用豐富的色彩來吸引用戶關注，如 hello bike。
3.2 主色佔比大，色彩豐富度低
這類配色主色佔比大，儘量使用主題色，很少使用其他顏色。
適合場景：比較適用於圖片內容豐富的題材中，或者是相對正式、品牌感強的產品，如拉勾、酷狗音樂。
3.3 主色佔比小，色彩豐富度高
適用場景：需要突出自身帶有的服務和功能，留出更多的空間在內容模塊的展示上，如大眾點評。
3.4 主色佔比小，色彩豐富度低
適合場景：產品服務相對單一，需要用戶更加注重內容本身，會盡力避免給予用戶過多的幹擾。如新浪微博。
總結
每次配色時，我們都需要對使用哪種配色方案做出規劃，然後再動手執行。設計時做到有理有據，這樣後面的工作就會輕鬆很多了。
UI設計中投影的使用技巧
UI設計中的Feed流設計指南
UI設計中IOS和安卓的設計差異
UI設計中頂部欄的設計要點
UI設計中按鈕設計指南