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

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

下面分情況具體說一下。

難以識別的按鈕標簽文本

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

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

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

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

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

降低點擊率

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

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

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

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

另一方面，藍色本身還有著可靠和可信的意味。點擊按鈕需要用戶「相信」這個按鈕可以帶他們去到用戶期望的頁面和結果。藍色按鈕本身在色彩心理學中的特質增加了它提升點擊率的功能。

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

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

選擇符合品牌氣質的藍色

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

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

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

品牌色和按鈕的關系

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

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