温州企业网站开发：幽灵按钮设计

逻辑将决定鬼按钮不适合网页设计。然而，研究表明，访客并不一定会这样看待他们。

对于如此小的设计元素，按钮肯定是一个复杂的解决方案。有意义的是，号召性用语按钮可以作为访问者转化路径的下一步。搞砸了，你不妨对商业说“再见”。

温州企业网站开发虽然我们很好地理解了普遍适用的按钮设计规则的类型，但有时你会对一个表现良好的流氓元素感到惊讶。像鬼按钮。

幽灵按钮虽然名字令人毛骨悚然，但并不是什么神秘的事。它们是您网站的号召性用语（CTA）按钮，与其他任何按钮一样。关键的区别在于它们的外观。

这个Dropbox工具提示是传统按钮与鬼按钮相比的一个很好的例子：

中心的蓝色按钮是我们习以为常的标准平面设计按钮。左侧和右侧的轮廓透明按钮是鬼按钮。

逻辑将决定鬼按钮对于网页设计不利，因为它们看起来不是有形的或可点击的，并且它们没有传统按钮的引人注目的元素。然而，研究表明，访客并不一定会这样看待他们。

我今天要做的是谈论鬼按钮设计的已知优缺点，然后深入研究一些案例研究，以便直接设置记录。

我们对幽灵按钮的了解

网页设计博主花了很多时间谈论如何设计更好的按钮。在这些指南中，他们试图弄清楚常常困扰网页设计师和开发人员的问题：

• 什么颜色会吸引最多的注意力？甚至右样的关注？

• 大小怎么样？有关系吗？

• 消息在按钮中应该说什么？

• 放在它周围的文字怎么样？

• 按钮的设计是否应该同样适用于桌面和移动体验？还是会干扰拇指区？

无论您对网页设计中的鬼按钮有何看法，在使用它们时，您可能会问自己同样的问题。

在我们探索研究所说的内容之前，让我们来看看这个设计元素的优缺点。

鬼按钮缺点

有许多反对鬼按钮的论据，说实话，它们是有效的。当然，这并不是说我反对在网页设计中使用鬼按钮。我只是相信有非常具体的用例，它们实际上运行良好。所以，让我们把坏的东西放在一边，然后专注于我们可以做些什么来实际获得更多的转换。

简单

CTA经常以大胆的颜色设计的原因是为了方便用户将目光引导到我们希望他们参与的网站部分。但是鬼按钮仅在按钮的细轮廓和内部文本中着色。因为颜色仅适用于这些元素，所以它不会成为吸引任何人注意按钮的主要因素。其他元素必须发挥作用，如动画或其他引人注目的图形或附近的伴随CTA的位置。

我认为来自Elevated Third的这个A / B测试是一个很好的例子，说明鬼按钮在用作主要按钮设计时无法留下深刻印象 - 无论是在网站上还是在电子邮件中。

熟悉

当他们准备好进入下一页或步骤时，我们已经限制访客寻找传统的大胆和填充按钮设计。在某些情况下，这些按钮采用阴影和3D效果进行战略性设计，使其看起来像实际上可以按下的按钮。幽灵按钮消除了这种熟悉感，并要求访客调整他们的大脑以寻找新的东西。

可读性

传统的CTA可以为按钮使用鲜艳的颜色，为文本使用较浅的颜色，而鬼按钮则没有这种灵活性。相反，它们必须依赖于更暗且易于阅读的字体颜色，这限制了可以使用的颜色的选择。

透明度

如果你没有仔细考虑它的确切位置，幽灵按钮的透明度可能会有问题。虽然当您在桌面浏览器中测试新设计时按钮可能看起来很好，但按钮可能位于较小屏幕上的繁忙图像上方，并损害了消息的可读性。对于视差滚动也是如此，其中图像可能在按钮后面移动，并且再次使得难以在页面上找到按钮或读取它。

如果你想看到上述三个缺点的例子 - 熟悉，可读性和透明度 - 密切关注下面进一步的案例研究中提供的Fresh Egg研究实例。它们清楚地展示了如何永远不要使用鬼按钮。

地点

传统按钮的一个好处是，您可以将它们放置在网站上的余地。但是，使用ghost按钮，您不希望冒着丢失的风险，这意味着您需要将它们放置在可预测的位置。

这不是折叠的上方或下方的问题，您将在下面的示例中看到。相反，它是关于背景的。您将找到鬼键按钮的最常见区域位于主页标题中主文本的下方。当直接置于简短的描述性模糊之下时，它们也能很好地工作。

幽灵按钮优点

显然，上面提到的缺点都不会让你感到震惊。当你使用这样一个简单的设计元素时，肯定会有权衡。话虽这么说，你可以用鬼按钮在你的设计中实现一些巧妙的东西。这只是了解他们的优势是什么，并为他们发挥作用。

极简主义

