返回顶部
北京海空设计
4000 981 891 4000-981-891
4000 981 891 电话
专注
设计潮流

在网页中,如何设计一个号召性用语按钮?

 

关键词:网页设计版式设计平面设计

 

设计在于细节。

 

一个好的设计和一个伟大的设计之间的差异,可以通过最小的调整或颜色的改变来实现。这对于网页设计来说尤其如此。虽然我们可能倾向于关注大的照片标题或漂亮的排版设计,但除了美观之外,还有更多的事情要做。有些人花很多时间研究和测试用户如何与网站互动——他们的眼睛首先在哪里移动,他们点击什么,他们在特定页面上花了多少时间。

 

如果你有一个网站,你想让访问者做点什么——比如,买一个产品或者注册一个时事通讯——那么这些文字权重就会变得更加重要。这时,诸如号召性用语按钮(可点击的按钮,比如“购买”或“注册”)之类的细节设计,可以对访问者与站点的交互方式(用户体验或用户体验)以及这些交互的结果产生可衡量的影响。一个精心设计的号召性用语按钮可以帮助好奇的访客变成顾客、捐赠者、订阅者、账户持有人,或者鼓励他们采取任何其他你想要的行动。

 

在网页中,如何设计一个增加转化率的号召性用语按钮?

 

那么如何设计一个有效的号召性用语按钮,来吸引访问者点击呢?让我们来看看一些提示和技巧,以及来自网络的示例:

 

如何设计号召性用语按钮

 

01.使其可见:大小

如果你想让你的网站访问者,通过点击一个按钮来响应你的行动号召语,那么这个按钮需要高度可见——第一眼就能找到。使按钮足够大以吸引注意(与页面上的其他元素成比例),但又不太大到使页面布局看起来不平衡,这一点很重要。你可以平衡按钮的大小与形状和颜色等其他特征,以优化可见性。

 

在网页中,如何设计一个增加转化率的号召性用语按钮?

 

不确定你的按钮是否足够突出?试试可靠的“斜视测试”——从你的电脑屏幕上退一步,眯着眼睛看网页,这样所有的细节都模糊了,你只会看到一般的形状;如果按钮仍然突出,那么你就处于良好的状态。

 

02.让它可见:颜色

在按钮颜色使用上,没有哪一种颜色一定保证好用突出。但是颜色仍然是一个重要的选择。不同的颜色有强烈的文化和心理联系,因此你要考虑这一点,除了确保你的选择与你的网站现有的颜色方案协调外。

 

这个配色方案将一个石灰绿色的按钮与控制页面其余部分的橙色红色相搭配,它借鉴了传统的配色理论。颜色轮上的互补配对,如红色/绿色和蓝色/橙色,具有很高的视觉冲击力,一定会引起注意。

 

在网页中,如何设计一个增加转化率的号召性用语按钮?

 

颜色也可以与尺寸平衡,以提高可视性。例如,一个大按钮(由于它的大小已经很容易看到)如果它是一个明亮的颜色可能会压倒页面;所以更微妙的阴影可能是合适的。另一方面,较小的按钮可能会受益于更大胆的阴影,使其更加醒目。

 

03.让它看起来可点击

如果访问者甚至没有意识到他们能够点击它,那么你的行动呼吁按钮可能是一个失败的案例。在网页设计中,按钮的使用不仅仅是一种复制现实生活,有形体验的设计功能 ——它也是一种用户在浏览网站时寻找和期待的功能、交互式工具。

 

所以你的按钮看起来是可点击的,这一点很重要。形状在这里是一个很大的考虑因素,按钮通常是矩形的,有尖角或圆角。如果你选择不同的形状,你可能希望在视觉上明显看出按钮是可点击的。一些有效的选项包括阴影、高光或其他微妙的效果,使按钮具有轻微的3D外观。

 

在网页中,如何设计一个增加转化率的号召性用语按钮?

 

04.考虑对比度

对比对于任何设计来说都是一个重要的原色,但是对于一个号召性用语按钮,你需要从两个方面来考虑:

1)按钮颜色与背景颜色:如果按钮的颜色与网页的背景颜色混合,号召性用语可能会被忽略。你希望按钮颜色足够突出,而不会与页面上的背景或其他颜色发生冲突。

 

在下面的例子中,深蓝色不仅与黄色背景很好地对比,而且第二个按钮(行动号召的替代选择)也变得不那么明显,金色与背景类似。这是一个不太吸引人的选择,有一个聪明的文案。

 

在网页中,如何设计一个增加转化率的号召性用语按钮?

 

2)文本颜色和按钮颜色:你不希望用户费力阅读按钮上的文字。除了选择一个足够大的字体,为文本选择合适的颜色将有助于增强可读性。你需要避免使用与按钮本身太相似的颜色以及配对在一起时难以看到的颜色(例如,白色文本与黄色按钮搭配)白色与深色相搭配,黑色或深蓝色与浅色相搭配,通常是安全的选择。

 

05.选择一个好位置

设计好按钮后,在整个页面设计中确定按钮的位置是最后一步。决定一个突出的位置将主要取决于你的特定页面布局。

 

一般的指导方针是把按钮“放在折页上方”。这是一个古老的报纸术语,指把最重要的信息放在报纸的头版,放在读者最先看到的位置。你可以将同样的想法应用到网页上,将按钮放置在访问者首先看到的区域,而不必向下滚动。这通常是在页面顶部或顶部附近。无论你把按钮放在哪里,在它周围加上一些额外的白色(或空白)空间——不要把它和其他元素挤得太近——将有助于把注意力吸引到按钮上,使它在视觉上显得突出。

 

