近幾年來，網際網路企業對於UI設計師的需求量更是不斷增加，吸引了很多年輕人往UI設計的道路上發展。對於UI設計初入門的新手來說，光是UI設計裡面的顏色搭配都夠頭疼很久!今天，千鋒就簡單教大家一些關於UI設計中的顏色搭配知識點以及小技巧!千萬不要錯過!

　　首先，保持色彩組合簡潔有助於改善使用者體驗。一個簡潔的配色方案不會使人眼花繚亂，並且使你的內容更容易被理解。相反，在太多的地方有太多的色彩很容易搞砸設計。多倫多大學關於人們如何使用Adobe Color CC的研究顯示大多數人更傾向於僅依賴2-3種色彩的簡單色彩組合。

　　1.單色配色

　　單色方案是最易於建立的配色方案，因為每種色彩取自相同的基色。單色的色彩可以很好地結合在一起，產生和諧的效果。

　　2.相近色

　　相近色的配色方案是選取相互不衝突的的相關色彩。一種色彩用作主色，而其它色彩用於豐富該方案。

　　3.補色搭配

　　互補色是色環上兩個正對立的顏色。它們對比強烈，可以用來吸引觀眾的注意力。 當使用互補色方案時，重要的是選擇主色並且使用其互補色用於強調。 例如，當人眼看到一塊不同色調的綠色物體時，一點紅色就會很突出。但是你必須謹慎使用互補色，以防止你的內容在視覺上顯得不和諧。

　　4.自定義配色方案

　　建立自己的配色方案不像許多人想象的那麼複雜。最簡單的方法就是將一個明亮的主色新增到一堆中性色中，這也是一個最能引起視覺衝擊的方案。

　　懂得了UI設計中的配色小技巧，也有利於後期設計工作的展開。無論是banner設計還是繪圖，絕佳的顏色搭配都能更好的勾動使用者的心。

很多新手在剛接觸UI設計的時候，會覺得色彩的搭配掌握起來並不難，但是當你深入瞭解後，會發現其中有很多知識點與技巧需要我們去學習。在瞭解UI色彩的配色方案前，我們首先要知道顏色的屬性與型別：

一、顏色屬性：

1、色調 色調是指影象的相對明暗程度，在彩色影象上表現為顏色

2、值 值是一個顏色如何光明或黑暗的屬性，特徵由白度定義，色調越白，值越高

3、色度 即色調的純度，該特徵是透過白色、灰色或黑色的存在來衡量的，色度高的顏色通常看起來大膽而生動

4、飽和度 飽和度指的是色彩純度，是色彩的構成要素之一，純度越高，表現越鮮明，純度較低，表現則較黯淡。這個特性與值和色度有許多共同之處，但與之前的兩個屬性不同，飽和度是根據它在光線下的顏色來描述顏色的大膽或蒼白。該屬性也被稱為顏色的強度。

二、顏色型別

1、原色 原色包括紅色、藍色、黃色，是整個系統的基礎

2、次要顏色 次要顏色就是透過兩種原色混合出的顏色

3、第三色 原色和次要顏色混合形成第三色，例如黃橙色、紅紫色等，另外，色彩學上根據心理感受，把顏色分為暖色調（紅、橙）、冷色調（綠、藍）和中性色調（紫、黃、黑、灰、白）。

三、配色方案

1、單色搭配 基於一種顏色，以色調和飽和度區分層次，單色搭配永遠是一個經典的選擇，因為這種搭配很難犯錯或作出令人反感的配色方案。

2、相鄰顏色搭配 選擇色輪上相鄰的顏色，這種型別的配色方案用於不需要對比度的UI設計，包括web端或banner背景。

3、三色搭配 當設計需要更多的顏色時，可以嘗試三色方案。它基於色輪上等距的三種不同顏色。為了畫面的平衡，建議使用一種顏色作為主導，另一種作為輔助。

4、四分色搭配 四分色配色方案適合有經驗的UI設計師，因為它是最難平衡的，它採用色輪的四種互補顏色，如果將所選顏色上的點連線起來，會形成矩形，這種方案很難平衡色彩。

5、高對比搭配 選擇色輪上對立面的顏色混合，以下方案與相鄰色和單色相反，旨在產生高對比度，灰色背景上的紅色動物非常吸睛。

6、協調對比搭配 這個方案與上一個方案類似，但是它採用了更多的顏色，例如：如果選擇藍色，則需要取其對立面中，相鄰的2個其他顏色（即黃色和紅色）。這裡的對比度不如高對比搭配那麼強烈，但它允許使用多種顏色。 總的來說，作品的配色方案對UI設計有著重大影響，使用者首先看到的是顏色，其次才是形狀、功能等。合理的色彩搭配可以巧妙地傳達作品的特徵與精髓，使你的UI設計更具生命力。

本文將分為兩個部分：

一、法則篇二、工具篇

法則篇60-30-10法則

這是一個室內設計領域中永不過時的裝飾技巧，它可以輕鬆地幫助你完成一個配色方案。60%+30%+10%的比例分配是為了平衡顏色。這個公式妙在它營造了一種平衡感，使眼睛可以舒適地從一個焦點移動到另一個焦點。同時，它也運用起來非常簡單。

