创新实践 | 提升转化率：LV等15个顶尖品牌CTA按钮设计案例分析

在浏览网页时，我们都曾被某个绝妙的行为召唤（CTA）按钮吸引过。尽管你不想每天早上起来，都看到你的电邮收件箱塞满了资讯通知，但有时候，15%优惠券的诱惑还是太强大。 

谁知道呢，没准你会比你想象的要喜欢这些晨间资讯呢！ 

行为召唤按钮如何与众不同 

简而言之，要完成转化，你需要用户点击进CTA按钮。可能是进行注册获得免费试用、加入获得邮件通知的名单、添加产品至购物车，又或者是任何其他的行为。 

CTA按钮经常设置在网站主页或是某些网站的登录页面，其页面内容与这个按钮有关。不同于一般的按钮，CTA设计，比如“登录”按钮或是“分享至社交媒体”的图标，鼓励用户进行某种行为，以达成转化目标。  

因此，CTA按钮通常是页面上最大、最醒目的按钮。突出一点，总是没有坏处的。

行为召唤按钮的15个范例 

要创建成功的CTA按钮，通过文本内容、按钮颜色以及位置来吸引用户，可以有很多种方法。下文展示的是15个CTA按钮范例，分别来自不同的一流品牌。

01. Spotify: 因颜色而不同 

Spotify（流媒体音乐服务平台）在该页面的首要目标是吸收新用户，其次是鼓励用户将账号关联至脸书账号。 研究显示，按钮使用明亮的颜色，搭配色调与之对比鲜明的背景，产生的点击率（CTR）是数据中最高的。因此，上图显示的最重要的两个按钮分别使用的是亮绿色和蓝色。  要按钮显得突出，就要利用背景的颜色对比，就像Spotify由紫到粉的渐变，这样会让你的CTA脱颖而出。 

02. 可口可乐：引发好奇

通过吸引眼球的描述性文本，将用户的注意力引导至你的CTA按钮。虽然大多数时候，按钮文本需要清晰简洁，但有时候制造一个神秘的氛围也可能很好地引导用户点击。只是，要确保内容足够引人入胜，激发用户的好奇，而不是太过神秘难测，而让人选择忽视。 

在这个案例中，虽然不清楚CTA按钮连接的内容是什么，但是文本的诱惑力足够强，用户会忍不住去一探究竟。能力够强的话，将CTA按钮的文本扣到当下的热门事件，比如“疯狂三月”篮球锦标赛，也不失为一个激发用户兴趣的好方法。 

03. Airbnb: 白色包围按钮 

要让某一事物突出的最佳方法就是确保周围没有别的事物能吸引注意力。此案例中的CTA按钮足够简单，但却是这个极简主义风格的页面上唯一使用深色的部分。 

时下流行白色的背景空间和小巧的图标，能够将用户的视线直接引导到按钮上。尝试将CTA按钮周围都改用白色的背景，你会惊讶于它的吸睛能力！

04. 迪士尼：优惠出奇迹 

“划算”的力量不容置疑！

在“立即购买”CTA按钮之上有广告标语，宣传迪士尼的个性化服务仅售1美元。折扣优惠或是极其便宜的价格可以吸引用户点击，尽管他们甚至不觉得自己需要这项服务。

05. Headspace: 突出首要转化目标

人类是很简单的生物，而如今我们注意力持续时间跌到了历史新低。为了用户能轻松地操作，可以在页面布局中优先排列最重要的CTA按钮。

此案例中，Headspace（在线医疗保健公司）首要的转化目标是吸引新用户。这也是为什么他们的注册按钮会设置在登录按钮之上，还使用深灰色重点突出。

指示用户登录不及吸收新用户来得重要，所以登录按钮设置在页面内容结构的第二级。若添加指示箭头，可以让用户的注意力更加集中到所需的操作上。同时，有研究显示，指示箭头可以提高至少26%的点击率。

06.西南航空公司：展示机会

另一个各大品牌常用的强有力的激励方法是指出任何可能错失的机会，通常与交易或储蓄有关。此案例中，西南航空公司使用的文字读起来就像是在诱惑用户，好像在说：“你知道吗？获得奖励其实很简单。”

标题文本使用加粗大号字体，白色方框在其他深色部分衬托下十分突出。一旦它成功吸引了用户的注意，剩下的内容解释操作过程，还附上链接，可以直接设置关联信用卡。

07. Pocket: 明确指示行为

此案例中，我们展示的是Pocket（互联网文章管理应用程序）的主页屏幕，上面是我们博客的一些文章。虽然听起来很平常，但优秀的CTA按钮内容的确对提高点击率至关重要。用描述性长句，详细说明需要点击的理由，不及用简洁有力、直击重点的短句来得有效果。

但这并不是说内容一定会是无聊的。你应该尝试在句子中加入比“点击此处”或“立即订阅”更有趣的动词或动词短语。在此案例中，“升级”、“更新至高级版”以及“了解更多”一类的词可以有效地说服用户点击。

08. Geico:制造紧迫感

如果对优惠的喜爱没用，那么对滞纳金或罚款的担心呢?

我们大多数人都能体会到这样糟糕的感觉：你突然意识到自己错过了一笔账单，或者忘记在纳税单上打勾。此案例中，Geico（汽车保险公司）的CTA是一个很好的例子，它制造了一种紧迫感，引导用户点击。

