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

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

下面分情況具體說(shuō)一下。

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

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

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

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

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

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

降低點(diǎn)擊率

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

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

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

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

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

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

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

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

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

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

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

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

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

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