網頁設計中按鈕是什么顏色

　　什么顏色的按鈕更容易讓用戶點擊，大概是網頁設計、電商設計中最早的爭論之一吧。就跟隨百分網小編一起去了解下吧，想了解更多相關信息請持續(xù)關注我們應屆畢業(yè)生考試網!

　　很多人說紅色是最佳顏色，因為它傳遞緊迫感并引起興奮�；蛘哒f是綠色，因為綠色意味著前進(Go)。然而，Unbounce(一個網站)認為橙色大按鈕是最理想的，因為橙色代表熱情、能量和“完成它”的態(tài)度。

　　既然大家都給出了答案，那么還有什么好爭論的呢?因為數(shù)據(jù)顯示的結果，并不能很好的支持某個顏色是按鈕的最佳選擇。Hubspot(網站)發(fā)表了一個受歡迎的案例，結果顯示A/B測試中紅色按鈕的表現(xiàn)優(yōu)于綠色。但是，Sentient的用戶見過橙色、粉紅色、鮮綠色、甚至白色按鈕效果優(yōu)于紅色。WiderFunnel(網站)的Chris Goward表示，橙色按鈕在A/B測試中經常獲勝。

　　由于這么多沖突的調查結果， Peep Laja和ConversionXL(網站)的網友們認為，顏色本身對按鈕的影響非常小，顏色的影響在于它對整個頁面視覺層級的影響，最有效的按鈕是“明顯”的按鈕。

　　“明顯”的按鈕到底是什么意思呢?

　　在神經科學中，視覺顯著性(visual saliency )是一個專業(yè)術語，表示一個東西在場景中的“明顯”程度。顯著性是一個很復雜的話題，但是有些東西你必須知道：你的視覺皮層天生偏向于更容易注意到某個場景中更為“明顯”的東西。這不是心理導致的，它不受文化、個人偏好和種族的影響，這是人類大腦進化的結果，使我們更加容易的在紛亂的視覺世界里偵察到獵物、捕食者或同伴。

　　視覺顯著性是可以被測量的。最可靠的方法是，進行大規(guī)模的眼動跟蹤研究，觀察統(tǒng)計人們第一眼放在你網頁的哪個位置。

　　哪些東西有助于提高顯著性?

　　在按鈕的全局環(huán)境中，一個頁面有太多的視覺因素促使你的大腦迅速的判斷整個設計，并給你的眼睛下達指令。

　　我們使用機器學習來分析來自眼動跟蹤的數(shù)據(jù)，來判斷哪些設計因素對視覺顯著性的影響最大。結果顯示，色相是一個因素，但更重要的是發(fā)光度(luminance)，特別是發(fā)光對比度(luminance contrast)。

　　注釋：為了與亮度作區(qū)分，所以這里譯做發(fā)光度。

　　什么是亮度?技術上講，它指光的強度和你對光感知到的亮度。在設計的整體環(huán)境中，發(fā)光對比度是屏幕中的一個物體和周圍物體發(fā)光度的不同。

　　發(fā)光對比度有多重要?NASA聲稱，發(fā)光對比度是圖片中顏色選擇最重要的一個方面，和關注度的重要組成部分，即使在駕駛艙的圖形中也是這樣。

　　NASA的AMES研究中心的這個例子顯示了發(fā)光對比度有助于定義設計中的哪些內容是最重要的。

　　這對CTA按鈕來說意味著什么?

　　注釋：CTA是Call to action的意思，即吸引用戶點擊

　　首先，你的CTA按鈕必須具有很強的發(fā)光對比度。

　　淺色背景?用深色按鈕。深色背景?用淺色按鈕。但不止是這些就完事了。

　　增加用戶看到按鈕的可能性，最容易被忽略的一點，最大化按鈕的文字與按鈕本身的發(fā)光對比度。

　　你可以結合這兩個策略來達到最大的效果。如果你的網頁是淺色背景的，那么一個深顏色的按鈕和淺顏色的按鈕文字相配合，會讓你的按鈕更容易被注意到。

　　讓我們來看一個例子。假設你的網站使用白色背景，而你的品牌規(guī)范允許你，在CTA按鈕中使用兩個綠色的色調和白色或灰色的按鈕文字。在這個例子中，發(fā)光對比度最高的是深綠色的按鈕搭配白色按鈕文字。

　　如下圖所示，選項1更加明顯。

　　我們再來看一個例子，你就可以知道為什么綠色和紅色和橙色的對比沒有那么明顯了�？聪旅鎯蓮垐D，使用了高發(fā)光對比度的CTA按鈕。來自Abercrombie & Fitch的網站。

　　Abercrombie & Fitch 網站

　　前3秒看到的內容

　　我們再來看另外的兩張圖片，它的綠色按鈕并沒有立刻被注意到。

　　前3秒看到的內容

　　你可以注意到，這個網站的發(fā)光對比度很低(亮綠色和亮藍色)，而且亮綠色的按鈕和白色的按鈕文字對比度也不高。

　　并不是所有的紅色按鈕都能達到一樣效果。來看例子：

　　絲芙蘭的網站

　　前3秒的熱感圖

　　上面是絲芙蘭的網站以及前3秒的熱感圖。

　　優(yōu)衣庫的網站

　　前3秒的熱感圖

　　優(yōu)衣庫網站和熱感圖

　　從熱感圖上你可以發(fā)現(xiàn)，絲芙蘭的CTA按鈕比優(yōu)衣庫的CTA按鈕更具吸引力，雖然絲芙蘭的CTA按鈕小很多。優(yōu)衣庫已經最大化它的發(fā)光度了，但是絲芙蘭做的更好。

　　注釋：我覺得這個例子沒有說服力。因為優(yōu)衣庫的產品是主要吸引方向，可能兩個品牌的目的不同。一個更注重品牌，一個更注重產品。這只是個人見解。

　　接下來再看看橙色的：

　　B&Q網站

　　Sixt網站

　　在這個例子中，B&Q使用比Sixt更鮮艷的橙色，所以它的發(fā)光對比度更高。

　　如果發(fā)光對比度這么重要，難道我們設計都要用黑白?

　　也不是，這張圖很好的說明了一切(也是NASA的圖)

　　在這里，你可能馬上注意到紅色和粉紅色的字母，即使它們具有比黑色字母更少的發(fā)光對比度，這被稱為“彈出”效果。

　　因為有這么多的黑字，你的眼睛很難確定哪些更重要。相反，紅色和粉紅色的字母突出，因為它們的色調不同。

　　就像亮度一樣，它的色彩對比度很重要，紅色和粉色的顏色對比就沒那么明顯。網頁上的“彈出效果”在頁面上有很多發(fā)光對比度較高的對象時尤為重要。

　　大多數(shù)網站使用白色背景和黑色文字，因此，如果你使用黑色或白色按鈕，即使有強烈的發(fā)光對比度，也有可能淹沒在設計中，盡管他們的對比度很高。這就是為什么使用品牌顏色的按鈕也是危險的，因為這些顏色傾向于在頁面上的其他多個地方使用。要選擇具有適當水平的色相對比度的按鈕，建議復習一下基本顏色理論和色輪。

【網頁設計中按鈕是什么顏色】相關文章：

網頁設計中如何設計按鈕07-29

網頁設計中顏色的情感含義12-14

網頁設計中顏色的使用技巧03-27

網頁互動按鈕的制作05-13

網頁設計中的設計04-29

網頁設計顏色搭配步驟04-20

網頁設計顏色搭配的知識05-29

Photoshop制作網頁按鈕的方法07-26

網頁設計中的字體設計07-26