編者按：這篇文章出自 UX Movement ，文中詳細分析了品牌色不適合運用到網(wǎng)頁和 APP 的按鈕背后的設(shè)計邏輯，并不復(fù)雜但是非常值得學(xué)習(xí)。

很多 APP 和 網(wǎng)頁 喜歡在 CTA 按鈕和關(guān)鍵功能按鈕上使用品牌色，這樣的設(shè)計看似是一種無害的品牌推廣，但是對于用戶體驗是有損害的。由于不同品牌在用色上各不相同，而很多品牌色是可能會導(dǎo)致文本標(biāo)簽無法識別、按鈕狀態(tài)難以識別甚至降低按鈕的點擊率。

下面分情況具體說一下。

難以識別的按鈕標(biāo)簽文本

品牌色用到按鈕上之后，相對應(yīng)的按鈕標(biāo)簽文本則可能會出現(xiàn)可訪問性的問題。當(dāng)然，還有品牌會使用品牌色中兩種不同的顏色來分別構(gòu)成按鈕中的填充色和文本色，但是很多這樣的搭配依然存在對比度不足的問題。

如果品牌色中的主色是橙色，將 CTA 按鈕設(shè)置為橙色，文本使用品牌色中的白色，就像上方 Home Depot 的品牌處理的方式一樣，那么按鈕中的內(nèi)容對比度為 3.0，然而按照設(shè)計規(guī)范，最佳對比度需要達到 4.5，因此這個按鈕對于視力障礙用戶而言是有問題的。

按鈕狀態(tài)難以識別

最典型的還是紅色。紅色在按鈕上是一種特殊的顏色，它含有警告和禁止的意味。具有刪除數(shù)據(jù)、取消操作、涉及破壞性的操作，都會用紅色標(biāo)識出來。

如果你的品牌主色調(diào)是紅色，那么當(dāng)你將品牌色賦予按鈕的時候，它會和界面中涉及破壞性操作的按鈕發(fā)生沖突。用戶可能會因為按鈕給人感覺危險而不去點擊，而習(xí)慣了品牌色的用戶也可能會忽略危險操作，而進行了錯誤的操作。

降低點擊率

按鈕可能不是整個界面上唯一使用品牌色的地方，如果屏幕上還有很多其他的元素使用了品牌色，那么用戶可能會在瀏覽過程中忽略按鈕本身。

如果你的品牌色在整個頁面當(dāng)中無處不在的時候，那么同樣使用品牌色的按鈕將會失去對比度，從而難以吸引用戶的注意力。使用較高對比度能夠幫助用戶更快、更輕松地找到按鈕，就不存在注意力不足的問題了。

當(dāng)然，如果你的按鈕使用藍色之外的顏色，按鈕的點擊率不大可能很高，而藍色本身獲得最高點擊率的原因有很多。

一方面，藍色可能是用戶最熟悉的點擊交互所設(shè)計的顏色，從網(wǎng)絡(luò)誕生開始，藍色就一直是鏈接所代表的顏色，當(dāng)用戶看到藍色按鈕的時候，他們會本能地去點擊它。

另一方面，藍色本身還有著可靠和可信的意味。點擊按鈕需要用戶「相信」這個按鈕可以帶他們?nèi)サ接脩羝谕捻撁婧徒Y(jié)果。藍色按鈕本身在色彩心理學(xué)中的特質(zhì)增加了它提升點擊率的功能。

更重要的是，藍色也是色盲用戶最容易識別的顏色之一。最常見的色盲是紅綠色盲，這類用戶無法正確感知紅色、綠色、橙色、粉色以及紫色，但是，他們通?？梢郧逦胤直娉鏊{色。

以上圖表分別是普通人、紅色盲和綠色盲用戶眼里的顏色，值得注意的是，藍色僅僅只在色相上有輕微區(qū)別，幾乎不影響識別。

選擇符合品牌氣質(zhì)的藍色

如果你始終還是希望按鈕能夠被用戶識別，能夠有著較高的點擊率，請務(wù)必選擇藍色。你可以選擇不同明度、色相微調(diào)過的藍色，來盡量貼合你的品牌。

在淺色背景上，盡量選擇真藍色（true blue）、青綠色（turquoise blue）、寶藍色（royal blue）、靛藍色（indigo blue）、海軍藍（navy blue）等顏色，在深色背景上，水藍色（Aqua Blue）效果會很不錯。

無論你的品牌配色是什么樣的，你的配色方案里面最好還是包含一款藍色。當(dāng)然，想要品牌色和界面更深入的結(jié)合，你還可以將藍色應(yīng)用到諸如 圖標(biāo) 、標(biāo)題文本、插畫、徽章等地方。

品牌色和按鈕的關(guān)系

許多設(shè)計師都認為品牌色和按鈕之間保持一致在美學(xué)上是必要的，但是實際上，即使按鈕并沒有使用品牌色，它同樣沒問題，而且讓按鈕使用藍色不僅不會損害品牌，而且有利于用戶體驗。

你可用在其他的界面元素中使用品牌色，但是請放過 CTA 按鈕吧。它們需要的是清晰準(zhǔn)確的表達，良好的可訪問性，優(yōu)質(zhì)的交互性，使用品牌色的按鈕是有風(fēng)險的。