网页设计中按钮是什么颜色
什么颜色的按钮更容易让用户点击,大概是网页设计、电商设计中最早的争论之一吧。就跟随本站小编一起去了解下吧,想了解更多相关信息请持续关注我们应届毕业生考试网!
很多人说红色是最佳颜色,因为它传递紧迫感并引起兴奋。或者说是绿色,因为绿色意味着前进(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按钮中使用两个绿色的色调和白色或灰色的按钮文字。在这个例子中,发光对比度最高的是深绿色的按钮搭配白色按钮文字。
-
讲解HTML中iframe和frame的区别
不知道你在项目中用过frameset属性没有,frameset这个属性是在去年我在一个在线客服系统制作中用过,因为客服系统要有固定的布局,上面一块,下面一块等等,当时就是用的frameset和frame。在我用完了这些属性之后,我才明白了iframe和frame的`区别。因为在这之前,我项目中...
-
浅谈jquery 注意事项与常用语法
1、关于选择器中含有特殊符号选择器中含有".","#","(","]"等特殊字符,根据W3C的规定,属性值中是不能含有这些特殊字符的,例如:复制代码代码如下:bb如果按照普通的方式来获取,例如:复制代码代码如下:$("#id#b");$("#id[1]");以上代码不能正确获取到元素,正确的写法如下:复...
-
高级PHP开发工程师岗位职责7篇
现如今,很多地方都会使用到岗位职责,岗位职责具有提高内部竞争活力,更好地发现和使用人才的作用。想学习制定岗位职责却不知道该请教谁?以下是小编整理的高级PHP开发工程师岗位职责,仅供参考,希望能够帮助到大家。高级PHP开发工程师岗位职责1工作职责:1、承担机器学习...
-
javascript设置创建动态表格的方法
两种JavaScript动态创建table表格的方法,分享给大家,具体实现如下方法一:最原始的方法,创建一一元素vara1=teElement("table");vara2=teElement("tbody");vara3=teElement("tr");vara4=teElement("td");//开始appendchild()追加各个元素ndChild(a4);ndChild(a3);nd...