對設計師而言，色彩是最強有力的工具之一，不同的色彩能夠喚起使用者不同的情緒和不同的感受，這也是大家都熟知的事情。可如果你真的從零開始一個全新的設計專案就會發現，要拿出一套真正適合這個專案的配色方案是何其艱難。
為此，我開始著手撰寫這篇涵蓋了基礎色彩理論和UX規則的快速參考指南。這篇文章並非系統而完備的色彩設計說明，它更接近於一份為UI和UX設計專案而準備的色彩使用概述。
色彩理論
色彩理論中涵蓋了許多內容，但是其中最基本的還是通過對比、互補和感染實現色彩與使用者的互動：
·互補指的是我們視野中色彩和色彩之間相互補足的關係。選擇色輪中處於相對位置的色彩，構成的配色方案令雙眼覺得和諧。最常見的互補配色有兩種，三元配色和複合配色，我們將稍後探討。
·對比則可以將不同的元素區分開來，從而降低視覺疲勞，構建出視覺重心和焦點。元素之間的高對比度讓文字更容易被識別，引導使用者注意到更關鍵的資訊。背景和背景之上文字的色彩選取就是一個非常常見的對比度的問題，我們會隨後聊到。
·色彩對於使用者的情緒上的感染也是一個重要因素。
色輪
每次談及色彩和配色，總是繞不過色輪。色輪上每一個色彩在對稱的位置上都有一個與之“相反”的色。
色輪的功能不只是為你呈現出互補色。色輪以三原色（Primary Colors）紅、黃和藍為基礎，兩兩混合創造出次色（Secondary colors）橙色、綠色和紫色。在這六個不同的色彩的基礎上，加入白色能夠創造出不同的色調，加入黑色營造出色度的差異。
創造高效的配色方案
想要構建一套可行的配色方案，通常有三種可靠可行的配色方案：三元色（Tradic），近似色（Analogous）和複合色（Compound）。
三元色。這種配色方案是幾種配色方案中最均衡的，在色輪上選取三個位置互成120度角的三種色彩，以它們的位置為端點能在色輪內畫一個等邊三角形。
通過這個等邊三角形，你能確保配色方案中的三種色彩帶來的感染力、對使用者的影響是均衡的，並且相互之間能夠形成可靠的搭配。
複合色。色輪上相互對稱位置上的色彩構成互補色，而兩組相鄰互補色構成的配色方案則為複合色。這兩組色彩的強對比是吸引使用者注意力的重要手段。
舉個例子，紅色和綠色就是一組互補色。iOS 中電話圖示和右上角的數量提示標識就很好的構成了色彩對比。
近似色。色輪上彼此相鄰的色彩是類似色，它們能在色彩上營造出協調而連續的感覺。雖然這種配色不是那麼好把控的，但是有訣竅，就是注意選取有感染力的色調作為核心，這樣可以最大化利用整個方案。一套類似色的配色方案通常是在色輪的同一區域內選取色彩搭配而成。
黃色和橙色就能很好的搭配出一套配色方案。
著名的任務管理類工具Clear 就是藉助類似色配色方案將不同優先順序的任務視覺化的處理。
類似色配色方案能夠用來給APP或者網站營造特定的情緒和氛圍。比如醫療類應用Calm 就使用了藍色和綠色這樣的類似色配色來儘量讓使用者感到輕鬆和寧靜。
學習搞定配色方案最好的方法就是不斷的練習。創造配色方案的工具很多，Adobe Color CC 無疑是相當可靠的選擇。Color CC的調色皮膚非常的直觀，選中的色彩都可以進行單獨的修改，方案制定完成之後只需簡單的點選幾下就能很好的儲存下來。
文字色彩
當你在為文字進行色彩選取的時候，需知道文字和周圍的色彩如何相互之間對比度低的話，使用者是很難進行分辨的。當這種配色出現在移動端上之時，戶外的炫光和螢幕本身的反光可能讓這種情況更加嚴重。
色彩低對比度讓使用者的眼睛無法聚焦和分辨資訊。
WC3 的網路內容可訪問性指南 能幫你更好的解決網頁中色彩和對比度的問題。這份指南中規定了對比度的最低標準，確保低視力的使用者最起碼能看清文字。根據WC3的規範，文字色彩和背景之間的對比度會根據光照強度分為1-21總計21個不同的級別。對於正文文字和圖片文字之間，他們提出瞭如下的建議：
·較小的文字應當確保至少和背景之間有4.5:1的對比度比率
·較大的文字（14pt粗體，18pt常規）應當確保和背景之間的對比度超過3:1
一旦你對配色作出了選取，那麼用絕大多數的常用裝置來驗證這個配色的對比度是非常有必要的。測試結果和使用者的實際體驗是掛鉤的，如果識別度有問題，那麼應當作出適當調整。
色彩對轉化率的影響
UI設計中，色彩搭配不僅僅是一種裝飾，合理的設計能夠對產品和業務產生直接的影響。色彩對於產品的轉化率而言有著諸多影響，它作用於不同的UI控制元件，直接地影響著使用者的互動和體驗。而色彩對於轉化率的影響，最值得一提的應該是行為召喚（CTA）按鈕。
一個CTA 按鈕通常牽涉到4件事情：位置，形狀，文案和色彩。如果這四個因素在設計上都能良好的配合，那麼這就是一個效果良好的CTA按鈕了。在按鈕的顏色選取和轉換上的爭議可能是世界範圍內爭吵的最多也是最常的一個問題了。有大量的A/B 測試的測試結果顯示，CTA 按鈕的色彩變化對於註冊等互動行為有著重大的影響。HubSpot 曾經共享過一個著名的按鈕顏色測試：
Performable 所展示的A和B兩個版本的按鈕顏色測試，頁面上的內容都是一樣，測試的是顏色對於使用者的影響。
雖然大家都預測綠色的按鈕效果會更好，但是紅色的按鈕實際效果比綠色按鈕高了21%。
所以，同樣的道理，這樣的測試結果並不能覆蓋所有的情況。並沒有一種神奇的色彩能夠應用於所有的網頁和APP，實際的情況需要根據你的受眾、基於測試來進行選取，看看使用者會怎樣決策。
對比度是關鍵
如果你想讓使用者點選某個東西，那麼儘量讓它脫穎而出。如果你的網站或者APP中使用了大量的藍色，那麼使用者可能不會立刻注意到藍色的按鈕，就像淺色的背景下，淺色的按鈕不會顯眼。使用者之所以會更傾向於CTA按鈕也是因為它們對比更明顯，會因為滑鼠懸停、點選而發生狀態改變，讓人無法忽視。
結語
對色彩的基礎知識有完整而深入的理解，是做好網頁和APP設計的重要先決條件。這些色彩理論是做好UI設計的重要基石，提升的空間非常的大，怎麼提升還是要取決於你的努力方向。不論你此刻選取的色彩是什麼，它們對於整體是一定會有影響的，從對比度、協排程和對使用者情緒的感染力上，都有著直接的作用。