色彩與轉化率指南

色彩與轉換率指南

在設計師的工具箱里,色彩是其中一個強大的工具。毫無意外,色彩可以激起不同的情緒和引起使用者的注意。但如果你曾嘗試著設計一個新的方案,你就知道去量身定制色彩方案有多困難。

 

一開始,我已經撰寫了一些簡易的參考指南,它可以涵蓋基本的色彩理論以及它如何與 UX 設計相互作用。這篇文章并不是完整的指南針對如何使用色彩在你的設計上,取而代之的是,一個針對在 UI 和 UX 設計方案中的情境下色彩理論概論。

色彩理論

事實上,色彩理論包括了一些事情,但在設計中最基本的互動為互補色(complementation),對比度(contrast),飽和度(vibrancy):

互補色是指我們眼中的色彩與其他的顏色中的關系。選擇他們在色譜對面的顏色會使視覺上有一種和諧感。這里有兩個普遍使用互補色的例子:三等分色(triadic)與復合色(compound)的色彩方案,下面我們會討論。

對比色是減少眼睛疲勞和專注在使用者的注意力藉由清楚的區分屏幕上的元素,元素之間的高對比度使文字易讀和引導讀者的注意力。最顯而易見的例子是有效的選擇背景與文字的顏色,等等你會看到。

鮮明度是對色彩情緒的暗示。這個主題在Create Emotion With Color In UX Design有完整的敘述。

色環

一個色彩環或色彩輪是由一個個顏色色相構成的,并透過一個環來闡述。每一個基本色系(shade of color)都有對立的一組,你可以使用色環去找每一個特定顏色的對立色。


圖片來源:artsconnected

色環中也展示出三原色(primary colors),三間色(secondary colors)和再間色(tertiary colors)。三原色(紅,黃,藍)可以被混合去創造三間色(橘,綠,紫)。淺色(tints)可以添加白色,和暗色(shades)可以添加黑色。

Create an Effective Color Scheme 創造有效的色彩計畫

以下有三種容易被接受的色彩計畫:三等分色(triadic),復合色(compound),類似色(Analogous colors)

 

三等分色:在三種結構當中三等分色是最基本也是最平衡的。它結合了分別是色譜結尾的三種顏色。有一個非常簡單的方法去創造三等分色:在色環當中,選擇一個你的基本色,然后畫一個等邊三角形。三角形中的三個頂點會成為你的三等分色彩方案。

紅,黃和藍色位于120度彼此。它們可用于三元配色方案。圖片來源:TUTS +

 

藉由使用等邊三角形,你可以確保顏色有相同的飽和度(vibrancy)并跟彼此適當互補。

 

復合色:在色環中,色彩對面的顏色我們稱為互補色(complementary),他們有著強烈對比,且他們被用來吸引使用者的目光。


圖片來源:TUTS +

舉例來說,紅色的互補色是綠色。看一下未接來電的訊息在iOS中。互補色彩能立即讓使用者注意在重要的事件上。

類似色:顏色在色輪當中旁邊的顏色我們稱為類似色。他們可以被用于在設計當中創造和諧感和延續性。雖然此方法相對簡單可以達成,但是關鍵是你決定要在哪一個色彩鮮明度使用,有可能會太過喧賓奪主。相似色彩方案是根據縝密的色彩選擇在色輪當中的相同區域。

色調黃色和橙色是一個類似的配色方案的一個例子。圖片來源: TUTS +

 

在手勢導向的任務管理app中,清楚地使用類似色以視覺化安排重要任務的優先順序,以及特別指出最重要的一個(最上方的項目使用最重的顏色,當然而在比較表單下面的項目就較輕盈和隱晦)


Clear For iOS

 

相似色彩計畫能被用于輕盈的心情或氣氛在你的app或是網站當中。舉例而言,一個靜坐的app — Calm使用相似色藍跟綠去幫助使用者感到放松跟寧靜。

淡藍色的天空和水的顏色,它可以提神,自由和平靜。綠色與健康有關。

 

最佳學習創造出漂亮的色彩計畫是持續練習。第一次,你可以使用自動配色工具。Color CC 是由 Adobe 開發的工具,提供直覺的方法去創造色彩調色盤。他有著直覺的介面,每一個在調色盤的顏色可以獨立編輯,最后的調色盤可以簡單地被儲存。

Adobe顏色CC(以前稱為的Kuler)是配色方案創建一個偉大的工具。色彩中的文字

 

