大多數(shù)的人們都熟悉色彩心理學(xué)；成百上千的文章、案例研究、甚至是從不同角度進(jìn)行分析的圖表。顏色對我們的影響，將影響我們決策過程中的每一個選擇。這點(diǎn)是毫無爭議的。但是，我們不應(yīng)該盲目的遵循某一個原則去辨別。今天，我們就一起來測試對比度在吸引關(guān)注中的作用。

從柔和、平靜的綠色轉(zhuǎn)變到激烈、鮮艷的紅色可以吸引來更多的關(guān)注。當(dāng)然，這也不一定有效。如果沒有鋪墊好基礎(chǔ)使其突出，那么吸引力將會大大下降。

這種情況下的“基礎(chǔ)”就是轉(zhuǎn)變。以下是我們收集的十個經(jīng)典案例，鮮明的轉(zhuǎn)變能讓用戶快速地融入到環(huán)境中，能快速地吸引人的注意。

顏色vs反差

悄悄的轉(zhuǎn)變：

ESPN Sports Programming

ESPN體育節(jié)目官網(wǎng)的首頁就是一個很好的例子，充分說明了顏色在轉(zhuǎn)變中是如何發(fā)揮作用的。該網(wǎng)站有兩個吸引人的地方：第一就是激烈、鮮明的紅色；第二就是堅實(shí)的背景。這不是要比右邊簡單的文字更有吸引力嗎？

Moovrs

盡管按鈕沒有采用大膽的紅色基調(diào)，但該網(wǎng)站也被認(rèn)為是個成功的網(wǎng)站。主要是由于采用了強(qiáng)烈的轉(zhuǎn)變，背景和主要的配色方案，CTA能立即吸引眼球，這是一個成功的點(diǎn)所在。

Metaverse Mod Squad

這是另一個設(shè)計符合色彩心理學(xué)很好的例子。該網(wǎng)站紅色基調(diào)是很重要的元素，是輕易區(qū)分重要細(xì)節(jié)很好的工具。盡管背景擁有濃烈的藝術(shù)氣息，但漢堡菜單按鈕、以及其他紅色基調(diào)的元素依舊能吸引人的眼球。

S-Trip

該網(wǎng)站設(shè)計師設(shè)計的按鈕看起來是那么的獨(dú)特和引人注目。采用一個明亮的黃色陰影、以及對比度突出的背景，這兩點(diǎn)足以彰顯出藝術(shù)家的氣息。

Squad Digital

深紅色的基調(diào)，使按鈕成為焦點(diǎn)。當(dāng)然，你不應(yīng)該削弱暗黑色背景的作用。大量的空白區(qū)域以及核心組件也沒有搶走中間按鈕的吸引力。

El Passion

盡管綠色通常是營造一種寧靜、自然的環(huán)境，但這個案例中，綠色的按鈕足夠有吸引力使之成為整個頁面的焦點(diǎn)。這主要是背景圖像和簡短文本信息所凸顯的結(jié)果。

Icons Responsive

Icons Responsive網(wǎng)站看起來好像很忙碌，因?yàn)橛刑嘤腥さ臇|西的緣故吧。有一個動畫很值得你關(guān)注，那就是有著簡短描述、辨識度高的導(dǎo)航欄。盡管內(nèi)容很飽滿，但那兩個強(qiáng)烈的綠色按鈕卻很奪目。

Chatrify

不僅選擇明亮、溫暖的黃色作為按鈕的背景色來設(shè)置環(huán)境，同時尺寸上也增加了視覺重量和加強(qiáng)了CTA的意義。因此，“Get started now for free”這個按鈕看起來是多么醒目。

Teletrack Plus

Teletrack Plus華麗務(wù)實(shí)的氣氛給人信任和可靠性。盡管登陸頁面有設(shè)備模型和功能列表的元素，但相對較小，高飽和度黃色按鈕的放置是多么引人注目。跟往常一樣，巧妙地選擇避開主要的色彩基調(diào)以達(dá)到突出某一元素的功效。

Mobirise

