UI設計終極配色指南

　　很多同學經常苦惱於配色水平總是難以提升，色感把握不準。今天周老師給大家分享一些配色的經驗方法，輕鬆配出好看高階的顏色!
　　要想搭配出好看的顏色，我們得先來分析一下，什麼是高階的色彩?什麼是不高階的色彩?好的配色一眼就可以看出其深厚的設計功底，而差的配色各有千秋，總之就是一個字
　　“醜”
　　下面來看兩組案例：

 

 

　　通過看圖對比我們能夠發現
　　不高階的配色組合，往往顏色種類多，且飽和度較高，比較刺眼，而高階的配色組合，往往顏色簡潔分明，不會混搭太多其它的色彩。
　　我們們就來歸納一下，高階的顏色搭配，會有哪些特徵。
　　1)色相 / 飽和度 / 明度
　　色相
　　這裡的種類指的是色相，泛指色彩的樣貌，比如紅橙黃綠青藍紫，這些都是不同的色相。
　　設計中除了顏色不宜過於飽和，顏色的種類也不宜過多。

 

 

　　飽和度
　　飽和度是色彩的純度。增加飽和度，色彩會變得更強烈、鮮豔生動;降低飽和度，色彩會變得暗淡乏味。

 

　　明度
　　除了色相和飽和度，色彩的層次關係非常重要。這個層次主要體現在兩個方面，一個方面是顏色明度的進階，不同的顏色明度，會讓頁面更具備空間感;
　　明度達到100%時，色彩就會變成白色;明度是0%時，就會變成黑色。如下圖：

 

　　通常同類顏色不同明度的設計，能讓頁面具備空間層次的同時，還能讓頁面很乾淨。但明度也不要隨意指定，最好是等比例，如20%、40%、60%、80%、100% 這樣等比例疊加就好。

 

、

 

　　2)主次分明 層級關係清晰
　　對於新人來說，最開始的時候，最好只使用一個主色，其他全是輔助色，如果你的顏色沒有主次，就很容易用亂：
　　因此設計師在做介面設計時候，應減少顏色使用數量，儘量控制3種以內，採用黃金比例——6：3：1原則去合理分配顏色。

 

　　60%+30%+10%的原則，是達到色彩平衡的最佳比例。在60%的空間使用主色，30%的空間使用輔助色，最後剩下10%的空間為另外一種色彩。這樣可以使使用者眼睛從一點移動到下一個點時，非常舒服。

 

　　如果一副畫面裡面的色彩，沒有主次之分，就好比一部電影裡沒有主角，全部都是配角，索然無味。而有了主次，馬上層級關係就會清晰明瞭。
　　3)融入無彩色
　　無彩色係指的是不包含其他任何色相，只有黑、白、灰三種顏色。

 

　　我們會發現，很多作品的顏色搭配，都不僅僅只是用了彩色，還用了一些無彩色，比如黑白灰、肉色等等，這樣可以一定程度上的中和彩色，並且豐富層次。

 

　　無彩色具有統一整體設計的多種功能。例如，將許多純度和明度參差不齊的色彩用於設計的場合，由於配色沒有一貫性，容易給人沒有整體感的印象，然而，只要背景採用白色或黑色等無彩色，將每種色彩進行區隔後，色彩看起來是各自獨立的，整體也就自然統一了。

 

摘自：https://www.aaa-cg.com.cn/ui/3007.html?seo1