當你在使用色彩中的顏色,請注意如果使用兩個互相明度(value)低的顏色,這會使你的文字非常不好閱讀(不管是互補色或是相似色)。這可以特別針對你的行動裝置屏幕當你的使用者在室外緊盯著屏幕時。

上圖:缺乏文本和背景將推動用戶瘋狂之間的對比,他們的眼睛不知道要專注于哪種顏色
下圖:高對比度的文字更可讀

 

WC3’s Web Content Accessibility Guidelines 是一個好的起始點。他們建立了一個對比的極簡標準,讓使用者可以在可視度低的情況下閱讀他們的文字。跟據WC3,顏色與背景間的對比度比例約為1:1比21:1的明度( luminance)或是發散的強光(intensity of light emitted)之間。以下是WC3建議的主題文字與影像文字的比例:

小字相對于背景的對比度比例(contrast ratio)至少為4.5:1

大字相對于背景的對比度比例(contrast ratio)至少為3:1

左:文本的這些線路不符合彩色對比度和建議,以及難以閱讀對他們的背景色。
圖片來源:材料設計

 

只要你決定了你的顏色,向真實使用者在大部分的裝置做測試是絕對必要的。如果有任何閱讀的問題在你的測試當中展現,那你可以確定你的使用者會有相同的問題。

色彩在轉換率上的影響

UI 設計中,色彩理論的價值多過于視覺裝飾,它可以對你的生意造成極大的影響。這個段落我們會著重在 CTA (call-to-action)按鈕上。

 

一個 CTA 按鈕是包含四件事情:位置,形狀,文字,以及顏色。如果這元素互相配合,你將會有一個好的 CTA 按鈕。按鈕顏色在轉換率優化領域中是其中一個持續最久的辯論。有大量的A/B測試結果說明改變引動按鈕的顏色如何巨大的影響注冊率。舉例而言,HubSpot 分享了一個著名的按鈕顏色測試


A 和 B 版本的按鈕顏色表現的測試。其他的東西完全一樣。只有按鈕的顏色不同

 

雖然他們原本的預測綠色按鈕會表現得更好,但結果是紅色按鈕多了21%的點擊。

 

然而,不太可能概括這些結果到所有的情形。沒有一個神奇的顏色可以一直表現得很好在所有的網頁跟 App 上。所以你應該永遠測試你使用的顏色在你的網頁和你的觀眾,看看會發生什么事。

對比度是關鍵

如果你希望使用者按某個東西,讓他顯而易見。如果你的網頁或是app使用很多藍色,使用者可能不會馬上注意藍色的按紐,就好比淺色的按鈕不會在淺色的背景凸顯。使用者較常點擊引動按鈕在背景與其有強烈的對比下。

使用多種的對比色可以聚焦訪問者對頁面上特定元素的注意力(如 CTA 按鈕)

 

對于色彩使用的基本了解是網頁與 App 設計的先決條件。我們所討論的僅是色彩理論能如何增強你的 UI 設計的基礎。但是沒有任何限制你想在顏色上下多深的功夫在你的 App 上。不管你選了什么顏色,一般而言,他們會有明確的影響在你的設計上 — 透過傳達對比度與熟悉度去喚起明確的情緒。

 

本文由吆喝科技翻譯自Nick Babich 的:A Guide to Color and Conversion Rates ,原文鏈接:uxplanet.org/a-guide-to-color-and-conversion-rates-f3a28e8e32bb#.ex0bgoosb

 

吆喝科技:國內唯一同時支持前端(Web/H5、iOS、Android)及后端(Node.js、PHP、Java 等) A/B 測試服務的專業 SaaS 平臺。支持線上灰度發布、多維度數據統計分析、科學的流量分配系統、一鍵發布新版本無需應用市場審核、定向測試。

用數據幫助用戶優化產品,提升轉化、留存和你想要的一切。 AppAdhoc 用數據驗證最佳方案,提高產品設計、研發、運營和營銷效率,降低產品決策風險。

3749 Views
即刻實踐文章理論 A/B測試 灰度發布 產品優化 免費申請
Please wait...

訂閱我們

對于每位訂閱讀者,每兩周,吆喝科技會為您發送4篇精選文章,可能是最新的A/B測試實踐,也會是你所期待的增長干貨。
qq宠物捕鱼大师 汉诺威vs斯图加特历史记录 3串1投注 平码三中三免费资料 微信捕鱼达人h5挂 中国福利彩票26选5就中3个有奖的吗 下载欢乐斗地主免费版 电脑代打游戏赚钱吗 26选5好彩2奖金查询 移动棋牌斗地主赢话费 天天捕鱼赢话费官方版