在网页中,如何设计一个增加转化率的号召性用语按钮?

 

在号召性用语按钮上写什么

 

01.直接向用户发送消息

使用与用户说话并要求他们采取特定行动的主动动词,将比普通名词更具吸引力。例如,你觉得哪个更吸引人?一个显示“现在购买”或“结账”的按钮?还是说“试试免费”或“免费试用”? 如果你的受众认为你行动呼吁是个人行为,他们就更有可能回答。 

 

在网页中,如何设计一个增加转化率的号召性用语按钮?

 

02.创造一种紧迫感

但是有时候,对用户的个人吸引力不足以让他们点击那个按钮——你需要给他们一个激励。这可能只是你用“现在”或“今天”这样的时间敏感词来表达对行动的呼唤。或者你可能想要安排限时优惠,或者,如果你卖东西,限制其可用性或设置临时折扣。

 

在网页中,如何设计一个增加转化率的号召性用语按钮?

 

然而,虽然这可能是一个有效的策略,让访客觉得如果他们不立即行动,他们将会错过一些东西,但你实际上应该兑现你所做的任何声明或承诺,不要故意(或无意地)用你的行动呼吁来制造错误的印象,或者误导用户认为他们正在获得交易或利益,而实际上他们并没有。

 

03.开始对话

你绝不希望网站访问者被你的号召性用语言强迫或操纵。如果语气友好而热情,他们会感觉更像是在开始谈话而不是推销。像下面的例子中那样,“让我们谈谈吧!”或“加入!”等随意的会话邀请,可以传达你希望与你网站互动的人的积极性和个人兴趣。

 

在网页中,如何设计一个增加转化率的号召性用语按钮?

 

在网页中,如何设计一个增加转化率的号召性用语按钮?

 

04.保持简短

您对行动呼吁调用应该会立即清楚用户应该期望什么,以及单击按钮的结果是什么。保持按钮上的文字简短清晰,将有助于避免可能导致用户犹豫的任何混淆。虽然,有时候,这可能需要更多的解释,超出了按钮本身的容量。在这种情况下,您可以考虑在按钮外部(通常在下面)包含额外的信息。正如你在下图中看到的,这通常是较小的文本,为用户增加了价值,或者提供了明确的信息。

 

在网页中,如何设计一个增加转化率的号召性用语按钮?

 

05.添加视觉线索

使用视觉提示(如图标或小插图)增强按钮上的文本,可以帮助创建直接关联并增加清晰度。例如,考虑购物的购物车/购物篮,上传和下载的向上和向下错误等。如果你确实添加了视觉提示,请确保在任何文本或其他元素与边缘之间包含足够的负空间。按钮所以它看起来不会过于拥挤。

 

在网页中,如何设计一个增加转化率的号召性用语按钮?

 

案例研究:你可以从A / B测试中学到什么

 

许多网页设计人员利用一种称为A / B测试的方法来比较两种不同设计方法的有效性,并收集关于它们执行情况的数据。那些有专业知识的人可以自己建立一个测试。下面分享了他们在号召性用语按钮上进行的几个案例研究。虽然适用于一个网站的内容不一定适用于另一个网站(这就是为什么测试很重要),让我们看几个,看看我们是否可以提出任何一般指示。

 

01.按钮颜色:

在网页中,如何设计一个增加转化率的号召性用语按钮?

 

这个测试将“添加到购物车”按钮从蓝色改为绿色,结果显示销售额显著增加。看起来这只是一个可见性的问题——蓝色按钮与文本颜色相同,所以混合在一起;绿色的按钮更大,颜色也更亮,所以更加突出。选择一种在页面中没有突出显示的高可视性颜色。这是另一个按钮颜色的案例研究,这次的重点是文本和按钮颜色的结合效果:

 

在网页中,如何设计一个增加转化率的号召性用语按钮?

 

在这种情况下,从黑色到黄色字体颜色的变化减少了点击量——我认为这是文本颜色与按钮颜色太相似的一个例子,这是前面提到的“考虑对比度”一节中提到的问题。外卖吗?选择与按钮颜色形成鲜明对比的字体颜色。黑色与浅色相对,白色与深色相对,通常对能见度很好。

 

02.按钮措辞:

在网页中,如何设计一个增加转化率的号召性用语按钮?

 

对于用户点击这个按钮(我们在前面的“保持简洁”中也讨论过)的期望,清晰而具体的描述可能会帮助访问者在与网站交互的过程中感到轻松和自信。这显然是这次测试中出现的情况,它改变了按钮上的措辞,从“获得会员资格”变成了更具体的“找到你的健身房并获得会员资格”,首先添加“找到你的健身房”部分,因为这是结账过程的第一步。结果非常引人注目,点击次数增加了200%以上。当用户点击按钮时,通过解释将会发生什么(或者他们会得到什么)来为他们创造价值。

 

总结一下

在设计中以及创建号召性用语按钮时,细节很重要 。如果这篇文章激励你重新审视自己的按钮并可能稍微改变一下,请尝试不同的设计方法。

 

本文由海空设计 (北京海空影视文化咨询有限公司)翻译整理,版权归本公司所有,如需转载到其他平台,请联系作者(微信ID:haikongdesign)。

原文地址:https://www.canva.com/learn/call-to-action-button/

北京画册设计

专业为您 ▪ 交流分享

立即咨询

因为专注 所以专业
海空设计由15年画册设计经验的设计总监督导; 数十位画册设计资深设计师主持,为您量身定制设计方案; 我们在符合您之所需的同时,引领画册设计版式设计潮流,崇尚简洁、清晰的设计理念,成功服务过数家世界500强和国内众多上市公司......

轻松写下您的需求

统计