网页设计 百分网手机站

网页设计中按钮是什么颜色

时间:2020-08-08 14:37:21 网页设计 我要投稿

网页设计中按钮是什么颜色

  什么颜色的按钮更容易让用户点击,大概是网页设计、电商设计中最早的争论之一吧。就跟随百分网小编一起去了解下吧,想了解更多相关信息请持续关注我们应届毕业生考试网!

  很多人说红色是最佳颜色,因为它传递紧迫感并引起兴奋。或者说是绿色,因为绿色意味着前进(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按钮中使用两个绿色的色调和白色或灰色的按钮文字。在这个例子中,发光对比度最高的是深绿色的按钮搭配白色按钮文字。