CTA实例教学：怎样设计一个访客看了就想点的行为引导按钮？

 

cta即call to action，又叫行为引导按钮，是一个网站的核心组成元素之一。大部分站长做网站不仅仅是为了给访客提供一个学习、交流、互动的平台，更重要的是将访客转化为用户，达成某项他们想要的行为，比如注册、登录、订阅、预约、购买等。好的行为引导按钮在这一点上很有帮助，它有助于提高用户的转化率，增加产品的销量。然而，现实生活中不少网站上的行为引导按钮在设计上都有一定的问题，如cta位置放置错误或色彩对比不够突出等，无法发挥它应有的作用，减慢访客的操作速度甚至会带来最糟糕的结果：用户根本不会点击。总之，行为引导按钮在网站上扮演着十分重要的作用，一个好的行为引导按钮可以给网站带来不少益处。那么怎样的行为引导按钮才是合理的呢?小飞今天整理了十个行为引导按钮的范例，希望大家能从它们的巧妙设计或独特品质中有所收获、得到启发。

mailchimp

事实上，mailchimp这个网站上有许多行为引导按钮可以作为范例讲解。但是，小飞最欣赏其中一个”立即发送”的行为按钮。mailchimp是一个提供电子邮箱营销服务的网站，很多电商公司选择使用这个网站给他们的用户或合作伙伴发邮件。在某个公司填写好相关邮件内容时，会弹出一个"立即发送"的对话框。其实这个对话框最主要的元素就是"立即发送"的行为按钮，其他的文字和图片都是服务于这个cta的，尤其是猩猩用手点击红色按钮的图片，根本不需要其他指示，用户都知道接下来应该做什么。这种类型的行为引导按钮很独特、很直观，很多用户都觉得自己在按下”立即发送”时会获得一种前所未有的成就感。

 

blue apron

在blue apron的网站，访客也能看见各式各样的行为引导按钮。就以下图中的按钮"choose your plan"为例，网站使用了易读的表格，清晰地表明了访客们可选的的食材，以及获得这些食物可能的花费，给用户自主规划的权利。另外，免费派送的图标很有趣。还有很棒的一个设计，那就是它们使用了新鲜瓜果蔬菜的背景图片，这不仅点明了网站的主题，还能够引起用户的食欲，视觉上也很赏心悦目。简直扎心了!难怪blue apron 仅用3年实现了从0到20亿美元的突破，成为美国净菜电商的独角兽。

 

managewp

managewp在主页面放置了"醒目的注册"按钮(绿底白字)，巧妙地将主页面的大量元素与cta相结合：标题简明扼要;简短的文字描述告诉用户网站的经营服务：在这更好的管理wordpress的网站;背景图片很有亲和力，这一切都提高了用户点击行为引导按钮的可能性。最重要的一点是注册手续的简化，访客只需要填写一个邮箱地址就可以注册登录。这听上去是不是很方便?

 

spotify

和blue apron一样，spotify也充分发挥背景图片的引导作用(众多知名歌手的简略图)，在行为引导按钮处也突出自己的销售卖点：用户可以使用免费版也能够择付费版。另外主页面上的幻灯片也涵盖了spotify音乐服务中的其他细节，用户可以点击或是滚动了解更多。不少人可能觉得这个网站的行为引导按钮不是很有创意，也没有那么突出，其实这就是spotify的目标所在，相比意料之外的惊讶，spotify更想让行为引导按钮足够友好，以简单的方式给予用户指引。

 

zillow

zillow是美国一家房地产信息查询公司，它号称包含了各类地产信息。这点在zillow首页的行为引导按钮上就很明显：买房、租房、买房或是zillow估值服务应有尽有。这种行为引导按钮的设计实在太贴心了，用户不需要到处浏览找寻信息，很容易就能够获取想要的信息。应该没有哪家公司比zillow更加简单粗暴的了吧!

 

b&o play

作为bang and olufsen集团旗下的一个品牌，b&o play坚持沿用极简主义的设计，网站的首页简洁大气，行为引导按钮也是一样，黑白的配色方案，不管是"浏览更多产品"还是"立即购买"都配有一个小图标，形象直观。这样的cta设计虽然很容易，但b&o play维持了cta和网站整体风格的一致，将行为引导按钮看作是整体品牌的重要组成部分之一，做到这一点实在很难得。

 

mercy corps

如果你在处理一项紧急的事情的时候，你还会迟疑、慢吞吞吗?mercy corps这个网站就营造出了一种迫切感，再加上背景图片(受灾难影响无望的人们)、醒目、严肃的标题，访客们会在第一时间直观感受到那种痛苦，更可能会点击"捐赠"，尽自己的一份力。除了这种募捐的公益网站以外，其他的网站也可以营造"机不可失、时不再来"的急切感，比如使用"倒计时"或"活动即将截止"等话语让用户更快进行购买等行为。

 

nest

智能家居品牌nest是怎样突出行为引导按钮"立即购买"的呢?在nest的主页，背景图片是一片星空，配上主要产品(节约能源的恒温器)的图片，很容易让访客联想到太空中浮动的星球。nest很聪明的一点还在于它给用户留下了足够呼吸的空间，恰当的留白让行为引导按钮更加突出。

 

skagen

skagen是一家销售极简主义手表以及其他时尚配饰的网站。它的行为引导按钮在色彩的运用上很不一般，字体的淡蓝色和背景色很和谐，也很简约。除此以外，按性别分类做出两个不一样的行为引导按钮也有利于访客根据自己的需求快速挑选产品。skagen还教给我们一招：如果你的公司有一款极具代表性的产品，不妨让它为自己带盐吧!

 

从以上这些栗子中我们可以看出，行为引导按钮是网站整体形象的一部分，可以与网站上的其他元素很好的结合在一起，不管是简要切题的文字描述还是独特的背景图片都能在一定程度上服务于行为引导按钮，让用户更有点击行为引导按钮的欲望。除此以外，网站的行为引导按钮应该清晰易见，有适合用户点击的大小，色彩的应用还有助于行为引导按钮的突出。不管怎样，一个好的行为引导按钮应该将用户放在第一位，考虑用户在互动可能想要的结果。简单直接的行为引导按钮最能获得用户的芳心。看了这么多设计，赶紧看看你的行为引导按钮是否合格吧!