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

來源:文萃谷 2.39W

什麼顏色的按鈕更容易讓用户點擊,大概是網頁設計、電商設計中最早的爭論之一吧。就跟隨本站小編一起去了解下吧,想了解更多相關信息請持續關注我們應屆畢業生考試網!

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

很多人説紅色是最佳顏色,因為它傳遞緊迫感並引起興奮。或者説是綠色,因為綠色意味着前進(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按鈕中使用兩個綠色的色調和白色或灰色的按鈕文字。在這個例子中,發光對比度最高的是深綠色的按鈕搭配白色按鈕文字。

熱門標籤