編者按：我們總希望自己的設(shè)計(jì)能夠擁有不錯(cuò)的轉(zhuǎn)化率，但是高轉(zhuǎn)化率并非一蹴而就，也沒(méi)有一勞永逸的萬(wàn)能方案，一切都是要從基礎(chǔ)上著手。今天我們聊聊要做高轉(zhuǎn)化率的設(shè)計(jì)，應(yīng)當(dāng)具備哪些色彩上的基礎(chǔ)知識(shí)~

對(duì)設(shè)計(jì)師而言，色彩是最強(qiáng)有力的工具之一，不同的色彩能夠喚起用戶不同的情緒和不同的感受，這也是大家都熟知的事情。可如果你真的從零開始一個(gè)全新的設(shè)計(jì)項(xiàng)目就會(huì)發(fā)現(xiàn)，要拿出一套真正適合這個(gè)項(xiàng)目的配色方案是何其艱難。

為此，我開始著手撰寫這篇涵蓋了基礎(chǔ)色彩理論和UX規(guī)則的快速參考指南。這篇文章并非系統(tǒng)而完備的色彩設(shè)計(jì)說(shuō)明，它更接近于一份為UI和UX設(shè)計(jì)項(xiàng)目而準(zhǔn)備的色彩使用概述。

色彩理論

色彩理論中涵蓋了許多內(nèi)容，但是其中最基本的還是通過(guò)對(duì)比、互補(bǔ)和感染實(shí)現(xiàn)色彩與用戶的互動(dòng)：

·互補(bǔ)指的是我們視野中色彩和色彩之間相互補(bǔ)足的關(guān)系。選擇色輪中處于相對(duì)位置的色彩，構(gòu)成的配色方案令雙眼覺(jué)得和諧。最常見(jiàn)的互補(bǔ)配色有兩種，三元配色和復(fù)合配色，我們將稍后探討。

·對(duì)比則可以將不同的元素區(qū)分開來(lái)，從而降低視覺(jué)疲勞，構(gòu)建出視覺(jué)重心和焦點(diǎn)。元素之間的高對(duì)比度讓文字更容易被識(shí)別，引導(dǎo)用戶注意到更關(guān)鍵的信息。背景和背景之上文本的色彩選取就是一個(gè)非常常見(jiàn)的對(duì)比度的問(wèn)題，我們會(huì)隨后聊到。

·色彩對(duì)于用戶的情緒上的感染也是一個(gè)重要因素。

色輪

每次談及色彩和配色，總是繞不過(guò)色輪。色輪上每一個(gè)色彩在對(duì)稱的位置上都有一個(gè)與之“相反”的色。

色輪的功能不只是為你呈現(xiàn)出互補(bǔ)色。色輪以三原色（Primary Colors）紅、黃和藍(lán)為基礎(chǔ)，兩兩混合創(chuàng)造出次色（Secondary colors）橙色、綠色和紫色。在這六個(gè)不同的色彩的基礎(chǔ)上，加入白色能夠創(chuàng)造出不同的色調(diào)，加入黑色營(yíng)造出色度的差異。

創(chuàng)造高效的配色方案

想要構(gòu)建一套可行的配色方案，通常有三種可靠可行的配色方案：三元色（Tradic），近似色（Analogous）和復(fù)合色（Compound）。

三元色。這種配色方案是幾種配色方案中最均衡的，在色輪上選取三個(gè)位置互成120度角的三種色彩，以它們的位置為端點(diǎn)能在色輪內(nèi)畫一個(gè)等邊三角形。

通過(guò)這個(gè)等邊三角形，你能確保配色方案中的三種色彩帶來(lái)的感染力、對(duì)用戶的影響是均衡的，并且相互之間能夠形成可靠的搭配。

復(fù)合色。色輪上相互對(duì)稱位置上的色彩構(gòu)成互補(bǔ)色，而兩組相鄰互補(bǔ)色構(gòu)成的配色方案則為復(fù)合色。這兩組色彩的強(qiáng)對(duì)比是吸引用戶注意力的重要手段。