哪一個按鈕能預(yù)先吸引你的注意呢？我相信，很多人都會選擇更堅實(shí)和可點(diǎn)擊的橙色按鈕，而不是優(yōu)雅的幽靈按鈕。

說實(shí)話，想找到一些轉(zhuǎn)變和顏色無縫的例子不是很困難，這隨處可見。盡管如此，我們也有包括CTA需要一些改善帶來更多轉(zhuǎn)變的例子。

100 Thoughtful Acts

100 Thoughtful Acts是一個給人一種無比注重美學(xué)印象的網(wǎng)站。然而，細(xì)小的CTA是一個由文本和色彩組成。紅色的基調(diào)顯然是最明確的選擇，它令按鈕融合到環(huán)境中，而不是從中脫穎而出。

Lucerne Health

Lucerne Health網(wǎng)站以壯觀的風(fēng)景作為背景圖片，這樣很難吸引你的注意力。CTA是一個完美融入主題、冷靜又平和的藍(lán)色基調(diào)按鈕。然而，這樣的顏色也只能使它成為一個焦點(diǎn)而已。

Convect Air

Convect Air網(wǎng)站是一個設(shè)計很棒的例子。CTA迷失在奢華的背景中。缺乏轉(zhuǎn)變和小尺寸的按鈕更是無法喧賓奪主，只能充當(dāng)裝飾。

Soundsnap

該網(wǎng)站的兩個按鈕在外觀上是一樣的，具有同等的優(yōu)先級。更重要的一點(diǎn)是它們完全融入了背景當(dāng)中。此刻唯一能分散你注意力的當(dāng)屬頂部的信息欄了。

Wiser Digital

理想的情況下，“Find out more”這個按鈕應(yīng)該區(qū)分于整體的設(shè)計，為網(wǎng)站的美學(xué)做點(diǎn)貢獻(xiàn)。盡管背景有足夠優(yōu)秀的文本和圖形基礎(chǔ)，但按鈕仍然不明確。

Spire

這里的CTA有一個獨(dú)特的外觀，唯一的不足在于它的尺寸。有趣的背景和一些花哨的疊加效應(yīng)有很大的視覺沖擊力，更不用說占據(jù)中心位置的大字體標(biāo)語。所以，網(wǎng)站的按鈕看起來沒有足夠強(qiáng)的吸引力去吸引瀏覽者。

The Green Guys

這里以黃色和綠色為主色調(diào)。顯然，白色無法跟這兩種顏色對比，只能充當(dāng)輔助色調(diào)。所以網(wǎng)站的白色按鈕無法作為核心脫穎而出，更別說該元素的尺寸。

Martin Wren

Martin Wren網(wǎng)站以明亮的色調(diào)贏得瀏覽者的認(rèn)可。雖然按鈕黑色的色調(diào)更適合整體的設(shè)計，然而橙色的CTA具有更強(qiáng)的轉(zhuǎn)化率。

Royal Albert Hall

該網(wǎng)站是以郁郁蔥蔥、風(fēng)景畫為背景，制造了一種美學(xué)氛圍和向?yàn)g覽者傳遞了信息。由于規(guī)模尺寸相對較大，使得名牌看起來與眾不同。鋒利的排版和搜索框、以及提交按鈕看起來也是光滑、無縫的。

Desperados

該網(wǎng)站通過一些裝飾性的字體和圖形創(chuàng)造了一種創(chuàng)意美學(xué)。著重強(qiáng)調(diào)了額外增加的圖形對象CTA。

結(jié)論

色彩的選擇在網(wǎng)站的設(shè)計中起著巨大的作用。然而，實(shí)踐表明，保持背景和CTA的對比度是至關(guān)重要的。如果你想提高轉(zhuǎn)化率和改善用戶的交互體驗(yàn)，那么你應(yīng)該在設(shè)計中多考慮這兩個元素。

原文：Nataly Birch

本文由 @用戶體驗(yàn)咨詢機(jī)構(gòu)BESD設(shè)計實(shí)驗(yàn)室 Andy Leong 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。