起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識讓你的設計擁有高轉化率的配色知識簡明指南
我們總希望自己的設計能夠擁有不錯的轉化率，但是高轉化率并非一蹴而就，也沒有一勞永逸的萬能方案，一切都是要從基礎上著手。今天我們聊聊要做高轉化率的設計，應當具備哪些色彩上的基礎知識~
對設計師而言，色彩是最強有力的工具之一，不同的色彩能夠喚起用戶不同的情緒和不同的感受，這也是大家都熟知的事情?？扇绻阏娴膹牧汩_始一個全新的設計項目就會發現，要拿出一套真正適合這個項目的配色方案是何其艱難。
為此，我開始著手撰寫這篇涵蓋了基礎色彩理論和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設計的重要基石，提升的空間非常的大，怎么提 升還是要取決于你的努力方向。不論你此刻選取的色彩是什么，它們對于整體是一定會有影響的，從對比度、協調度和對用戶情緒的感染力上，都有著直接的作用。
譯文來自：優設
譯者：@陳子木
原文地址：uxplanet
原文作者：Nick Babich
?? ?? ?? ??