舉個(gè)例子，紅色和綠色就是一組互補(bǔ)色。iOS 中電話圖標(biāo)和右上角的數(shù)量提示標(biāo)識(shí)就很好的構(gòu)成了色彩對(duì)比。

近似色。色輪上彼此相鄰的色彩是類似色，它們能在色彩上營(yíng)造出協(xié)調(diào)而連續(xù)的感覺(jué)。雖然這種配色不是那么好把控的，但是有訣竅，就是注意選取有感染力的色調(diào)作為核心，這樣可以最大化利用整個(gè)方案。一套類似色的配色方案通常是在色輪的同一區(qū)域內(nèi)選取色彩搭配而成。

黃色和橙色就能很好的搭配出一套配色方案。

著名的任務(wù)管理類工具Clear 就是借助類似色配色方案將不同優(yōu)先級(jí)的任務(wù)視覺(jué)化的處理。

類似色配色方案能夠用來(lái)給APP或者網(wǎng)站營(yíng)造特定的情緒和氛圍。比如醫(yī)療類應(yīng)用Calm 就使用了藍(lán)色和綠色這樣的類似色配色來(lái)盡量讓用戶感到輕松和寧?kù)o。

學(xué)習(xí)搞定配色方案最好的方法就是不斷的練習(xí)。創(chuàng)造配色方案的工具很多，Adobe Color CC 無(wú)疑是相當(dāng)可靠的選擇。Color CC的調(diào)色面板非常的直觀，選中的色彩都可以進(jìn)行單獨(dú)的修改，方案制定完成之后只需簡(jiǎn)單的點(diǎn)擊幾下就能很好的保存下來(lái)。

文本色彩

當(dāng)你在為文本進(jìn)行色彩選取的時(shí)候，需知道文本和周圍的色彩如何相互之間對(duì)比度低的話，用戶是很難進(jìn)行分辨的。當(dāng)這種配色出現(xiàn)在移動(dòng)端上之時(shí)，戶外的炫光和屏幕本身的反光可能讓這種情況更加嚴(yán)重。

色彩低對(duì)比度讓用戶的眼睛無(wú)法聚焦和分辨信息。

WC3 的網(wǎng)絡(luò)內(nèi)容可訪問(wèn)性指南 能幫你更好的解決網(wǎng)頁(yè)中色彩和對(duì)比度的問(wèn)題。這份指南中規(guī)定了對(duì)比度的最低標(biāo)準(zhǔn)，確保低視力的用戶最起碼能看清文本。根據(jù)WC3的規(guī)范，文本色彩和背景之間的對(duì)比度會(huì)根據(jù)光照強(qiáng)度分為1-21總計(jì)21個(gè)不同的級(jí)別。對(duì)于正文文本和圖片文本之間，他們提出了如下的建議：

·較小的文本應(yīng)當(dāng)確保至少和背景之間有4.5:1的對(duì)比度比率
·較大的文本（14pt粗體，18pt常規(guī)）應(yīng)當(dāng)確保和背景之間的對(duì)比度超過(guò)3:1

一旦你對(duì)配色作出了選取，那么用絕大多數(shù)的常用設(shè)備來(lái)驗(yàn)證這個(gè)配色的對(duì)比度是非常有必要的。測(cè)試結(jié)果和用戶的實(shí)際體驗(yàn)是掛鉤的，如果識(shí)別度有問(wèn)題，那么應(yīng)當(dāng)作出適當(dāng)調(diào)整。

色彩對(duì)轉(zhuǎn)化率的影響

UI設(shè)計(jì)中，色彩搭配不僅僅是一種裝飾，合理的設(shè)計(jì)能夠?qū)Ξa(chǎn)品和業(yè)務(wù)產(chǎn)生直接的影響。色彩對(duì)于產(chǎn)品的轉(zhuǎn)化率而言有著諸多影響，它作用于不同的UI控件，直接地影響著用戶的交互和體驗(yàn)。而色彩對(duì)于轉(zhuǎn)化率的影響，最值得一提的應(yīng)該是行為召喚（CTA）按鈕。