60%是主色調，30%是輔助色，10%是強調色。

關注顏色的含義

幾個世紀以來，科學家一直在研究顏色的情感效應。除了創造美學，顏色也是情感和聯想的創造者。顏色的含義會根據文化和情況而有所不同。這就是為什麼你會看到黑白色的時裝店。因為他們想要表現得優雅和高階。

紅色：激情、愛、危險藍色：冷靜、負責、安全黑色：神秘、優雅、邪惡白色：純潔、安靜、乾淨綠色：新鮮、清新、自然

下圖為顏色在不同的文化下含義不同。

灰度優先

我們習慣在設計階段的早期就開始調整顏色和色調。但是，當你意識到自己花了3個小時來調整主色調的時候，你發現這種行為毫無幫助。雖然把玩顏色很有吸引力，但是你應該避免在設計初期進行這種行為。

相反地，你應該強迫自己專注調整間距和佈局元素。這種佈局的約束是非常有效的，它會為你節省很多時間。調整間距和佈局元素並不是那麼無聊。如果你想表達不一樣的東西，嘗試使用不同的色調即可。

遠離純灰色和純黑色

多年來，我學到的一個最重要的顏色技巧之一就是避免使用不帶色調的灰色。在現實生活中，純灰色幾乎是不存在的。黑色也是同樣的道理。（沒錯，事實上就是要五彩斑斕的黑）

在這張圖片中最深的顏色不純黑，而是#0A0A10

記得給你的顏色新增一些色調。使用者會下意識地覺得這類顏色更加自然和熟悉。

相信自然

最佳的色彩組合來自於大自然。它們總是看起來非常天然。根據自然環境來尋找設計方案的好處是可以擁有無數的色板，因為大自然的顏色總是在變化 。

我們只需要看看周圍，就能獲取靈感。

保持對比度

有的顏色和某些顏色搭配協調，和另一些顏色則會產生衝突。透過色輪，可以很好地觀察到顏色相互作用的規則。你應該清楚地瞭解這個方法，但是不一樣要親手去做。

獲得靈感

當我們談到UI參考的時候，Dribbble是一個很好的選擇。Dribbble也有顏色搜尋工具。所以，如果你想要針對某個特定的顏色進行視覺研究，可以前往以下網址：dribbble.com/colors

影片、印刷設計、室內設計、時尚……有很多的啟發靈感的事物。要對各種形式的色板保持靈敏的感覺，並且把看起來有趣的所有東西存下來。

我會從韓流的影片短片中獲取顏色靈感

工具篇

為了節省大家時間，下面整理了一些2017年非常好用的色板工具。它們會為你節省大量的時間。

Coolors.co

我最喜歡的顏色選擇工具。你可以簡單地鎖定顏色，並按住空格鍵生成色板。Coolors.co還支援上傳圖片，從圖片中提取色板。Coolors.co酷在，你不僅僅有一個結果，相反地，你可以透過選擇器，調整你的顏色，獲得很多配色方案。

連結（無需翻牆）：https://coolors.co/

Kuler

這款來自Adobe的工具已經陪伴我們很長時間了。它可以在瀏覽器或桌面應用中使用。如果你使用的是桌面應用程式，那你可以將配色方案匯出到Photoshop中。

連結（無需翻牆）：https://color.adobe.com/zh/create/color-wheel/

Paletton

它和前面一款工具Kuler相似。不同之處是，它不限於5種色調。當你已經確定主色調，想要調整輔助色的時候，這是一款很棒的工具。

連結（需翻牆）：http://paletton.com/

Shutterstock Lab Spectrum

你可能會問：如果我想用我選擇的顏色搜尋圖片呢？那麼，Shutterstock旗下有款叫作Spectrum的工具可以滿足你的需求，你可以透過特定的色調搜尋圖片。你甚至不需要稱為會員，因為即使是帶水印的小預覽圖片已經足以生成色板。

連結（需翻牆）：https://www.shutterstock.com/labs/spectrum/

Tineye Multicolor

如果你想搜尋照片上的色彩組合，甚至確定各個顏色的比例，那麼Tineye可以幫助你。這個網站使用的資料庫，包含了1000萬張來自Flickr的Creative Commons（知識共享，一個非營利組織）影象。

連結（無需翻牆）：https://labs.tineye.com/multicolr/

最後的想法

色彩是一個非常難以掌握的概念，特別是在數字時代。上面提到的方法和工具可以幫助你找到合適的顏色。創造令人驚歎的配色方案的最好的辦法是練習。所以開始把玩顏色吧。

作為一個設計師，UI配色不是如何去用顏色，是要根據以下幾點去用顏色

1.使用者/老闆/客戶的喜好

2.產品類目風格

3.產品的使用者人群

4.視覺感

60-30-10原則

60%+30%+10% 的比例是為了實現平衡色彩，這個公式之所以起作用，是因為它創造了一種平衡感，讓眼睛可以舒服地從一個焦點移動到另一個焦點。難得的是它的使用也非常簡單。

其中：

主色調佔60%

輔助色佔30%

重點突出顏色佔10%