有没有想过鬼按钮的设计来自哪里？好吧，大多数人都把它归功于2013年底iOS 7的发布。随着Apple决定采用更简单，更平坦的用户界面，鬼按钮的设计似乎是一种自然的演变。

在极简主义的情况下，重点不在于尽可能多地填充网站，而是更多地关注开发简洁而简单的美学，突出简洁而强大的信息。

Bootstrap在其设计中使用鬼按钮是这种极简主义练习的一个很好的例子：

职业化

关于幽灵按钮，有一些非常合乎逻辑和专业的东西。以Neil Patel的网站为例：

我建议鬼按钮最适合专业的商业网站，因为这个事实。在商业网站上，您不会发现大量大胆，时髦的颜色，以减损公司的信息或与周围的视觉竞争。相反，幽灵按钮是不引人注目的，并准备好一旦访问者下定决心。

尺寸

在您的网站上放置CTA时，请考虑它的理想尺寸 - 尤其是在移动设备上。会不会太小而无法看到？它会在那个空间中过大而突兀吗？可点击性怎么样？使用粗体按钮，有时候可以更好地使用尺寸来保证安全，因为您不希望为UX添加不必要的干扰或摩擦。

但是，使用幽灵按钮，尺寸并不是真正的问题。例如，看看这个三星的例子：

看它有多大，而不会影响你专注于它上面的信息或下面有趣的图形的能力？现在，看看其竞争对手LG如何在其网站上处理可靠的CTA：

尺寸有明显差异，可能与按钮的设计和填充方式有关。

无摩擦

在某些情况下，你不希望你的CTA站起来尖叫，“看着我！”当然，你希望人们点击按钮，但也许你希望他们摄取它周围的内容在这之前。

Asana在其网站上有一个很好的例子：

这表明按钮并不总是在你的脸上，特别是如果周围的文字和图像清楚地表明下一步是单击该按钮。

动画

当您不确定如何将设计变为现实时，功能性动画始终是明智的选择。它为您的设计元素提供了一个有趣的惊喜元素，同时与您在其他地方建立的顺序和逻辑保持一致。Ghost按钮就是这样一种元素，可以从这种微妙的动画中受益。

如果你没有注意到，Smashing Magazine有几个这些类型的动画鬼按钮的很酷的例子。

正如您所看到的，动画为用户提供了一种反馈和确认，并说：“是的，这确实是一个按钮，如果你点击它，它将带你到值得的地方。”

作者Haruki Murakami的网站有一个很好的例子，说明如何动画鬼按钮。

这个不是关于为所采取的行动提供反馈，而是关于在访客从一个页面转换到另一个页面时保持参与的更多信息。

多个CTA

通常，我反对在一个区域内使用多个CTA，特别是在移动用户体验中。空间有限，因此它是有限的。还有一个问题是为访客提供了太多的选择。然而，鬼按钮没有这些问题，因为它们留下如此小的占地面积并且通常不会从网站的其余部分分散注意力。

看看网站顶部有两个CTA？橙色按钮显然是主要的CTA，而鬼按钮则作为辅助选项。

谷歌地图有另一个很好的例子：

但是，在这种情况下，两个并排按钮不一定是主要和次要选项。相反，鬼按钮仅仅用作当两个相似设计的按钮彼此相邻放置时的对比。

Apple经常在其应用程序设计中使用ghost按钮。但是，在这种情况下，它们可用作切换：

当页面或标签当前未打开时，幻影按钮指示其无效状态。

鬼按钮测试：研究表明

好的，我们已经看过鬼按钮的优缺点了。但是，在实践中，他们实际上做了什么？它们是否有效吸引访问者？这是研究所说的。

测试1：SEEK的辅助按钮

SEEK的UX设计师兼研究员Kayla J. Heffernan决定测试鬼按钮是否与某些设计师认为的那样糟糕。在她进行的第一次A / B测试中，有四种变体互相攻击：

在这次测试中，她惊讶地发现在整个活动期间，坚固的蓝色按钮和蓝色幽灵按钮保持颈部和颈部。

排除了粉红色和灰色按钮作为可行的CTA设计选择，她提出了第二个A / B测试：

在测试结束时，Kayla和她的团队再次发现，纯蓝色和幽灵蓝色按钮导致类似的点击率。唯一的区别在于每次收到的转换次数，实心蓝色按钮占14％，鬼按钮占13.1％。

结论

在审查结果后，Kayla决定不将主要的CTA按钮设计从品牌的粉红色改为测试的蓝色或鬼按钮获胜者。这主要是因为测试是在二级按钮上进行的（“写一篇评论”，而不是“立即购买”）。也就是说，她确实相信鬼按钮有助于抵消页面上过多的主要按钮，否则会导致单个页面上的竞争太激烈以及访问者的负面反应。

测试2：TRUCONVERSION的登陆页按钮

在这个单一的登陆页面上有三种不同风格的CTA按钮：

• 一个大的，可点击的绿色“索取你的免费副本”按钮;

• 一个小而扁平的黑色“索取你的免费复制”按钮;

