在設(shè)計師的工具箱里，色彩是其中一個強大的工具。毫無意外又厉，色彩可以激起不同的情緒和引起使用者的注意。但如果你曾嘗試著設(shè)計一個新的方案椎瘟，你就知道去量身定制色彩方案有多困難覆致。
一開始，我已經(jīng)撰寫了一些簡易的參考指南肺蔚，它可以涵蓋基本的色彩理論以及它如何與 ＵＸ 設(shè)計相互作用煌妈。這篇文章并不是完整的指南針對如何使用色彩在你的設(shè)計上，取而代之的是宣羊，一個針對在 ＵＩ 和 ＵＸ 設(shè)計方案中的情境下色彩理論概論璧诵。
色彩理論
事實上，色彩理論包括了一些事情仇冯，但在設(shè)計中最基本的互動為互補色（complementation）之宿，對比度（contrast），飽和度（vibrancy）:
互補色是指我們眼中的色彩與其他的顏色中的關(guān)系苛坚。選擇他們在色譜對面的顏色會使視覺上有一種和諧感比被。這里有兩個普遍使用互補色的例子：三等分色（triadic）與復(fù)合色（compound）的色彩方案，下面我們會討論泼舱。
對比色是減少眼睛疲勞和專注在使用者的注意力藉由清楚的區(qū)分屏幕上的元素等缀，元素之間的高對比度使文字易讀和引導(dǎo)讀者的注意力。最顯而易見的例子是有效的選擇背景與文字的顏色柠掂，等等你會看到项滑。
鮮明度是對色彩情緒的暗示。這個主題在Create Emotion With Color In UX Design有完整的敘述。
色環(huán)
一個色彩環(huán)或色彩輪是由一個個顏色色相構(gòu)成的枪狂，并透過一個環(huán)來闡述危喉。每一個基本色系（shade of color）都有對立的一組，你可以使用色環(huán)去找每一個特定顏色的對立色州疾。
色環(huán)中也展示出三原色（primary colors）辜限，三間色（secondary colors）和再間色（tertiary colors）。三原色（紅严蓖，黃薄嫡，藍）可以被混合去創(chuàng)造三間色（橘，綠颗胡，紫）毫深。淺色（tints）可以添加白色，和暗色（shades）可以添加黑色毒姨。
Create an Effective Color Scheme 創(chuàng)造有效的色彩計畫
以下有三種容易被接受的色彩計畫：三等分色（triadic）哑蔫，復(fù)合色（compound），類似色（Analogous colors）
三等分色：在三種結(jié)構(gòu)當中三等分色是最基本也是最平衡的弧呐。它結(jié)合了分別是色譜結(jié)尾的三種顏色闸迷。有一個非常簡單的方法去創(chuàng)造三等分色：在色環(huán)當中，選擇一個你的基本色俘枫，然后畫一個等邊三角形腥沽。三角形中的三個頂點會成為你的三等分色彩方案。
藉由使用等邊三角形邓嘹，你可以確保顏色有相同的飽和度（vibrancy）并跟彼此適當互補酣栈。
復(fù)合色：在色環(huán)中险胰，色彩對面的顏色我們稱為互補色（complementary）汹押，他們有著強烈對比，且他們被用來吸引使用者的目光起便。
舉例來說棚贾，紅色的互補色是綠色∮茏郏看一下未接來電的訊息在iOS中妙痹。互補色彩能立即讓使用者注意在重要的事件上鼻疮。
類似色：顏色在色輪當中旁邊的顏色我們稱為類似色怯伊。他們可以被用于在設(shè)計當中創(chuàng)造和諧感和延續(xù)性。雖然此方法相對簡單可以達成判沟，但是關(guān)鍵是你決定要在哪一個色彩鮮明度使用耿芹，有可能會太過喧賓奪主崭篡。相似色彩方案是根據(jù)縝密的色彩選擇在色輪當中的相同區(qū)域。
在手勢導(dǎo)向的任務(wù)管理app中琉闪，清楚地使用類似色以視覺化安排重要任務(wù)的優(yōu)先順序，以及特別指出最重要的一個（最上方的項目使用最重的顏色砸彬，當然而在比較表單下面的項目就較輕盈和隱晦）
相似色彩計畫能被用于輕盈的心情或氣氛在你的app或是網(wǎng)站當中颠毙。舉例而言，一個靜坐的app — Calm使用相似色藍跟綠去幫助使用者感到放松跟寧靜砂碉。
最佳學(xué)習(xí)創(chuàng)造出漂亮的色彩計畫是持續(xù)練習(xí)。第一次沪铭，你可以使用自動配色工具壮池。Color CC 是由 Adobe 開發(fā)的工具，提供直覺的方法去創(chuàng)造色彩調(diào)色盤杀怠。他有著直覺的介面椰憋，每一個在調(diào)色盤的顏色可以獨立編輯，最后的調(diào)色盤可以簡單地被儲存赔退。
當你在使用色彩中的顏色，請注意如果使用兩個互相明度（value）低的顏色硕旗，這會使你的文字非常不好閱讀（不管是互補色或是相似色）窗骑。這可以特別針對你的行動裝置屏幕當你的使用者在室外緊盯著屏幕時。
WC3’s Web Content Accessibility Guidelines 是一個好的起始點创译。他們建立了一個對比的極簡標準，讓使用者可以在可視度低的情況下閱讀他們的文字墙基。跟據(jù)WC3软族，顏色與背景間的對比度比例約為1:1比21:1的明度（ luminance）或是發(fā)散的強光（intensity of light emitted）之間。以下是WC3建議的主題文字與影像文字的比例：
小字相對于背景的對比度比例（contrast ratio）至少為4.5:1
大字相對于背景的對比度比例（contrast ratio）至少為3:1
只要你決定了你的顏色，向真實使用者在大部分的裝置做測試是絕對必要的初茶。如果有任何閱讀的問題在你的測試當中展現(xiàn)颗祝，那你可以確定你的使用者會有相同的問題。
色彩在轉(zhuǎn)換率上的影響
UI 設(shè)計中，色彩理論的價值多過于視覺裝飾螺戳，它可以對你的生意造成極大的影響规揪。這個段落我們會著重在 CTA （call-to-action）按鈕上。
一個 CTA 按鈕是包含四件事情：位置温峭，形狀猛铅，文字，以及顏色凤藏。如果這元素互相配合奸忽，你將會有一個好的 CTA 按鈕。按鈕顏色在轉(zhuǎn)換率優(yōu)化領(lǐng)域中是其中一個持續(xù)最久的辯論揖庄。有大量的A/B測試結(jié)果說明改變引動按鈕的顏色如何巨大的影響注冊率栗菜。舉例而言，HubSpot 分享了一個著名的按鈕顏色測試蹄梢。
雖然他們原本的預(yù)測綠色按鈕會表現(xiàn)得更好禁炒，但結(jié)果是紅色按鈕多了21％的點擊而咆。
然而，不太可能概括這些結(jié)果到所有的情形幕袱。沒有一個神奇的顏色可以一直表現(xiàn)得很好在所有的網(wǎng)頁跟 App 上暴备。所以你應(yīng)該永遠測試你使用的顏色在你的網(wǎng)頁和你的觀眾，看看會發(fā)生什么事们豌。
對比度是關(guān)鍵
如果你希望使用者按某個東西涯捻，讓他顯而易見。如果你的網(wǎng)頁或是app使用很多藍色望迎，使用者可能不會馬上注意藍色的按紐障癌，就好比淺色的按鈕不會在淺色的背景凸顯。使用者較常點擊引動按鈕在背景與其有強烈的對比下辩尊。
對于色彩使用的基本了解是網(wǎng)頁與 App 設(shè)計的先決條件涛浙。我們所討論的僅是色彩理論能如何增強你的 ＵＩ 設(shè)計的基礎(chǔ)。但是沒有任何限制你想在顏色上下多深的功夫在你的 App 上对省。不管你選了什么顏色蝗拿，一般而言晾捏，他們會有明確的影響在你的設(shè)計上 — 透過傳達對比度與熟悉度去喚起明確的情緒蒿涎。
本文由吆喝科技翻譯自Nick Babich 的：A Guide to Color and Conversion Rates?
原文鏈接：uxplanet.org/a-guide-to-color-and-conversion-rates-f3a28e8e32bb#.ex0bgoosb
