- 相關(guān)推薦
網(wǎng)頁設計中按鈕是什么顏色
什么顏色的按鈕更容易讓用戶點擊，大概是網(wǎng)頁設計、電商設計中最早的爭論之一吧。就跟隨百分網(wǎng)小編一起去了解下吧，想了解更多相關(guān)信息請持續(xù)關(guān)注我們應屆畢業(yè)生考試網(wǎng)!
很多人說紅色是最佳顏色，因為它傳遞緊迫感并引起興奮。或者說是綠色，因為綠色意味著前進(Go)。然而，Unbounce(一個網(wǎng)站)認為橙色大按鈕是最理想的，因為橙色代表熱情、能量和“完成它”的態(tài)度。
既然大家都給出了答案，那么還有什么好爭論的呢?因為數(shù)據(jù)顯示的結(jié)果，并不能很好的支持某個顏色是按鈕的最佳選擇。Hubspot(網(wǎng)站)發(fā)表了一個受歡迎的案例，結(jié)果顯示A/B測試中紅色按鈕的表現(xiàn)優(yōu)于綠色。但是，Sentient的用戶見過橙色、粉紅色、鮮綠色、甚至白色按鈕效果優(yōu)于紅色。WiderFunnel(網(wǎng)站)的Chris Goward表示，橙色按鈕在A/B測試中經(jīng)常獲勝。
由于這么多沖突的調(diào)查結(jié)果， Peep Laja和ConversionXL(網(wǎng)站)的網(wǎng)友們認為，顏色本身對按鈕的影響非常小，顏色的影響在于它對整個頁面視覺層級的影響，最有效的按鈕是“明顯”的按鈕。
“明顯”的按鈕到底是什么意思呢?
在神經(jīng)科學中，視覺顯著性(visual saliency )是一個專業(yè)術(shù)語，表示一個東西在場景中的“明顯”程度。顯著性是一個很復雜的話題，但是有些東西你必須知道：你的視覺皮層天生偏向于更容易注意到某個場景中更為“明顯”的東西。這不是心理導致的，它不受文化、個人偏好和種族的影響，這是人類大腦進化的結(jié)果，使我們更加容易的在紛亂的視覺世界里偵察到獵物、捕食者或同伴。
視覺顯著性是可以被測量的。最可靠的方法是，進行大規(guī)模的眼動跟蹤研究，觀察統(tǒng)計人們第一眼放在你網(wǎng)頁的哪個位置。
哪些東西有助于提高顯著性?
在按鈕的全局環(huán)境中，一個頁面有太多的視覺因素促使你的大腦迅速的判斷整個設計，并給你的眼睛下達指令。
我們使用機器學習來分析來自眼動跟蹤的數(shù)據(jù)，來判斷哪些設計因素對視覺顯著性的影響最大。結(jié)果顯示，色相是一個因素，但更重要的是發(fā)光度(luminance)，特別是發(fā)光對比度(luminance contrast)。
注釋：為了與亮度作區(qū)分，所以這里譯做發(fā)光度。
什么是亮度?技術(shù)上講，它指光的強度和你對光感知到的亮度。在設計的整體環(huán)境中，發(fā)光對比度是屏幕中的一個物體和周圍物體發(fā)光度的不同。
發(fā)光對比度有多重要?NASA聲稱，發(fā)光對比度是圖片中顏色選擇最重要的一個方面，和關(guān)注度的重要組成部分，即使在駕駛艙的圖形中也是這樣。
NASA的AMES研究中心的這個例子顯示了發(fā)光對比度有助于定義設計中的哪些內(nèi)容是最重要的。
這對CTA按鈕來說意味著什么?
注釋：CTA是Call to action的意思，即吸引用戶點擊
首先，你的CTA按鈕必須具有很強的發(fā)光對比度。
淺色背景?用深色按鈕。深色背景?用淺色按鈕。但不止是這些就完事了。
增加用戶看到按鈕的可能性，最容易被忽略的一點，最大化按鈕的文字與按鈕本身的發(fā)光對比度。
你可以結(jié)合這兩個策略來達到最大的效果。如果你的網(wǎng)頁是淺色背景的，那么一個深顏色的按鈕和淺顏色的按鈕文字相配合，會讓你的按鈕更容易被注意到。
讓我們來看一個例子。假設你的網(wǎng)站使用白色背景，而你的品牌規(guī)范允許你，在CTA按鈕中使用兩個綠色的色調(diào)和白色或灰色的按鈕文字。在這個例子中，發(fā)光對比度最高的是深綠色的按鈕搭配白色按鈕文字。
如下圖所示，選項1更加明顯。
我們再來看一個例子，你就可以知道為什么綠色和紅色和橙色的對比沒有那么明顯了。看下面兩張圖，使用了高發(fā)光對比度的CTA按鈕。來自Abercrombie & Fitch的網(wǎng)站。
Abercrombie & Fitch 網(wǎng)站
前3秒看到的內(nèi)容
我們再來看另外的兩張圖片，它的綠色按鈕并沒有立刻被注意到。
前3秒看到的內(nèi)容
你可以注意到，這個網(wǎng)站的發(fā)光對比度很低(亮綠色和亮藍色)，而且亮綠色的按鈕和白色的按鈕文字對比度也不高。
并不是所有的紅色按鈕都能達到一樣效果。來看例子：
絲芙蘭的網(wǎng)站
前3秒的熱感圖
上面是絲芙蘭的網(wǎng)站以及前3秒的熱感圖。
優(yōu)衣庫的網(wǎng)站
前3秒的熱感圖
優(yōu)衣庫網(wǎng)站和熱感圖
從熱感圖上你可以發(fā)現(xiàn)，絲芙蘭的CTA按鈕比優(yōu)衣庫的CTA按鈕更具吸引力，雖然絲芙蘭的CTA按鈕小很多。優(yōu)衣庫已經(jīng)最大化它的發(fā)光度了，但是絲芙蘭做的更好。
注釋：我覺得這個例子沒有說服力。因為優(yōu)衣庫的產(chǎn)品是主要吸引方向，可能兩個品牌的目的不同。一個更注重品牌，一個更注重產(chǎn)品。這只是個人見解。
接下來再看看橙色的：
B&Q網(wǎng)站
Sixt網(wǎng)站
在這個例子中，B&Q使用比Sixt更鮮艷的橙色，所以它的發(fā)光對比度更高。
如果發(fā)光對比度這么重要，難道我們設計都要用黑白?
也不是，這張圖很好的說明了一切(也是NASA的圖)
在這里，你可能馬上注意到紅色和粉紅色的字母，即使它們具有比黑色字母更少的發(fā)光對比度，這被稱為“彈出”效果。
因為有這么多的黑字，你的眼睛很難確定哪些更重要。相反，紅色和粉紅色的字母突出，因為它們的色調(diào)不同。
就像亮度一樣，它的色彩對比度很重要，紅色和粉色的顏色對比就沒那么明顯。網(wǎng)頁上的“彈出效果”在頁面上有很多發(fā)光對比度較高的對象時尤為重要。
大多數(shù)網(wǎng)站使用白色背景和黑色文字，因此，如果你使用黑色或白色按鈕，即使有強烈的發(fā)光對比度，也有可能淹沒在設計中，盡管他們的對比度很高。這就是為什么使用品牌顏色的按鈕也是危險的，因為這些顏色傾向于在頁面上的其他多個地方使用。要選擇具有適當水平的色相對比度的按鈕，建議復習一下基本顏色理論和色輪。
【網(wǎng)頁設計中按鈕是什么顏色】相關(guān)文章：
網(wǎng)頁設計中如何設計按鈕07-29
網(wǎng)頁設計中顏色的使用技巧10-25
網(wǎng)頁設計中顏色的情感含義09-20
網(wǎng)頁互動按鈕的制作11-03
網(wǎng)頁設計中的設計09-21
網(wǎng)頁設計顏色搭配步驟09-21
網(wǎng)頁設計顏色搭配的知識11-04
網(wǎng)頁設計中的字體設計07-26