• 一个黑色的小红色短信“Look Inside”按钮。

TruConversion很想知道每个竞争按钮如何在同一页面上执行。它使用热图来确定哪些按钮访问者最多：

不出所料，绿色大按钮获得的点击次数最多，占网页总点击次数的38.68％。然而，对研究人员来说最令人惊讶的是，黑色按钮 - 无论在哪里向下滚动页面，它都是一个粘性栏，只有5.22％的点击率。

幽灵按钮只是一个二级CTA，在桌面上获得了7.9％的点击次数 - 远远超过了研究人员的预期。然而，重要的是要注意，当在移动设备上查看登录页面时，“Look Inside”重影按钮从用户那里获得的点击次数最少。

结论

Justin Rondeau支持Heffernan的假设，即鬼按钮可以在网站上创建一个很棒的辅助按钮。当你有一个主要的推动但不希望其他可点击元素分散注意力时，鬼按钮是一个明智的选择。用户会知道它在那里，当他们认为这对他们的决策过程有益时，他们可以与之互动。

也就是说，Rondeau强调你必须考虑决策过程所需要的内容，特别是在涉及网站被查看的设备时。虽然桌面用户在购买之前可能需要有关产品的更多详细信息，但移动用户往往匆忙，只想提交或剪切和运行。所以，在为移动体验添加额外的CTA之前，请考虑一下。

测试3：新鲜鸡蛋的灵魂与实心按钮

在展示这三个Fresh Egg测试包含的内容之前，我应该指出，我认为结果是有利于实体按钮的。如前面的优缺点所述，由于它们的透明度，你必须小心使用鬼按钮。在下面的示例中，鬼影按钮放置在背景上，这些背景对于这种类型的设计并不理想。

也就是说，我认为这些测试作为一个什么样的好例子不与鬼按钮，这就是为什么我要与你分享他们做。

Fresh Egg始于自己的网站。它对以下内容进行了A / B测试：

在第二次关于鬼按钮和实体按钮的测试中，Fresh Egg在三个网站上进行了点击测试，其中热图测试显示是用户活动的中心。它想知道用户实际需要多长时间才能找到并点击按钮。

它查看了本网站右上角的点击速度以及关注程度：

Fresh Egg检查了此页面子标题中的点击速度：

对于这个标题下面的CTA也一样：

毫不奇怪，正如Fresh Egg发现的那样，鬼按钮表现不佳：

• 他们的点击次数显着减少。

• 它们比实体按钮更难找到，这意味着更低的点击率。

• 尝试查找按钮然后单击它的错误率增加了鬼按钮。

• 与固体按钮相比，它们也吸引了很少的注意力。

结论

正如我所提到的，我相信这些不是鬼按钮的正确设计类型 - 我认为Fresh Egg的人们意识到了这一点。如果您放置的东西如此简单，没有反应（即缺乏动画，不具备移动设备的友好性）并且在黑暗和复杂的背景设计之上缺乏色彩，那么您不能指望访问者注意到它。

在审查统计数据时，Fresh Egg确实认为背景很重要。Ghost按钮可能无法通过这些测试，但这并不意味着它们在用作辅助CTA时或在与鬼按钮的简单性更兼容的设计中不会很好。

结论：在正确的上下文中使用Ghost按钮

从专业人士名单和支持性研究中可以看出，幽灵按钮并不总是坏事。实际上，在某些情况下，ghost按钮在获取用户点击和转化方面的效果与实体按钮一样有效。虽然这些情况通常是幽灵按钮是次要可点击元素（即您不一定希望访问者立即点击的元素），但它的目的仍然有效。

正如我所说，按钮设计很复杂。但是，一旦您设计了导致点击次数和转化次数的设计，您就可以轻松休息吧？

当然不是。您仍需要不断检查分析，评估设计，测试备选方案，冲洗和重复。随着网页设计趋势的不断变化，这是您真正保持领先地位的唯一方式。这就是为什么我相信鬼按钮在你处理新项目时值得考虑的原因。

总而言之，我不认为鬼按钮适合每个网站。我见过的最好的鬼按钮设计几乎总是在商业或SaaS网站上（而不是个人博客，自由职业者组合，电子商务网站，新闻聚合器等）。按钮设计的简单性为公司创造一个美丽而整洁的风格有很长的路要走，这个公司不希望与CTA过于面对面。

此外，鬼按钮是次要CTA的绝佳选择。有一段时间，我反对在网站或应用程序的任何给定位置放置多个按钮。但我认为如果你想让其他按钮获得更多点击，那么鬼按钮是一个绝佳的选择。我也认为它可以作为一个补充的FYI类型的按钮。您实际上是在向用户说：“如果您想获得货物，请单击大粗体按钮。但是如果你在围栏上，那就去另外一个按钮了解更多细节。“

最终，它归结为在正确的时间和地点使用鬼按钮。这是确定您的按钮与访问者之间的通信以及是否是您要发送给他们的消息的问题。

温州企业网站开发