用微信扫码二维码

分享至好友和朋友圈

英文原文地址：

什么颜色的按钮更容易让用户点击，大概是网页设计、电商设计中最早的争论之一吧。

很多人说红色是最佳颜色，因为它传递紧迫感并引起兴奋。或者说是绿色，因为绿色意味着前进（Go）。然而，Unbounce（一个网站）认为橙色大按钮是最理想的，因为橙色代表热情、能量和“完成它”的态度。

既然大家都给出了答案，那么还有什么好争论的呢？因为数据显示的结果，并不能很好的支持某个颜色是按钮的最佳选择。Hubspot（网站）发表了一个受欢迎的案例，结果显示A/B测试中红色按钮的表现优于绿色。但是，Sentient的用户见过橙色、粉红色、鲜绿色、甚至白色按钮效果优于红色。WiderFunnel（网站）的Chris Goward表示，橙色按钮在A/B测试中经常获胜。

由于这么多冲突的调查结果， Peep Laja和ConversionXL（网站）的网友们认为，颜色本身对按钮的影响非常小，颜色的影响在于它对整个页面视觉层级的影响，最有效的按钮是“明显”的按钮。

“明显”的按钮到底是什么意思呢？

在神经科学中，视觉显著性（visual saliency ）是一个专业术语，表示一个东西在场景中的“明显”程度。显著性是一个很复杂的话题，但是有些东西你必须知道：你的视觉皮层天生偏向于更容易注意到某个场景中更为“明显”的东西。这不是心理导致的，它不受文化、个人偏好和种族的影响，这是人类大脑进化的结果，使我们更加容易的在纷乱的视觉世界里侦察到猎物、捕食者或同伴。

视觉显著性是可以被测量的。最可靠的方法是，进行大规模的眼动跟踪研究，观察统计人们第一眼放在你网页的哪个位置。

哪些东西有助于提高显著性？

在按钮的全局环境中，一个页面有太多的视觉因素促使你的大脑迅速的判断整个设计，并给你的眼睛下达指令。

我们使用机器学习来分析来自眼动跟踪的数据，来判断哪些设计因素对视觉显著性的影响最大。结果显示，色相是一个因素，但更重要的是发光度（luminance），特别是发光对比度（luminance contrast）。

什么是亮度？技术上讲，它指光的强度和你对光感知到的亮度。在设计的整体环境中，发光对比度是屏幕中的一个物体和周围物体发光度的不同。

发光对比度有多重要？NASA声称，发光对比度是图片中颜色选择最重要的一个方面，和关注度的重要组成部分，即使在驾驶舱的图形中也是这样。

NASA的AMES研究中心的这个例子显示了发光对比度有助于定义设计中的哪些内容是最重要的。

这对CTA按钮来说意味着什么？

首先，你的CTA按钮必须具有很强的发光对比度。

浅色背景？用深色按钮。深色背景？用浅色按钮。但不止是这些就完事了。

增加用户看到按钮的可能性，最容易被忽略的一点，最大化按钮的文字与按钮本身的发光对比度。

你可以结合这两个策略来达到最大的效果。如果你的网页是浅色背景的，那么一个深颜色的按钮和浅颜色的按钮文字相配合，会让你的按钮更容易被注意到。

让我们来看一个例子。假设你的网站使用白色背景，而你的品牌规范允许你，在CTA按钮中使用两个绿色的色调和白色或灰色的按钮文字。在这个例子中，发光对比度最高的是深绿色的按钮搭配白色按钮文字。

如下图所示，选项1更加明显。

我们再来看一个例子，你就可以知道为什么绿色和红色和橙色的对比没有那么明显了。看下面两张图，使用了高发光对比度的CTA按钮。来自Abercrombie & Fitch的网站。

Abercrombie & Fitch 网站

前3秒看到的内容

我们再来看另外的两张图片，它的绿色按钮并没有立刻被注意到。

前3秒看到的内容

你可以注意到，这个网站的发光对比度很低（亮绿色和亮蓝色），而且亮绿色的按钮和白色的按钮文字对比度也不高。

并不是所有的红色按钮都能达到一样效果。来看例子：

丝芙兰的网站

前3秒的热感图

上面是丝芙兰的网站以及前3秒的热感图。

优衣库的网站

前3秒的热感图

优衣库网站和热感图

从热感图上你可以发现，丝芙兰的CTA按钮比优衣库的CTA按钮更具吸引力，虽然丝芙兰的CTA按钮小很多。优衣库已经最大化它的发光度了，但是丝芙兰做的更好。

接下来再看看橙色的：

B&Q网站

Sixt官网

在这个例子中，B＆Q使用比Sixt更鲜艳的橙色，所以它的发光对比度更高。

如果发光对比度这么重要，难道我们设计都要用黑白？

也不是，这张图很好的说明了一切（也是NASA的图）

在这里，你可能马上注意到红色和粉红色的字母，即使它们具有比黑色字母更少的发光对比度，这被称为“弹出”效果。

因为有这么多的黑字，你的眼睛很难确定哪些更重要。相反，红色和粉红色的字母突出，因为它们的色调不同。

就像亮度一样，它的色彩对比度很重要，红色和粉色的颜色对比就没那么明显。网页上的“弹出效果”在页面上有很多发光对比度较高的对象时尤为重要。

大多数网站使用白色背景和黑色文字，因此，如果你使用黑色或白色按钮，即使有强烈的发光对比度，也有可能淹没在设计中，尽管他们的对比度很高。这就是为什么使用品牌颜色的按钮也是危险的，因为这些颜色倾向于在页面上的其他多个地方使用。要选择具有适当水平的色相对比度的按钮，建议复习一下基本颜色理论和色轮。

总结

CTA按钮的最佳颜色选择不仅取决于按钮，而且取决于其上下文和周围的内容。最好这样做：

提高按钮和背景之间的亮度对比度

提高按钮和按钮文本之间的亮度对比度

与页面上其他颜色的颜色明显不同

还有几十个可以对视觉显着性产生可测量影响的因素，所以要想做的更好，不要仅仅关注这三点。

看完本文有什么想说的吗？欢迎大家留言讨论哦~

特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。

Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.