一個(gè)CTA 按鈕通常牽涉到4件事情：位置，形狀，文案和色彩。如果這四個(gè)因素在設(shè)計(jì)上都能良好的配合，那么這就是一個(gè)效果良好的CTA按鈕了。在按鈕的顏色選取和轉(zhuǎn)換上的爭(zhēng)議可能是世界范圍內(nèi)爭(zhēng)吵的最多也是最常的一個(gè)問(wèn)題了。有大量的A/B 測(cè)試的測(cè)試結(jié)果顯示，CTA 按鈕的色彩變化對(duì)于注冊(cè)等交互行為有著重大的影響。HubSpot 曾經(jīng)共享過(guò)一個(gè)著名的按鈕顏色測(cè)試：

Performable 所展示的A和B兩個(gè)版本的按鈕顏色測(cè)試，頁(yè)面上的內(nèi)容都是一樣，測(cè)試的是顏色對(duì)于用戶的影響。

雖然大家都預(yù)測(cè)綠色的按鈕效果會(huì)更好，但是紅色的按鈕實(shí)際效果比綠色按鈕高了21%。

所以，同樣的道理，這樣的測(cè)試結(jié)果并不能覆蓋所有的情況。并沒(méi)有一種神奇的色彩能夠應(yīng)用于所有的網(wǎng)頁(yè)和APP，實(shí)際的情況需要根據(jù)你的受眾、基于測(cè)試來(lái)進(jìn)行選取，看看用戶會(huì)怎樣決策。

對(duì)比度是關(guān)鍵

如果你想讓用戶點(diǎn)擊某個(gè)東西，那么盡量讓它脫穎而出。如果你的網(wǎng)站或者APP中使用了大量的藍(lán)色，那么用戶可能不會(huì)立刻注意到藍(lán)色的按鈕，就像淺色的背景下，淺色的按鈕不會(huì)顯眼。用戶之所以會(huì)更傾向于CTA按鈕也是因?yàn)樗鼈儗?duì)比更明顯，會(huì)因?yàn)槭髽?biāo)懸停、點(diǎn)擊而發(fā)生狀態(tài)改變，讓人無(wú)法忽視。

結(jié)語(yǔ)

對(duì)色彩的基礎(chǔ)知識(shí)有完整而深入的理解，是做好網(wǎng)頁(yè)和APP設(shè)計(jì)的重要先決條件。這些色彩理論是做好UI設(shè)計(jì)的重要基石，提升的空間非常的大，怎么提升還是要取決于你的努力方向。不論你此刻選取的色彩是什么，它們對(duì)于整體是一定會(huì)有影響的，從對(duì)比度、協(xié)調(diào)度和對(duì)用戶情緒的感染力上，都有著直接的作用。

【技多不壓身的設(shè)計(jì)師才有高薪資！】

1. 平面設(shè)計(jì)：《超贊！設(shè)計(jì)師完全自學(xué)指南》
2. 交互設(shè)計(jì)：《交互設(shè)計(jì)師修煉指南！教你從零開始成為優(yōu)秀交互設(shè)計(jì)師》
3. UI設(shè)計(jì)：《超實(shí)用新手指南！零基礎(chǔ)如何自學(xué)UI設(shè)計(jì)？》
4. 前端開發(fā)：《天貓高手來(lái)教你！零基礎(chǔ)如何系統(tǒng)地學(xué)習(xí)前端開發(fā)？》
5. 摳圖技巧：《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》
6. 配色方案：《色彩搭配速成！3個(gè)實(shí)用方法幫你全面搞定配色》
7. DPI指南：《基礎(chǔ)知識(shí)學(xué)起來(lái)！為設(shè)計(jì)師量身打造的DPI指南》
8. 交互設(shè)計(jì)自學(xué)路徑圖：《零基礎(chǔ)入門！給非科班生的自學(xué)路徑圖之交互設(shè)計(jì)篇》

原文地址：uxplanet
原文作者：Nick Babich
優(yōu)設(shè)譯文：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請(qǐng)尊重版權(quán)和譯者成果，轉(zhuǎn)摘請(qǐng)附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量150萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com