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