明亮、带有警告意味的橙色通常与危险事物有关，左边的惊叹号图标也是如此。实际上如果用户没有登记确认信息，也许不会发生什么，但是因为害怕真的会发生什么（比如此案例中更高的利率），人们还是会点击。

09.路易·威登：不止于单一形状

CTA按钮最容易改变的部分之一就是它的形状。根据登录页面、行业或所需的转换，不同的按钮形状可以吸引不同的用户。例如，如今很流行使用气泡状的圆形，但路易·威登还是决定用简单优雅的矩形作为主页按钮。

大胆进行A/B测试，调查受众最欢迎的按钮形状。你会惊讶于转化率极快提高的速度！

10.  耐克：文本大小对移动端十分重要

更大不一定更好——至少在CTA文本来说是这样的。

很明显，你需要文本足够大，才能吸引用户注意，但又不希望它太大。如果文本影响了整体的移动端使用体验，或者你过于明显地引导用户进行某些操作，他们很可能会转而使用其他程序。

虽然我们大多数人都意识到了这一点，但我们仍然不喜欢被提醒，品牌试图操纵我们的这个事实。耐克主页上的这个按钮就是一个完美的处理案例。标题文本醒目、字体加粗，但其余部分和按钮本身简单而低调，以免过度强调。

11. Moz:文本长度同样重要

虽然为了吸引用户而尽可能多地提供信息这点很好，但对CTA按钮来说，实际上越短越有效。这就是为什么你会看到的大多数CTA一般包含“立即购买”、“了解更多”或“立即订阅”之类的短语。

根据一般经验，CTA按钮文本单词数最好在2到5个之间。Moz（SEO软件开发公司）就树立了一个优秀范例，展示了CTA按钮文本的描述性和简短性。

12.来福车：必须置于首位

成功的CTA按钮需要有的重要因素是，一定是位于首屏。换句话说，用户不需要滑动屏幕就能找到它。

在用户浏览至页面的其他地方之前，这个按钮就需要出现在屏幕顶部。这样可以确保按钮立即吸引住他们。

此处来福车（交通网络应用程序）的例子实际上可以联系到所有移动应用程序的登陆页面。你可以看到，用户首先看到的是CTA按钮“申请驾驶”，页面的其余部分则可以滑动至下面的版面进行浏览。

13. Zoom:“免费”无懈可击

有什么比优惠更好的？当然是，免费！

人们都喜欢免费，此案例中，Zoom（远程会议软件）的CTA按钮很简单，却完美地展示了如何在内容中加入这个“魔法咒语”。在可以使用在按钮上的词语中，这个词最有影响力，当然，你的某些产品或服务必须的确是免费的，才可以使用这个策略。

通过鼓励用户注册一个不需信用卡承诺的免费账户，Zoom可以确保注册数，同时期待着，如果用户享受免费版本的产品，他们最终将升级为付费版本。这种策略如此普遍是有原因的——它确实有效。

14. Buffer:区分选项

再说一次，人类很简单。我们很容易就因为选择太多而无所适从，而如今网络上的选择只会更多。尽量将CTA按钮的选项控制到一到两个之间，以免造成用户的决策疲劳。

如果必须要有多个选项，优先选择一个，与其他的稍区分开来。此案例中，Buffer（社交网络帐户管理软件）的登录页面就是个很好的示范。通过将推特选项设置为亮蓝色，并且比其他按钮更大，他们鼓励用户选择这个选项。

Buffer或许并不在意新用户是通过邮箱、脸书还是领英账号创建账号，但他们需要优先选择一个（比如此处的推特），让用户尽可能轻松地进行操作。

15. Mailchimp:玩转图形

Mailchimp（电子邮件营销服务平台）以其可爱的吉祥物和简单的图形而闻名，而这些小装饰会是CTA按钮的绝佳搭配。大胆地在你的设计中多加点创意，有时候像上面的小鸟之类的图案或者其他小图形能带来绝妙的效果。

然而，万事适度为最佳。再说一次，你不会希望让用户无所适从或感到厌烦——最好不要用彩虹色的箭头指向CTA按钮。

行为召唤按钮的最佳设置方法

影响按钮点击率的因素很多，总结下来，基本的规则如下：

1、向用户明确说明点击按钮能带来的好处。
2、CTA按钮要尽可能引人注目，但不能让用户厌烦。

谨记以下由市场上成功品牌的经验总结而来的要点：

• 使用绿色、蓝色、橙色等引人注目的颜色，确保使用对比鲜明的背景。
• 内容短小易读（2-5个单词），但仍然有趣。使用动作词汇和短语。
• 限制页面其他内容——页面上最醒目的应是CTA按钮。
• 优惠、赠品、奖励是吸引用户点击的秘诀。
• 制造紧迫感或是错失某种奖励的感觉。
• CTA按钮位置的设定需有策略——也就是置于首屏，并遵循正常的结构层级。
• 将CTA按钮选项尽可能少，避免用户决策瘫痪。
• CTA按钮A/B测试是关键——可以测试不同的文本大小、按钮形状、图形呈现等等。

相关博文推荐：优秀的产品运营是如何炼成的

Source：15 Call-to-Action Buttons From The World’s Best Mobile Marketers